How to get Menu Navigation Labels to output HTML

Question

I'm trying to follow Jason Bradley's advice on how to style my Wordpress menus.

Specifically, I want to insert an icon before my navigation items using Font-Awesome.

I tried putting this code in the Navigation Label field for my "Home" link:

<i class="icon-fixed-width icon-home"></i> Home

However, when I view the page in my browser, it displays the HTML verbatim, it doesn't interpret the tag, or any other HTML I throw at it, for that matter.

Did Wordpress Menus change in 3.6? Am I missing something obvious?

I know that my font-awesome installation works because I am using their icons all over my site. Thanks.

Answer 1

The "Navigation" field is not where you want to place your CSS class. The navigation is what the user will see in the menu, so don't put any code there.

To enter a custom CSS class to your item, you need to do the following:

• Click the "Screen Options" tab in the top right corner of the page.
• Under "Show advanced menu properties", tick the "CSS Classes" checkbox.
• Now for every menu item, you have a field labelled "CSS Classes (optional)" where you can enter "icon-fixed-width icon-home".

Job done! :)

Answer 2

Get custom navigation title using page id:

function get_custom_nav_title( $menu_name, $page_id ) { 
    $args = array(
        'order'                  => 'ASC',
        'orderby'                => 'menu_order',
        'post_type'              => 'nav_menu_item',
        'post_status'            => 'publish',
        'output'                 => ARRAY_A,
        'output_key'             => 'menu_order',
        'nopaging'               => true,
        'update_post_term_cache' => false 
    );
    $items = wp_get_nav_menu_items( $menu_name, $args );
    //print_r( $items );
    foreach ( $items as $item ) {
        if ( $item->object_id == $page_id ) {
            return $item->title;
        }
    }   
}