Get the Official WPSaviour App Now!

BlogTutorials

How to Add Custom Shortcut Links to WordPress Toolbar

By default WordPress displays a toolbar on top of all pages to logged in users. You can take control of the WordPress admin bar, turn it off when viewing site, or even disable it for all users except administrators. However, this toolbar can be utilized in many ways, particularly if you run a busy website with multiple authors. In this article, we will show you how to add custom shortcut links to WordPress toolbar.

Why or When You Need to Add Custom Shortcut Links to WordPress Toolbar?

By default the toolbar shows useful links to WordPress adminstration screens, allowing users to quickly access different sections of their website.

However, everyone has links that they visit a lot when writing posts or working on their site. For example, links to an external resource, service, or website. These links can be added to WordPress toolbar as custom shortcut links allowing you and your users easy access to those locations directly from your site or the admin area.

Adding a Custom Shortcut Link to WordPress Toolbar

To add a custom shortcut link to the WordPress toolbar, you need to simply copy and paste the following code in your theme’s functions.php file or in a site-specific plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// add a link to the WP Toolbar
function custom_toolbar_link($wp_admin_bar) {
    $args = array(
        'id' => 'wpsaviour',
        'title' => 'Search WPsaviour',
        'href' => 'https://www.google.com:443/cse/publicurl?cx=014650714884974928014:oga60h37xim',
        'meta' => array(
            'class' => 'wpsaviour',
            'title' => 'Search WPsaviour Tutorials'
            )
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);

This sample code adds a link to a Google Custom Search engine, which can be used to search for WordPress tutorials on WPsaviour. It uses the function add_node with the arguments described in the array. You need to replace the id, title, href, and meta items with values for your own custom link.

Adding a custom shortcut link in WordPress toolbar

How to Add a Group of Custom Links in Toolbar

We showed you how to add a custom link to the toolbar, but what if you wanted to add multiple links and create a custom menu with handful shortcuts of your own? To do that you can group multiple shortcuts under one parent item. The child nodes under the parent link will appear when a user takes the mouse on the parent link. Here is an example of how to add a group of custom links in WordPress toolbar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/*
* add a group of links under a parent link
*/
// Add a parent shortcut link
function custom_toolbar_link($wp_admin_bar) {
    $args = array(
        'id' => 'wpsaviour',
        'title' => 'WPsaviour',
        'href' => 'https://www.wpsaviour.com',
        'meta' => array(
            'class' => 'wpsaviour',
            'title' => 'Visit WPsaviourr'
            )
    );
    $wp_admin_bar->add_node($args);
// Add the first child link
    
    $args = array(
        'id' => 'wpsaviour-guides',
        'title' => 'WPsaviour Guides',
        'href' => 'https://www.wpsaviour.com/category/saviours-guide/',
        'parent' => 'wpsaviour',
        'meta' => array(
            'class' => 'wpsaviour-guides',
            'title' => 'Visit WordPress saviour Guides'
            )
    );
    $wp_admin_bar->add_node($args);
// Add another child link
$args = array(
        'id' => 'wpsaviour-tutorials',
        'title' => 'WPsaviour Tutorials',
        'href' => 'https://www.wpsaviour.com/category/wp-tutorials/',
        'parent' => 'wpsaviour',
        'meta' => array(
            'class' => 'wpsaviour-tutorials',
            'title' => 'Visit WPsaviour Tutorials'
            )
    );
    $wp_admin_bar->add_node($args);
// Add a child link to the child link
$args = array(
        'id' => 'wpsaviour-themes',
        'title' => 'WPsaviour Themes',
        'href' => 'https://www.wpsaviour.com/category/wp-themes/',
        'parent' => 'wpsaviour-tutorials',
        'meta' => array(
            'class' => 'wpsaviour-themes',
            'title' => 'Visit WordPress Themes Tutorials on WPsaviour'
            )
    );
    $wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'custom_toolbar_link', 999);

In this example code, first we added a custom shortcut link. Next, we added another custom link and made it a child of the first link. We added the parent link id by adding the argument 'parent' => 'wpsaviour'. Then we repeated this to add another link under the same parent link. We have also used a child link as a parent link to show you how to add sub-items to a sub-item in the your custom links menu.

We hope this article helped you add custom link shortcuts to WordPress toolbar on your website. For questions and feedback please leave a comment comment.

Related posts
BlogTutorials

5 HELPFUL WORDPRESS TIPS FOR SAVIOUR Copy

Beginner’s GuideBlog

12 Best WordPress SEO Tips & Techniques to Boost Rankings

Blog

What Makes a “SEO-Friendly” WordPress Theme

Blog

How to Switch Off a Website With One Line of Code

Sign up for our Newsletter and
stay informed

Leave a Reply

Your email address will not be published. Required fields are marked *