How do I add HTML to a Wordpress menu?

Question

Say I have MyAccount and MyStats in navigation and I want to wrap a tag around the 'My' text. How would I do this in Wordpress?

e.g MyHouse, MyStreet.

Answer 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:

Answer 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