Top Level Menu In WordPress 2.7


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

Menu Icon for menu WordPress 2.7
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

Comments are closed.

7 comments

  1. WP Cult

    Very Nice!

  2. kamal

    hi,
    i try the CSS way but i have some errors in my plugin, so i'd like to add icon with out using CSS & sprite, who located in the img folder of my plugin:
    add_menu_page('Real Estate', 'Add Listing', 8, 'post-new.php?ref=red');

    Thanks

  3. banimp3

    Hello, Your post its very interesting.

    I have another question, if possible to add icons to the frontend menu in wordpress, I mean a different icon for each cateogry - in the category menu?

4 pingbacks

  1. Top WordPress 2.7 Tips, Hacks, Plugins & Resources | ShanKri-la
  2. WordPress links - Week 50 2008 | WPStart.org - WordPress themes, plugins and news
  3. WordPress 2.7 技巧、插件与资源精选 - WordPress 非官方中文站
  4. Und nochmal Icons | FirstDayBlack