Top Level Menu In WordPress 2.7

Frank — Tue, 09 Dec 2008 13:20:40 +0000

I explained in one of my previous posts how to add a nice icon to your Plugin in the backend are of WordPress 2.7. Some of my readers on my German blog asked how to add an icon to menus in the top level. I thought there are more readers interested to know about it, therefore I will show it here including a hover effect for the icon.

`add_menu_page()`

The function add_menu_page() exists since the beginning of WordPress and got a parameter added in WordPress 2.7 – $icon_url.

add_menu_page( $page_title, $menu_title, $access_level, $file, $function = '', $icon_url = '' )

This parameter can either send a path of the icon or a div, which can be addressed via CSS style. Additionally I like to show you how to implement the hover effect, which is standard in version 2.7.

Plugin example

Here is a little example to understand. I created the Plugin as you can see below and put it in the folder /plugins/ of the WP installation.
→ Plugins
   → test
     → css
         → style.css
     → images
         → fb_menu.png
     → test.php

The Plugin includes the function to create the menu item in the top level area. Therefore we deliver the value div as last parameter.
In addition we call the function via hook, so that the menu item will be created and the content of the function will be available.

function add_menu_page_in_27() {
	add_menu_page(__('Test', 'test'), __('Test Description', 'test'), 9, basename(__FILE__), '', 'div');
}
 
add_action('admin_menu', 'add_menu_page_in_27');

Icon via CSS Sprites

Now the HTML is in the backend and we use CSS to create the icon. I use the possibility of CSS Sprites.

I add an icon into the Plugin, which contains both conditions. See image on the right.

The associated CSS looks like below, which I placed in the folder css of the Plugin. Thereby the ID of the menu item will be created by the name of the file – toplevel_page_test = toplevel_page_ + test.php.

#adminmenu #toplevel_page_test div.wp-menu-image {
	background: transparent url('../images/fb_menu.png') no-repeat scroll -1px -33px;
}
#adminmenu #toplevel_page_test:hover div.wp-menu-image,
#adminmenu #toplevel_page_test.wp-has-current-submenu div.wp-menu-image,
#adminmenu #toplevel_page_test.current div.wp-menu-image {
	background: transparent url('../images/fb_menu.png') no-repeat scroll -1px -1px;
}

wp_enqueue_style( 'test_css', plugins_url( $path = '/test/css/style.css'), array() );

Conclusion

This is a clear and neat solution, which can be also integrated into small functions, if you query of wp-version basis.

if ( version_compare( $wp_version, '2.6.999', '>' ) ) {
 // since Version 2.6.999
} else {
 // less than Version 2.6.999
}

Download

You can donwload this example on my private blog - download page

Thanks for subscribing our feed! Sponsor the WP Engineer Blog and get your brand in front of several hundred users per day!
© WP Engineer Team, All rights reserved (Digital Fingerprint: WPEngineer-be0254ce2b4972feb4b9cb72034a092d)