Replacing the existing WordPress Toolbar with WP Toolbar

We have recently enabled caching for all logged-in users on the Advanced Ads homepage to speed up the site for our customers. The whole project consisted of multiple steps. One of them was to disable the WP Toolbar for all users, including our editors and admins.

To compensate for this, I was looking for an alternative that we can use to quickly jump to the edit page of posts and manuals in the backend. It shows up whether we are logged in or not, though, you would need to log in to actually access the backend.

Originally, I wanted to just build a small bookmarklet that fetches the page ID to create the edit-link.

Luckily, I was not the first one to think about this. The best solution I found was from 2009.

The “WordPress Admin Toolbar Bookmarklet” linked above was a great basis and inspiration for my own solution. If you are looking for a bookmarklet that allows you to enable a WP Toolbar on any WordPress site then please go ahead and use it.

There are a couple of changes I made in my version (github).

• run automatically and only on our own website (by using it in Tampermonkey)
• remove old or irrelevant menu items like “Links” or “Comments”
• add an “Edit” button to edit the current page/post/custom post type
• combine all links to post type lists in the backend under one main item
• moved CSS and menu icons to our own server
• hide the toolbar when the original WordPress toolbar is showing
• remove jQuery and only use vanilla JavaScript (something I just wanted to force myself to do for the learning experience)

So this is how it basically looks and works now.

How to use WP Toolbar

I uploaded our code to github. Since it is just an internal tool, I didn’t hone the edges and tried to figure our solutions for issues my team and I are unlikely to experience. Feel free to fork the repo for your own adjustments.

We are using Tampermonkey for scripts that should automatically run for certain websites. It also allows me to quickly adjust the code.

If you are not technical, you can find links to extensions to run the original script in Safari and Firefox on their website.

Otherwise, follow the basic instructions in the README.md. Changing the URLs requires you knowing how Tampermonkey works. You can also create a bookmarklet as Tommy did in the original script to load it on demand on other websites.