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.


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() );


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


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





7 responses to “Top Level Menu In WordPress 2.7”

  1. […] Top Level Menu in WordPress 2.7 WP Engineer shows us how to add icons to menus in the top level in the admin interface. […]

  2. […] Top Level Menu in WordPress 2.7(WordPress 顶层菜单) WP Engineer 给我们展示了如何在管理界面顶层菜单中添加图标。 […]

  3. […] im Admin-Navigationsmenü von WordPress 2.7 vorgestellt habe, möchte ich heute noch auf eine dritte Variante hinweisen, über die ich eben zufällig bei gestolpert bin. Sie ist zwar […]

  4. kamal Avatar

    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’);


  5. banimp3 Avatar

    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?