How to replace text links with icon links in WP 3 navigation menus

The new WordPress 3 navigation menus are an excellent tool to design your own menus, mixing pages, categories and custom links. iThemes created video tutorials on how to use the new WordPress navigation in Builder and Flexx theme. The following tutorial will show how you can replace the text links in the navigation menu with images. It can be used for any theme, on any WordPress site running WordPress 3+, but it is based on iThemes Flexx.

The Flexx theme, by design, uses graphical icons for the home page links, as can be seen in this theme demo. The WordPress 3 navigation won’t add these automatically.

In the following step by step guide, we will:

• create 2 menus, one for pages, one for categories
• create custom links to link to “home”
• integrate the menus in the WordPress layout
• figure out how we can address these links using CSS
• add the necessary css to make it all work

Getting Started

Navigate to wp-dashboard > Appearance > Menus. If you have not created any menus, the theme locations will be empty (note, the Mobile Plugin navigation is not relevant for this tutorial).

Create 2 menus, one for pages, one for categories

Create a “pages” menu (in this case pagesnav3, but call it whatever you want), and a “categories” menu (catsnav3), by selecting all pages and all categories.

Create a custom link to your “home” page

Add the URL to your home page and create a custom link.

Add the custom link to the page menu and to the categories menu. By default, a new custom link will be added to the end of the menu. Drag and drop the menu link to the top of the list of navigation items.

Integrate the menus in the WordPress layout

Figure out how we can address these links using CSS

When you navigate to your site, you can now see that you have successfully added the home links, albeit still text links.

We need to find the unique menu item ID’s, assigned to each custom link. You can find instructions in a separate tutorial.

Add the necessary css to make it all work

Now that we know which ID (or ID’s, 165 and 166 in this case) we need to address in our CSS, we can add the appropriate CSS code to replace the text “home” with an image.

Add the following code to (the end of) your stylesheet.

#menu-item-165,
#menu-item-166 {
    text-indent: -9999px;
    width: 40px;
}

#menu-item-165 a,
#menu-item-166 a {
    background: #0b2300 url(images/menu-home-bg.gif) top center no-repeat !important;
}

#menu-item-165 a:hover,
#menu-item-166 a:hover {
    background: #0b2300 url(images/menu-home-active-bg.gif) top center no-repeat !important;
}

This code will make sure that:

• the text “Home” is indented (or rather, outdented) way out of the visible area of your site for the menu items we added (menu-item-165 and menu-item-166)
• the image “menu-home-bg.gif” is selected to show for the menu items we added
• the image “menu-home-active-bg.gif” is selected to show for these menu items when hovering the mouse over them

Note, the images used are the same as used in the Flexx themes, and are expected to reside in a subfolder /images/ in your theme folder. For other themes, you may have to adjust the location, width, perhaps add padding or margins, and of course you can create your own images to achieve a similar effect. Here’s the end result: