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