How to Add Custom Shortcut Links to Your WordPress Toolbar (3 Methods for 2023)

Do you regularly refer to the same sites and admin pages when working on your website? Why not add them as custom shortcut links to the WordPress toolbar for lightning-fast access?

With over 43% of the web powered by WordPress and 500+ new sites created daily (WordPress.org), it‘s clear this CMS isn‘t going anywhere. But as your site grows, so does the time spent clicking through the admin dashboard. In fact, the average WordPress administrator performs over 20 clicks per day, according to a recent study by WP Rocket.

That‘s where the WordPress toolbar comes in handy. Also known as the admin bar, it‘s the slim black strip at the top of your screen when logged in. It includes quick links to key areas like Posts and Pages. But here‘s the thing: with a few tweaks, you can unlock its full potential to speed up your workflow.

Imagine if you could add direct links to:

• Your most recent draft
• The Plugins page, filtered to show only active ones
• Your site‘s Google Analytics dashboard
• The Widgets screen for your footer area
• Your client‘s style guide
• Anything else you frequently use!

By spending just a few minutes to set up custom toolbar links, you can save hours down the road. And isn‘t that what working smarter, not harder, is all about?

In this expert guide, I‘ll walk you through 3 easy methods to add custom shortcut links to your WordPress toolbar:

1. Using a plugin (no code required)
2. Adding a single link with code
3. Adding a group of links with code

Plus, I‘ll share pro tips for choosing the best links, organizing them effectively, and controlling their visibility by user roles. Even if you‘ve never touched a line of code, you‘ll learn how to make the WordPress toolbar your own.

Method 1: Add Custom Toolbar Links With a Plugin

Perfect for: Non-technical users or those who prefer a GUI

Using a plugin is the simplest way to add new toolbar links with zero coding. My recommendation is Admin Bar Enhanced, a free plugin with 10,000+ active installs and a 4.8/5 star rating. Here‘s a quick overview of how it works:

To get started:

1. Install and activate the free Admin Bar Enhanced plugin
2. Go to Settings > Admin Bar Enhanced
3. Under "Admin Bar Menus," click "+ Add menu"
4. Enter a title and URL for your link. For example: "Edit Homepage" linked to https://yoursite.com/wp-admin/post.php?post=123&action=edit
5. Optionally, choose a Dashicon and parent link to create a submenu
6. Click "Add menu" to save your new link. Repeat for any others.
7. Drag and drop links to change their order
8. Under the "Settings" tab, enable or disable custom links for each user role
9. Visit any page on your site and hover over the toolbar to see your handiwork!

Here‘s an example of the Admin Bar Enhanced settings screen:

And here‘s how those example links might look on the front-end toolbar:

Pro Tip: Use the free Admin Menu Editor plugin to hide default toolbar items you never use, like "WordPress.com"

Method 2: Add a Single Custom Toolbar Link With Code

Perfect for: Users comfortable editing theme files who only need to add one or two custom links

If you‘re not afraid of a little code, you can use the admin_bar_menu action hook to inject a custom link with PHP. Here‘s the basic snippet:

function wpb_custom_toolbar_link($wp_admin_bar) {
    $args = array(
        ‘id‘ => ‘wpb-link‘,
        ‘title‘ => ‘WPBeginner‘, 
        ‘href‘ => ‘https://www.wpbeginner.com‘, 
        ‘meta‘ => array(
            ‘title‘ => ‘Visit WPBeginner‘
        )
    );
    $wp_admin_bar->add_node($args);
}
add_action(‘admin_bar_menu‘, ‘wpb_custom_toolbar_link‘, 999);

And here‘s how to use it:

1. Open your theme‘s functions.php file or a custom plugin
2. Paste in the snippet
3. Change the title, href, and meta values to reflect your desired link text, URL, and tooltip text
4. Save the file and refresh any page to see your new link

You can repeat this process to add additional links, but make sure to use a unique id value for each one.

Pro Tip: Use an online PHP checker like phpcodechecker.com to catch any syntax errors before saving.

Method 3: Add a Group of Custom Toolbar Links With Code

Perfect for: Users familiar with PHP who want to add several related links under a parent menu

To create a "mega menu" of sorts in your toolbar, you can use a similar code snippet but with multiple add_node() function calls nested together. Here‘s an example:

function wpb_custom_toolbar_group($wp_admin_bar) {
    // Add main link
    $wp_admin_bar->add_node(array(
        ‘id‘ => ‘wpb‘,
        ‘title‘ => ‘WPBeginner‘,
        ‘href‘ => ‘https://www.wpbeginner.com‘
    ));
    // Add child links
    $wp_admin_bar->add_node(array(
        ‘id‘    => ‘wpb-tutorials‘,
        ‘parent‘ => ‘wpb‘,
        ‘title‘ => ‘WordPress Tutorials‘,
        ‘href‘ => ‘https://www.wpbeginner.com/category/wp-tutorials/‘
    ));
    $wp_admin_bar->add_node(array(
        ‘id‘    => ‘wpb-themes‘,
        ‘parent‘ => ‘wpb-tutorials‘,
        ‘title‘ => ‘WordPress Themes‘,
        ‘href‘ => ‘https://www.wpbeginner.com/category/wp-themes/‘
    )); 
}
add_action(‘admin_bar_menu‘, ‘wpb_custom_toolbar_group‘, 999);

As you can see, the first add_node() call creates a main "WPBeginner" link. The next one adds a child link for "WordPress Tutorials" by specifying a parent parameter that matches the first link‘s id.

To add a third link nested below "WordPress Tutorials," we simply make "wpb-tutorials" the parent for a new node. You can continue this pattern as deeply as you like, but I recommend no more than 2-3 levels for usability.

Here‘s what the end result might look like:

Pro Tip: For top-level links, the integer in add_action() controls the link‘s placement from left (lower) to right (higher). Child link order is determined solely by their order in the code.

Bonus Tips: Customize Your Toolbar Links Like a Pro

Now that you‘re familiar with the three main ways to add WordPress toolbar links, it‘s time for some pro tips to maximize their impact:

1. Choose descriptive link text. Avoid vague labels like "Quick Link." Instead, spell out exactly what the link is for, like "Approve New Comments" or "Edit Site Header."

2. Keep your parent links short and sweet. Especially if you have a long submenu, stick to 1-2 words for the parent link to avoid taking up too much space.

3. Link directly to filtered admin pages. Instead of the main Posts screen, link to Posts filtered by a certain category or from the last 30 days to save an extra click.

4. Give each link a unique ID. Whether you use a plugin or custom code, make sure every toolbar node has its own ID value to avoid conflicts.

5. Add separators between link groups. If you have multiple top-level custom links, add a separator (|) in between them for clearer organization. The Admin Bar Separator plugin makes this easy.

6. Consider mobile visitors. The WordPress toolbar automatically collapses on small screens, so keep your links concise enough not to break the mobile layout. Test your site at different screen sizes to be sure.

7. Use is_admin() to only show custom links in the dashboard. If your links are only relevant to the back-end of your site, you can wrap them in a conditional is_admin() check to hide them from the front-end toolbar.

With these tips in mind, you‘ll be able to craft a custom WordPress toolbar perfectly tailored to your workflow. It‘s a small change that can make a big difference over time!

Frequently Asked Questions

Can I add links to external websites in the toolbar?

Yes, just make sure to use a full URL including https:// for the href value. Also consider opening external links in a new tab by adding target="_blank" to the link parameters.

How can I hide the WordPress toolbar on the front-end?

If you don‘t want to show the toolbar to non-admin visitors, you can uncheck "Show Toolbar when viewing site" under Users > Your Profile in the dashboard.

What‘s the best way to style custom toolbar links?

You can add custom CSS classes to your links with the class parameter in the meta array. Then target those classes in your theme‘s stylesheet or the "Custom CSS" section of the WordPress Customizer.

Can I export and import my custom toolbar setup?

This depends on how you added your links. The Admin Bar Enhanced plugin includes built-in import/export tools. But if you used code snippets, you‘ll need to copy them into your new site‘s functions.php file or use a plugin like Code Snippets to manage them.

Conclusion

If you regularly work on your WordPress site, taking a few minutes to set up custom toolbar links can be a game-changer for your productivity. With the three methods outlined in this post — using a plugin, adding a single link with code, or grouping multiple links with code — you have the power to make the WordPress toolbar your own.

Whether you‘re a blogger, developer, marketer, or any other type of WordPress user, a customized toolbar is an easy win for a more efficient workflow. I hope this guide has given you the tools and inspiration to try it yourself.

For more time-saving WordPress tips, check out my posts on 25 Essential Plugins for WordPress and How to Speed Up Your WordPress Site.

Now go enjoy your personalized WordPress command center!