Searching and navigating your way through the WordPress admin can be a clunky user experience. When it comes to getting from Point A to Point B, there are a lot of wasted clicks and page loads. Making this process more streamlined will result in a more efficient user experience that can save hundreds of hours in the long-run.
Before we begin, I have a glossary that will help you understand the terms that I use in this post.
- By post(s), I'm referring to any post type in WordPress: posts, pages, media attachments, custom post types, etc.
- By posts screen, I'm referring to a plural edit screen, like the Edit Posts screen, but for any post type.
Why WordPress Admin Search Needs Improvement
Getting from one post to another in WordPress requires you to follow this process:
- Go to the posts screen for the given post type (+1 click, +1 page load) and either:
- Scroll, scan and go through pagination till you see the post you're looking for (at least +1 click, +1 page load) or,
- Search for the post you're looking for by post title (+1 click, +1 one page load) and then click on the correct one (+1 click, +1 page load)
So let's count that up real quick: if you scan, that's at least 2 clicks and 2 page loads, but it could be more. If you search, then you face 3 clicks and 3 page loads (I'm counting the search box focus as a click).
Clicks aren't too much to worry about, but 2-3 page loads just to get from one post to another seems ridiculous. Try dealing with that on a site with a ton of content, and the waiting for all those page loads will drive you nuts!
The Need for More WordPress Admin Keyboard Shortcuts
The WordPress Editor already has a good number of keyboard shortcuts thanks to Tinymce, but we could use shortcuts for other common tasks in the WordPress admin. That goes for use cases like:
- Moving the mouse to click an item in the Admin Menu.
- Moving the mouse to click “Publish” or “Update.”
- Moving the mouse to click “Add New.”
- Moving the mouse to click “Add Media.”
- Moving the mouse to click “View Post.”
If these use cases seem trivial to you, wait until you do them 900 times in the course of a couple weeks. Being able to speed up any small thing, even if it's changing the duration of an action from 3 seconds to 1 second, can be a huge timesaver if you need to do it enough.
Where Other Plugins Have Tried Improving WordPress Navigation & Search
At the time of writing, WP Tavern recently wrote an article on a new WordPress Search plugin, Aladdin. I'll address some concerns with it and other plugins that the article mentioned:
- Aladdin (Search Tool): only lets you navigate to pages in the Admin Menu, not user-generated content. So if you're editing one page and want to quickly jump to another, you're out of luck.
- Jarvis (Search Tool): very similar to Aladdin, except it lets you search user-generated content. However, it's a bit slow, and hasn't been updated in a while.
My Recommendation: Let's Copy the Crap out of Sublime Text
The driving idea of Sublime Text is to make most things accessible through keyboard shortcuts rather than using the mouse, which improves your coding efficiency. I think this idea could work well in WordPress by copying the functionality of the Command Palette, which handles searches and actions in Sublime Text.
Technical Approach: How We Could Build This
How We Can Improve WordPress Search & Navigation
- A JSON array of all WordPress Admin Menu Pages (Dashboard, Posts, Pages, Add New Page, etc), which is cached and updated when a new content type (CPT or Taxonomy) is added.
- Each object contains Menu Title, URL, and keyboard shortcut (if the menu item is common enough).
- A JSON array of all user-generated content (Posts, Pages, CPTs, Taxonomy Terms), which is cached and updated when content is saved.
- Each object contains Post Title, Object Type (CPT or Taxonomy name), and ID.
- The WordPress Command Palette (for lack of a better term).
I'll make a quick detour to discuss how keyboard shortcuts will be set up, and then run through the completed workflow.
How We Can Improve WordPress Keyboard Shortcuts
Keyboard shortcuts are a little trickier, in that you would need jQuery to detect which actions are available on the page. I believe you could accomplish this by:
- Create a JSON array of CSS selectors for the buttons / links / inputs you want to add actions to.
- Each object contains the CSS selector, target type (link, input, select, checkbox, etc) and an optional title.
- For example, the “Set featured image” link could be selected via #set-post-thumbnail, .thickbox, or [title=”Set featured image”].
- Allow the user to add additional selectors via an Options Page.
- jQuery checks to see which CSS selectors are available on the page.
- The available selectors are added to the Actions list.
- A click is triggered when the Action is selected from the Command Palette.
The WordPress Search, Navigation & Actions Workflow:
- A keyboard shortcut activates the Command Palette.
- As the user types, fuzzy matches are displayed for Admin Menu items, User-Generated Content, or Actions present on the screen.
- As an aside, it might be good to limit results to no more than 5 per array.
- Also might be good to prioritize results in the same post type in some way.
- Once the user makes a selection, either:
- They are redirected to the page chosen or:
- The action is performed.
How Can We Take This Further
As a proposal, this is the minimum viable product. But there are more advanced features that could be built out later down the road.
- The Actions component could include changing values for the Parent and Template select boxes, updating Menu Order, or Publish details.
Potential Plugins for Implementation