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.
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);
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);
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);
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);
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);
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);
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);
function new_toolbar_item($wp_admin_bar)
{
$wp_admin_bar->remove_node("wp-logo");
}
add_action("admin_bar_menu", "new_toolbar_item", 999);
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.
@narayanprusty
Leave a Reply