Altering html structure and creating custom menus

Question

I'm fairly new to Wordpress and am trying to do something very specific. I am currently using the awesome html5blank to create my custom theme. I am using the native menus for my nav tabs. I am currently using background-image's to make my nav tabs images instead of text but that is posing problems with what I'm trying to achieve w/ css and making it responsive.

I want to be able to add <img> tags( different image for each <li> ) in my <li>'s via HTML.

As far as I've been able to find and read up, I need to create a custom structure in this found in my function.php file?

function html5blank_nav()
{
    wp_nav_menu(
    array(
        'theme_location'  => 'header-menu',
        'menu'            => '',
        'container'       => 'div',
        'container_class' => 'menu-{menu slug}-container',
        'container_id'    => '',
        'menu_class'      => 'menu',
        'menu_id'         => '',
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'before'          => '',
        'after'           => '',
        'link_before'     => '',
        'link_after'      => '',
        'items_wrap'      => '<ul>%3$s</ul>',
        'depth'           => 0,
        'walker'          => ''
        )
    );
}

Please let me know what else I need to provide to make this question make more sense and help you get me on the right track. Thanks in advance.

Answer 1

Given the amount of customization you're looking to make, your best bet may be to integrate a custom Walker function. From the Codex:

For deeper conditional classes, you'll need to use a custom walker function (created in the 'walker' => new Your_Walker_Function argument).

The easiest way to build a new walker function is to copy the default class (Walker_Nav_Menu) from \wp-includes\nav-menu-template.php and simply customize what you need.

Using a custom Walker gives you a wide degree of flexibility and control that the wp_nav_menu() function just doesn't allow for in and of itself. It enables you to not just reformat the output of menu items, but now you're able to run all manner of code during the menu building process.

In a nutshell, what you'd do is:

1. Copy/Paste the code for the Walker_Nav_Menu class from into your theme's functions.php file;
2. Edit the top line to something like class My_HTML5Blank_Walker_Nav_Menu extends Walker_Nav_Menu;
3. Insert all the new code for building image tag references in the start_el public function;
4. Modify the last line of your wp_nav_menu code to point to your new custom Walker, i.e. 'walker' => 'My_HTML5Blank_Walker_Nav_Menu'.

Now, the way you decide to integrate those images is entirely up to you... but check this out: if the menu items are posts/pages/categories, etc. (i.e., not custom/manual links), then using the custom Walker means you can pull in each post/page/term object's metadata and use that to alter the menu output. (In other words, you can set a featured image for a post, then using a custom Walker you can grab the metadata for that post and embed its associated featured image thumbnail!)

Anyway, hopefully I gave you enough to get started here. Let me know if I missed anything (or if there's something confusing here that you'd like me to clear up).

Answer 2

The code I am providing here can be modified to display the custom menu.

My custom structure for menu is like:

<ul class="navigation">
    <li class="active">
        <a href="item1.html">Menu item 1</a>
    </li>
    <li>
        <a href="item2.html">Menu item 2</a>
    </li>

    <li>
        <a href="item3.html">Menu item 3</a>
        <div>
            <a href="subitem1.html">Sub Menu item 1</a>
            <a href="subitem2.html">Sub Menu item 2</a>
        </div>
    </li>

</ul>

So to build such a custom layout for my displaying my menu, I used the code below:

<ul class="navigation">
<?php
$count = 0;
$submenu = false;

foreach( $menuitems as $item ) {
  $link = $item->url;
  $title = $item->title;
  // item does not have a parent so menu_item_parent equals 0 (false)
  if ( !$item->menu_item_parent ) {
      // save this id for later comparison with sub-menu items
      $parent_id = $item->ID;

      if ($getCurrenturl == $link) {
          $activeClass = 'active';
      } else {
          $activeClass = '';
      }
  ?>
      <li class="item <?php echo $activeClass; ?>">
          <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>
  <?php 
  } 

  if ( $parent_id == $item->menu_item_parent ) {
      if ( !$submenu ) {
          $submenu = true; 
  ?>
      <div>
      <?php } ?>

              <a href="<?php echo $link; ?>" class="title"><?php echo $title; ?></a>

      <?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id && $submenu ) { ?>
      </div>
  <?php 
      $submenu = false;  
      }
  }
  ?>

<?php if ( $menuitems[ $count + 1 ]->menu_item_parent != $parent_id ) { ?>
</li>                           
<?php 
  $submenu = false; 
} 
?>

<?php 
$count++; 
} 
?>

</ul>