How do I add HTML to a WordPress menu?

5 comments

1. If I’m understanding the question correctly, you just want to make the word “My” bold? Take a look at this screen shot, you should be able to post it right into the Nav menu, depending on exactly what you want to add:

   

   Log in to Reply

2. If you are using jQuery you could do something like this in order to wrap the first two letters of each menu item with a <span> element.

   $('li').each(function(){
       $(this).html('<span>'+$(this).text().substring(0,2)+'</span>'+$(this).text().substring(2));
   });
   

   You may need to change the selector, or be more specific in order that you don’t effect all the li‘s on your site.

   Here is a working fiddle – http://jsfiddle.net/dM5sb/

   For a PHP solution if you are currently using wp_nav_menu() you might want to switch over to get_pages() and do something like this.

   <ul>
   
   <?php
   
   $args = array(
   'sort_order' => 'ASC',
   'sort_column' => 'menu_order',
   'hierarchical' => 1,
   'child_of' => 0,
   'parent' => -1,
   'offset' => 0,
   'post_type' => 'page',
   'post_status' => 'publish'
   ); 
   
   $pages = get_pages($args); 
   
   foreach($pages as $page) {
   
       $title = $page->post_title;
       $my = substr($title, 0, 2);
       $the_rest = substr($title, 2);
   
   ?>
   
   <li><a href="<?php echo get_page_link( $page->ID ); ?>"><span><?php echo $my ?></span><?php echo $the_rest?></a></li>
   
   <?php } ?>
   
   </ul>
   

   This is untested, but you can read more about the wordpress get_pages() function here – http://codex.wordpress.org/Function_Reference/get_pages

   Log in to Reply

3. You need to do this by editing your head.php/header.php file most likely. To do this you will need to do one of two things. Either FTP into your server and navigate to

   sitefolder/wp-content/themes/themefolder/header.php 
   

   and find either nav or menu. Alternatively in the back end of wordpress, go to

   appearance->editor 
   

   find the file here and make the necessary changes.

   With this method you will need to hardcode the menu item in. Therefore any changes to page name etc will not be represented. But this is the easiest method to do this.

   Log in to Reply

4. If you want custom navigation names you could simply make a custom menu:

   

   

   

   Log in to Reply

5. This link helped me alot to get what I wanted:
   How do I generate a custom menu/sub-menu system using wp_get_nav_menu_items in wordpress?

   I would put my code in here if getting the code to validate was such a problem.

   Thanks for your answers

   Log in to Reply