14

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.

14 Responses to “Styling WPML navigational elements”

  1. Could you explain how to add the link to the CSS file for the navigation? I copied the cms-navigation.css file into my theme directory, and it shows up in my WP editor. But I am not sure how to add the reference to that CSS file into my theme. Can you help explain, maybe show a code example?

    “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.”

    • After the call for the wp-headers, add this:

      <link rel=”stylesheet” href=”/wp-content/themes/THEME_NAME/cms-navigation.css” type=”text/css” media=”screen” />

      • Do I have to add this to every php file that calls for the header.php file? Like page template, archives, singe post, etc..

    • Hi Andrés,

      Can you send a url or screenshot with the problem? We did test the menu for IE6 (and most of the popular browser) but it’s possible we missed something..

      Also, it would be great if you followed this on our new forum at http://forum.wpml.org/ – more options for you to detail this problem so we can fix it.

      Thanks

  2. I’m very new to this (no website design experience) and have added the wpml navigation to my website but I have no idea what this page is saying about how to customize the navigation bar for my theme.

    It looks retarded on my page right now…

    Can you help me?!

    • The top navigation in your site does look a bit awful right now. One thing that you have to do is reduce the number of top level pages (pages with no parent), at least to the point where they all fit horizontally.

      I’m not suggesting that you delete pages, but rather, think about which ones should be siblings of other pages. For example, the ‘About’ page and ‘Contact’ are both on the top bar. I think that they should both be siblings of the main page.

      Then, to properly style it, wait for WPML 1.0, which is about to be released this week. It will include much simplified CSS, which we’ll describe in detail here.

      I’ll write a blog post about it when it’s available and also describe the CSS customization much better. If you like, you can subscribe to our RSS or email news and get notified when it’s available.

      Amir

  3. mine did not work with the code supplied by -admin above. but it worked by using the wordpress codes to refer to the theme directory. if you have problems, this might work, as it worked with mine…

    <link rel=”stylesheet” href=”/cms-navigation.css” type=”text/css”

    hope this helps!

  4. I want to add links for my RSS feed and a search bar to the WPML navigation bar. Is this possible? Also, how can I align the navigation bar to line up with my site logo?

  5. What you have not stated is how to disable the links to the original stylesheets, once we have created our modified ones in our theme. Otherwise all that clutter remains in the head.

    Where do I have to go hack to remove any links to navigation or language selector style sheets? I love WPML but I have implemented my own navigation and language selectors…

    TIA

    • The idea is to keep the original (WPML’s) CSS files and put just the changes in your CSS. However, in any case, we’ll be adding options for disabling the loading of WPML’s default files. It will be available soon.