Support » Fixing WordPress » Can I replace the twentyeleven navigation bar with images?

  • Hi, I’m very new to all this so sorry in advance if my questions are a bit daft.

    I am using the TwentyEleven template and I want to replace the standard, horizontal navigation bar with a series of buttons made from images. I have seen posts on how to create image navigation buttons linking to facebook, twitter etc but I can’t find how to do this to link to internal pages.
    I have created a child version in which to make my changes.

    Any help would be gratefully received.

    Many thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • I think this is what you’ll have to do. Hopefully someone will correct me if I’m wrong.

    In header.php, there’s a call to wp_nav_menu(). You’ll need to replace that with wp_get_menu_items() and deal with the values returned.

    Copy header.php into your child theme, and make your changes there.



    Thanks peredur.

    Header.php says:

    /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
    				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    			</nav><!-- #access -->
    	</header><!-- #branding -->
    	<div id="main">

    I don’t know how to deal with the values returned. For an example, I have an image in my child images folder call Nav-About.jpg What do I need to do to invoke this?


    [Moderator Note: Please post code or markup snippets between backticks or use the code button.]



    Forum Moderator

    Try using Firefox with the Firebug add-on for this kind of CSS work.

    If you don’t know how to deal with the returned values from a PHP function call, to produce HTML then you probably need help from a PHP forum, I think. It’s not a specifically WP thing, and still less anything specifically related to themes and templates.

    The mods would probably (and rightly IMO) not be too happy if I started giving PHP/HTML tutorials over the forum.

    My strategy if I were in your position would be to install a test installation of WP locally, and then decide on the HTML that you want to output at the position of the function call. Then I’d make the function call on your test site and echo its returned value using print_r() (probably followed by an exit() call) to check what gets returned. If you then copy the returned output from the function you can ask a PHP forum how they’d convert that (an array of strings) into the HTML you want.

    Sorry I can’t be more constructive.



    Thanks for your advice PAE, I think I’m in over my head!! Back to the drawing board.

    Yeah 🙂

    And it’s worth noting that using images for navigation links isn’t usually a very good idea anyway, for two reasons:

    • It excludes people using screen readers since screen readers can’t read images
    • It excludes search engines (since search engines are, effectively, screen readers)

    So maybe you’ll actually come up with something that’s better anyway.

    Always the optimist…



Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Can I replace the twentyeleven navigation bar with images?’ is closed to new replies.