Would you like to add a menu to the admin bar?

WordPress recently introduced an API for developers to use, before it was just a WordPress.com feature, then it was adopted on the WordPress blog autonomous. This admin bar adds an extra menu bar to your WordPress blog depending on the level of the logged in user (role).

add a menu to the admin bar

Last time, we gave you tips on how to turn off the administration bar on a WordPress blog, today we will teach you how to add a custom menu and submenus to your admin bar.

We will in this tutorial use a php code that you will add in a plugin. We have presented to you in the following article how to create a WordPress plugin.

But, if you've never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

How to create a menu on the toolbar

All you have to do is add the following code:

function my_new_admin_bar_menu() {
    global $wp_admin_bar;
    $root_menu = array(
            'parent' => false, // Parent, si false, sera situé à la racine
            'id' => 'new_custom', // id du menu, doit ĂŞtre unique pour la racine.
            'title' => __('Menu Personnalisé'), // Menu / sub-menu title
            'href' => admin_url( 'my-new-menu.php'), // Menu URL
            'meta' => false // table des attributs : array( 'html' => '', 'class' => '', 'onclick' => '', target => '', title => '' );
            );
    $wp_admin_bar->add_menu( $root_menu );
}
add_action( 'wp_before_admin_bar_render', 'my_new_admin_bar_menu' );

How to create a submenu on the toolbar

function my_new_admin_bar_menu() {
    global $wp_admin_bar;
    $root_menu = array(
            'parent' => false, // Parent, si false, sera situé à la racine
                    'id' => 'new_custom', // id du menu, doit ĂŞtre unique pour la racine.
                    'title' => __('Menu Personnalisé'), // Menu / sub-menu title
                    'href' => admin_url( 'my-new-menu.php'), // Menu URL
                    'meta' => false // table des attributs : array( 'html' => '', 'class' => '', 'onclick' => '', target => '', title => '' );
    $sub1 = array( 'parent' => 'new_custom', 'id' => 'new_custom1', 'title' => __('Sub1'), 'href' => admin_url( 'my-first-sub.php'), 'meta' => false );
    $sub2 = array( 'parent' => 'new_custom', 'id' => 'new_custom2', 'title' => __('Sub2'), 'href' => admin_url( 'my-second-sub.php'), 'meta' => false );
    $wp_admin_bar->add_menu( $root_menu );
    $wp_admin_bar->add_menu( $sub1 );
    $wp_admin_bar->add_menu( $sub2 );
}
add_action( 'wp_before_admin_bar_render', 'my_new_admin_bar_menu' );

Using our first example, we'll add two submenus. We're going to add a parent value to our array so that it's a child of our root menu.

See also our article on Permalink: How to customize your blog links

We will add the main identifier " new_custom Â»On all our submenus, make sure you also use a unique ID for all submenus (new_custom1 and new_custom2). Make sure to call the " $ wp_admin_bar-> add_menu ($ subX); »On all sub-menu tables.

How to add submenus to existing menus

function my_new_sub_menu() {
 global $wp_admin_bar;
 $sub_menu = array(
 'parent' => 'new-content', // Ajoute un sous menu dans new-content (Nouveau)
 'id' => 'new_custom_sub', // ID du menu unique.
 'title' => __('Custom Sub Menu'), // Titre
 'href' => admin_url( 'my-new-sub-menu.php'), // URL du menu
 'meta' => false // tableau d'options: array( 'html' => '', 'class' => '', 'onclick' => '', target => '', title => '' );
 );
 $wp_admin_bar->add_menu( $sub_menu );
}
add_action( 'wp_before_admin_bar_render', 'my_new_sub_menu' );

As you can see, we used the new content as our parent ID, it will be under the menu " Add new On the native list of the WordPress admin bar menu. Just like in this second example, we set the parent ID to be the children of the parent menu.

Also read our guide on: Advertising on WordPress: is it still profitable?

Here are some available menu identifiers that you can use.

  • appearance - Appearance menu
  • comments - Links of comments
  • edit - Post / Page / Category / Tag edit menu
  • get-shortlink - Shortlink of the page menu
  • my-blogs - My website menu, if you have more than one website
  • New happy - Add a new menu
  • updates - Update link

Discover also some premium WordPress plugins additional 

You can use other plugins to display countdowns on your WordPress blog. In what follows, I offer you some of them.

1. Coming Soon CountDown

Coming Soon CountDown is one of WordPress plugins premium countdown timers on the WordPress platform. It has 2 countdown designs, as well as 10 kinds of wallpapers to make them more beautiful and eye-catching.

Coming soon countdown responsive wordpress plugin

Indeed, Coming Soon CountDown allows you to continue your work on your website While your Visitors see displayed the 'Coming Soon' page. When you're done, you can get your website back online with just the push of a single button.

We also invite you to discover our 10 WordPress plugins to improve the visual of your website

It is also possible to decide which users may or may not see the website depending on their statuses. If only part of the website is to be submitted to the "Coming Soon" page, then you can also define which pages are available to your visitors and which are not.

Download | Demo Web hosting

2. WooCommerce Sales Countdown

WooCommerce Sales Countdown is a WordPress Plugin fantastic premium designed to promote sales campaigns on your e-commerce website. 

Woocommerce sales countdown

It sets up a dedicated countdown area with the product on sale, and tells your customers how much time is left to purchase said product at a low price. This plugin also gives you the option to add a countdown to the upcoming balance period.

Download | Demo | Web hosting

3. Social Share & Locker Pro

The Social Share & Locker Pro extension has been designed to help your website be more visible on social networks. With just a few clicks, you can either set the position of your social icons or lock your content by requiring sharing on one of the social networks offered by you.

social share locker pro wordpress plugin

You have 10 predefined themes and this should cover the most common wishes. All her themes are Retina and work wonders. 

Here are our 6 WordPress plugins to ensure RGPD compliance of a blog

Also, with Social Share & Locker Pro, you will be able to display the full name of social networks or just the icon. It will depend on your design, the available space, or your wishes.

Download | Demo | Web hosting

Recommended Resources

Find out about other recommended resources to help you build and manage your website.

Conclusion

So ! That's it for this tutorial. You can also use it in your next WordPress Plugin, if you want to add an administrator menu for your settings. You just need to configure it in such a way that your plugin will work.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

Feel free to share this article with your friends on your favorite social networks. But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...