QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Bitcoin BankingBuy, Sell, Store and Earn Interest
  • 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`.

Narayan Prusty

I am a full-stack web developer. I specialize in Blockchain and JavaScript. This is my personal blog where I write about programming and technologies that I learn and feel interesting to share.

Image6 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
Freelance: I am available
@narayanprusty
Hi, I am a full-stack developer - focusing on JavaScript, WordPress, Blockchain, DevOps, Serverless and Cordova. You can outsource your app development to me.





Will get back to you soon!!!
WordPress
ReactJS
Meteor
Blockchain
Serverless
Kubernetes
DevOps
DB & Storage
Ejabberd
Let's get started
My Books

2014 - 2015 © QNimate
All tutorials MIT license