Useful improvements to the user interface

[Soller]

I have been using WordPress for more than 15 years. And want to share some of my improvements to the user interface.

Some of them may be implemented in the core. Some - as standalone plugins. I can share the working code for any feature, described below. But please note, that it may be not perfect. Developed for personal use.

FOR POSTS and PAGES

1. Fast save and preview.
Just shortcuts: Ctrl+S for save and Ctrl+p for preview.
Also, I have buttons in the right top corner of the admin bar. It’s useful while native buttons are scrolled out of sight:

2. Better WYSIWYG.
I’m using editor-styles.css to make the content in my editor just like on the frontend. But some of the symbols don’t have the same width, so some words may be moved to the next line. Examples:
ClassicPress will convert - to —
Or “” to “”
In Russian they are using «» instead of “”

3. Save the scroll position
My articles usually are long (5000+ words). So if I change something and hit the save button, the default behavior is to reload the page. The scroll will be at the top.

Sometimes it’s hard to find where exactly I was editing just 30 seconds ago. I find out, that preserving the scroll position after save is useful for long articles.

4. Custom CSS | JS
Since ClassicPress has post fields in the core, maybe we can include such features? I’m using TinyMCE and sometimes need it for all of my sites.

5. HTML minification
In the era of ChatGPT programming, it will be a good feature to strip at least comments. For my sites, I compress HTML and inline CSS / JS.

6. Notes for post

It will be useful to have a place to store thoughts about future post improvements and other such things. How it looks in my setup:

This small feature saves a lot of time. I don’t need the separate file to keep tracking on what needs to be updated.

7. Future / Planned posts

When writing about a big, complex topic naturally you will want to cross-link your articles. It’s not hard to insert links to already written articles on new ones.

Much harder to return and update all old articles to insert links to recently written texts.

So my solution:

1. Create all the articles, that I maybe will write sometimes.
2. Assign them the status “private post”. We may create a new one: “future or planned”.
3. Just write articles as usual, inserting links on these private posts.
4. These links will be shown in the editor just like ordinary ones. But will not appear on the frontend until the corresponding post is published.

This solution saves me a lot of time for updating old posts with links to new ones.

FOR IMAGES AND GALLERIES

8. Auto fill alt and title
I just using the filename.

9. Image optimization
I compress all uploaded images and generated miniatures using Pingo. It’s fast and saves me 20-25% of space. I also automatically generate webp. It improves site load speed.

10. Better media upload layout
I’m using long alt and captions. So changed the layout a bit:

11. More modern Galleries

I’m using Tiled galleries with custom-build options for layout. I don’t think it should be in the core. Just want to show my code. Maybe someone wants to use something similar. Or we will provide a standalone plugin.

Working example on my site about Montenegro. At the bottom of the page, you can see a lot of different tiled galleries (no Jetpack). For galleries of 3 or fewer images, the look is different on mobile and desktop.

FOR POSTS AND PAGES LISTS

12. Date updated

For old sites date of the last posts updates may be more important, than the date when they were published. It helps to easily determine what posts need to be freshened or totally rewritten.

Also on screenshot, you can see our previously created note. I’ve also created columns to fast-check traffic on pages and revenue. But I don’t think it will be useful for the majority of users.

[IntentionWebDesign]

Some great ideas here - I would definitely use a save shortcut! I use a Mac so Cmd-S would be perfect.

[Web242]

WOW! A lot of time, effort and thought went into this post… some great ideas here. A utility plugin for CP?

[Soller]

Thank you.

I don’t know what will be the correct way to present this. Some features like the keyboard shortcuts may go in core. Some - as standalone plugins. Some already exists in another plugins, so it’s just me trying to start conversation “maybe ClassicPress should have html minifycation in core”?

But I even don’t know which are really useful for someone except me.

I’m not developer. I’m the owner and author of my travel blogs.

Also not all the code is prodaction ready. Usually I not polish the instruments for internal use. Vast majority of my efforts going to develop the really good front end, which will be seen by users.

[ElisabettaCarrara]

about minification is a no. that is because as already discussed in some other topic some performance improvements might be provided by the hosting themselves. This might result in three things:

• core has a feature that is not needed directly in core
• conflicts with the host settings
• broken sites
  That is why core should be AS LIGHT AND LEAN as possible.
  because the concept behind WP/CP is that it is extendable based on the real user needs.
  since core can’t know if some things do conflict with hosts and hosts are all different it is not a valuable addition to put optimization inside the core.
  It is the user responsibility to check what performance improvements they need based on the hosting environment and site features and add them via a plugin.
  This goes for the majority of features that one can think of, just because the idea behind CP/WP is that they are like puzzle pieces where core is the important one. Core was never meant to work “all alone” - yes you can have a very simple publishing experience with just core… but to really harness its power you have to customize it. You do this by means of custom code/themes/plugins.
  That means becoming knowledgeable enough to know which ones are better for your specific needs.

[Soller]

You are right. If I were in charge, maybe I would create a page with a list of recommended plugins for most basic needs:

1. Minification
2. Image Optimization
3. Caching
4. Antispam
5. SEO
6. Multilang
7. etc

Everything, that is installed on 50+% of websites. And just show it after ClassicPress installation. It’s better than a lot of bundled plugins. But may be useful.

[Soller]

@Soller

create a page with a list of recommended plugins

But this will affect competition. So, maybe, not a good idea at all.

[ElisabettaCarrara]

I have a post on LinkedIn that soon will be on blog with plugins recommendations. Will post link as soon as ready. An independent blogger can recommend, CP as an organization can’t directly endorse for fear of creating a precedent.

[timkaye]

I think adding the keyboard shortcuts for saving a post or page would make a very useful addition to core. @Soller: are you able to share the code you use for that? (No problem if not.)

I’m wondering too about whether saving the scroll position would be a worthwhile addition to core.

One thing I suggest you change is adding a media file’s name to both the alt and title attributes. That’s really not good practice because it causes a lot of noise for those using screenreaders, who will hear the filename repeated twice. I would strongly suggest you leave the title attribute empty.

[timkaye]

I think this achieves the keyboard shortcut:

add_action( 'after_wp_tiny_mce', function() {
?>
    <script>
        document.addEventListener( 'keydown', function( e ) {
            var updateButton = document.getElementById( 'save-post' ) ? document.getElementById( 'save-post' ) : document.getElementById( 'publish' );
            if ( ( e.ctrlKey || e.metaKey ) && e.key === 's' ) {
                e.preventDefault();
                updateButton.click();
            }
        } )
    </script>
<?php
} );

Perhaps someone would like to test?

[Web242]

Keyboard shortcuts for saving posts and pages - great.

Regarding alt and title attributes, I also leave those blank. But for SEO purposes. The filename is typically meaningless, as we will apply keywords depending on the content and keywords used. SEO companies prefer these left blank as well.

Plus, Google may think your stuffing keywords if you repeat the same names in various attributes and filenames.
Cheers

(PS that reply was meant for Soller )

[Soller]

My code like this:

editor.addShortcut(‘Meta+s’, ‘description of the shortcut’, () => {
$(‘#publish’).click();
});
editor.addShortcut(‘Meta+p’, ‘description of the shortcut’, () => {
$(‘#post-preview’).click();
});

It’s not perfect. Maybe someone needs to add some notifications:

“Saving…”
or
“Can’t save right now…” when the button is grey.

Also maybe add these shortcuts to the TinyMCE button (where all other shortcuts are described).

[Soller]

@Web242

The filename is typically meaningless, as we will apply keywords depending on the content and keywords used.

I usually rename the file before uploading. So it hasn’t a meaningless name.

[Web242]

@Soller
Right, but what I meant was leave the alt and title attributes blank. All of this is really up to the user and does not need to be prepopulated - it just makes more work.

For example, I have a current tourism site with over 1.3K+ existing images. It’s not like we have built the site from scratch - we are revamping it.

If I installed your plugin, not knowing what it does. I may end up with 2.6K attributes to remove. I have to either at this point manually contract someone to strip them all out, get my dev to strip them all out of the database, or restore a backup.

Or worse, if it overwrites anything, I could now end up with 2.6K alt and title tags on all my images overwriting what SEO work we already did.

I think you have some great ideas in this post. However, the whole point of ClassicPress (or WordPress) is ease of use and flexibility - letting users decide how they want to setup or use their sites. So that’s why something like this belongs in a plugin and not core.

[Sparkey]

@Soller

I have buttons in the right top corner of the admin bar. It’s useful while native buttons are scrolled out of sight:

@Soller

Sometimes it’s hard to find where exactly I was editing just 30 seconds ago. I find out, that preserving the scroll position after save is useful for long articles.

These are awesome! I like the Ctrl+S shortcut too but it would probably take me a long time to remember, I use the admin bar a lot.

And “Save the scroll position” too! I love it!!!

The gallery is very nice and your lightbox is perfect with the zoom and pan, I looked forever until I found “ARI Fancy Lightbox” that has zoom and pan that I need for antique maps.

Wasn’t there talk a few years ago about a CP “snippets” directory or something??? Could some of these ideas go somewhere like that?

Randy

[timkaye]

PR to add the keyboard shortcut to save a post or page has now been opened at Enable the saving of posts and pages by keyboard shortcuts by KTS915 · Pull Request #1701 · ClassicPress/ClassicPress · GitHub

[timkaye]

@Sparkey

Wasn’t there talk a few years ago about a CP “snippets” directory or something??? Could some of these ideas go somewhere like that?

There was, and I incorporated that in my initial build of the CP directory to go alongside themes and plugins. As development went on, it was decided that snippets shouldn’t be included because there was no obvious way to keep them updated.

[Doug]

Appreciate @timkaye @Soller the PR for the keyboard shortcut to save a post or page and would similarly, even especially vote for the “preserve scroll position” function.

[Soller]

Sorry, we don’t understand each other. My code doesn’t work like that.

Let’s assume I’m writing an article about the Bay of Kotor. So I will rename my image as:

The Bay of Kotor at Sunset.jpeg

And upload it as usual. Next code works:

Name of image: The-Bay-of-Kotor-at-Sunset.jpeg
Alt and title: The Bay of Kotor at Sunset
Auto-generating miniatures and webp.
Auto compresses all images with pingo.

The code doesn’t add any alt or title to the already existing images. And don’t change any of the metadata. It only helps me get better-named images fast:

The-Bay-of-Kotor-at-Sunset.jpeg

looks better than

0109-rotated.jpg or 20190712_142214.jpg

[Soller]

My code for preserving the scroll position isn’t really good. It’s not suitable for the core. But will do the job:

$(window).scroll(function () {
sessionStorage.scrollTop = $(this).scrollTop();
});
$(window).load(function(){
if (sessionStorage.scrollTop != “undefined”) {
setTimeout(function() {
$(window).scrollTop(sessionStorage.scrollTop);
}, 1500);
}
});

Feel free to use it as you want.