Customize Menus in WordPress

If you are kine on programming in CSS and HTML, sometimes, automatically added code can render your work in an unmanageable way, especially if you work with CMS such as WordPress.

However it can be good to follow the standards from such CMS as it will save time for future integration.

But having tags such as item-page-1 itempage-2… and so on is quite ugly. So when it comes to make things appealing, let’s customize, learning how to do it will give you more details about how wordpress behaves.

 

Adding a different icon image for each item in the menu

The best way to achieve this is using the options in WordPress under the Appearance – Menus dashboard :

Click on the menu item you would like to add an image to and make sure you check the box at the top of the wordpress page about : Advanced properties for menus :

CSS classes

Add a class to your menu items.

A different one for each one matching the class you defined within your style.css

 

menu-customize-css-wordpress

Let’s say you added the .home class to your homepage :


<li class="home ..."><a href="/">Home</a></li>

Make sure your stylesheet shows something like that :


ul li.home { background : url(/wp-content/themes/yourtheme/images/home.png) no-repeat right ; }

You may add padding or/and margin to match your design needs.

 

Removing all tags except the one we need

By default WordPress adds a few tags around each item and on top of the navigation menu.

We show you here a quick way to remove all tags and get a clean code :

Here is what WordPress adds :

<div class=”menu“><ul><li class=”page_item page-item-2“><a href=”#”>Example page</a></li></ul></div>

Let’s remove the div tag as well as the ul and li one by using the strip_tags Php function:


<?php $defaults = array( ‘container’ => false, ‘echo’ => false ); echo strip_tags(wp_nav_menu( $defaults ), ‘<a>’ ); ?>

We still keep the a tag as it’s needed for navigating. You may also add the li tag or any other you want to pass throught.

 

Adding an image inside the a element within the menu

The solution here can also be used to control the output of the menu and removing any tags as above.

In case you do not want text inside your navigation menu or/and replace the text with a plain image, in WordPress, handling this without any plugin is simple, just follow the steps below.

You will need to extend the class Walker_Nav_Menu

Inside the rendering file (ie : index.php) :

<?php

$defaults = array(

//Remove the div container and ul tag :

‘container’       => false,
‘echo’            => false,
‘items_wrap’      => ‘%3$s’,
‘depth’           => 0,

//identify the menu
‘menu’            => ‘Menu principal’,

//call the customized function
‘walker’          => new description_walker
);

echo wp_nav_menu( $defaults );
?>

 

And inside your functions.php file :


class description_walker extends Walker_Nav_Menu { function start_lvl( &$output, $depth = 0, $args = array() ) { // do nothing. } function end_lvl( &$output, $depth = 0, $args = array() ) { // do nothing. } function end_el( &$output, $comment, $depth = 0, $args = array() ) { // do nothing, no </li> will be added } // add main/sub classes to li's and links function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { global $wp_query; /*do not add anything to the link*/ $indent = ''; $class_names = $value = ''; $output .= ''; /*keeping link attributes*/ $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : ''; $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : ''; $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : ''; //append and prepend nothing - you may anything depending on your design $prepend = ''; $append = ''; $description  = ''; /*We add the icons here*/ switch ($item->title) { case 'Home' : $item_img = get_template_directory_uri().'/images/home.png'; break; //add as many element you need... default : $item_img = get_template_directory_uri().'/images/default.png'; break; } $item_output = ''; $item_output .= '<a'. $attributes .'>'; $item_output .= '<img src="'.$item_img.'" alt="'.$item->title.'" />'; $item_output .= '</a>'; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }

There are alternatives using CSS but it can be tricky depending on your design and structure, you can use the text-indent definition along with width and height of elements but when dealing with responsive design it is not as clean as expected. At least with the solution shown above, you have full control over your menus.

 

Further reading :

http://codex.wordpress.org/Function_Reference/wp_nav_menu

http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code

http://code.tutsplus.com/tutorials/understanding-the-walker-class–wp-25401

 

Leave a Reply

Want more information?

Related links will be displayed here in this section for you to pick up another good spot to get more details about Web marketing and Search Engine Optimization. There will be some sites which we selected to ease the work of any webmaster or/and web marketer on the Internet.

%d bloggers like this: