In my past few entries I’ve been exploring some of the basics that make WordPress “tick” and how we use these tools to increase functionality for your site within the WP ecosystem. As you’ve seen, these posts aren’t targeted specifically at general users, but they do have relevance to all of you non-techies out there: digging into the basics of WordPress and how to work with it shows you that the “nice little open source system” running your blog or website is really quite a sophisticated piece of software. As my friend and colleague Jacob Smith says: sometimes it’s good to know what your mechanic is talking about when he’s fixing your car!

So, today’s post will explore something you’ve seen as a user ever time you login to WordPress: the admin navigation on the left hand side of your screen. As a developer, I often want to give you (the user) access to some configuration options related to the plugin, feature, or page that I’m working on. Well, as you might expect, WordPress has a couple of functions and hooks to help us add a custom menu item to your admin navigation. Here’s how it works:

Adding a new admin section

First we will add a function which will write our custom page

function dinkum_page() {
	// Check if the user has enough rights.
	if (!current_user_can('manage_options'))  {
		wp_die( __('You don't have permissions to access this page.') );
	}

	// Write our custom html
	echo '

Hello there!

';
	echo '

';
}

Then, we need a function to add our menu options. Here it is:

function dinkum_menu() {
	add_menu_page( 'Dinkum', 'Dinkum', 'manage_options', 'dinkum-section', 'dinkum_page' );
}

And finally we have to use the magic WordPress tool: the action hook!

add_action('admin_menu', 'dinkum_menu');

Here is the result:

Taking this concept a step further is the ability to add some items to our new “Dinkum” section? Easy! We can use the add_submenu_page function.

function dinkum_menu() {

	add_menu_page( 'Dinkum', 'Dinkum', 'manage_options', 'dinkum-section', 'dinkum_page' );
	add_submenu_page( 'dinkum-section', 'Setting', 'Setting', 'manage_options', 'dinkum-section-setting', 'dinkum_page');
}

And finally, in the recently WordPress 3.1, we have a new admin bar. Did you know it? You need to be logged to see it, of course.

Now its time to add some code. We attach our function to the admin_bar_menu hook

add_action('admin_bar_menu', 'dinkum_adminbar_menu');

Add the options

function dinkum_adminbar_menu(){
	global $wp_admin_bar;
	$wp_admin_bar->add_menu(
		array(	'id' => 'dinkum-menu',
				'title' => __( 'Dinkum' ),
				'href' => get_admin_url(null, 'admin.php?page=dinkum-section')
		)
	);

	$wp_admin_bar->add_menu(
		array(	'parent' =>'dinkum-menu',
				'id' => 'dinkum-menu-setting',
				'title' => __( 'Setting' ),
				'href' => get_admin_url(null, 'admin.php?page=dinkum-section-setting')
		)
	);

}

And here is the result. Quite nice, right? 🙂

If you want to read more about menus, take a look here

And you can download the files here