• Add Images To WordPress Navigation Menu Items

    Posted by markzero on Monday, February 7th, 2011

    WordPress has nice feature to control menus from admin area. It is located in Appearance sidebar. To place them into your pages (header) the code is used:

     
    <?php wp_nav_menu(); ?>

    To find out about parameters of this function look at it’s page. This will display your menus, but this post will not cover CSS for displaying this menu inline or it’s custom formatting.

    We will input images inside <a> tags using regular expression. To handle images display nicely, we will also have to float them and set them margins. Now setting the expression to our menu:

     
    <?php 
    $nav_out = preg_replace('/<a(&#91;^>]*)>/', 
    '<a$1><img src="'.get_bloginfo('template_url').'/images/my_img.png" border="0" />', 
    wp_nav_menu( array('menu' => 'My Navigation', 'echo' => 0, 'container' => 'false' )));
    echo $nav_out;
    ?>

    This code will replace opening <a> tag, with anything inside it (e.g. href) with itself but putting image right after it. ‘Echo = 0’ tells the function not to display it but to treat it as a string. One common practice is to use image for first item only, which is in 99% cases a link to home page:

     
    <?php 
    $nav_out = preg_replace('/<a(&#91;^>]*)>/', 
    '<a$1><img src="'.get_bloginfo('template_url').'/images/my_img.png" border="0" />', 
    wp_nav_menu( array('menu' => 'My Navigation', 'echo' => 0, 'container' => 'false' ))
    ,1);
    echo $nav_out;
    ?>

    Notice the “1” at the end – that means to apply the expression only to the first occurrence of <a> tag. Also, good practice to make it ordered, is to display image as block, float it left (if left-to-right language) and set proper margins, to separate it from text, if you have some text in menu. The result is something like this:

    If you have any questions, ask below…

    Posted in: PHP, Wordpress.

    Share this story:

    7 responses to “Add Images To WordPress Navigation Menu Items”

    1. iman24 says:

      hi there , nice tutorial m8
      but how to customize my drop down men
      thnx

      Report this comment

    2. markzero says:

      Iman, when “1” omitted all menu items will have images.
      But for submenus only.. that’s tricky one I gotta admit. Requires researching, and only thing I can come up to is that submenus start with <ul class=”sub-menu”>. Maybe that can help.
      Or maybe use simpler solution – css

      Report this comment

    3. Alex says:

      What if you wanted to add the image after the last menu item? What do you need to change?

      Report this comment

    4. markzero says:

      Hi Alex, took me some time to respond since I was very busy. Depending where you want to put it: after closing A tag </a> or LI tag </li>? You could put it instead <a([^>]*)> and using css hide all images except last one, using last one’s class like:
      li img {display:none;}
      li.last-menu-item img {display:inline-block;}
      Or using WP walkers which is harder way and I’ll post about it soon 😉

      Report this comment

    5. Aimee says:

      Thanks for the post, looking to try it soon.

      To clarify the code goes into the individual pages?

      Thank you in advance….Aimee

      Report this comment

    6. graham says:

      cheers for this m8 have been trying to activate the menu option in my wordpress theme for the past few hours, thought i was gona be stuck with having to edit the menu in my websites html every time i needed to add or change a nav.

      Report this comment

    7. Wanjiru says:

      How do i put the image on the top of the menu name? How do i make my image change on hover to another image

      Report this comment

    Leave a Reply