Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I've just started learning to code WP themes pretty much from scratch and I'm trying to figure out how to pass a variable thru a customized Walker_Nav_Menu but without any ascii spaces.

The goal is to create an ouput like this:

<nav>
    <div id="currentSection"></div>

    <a id="homepageBtn" title="Homepage" href="#">Menu 1</a>
    <a id="contactBtn" title="Contact Me" href="#">Menu 2</a>
</nav>

This pulls the 'Menu 1', 'Menu 2' text from the name of the menu, the title from the Menu description which displays on a second line below using a nifty little bit of CSS I wrote

a,a:after{content: ' ' attr(title);text-decoration:none;color:rgb(115,115,115);}

And the id also comes from the title and I just slap 'Btn' on the end.. this is for some javascript I'm doing.

So far I've gotten it almost there, except, as expected, the id is outputting as

id="Contact MeBtn"

Here's my walker:

class Menu_With_Description extends Walker_Nav_Menu {
function __construct() {
    add_filter( 'wp_nav_menu_args', array( __CLASS__, 'items_wrap' ) );
}

static function items_wrap( $args ) {
    $args['container'] = '';
    $args['items_wrap'] = '<nav>
                            <div id="currentSection"></div>
                            %3$s</nav>';
    $args['fallback_cb'] = '__return_false';
    return $args;
}

function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<div class=\"sub-menu\">\n";
}

function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\t", $depth);
    $output .= "$indent</div>\n";
}

function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
    $class_names = $value = '';
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;
    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
    //$attributes .= $id . $value . $class_names;
    $attributes .= $value;
    $item_output = ! empty( $args->before ) ? $args->before : '';
    $item_output .= '<a id="' . $item->description . 'Btn"'. $attributes . 'title="' . $item->description . '">';
    $item_output .= ! empty( $args->links_before ) ? $args->links_before : '';
    $item_output .= apply_filters( 'the_title', $item->title );
    $item_output .= ! empty( $args->links_after ) ? $args->links_after : '';
    $item_output .= '</a>';
    $item_output .= ! empty( $args->after ) ? $args->after : '';
    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}

function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "\n";
}
}

I'm sure this is probably written far from perfect, as I mentioned I just started.. I'm just happy that it's producing the output I'm looking for. But off topic constructive critique is also appreciated. Thanks.

share|improve this question
4  
trim($item->description)-- while you are dealing with a WordPress class, I don't think this is WordPress specific. –  s_ha_dum Feb 2 at 20:21

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.