WPML CMS Navigation is an add-on plugin that provides navigational elements when building your multilingual site.
The add-on is included with your WPML Multilingual CMS package.
Navigational elements you can add with the WPML CMS Navigation plugin include:
Breadcrumbs
Helps users find their way through the site’s structure
Dropdown menus
Gives users quick access to specific sections
Sidebar
Shows users pages related to the page they’re viewing
Adding Navigation Elements to Your Theme
To use each element, add them to your theme using single-line PHP functions.
| PHP code | Where to Add | |
|---|---|---|
| Breadcrumbs | <?php do_action('icl_navigation_breadcrumb'); ?> | header.php or single.php, page.php, archive.php, tag.php and search.php |
| Dropdown menus | <?php do_action('icl_navigation_menu'); ?> | header.php |
| Sidebar | <?php do_action('icl_navigation_sidebar'); ?> | sidebar.php |
The sidebar navigation comes as a WordPress Widget, too. Add it via the Widgets control on the Appearance → Widgets page.
Customizing Navigation Elements
To customize the global settings of the add-on, go to WPML → Navigation. You can adjust basic settings, such as the symbol that separates the breadcrumbs trail.
You can also apply various customizations through the WordPress editor or CSS.
1. Customizing Navigation Elements With The WordPress Editor
When you’re editing a page in the WordPress editor, scroll down to find a section labeled CMS Navigation.
This section allows you to customize what to display on the sidebar. You can:
- Exclude the current page
- Show or not show its child pages
- Assign a section to show the page under
2. Customizing the Appearance of Navigation Elements with CSS
Navigation elements come with a default appearance, which you can customize using CSS.
Go to ../wp-content/plugins/wpml-cms-nav/res/css to locate two files:
- cms-navigation-base.css: This is responsible for the dropdown menu’s functionality and you shouldn’t modify it.
- cms-navigation.css: This is a file that you can copy and modify to add your customizations.
Follow these steps:
- Copy the second file, cms-navigation.css, from the plugin directory and place it in your theme’s directory.
- Call wp_head() and load your copy. This will load the plugin CSS files.
- Apply your CSS customizations to the new file.