Ask your WordPress questions! Pay money and get answers fast! (more info)

Parse html tags for the custom menu titles WordPress

  • SOLVED

Hello,
I need to use some <br /> or span in my menu titles but the tags are displayed without being parsed...

I need a function that allowing the wp nav menu to use html in the title field.

Thanks

Answers (1)

2013-04-22

Dan | gteh answers:

You need a custom walker.


class SH_Arrow_Walker_Nav_Menu extends Walker_Nav_Menu {
function start_lvl(&$output, $depth, $args) {
$indent = str_repeat("\t", $depth);
if('primary' == $args->theme_location && $depth ==0){
$output .='<span class="arrow"></span>';
}
$output .= "\n$indent<ul class=\"sub-menu\">\n";
}
}


Then for your menu add it to the args


wp_nav_menu( array(
'theme_location' => 'primary',
'walker'=> new SH_Arrow_Walker_Nav_Menu()
) );


angang comments:

Hi Dan,

Ok it seems that this is the only way. Now my needs refer to parse html tags. So i can add </br> in the title that needs </br>


Dan | gteh comments:

You can use jQuery for that then. Figure out how many characters it is until you need a line break.


jQuery(document).ready(function($) {

var html = $(".menu-item").html();
html = html.substring(0, 4) + "<br>" + html.substring(4);
$(".menu-item").html(html);
});


Figure out how many characters it is and you adjust the number 4 accordingly.


Dan | gteh comments:

You can use jQuery for that then. Figure out how many characters it is until you need a line break.


jQuery(document).ready(function($) {

var html = $(".menu-item").html();
html = html.substring(0, 4) + "<br>" + html.substring(4);
$(".menu-item").html(html);
});


Figure out how many characters it is and you adjust the number 4 accordingly.


Dan | gteh comments:

Sorry, this one:


jQuery(document).ready(function($) {



var html = $(".menu-item li a").html();

html = html.substring(0, 4) + "<br>" + html.substring(4);

$(".menu-item li a").html(html);

});


angang comments:

Dear Dan, your solution is great !

Thank you very much