WPML creates top navigation with drop down menus, a breadcrumbs trail and sidebar navigation. In this post, I’ll talk a bit about how to use and style them. We’ll use our own theme (used for WPML.org) as an example.

Styling WPML navigation

To apply your styling to the navigational elements, you need to override the CSS statements found in cms-navigation.css (a CSS file that comes with WPML).

Grab this file from wp-content/plugins/sitepress/modules/cms-navigation/css/ and add it to your theme’s directory. Then, load it in your theme. Make sure it’s done after the standard WordPress headers are loaded, so that your version of the CSS is loaded last and determines the styling.

Now, start editing it, to match your theme.

The CSS file is pretty well documented. For example, this part determines the 2nd level links formatting:

/* style the second level links */
#menu-wrap ul ul a, #menu-wrap ul ul a:visited {
color:#000; height:auto; line-height:15px; padding:5px 10px; width:150px;

To change the font color from black, just change the value in the color attribute.

I find it particularly helpful to use the great Firebug Firefox extension to edit CSS in themes. Once you’ve installed it, you can open Firebug, point to any element in the screen and see its CSS. Firebug will tell you which CSS statements control the visual display of each element.

Firebug crash course

  • Install Firebug as a Firefox add-on.
  • Click on the little Firebug icon to open its console.
  • Click on ‘Inspect‘ and then on the element in the screen you want to check.

Here is a screenshot of Firebug showing the WPML.org’s main page debugged with Firebug. It shows the top navigation’s styling.

WPML debugged with Firebug
WPML debugged with Firebug (click to zoom)

Firebug also lets you edit the CSS inline. This means that you can test various changes without modifying the CSS file itself and see your changes immediately.

Inserting WPML navigation to your theme

For technical instructions on what to add to the theme, have a look at the getting started guide. You’re probably still wondering where exactly it would be best to add the different navigational elements.

For WPML.org, this is what we implemented:

  • Top navigation: Added <?php do_action(‘icl_navigation_menu’); ?> just before the end of header.php (before the closing tag for <div id=”header>. This inserts the top tab DIV with all its contents.
  • Breadcrumbs trail: Added <?php do_action(‘icl_navigation_breadcrumb’); ?> to index.php, archive.php, page.php, single.php and search.php.
  • Sidebar navigation: We didn’t add that to the theme at all. We’re using it as a widget, added from the admin panel.

Need more info?

We’re adding WPML navigation to a few popular open themes from WordPress.org. Once this is done, we’ll write a how-to post, explaining what we did for each.