Home » Documentation » Getting Started Guide » Site Navigation

Site Navigation

WPML’s CMS navigation functions don’t require any configuration and will work as-is. All you need to do is add the navigation elements to your theme.

Adding the navigation elements to your site

Top tab navigation with drop down menus

Top navigation

Top navigation

Top tab navigation gives visitors quick access to main sections in your website. Traditionally, it’s implemented using custom PHP functions that list pages and their subpages.

WPML simplifies this by doing the work for you. Just include the PHP function that call the menu and it’s generated for you:

<?php do_action('icl_navigation_menu'); ?>

This call generates the drop down menus in this site too (wpml.org).

The styling of the drop down navigation is controlled by the CSS code in cms-navigation.css. You can style it using the drop down menu CSS generator.

Breadcrumbs trail

Breadcrumbs Trail

Breadcrumbs Trail

Breadcrumbs let the user find his way home from anywhere in the site. To include it, add this to the theme:

<?php do_action('icl_navigation_breadcrumb'); ?>

It will work from any page, post, category, tag and even search results.

Sidebar navigation

Sidebar Navigation

Sidebar Navigation

Sidebar navigation shows visitors what other pages are available close to the page they’re viewing.

It lists all the children for the same parent. This isn’t a complete list of all the site’s pages but rather a list of nearby pages. The current page is highlighted (in this case WPML).

To add sidebar navigation, you can include the following in sidebar.php:

<?php do_action('icl_navigation_sidebar'); ?>

This function also comes as a WordPress Widget so you can add it to the sidebar via the Widgets control (Appearance->Widgets).

Customizing the navigational elements

WPML comes with default (not so pretty) design for the navigational elements. The sidebar and breadcrumbs trail come with very little default formatting and the top drop down menus are heavily formatted. The reason is, to make the top menus drop down, a lot of CSS is required.

For detailed information on how to style it for your website, have a look at the customization page of the navigation section.

8 Responses to “Site Navigation”

  1. Chin Obih says:

    Hello! I was wondering if you could explain this process step by step. I have been able to install the function, but I don’t know how to modify the php or css to fit the pages on my site. I’m a bit confused by the wording, “Just include the PHP function that call the menu and it’s generated for you” Just include what and where do I include it? What is generated for me? Where do I include what is generated for me and how do I reformat this to fit the pages and links already created on my wordpress page by default?

  2. Clark says:

    To Chin Obih,

    I had the same problem but I figured it out…

    “Just include the PHP function that call the menu and it’s generated for you”.

    Usually is placed in the header.php file that is located in your theme folder.

    Be sure to put that code AFTER the

    For me, I put the further down in the header.php so that I can put the navigation menu in the middle of my header of my site.

    If you want to make a submenu, just go to the wordpress admin and edit the page to have the page to be the child of other page.

    For example:
    Home page is set as the main page (no parent)
    About Us page is set to have a parent of Home

    Then you’ll see Home on menu and About Us is in submenu of Home. Mouse over the Home, and poof! There is About Us!

    It works. :-D

    So far, I like this navigation menu! I’m working on css to fit the appearance of my site! Thank you so much. :-D

  3. Alex says:

    Hi there,

    Just added the plugin to a webpage (fantastic work btw) but i only have one question:
    I have some custom listing in the page like:

    wp_list_pages (‘title_li&child_of=[something]‘);

    And for example the original page is ?page_id=5 and the translated page is ?page_id=25&lang=[new] … how to display the new language list items ?

    *none of the above work

    Thank alot ;)
    A

  4. mulder says:

    How can i translate the top bar naviguation in french for people who want it in french. thanks

    i installed wpml and buddypress

  5. Rita says:

    For some reason I can’t get the navigation to show up..I deleted the current menu …wp_list_pages…

    And added the snippet code given above, but it doesn’t work. Any suggestions?

    Thanks!

  6. Haterofpoorinstructions says:

    There is something missing from these instructions. I placed the code in my header.php where my old menu was and nothing shows. Besides how does this thing know what menu you want to call. Looks like you can make more than one menu. It would seem then there should be some kind of variable for calling the one you want. What is it? The widget menu works but not manually adding the code.

  7. Laura S. says:

    This isn’t working for me either. I’m using WP 3.0 and WPML 1.8.0. Two things:

    1. I’ve added the code to my header.php file but nothing is generated in the HTML;

    2. The resulting WPML admin menu on my WP sige looks different than what is shown in the Getting Started Guide (http://wpml.org/documentation/getting-started-guide/):

    Mine looks like:
    WPML
    Languages
    Pro translation
    Support [NEW]

    and the menu on the Getting Started Guide page looks like:
    WPML
    Languages
    Content Translation
    Navigation
    Sticky links

    Maybe this is just a result of the docs not being updated, but regardless, I can’t get it to work. I see a number of other people have gotten stuck as well, but lots of people have managed to do it. Any helpers out there?

    Thanks,
    Laura S.

  8. Randy says:

    Does anyone have more detailed instructions as to how to get the top navigation to work?
    I copied into the header.php file and it doesn’t work. I have searched the internet for over two hours trying to find more instructions and I can’t find anything! This plugin is exactly what I want but I can’t get it to work. I am using WordPress 3.0, WPML version 1.8.0

Leave a Reply

Please leave here comments about this page only.
For technical support and feature suggestions, head to our forum. We are waiting there!

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Subscribe without commenting