QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Customizing WordPress Admin Toolbar

Customizing WordPress Admin Toolbar

wordpress-admin-toolbar

This post is a part 9 of Creating a WordPress Admin Theme post series.

In this article I will show you how to add and remove new items to admin toolbar in wordpress. Let’s get started:


Understanding WordPress admin toolbar

WordPress admin toolbar is the top horizontal menu in the admin pages of wordpress.
Screen Shot 2014-08-18 at 6.10.16 pm
The items in the toolbar are called nodes. nodes can be parent or child nodes. Parent and child nodes form a drop down menu.

Similar nodes can grouped together so that they appear together regardless of creation wise.

When we click on nodes they take us to a linked page.

Creating a Node

A new node can be created using add_node function.

<?php
function new_toolbar_item($wp_admin_bar)
{
    //$wp_admin_bar is passed as arguement to this callback called by admin_bar_menu
    //it takes a array. Here we provided id, title and href. We didn't provide a parent node id therefore it becomes a parent node.
    $wp_admin_bar->add_node(array("id"=>"parent_node_1", "title"=>"Websites", "href"=>"#"));
}
//this action is called before displaying the toolbar
add_action("admin_bar_menu", "new_toolbar_item", 999);

Screen Shot 2014-08-18 at 6.44.51 pm
Let’s add a child to out node

<?php
function new_toolbar_item($wp_admin_bar)
{
    $wp_admin_bar->add_node(array("id"=>"parent_node_1", "title"=>"Websites", "href"=>"#"));

    //here we provided a parent node id therefore this new node becomes a child node now.
    $wp_admin_bar->add_node(array("id"=>"child_node_1", "title"=>"QNimate", "href"=>"http://qnimate.com", "parent"=>"parent_node_1")); 
}
add_action("admin_bar_menu", "new_toolbar_item", 999);

Screen Shot 2014-08-18 at 6.43.57 pm

Grouping Nodes

Groups can be created using add_group function. Let create 4 child nodes and group them into two different groups.

<?php
function new_toolbar_item($wp_admin_bar)
{
    $wp_admin_bar->add_node(array("id"=>"parent_node_1", "title"=>"Websites", "href"=>"#"));

    //first group. provide parent node id if you are grouping child nodes using this group.
    $wp_admin_bar->add_group(array("id"=>"group_1", "parent"=>"parent_node_1"));
    //second group.
    $wp_admin_bar->add_group(array("id"=>"group_2", "parent"=>"parent_node_1"));

    //when we want to put a node inside a group then make its parent array element assigned to group id.
    $wp_admin_bar->add_node(array("id"=>"child_node_1", "title"=>"QNimate", "href"=>"http://qnimate.com", "parent"=>"group_1"));
    $wp_admin_bar->add_node(array("id"=>"child_node_2", "title"=>"QScutter", "href"=>"http://qscutter.com", "parent"=>"group_2"));
    $wp_admin_bar->add_node(array("id"=>"child_node_3", "title"=>"QNimate Labs", "href"=>"http://labs.qnimate.com", "parent"=>"group_1"));
    $wp_admin_bar->add_node(array("id"=>"child_node_4", "title"=>"Twitter Profile", "href"=>"http://twitter.com/narayanprusty", "parent"=>"group_2"));

}
add_action("admin_bar_menu", "new_toolbar_item", 999);

Screen Shot 2014-08-18 at 7.04.57 pm

Removing Nodes

Any node can be removed using remove_node function. You can remove manually created nodes and also pre existing nodes using this function. You just have to provide the id of the node.

The ID’s of pre-existing(or any) node can be found in the HTML source code of any WordPress page with a Toolbar on it. Find the list items that have ID’s that start with “wp-admin-bar-“. For example, the list item ID for the WordPress Logo on the left in the Toolbar is “wp-admin-bar-wp-logo” therefore the id of the node is “wp-logo”.

Now lets remove the logo:

<?php
function new_toolbar_item($wp_admin_bar)
{
    $wp_admin_bar->remove_node("wp-logo");
}
add_action("admin_bar_menu", "new_toolbar_item", 999);

Screen Shot 2014-08-18 at 7.11.25 pm

Retrieving Nodes Properties

If you id of a node then you can retrieve its properties using get_node function. You can also retrieve properties of all the nodes using get_nodes function.

Aug 18, 2014Narayan Prusty
Automatic Color Palette GeneratorAdd and Remove Widgets in WordPress Dashboard

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Understanding WordPress admin toolbar
  • Creating a Node
  • Grouping Nodes
  • Removing Nodes
  • Retrieving Nodes Properties
Related Articles
  • Customizing WordPress Admin Profile Page
  • Overview of WordPress Admin Menu API
  • Generating Custom Markup For WordPress Menu
  • Add and Remove Widgets in WordPress Dashboard
  • Bypass Same Origin Policy
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license