-2

Whats the most simple way to change my wp-menu generated output from <li><a href="">nav link</a></li> to <a href=""><li><li/></a>? Do I create an array in my functions.php?

This is what I have in my functions.php

function register_my_menus() {
    register_nav_menus(
        array(
            'primary' => __( 'Main Menu' ),
            'mobile-menu' => __( 'Mobile Menu' ),
        )
    );
}
add_action( 'init', 'register_my_menus' );
1

I don't recommend having anything in-between a ul and li.

If you make the anchor tag display:block that fills the list, the whole list tag will be clickable. So dont put any height, width, or padding on the list and manage it all instead with the anchor.

a {
     display: block;
     width: 100%;
}
  • Cool tip, thank you! – Bartosz Was May 14 at 11:29
0

I really just wanted to make the WHOLE <li> linkable and I achieved that ( simply ) by getting rid of padding on menu li and adding it and display:block to menu li a

  • This is the correct way to do it. You should never wrap a block-level element in an inline element. – Kenneth Odle Apr 29 '17 at 0:43
  • In all fairness, "I really just wanted to make the WHOLE <li> linkable" is the question you should have asked. Always ask for the end goal, not the intermediate target. – Kenneth Odle Apr 29 '17 at 0:45
-1

use "T5_Nav_Menu_Walker_Simple" custom walker to modify markup of Wp_nav_menu:

<?php # -*- coding: utf-8 -*-
/**
 * Create a nav menu with very basic markup.
 *
 * @author Thomas Scholz http://toscho.de
 * @version 1.0
 */
class T5_Nav_Menu_Walker_Simple extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array $args    Additional strings.
     * @return void
     */
    public function start_el( &$output, $item, $depth, $args )
    {
        $output     .= '<li>';
        $attributes  = '';
        ! empty ( $item->attr_title )
            // Avoid redundant titles
            and $item->attr_title !== $item->title
            and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';
        ! empty ( $item->url )
            and $attributes .= ' href="' . esc_attr( $item->url ) .'"';
        $attributes  = trim( $attributes );
        $title       = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = "$args->before<a $attributes>$args->link_before$title</a>"
                        . "$args->link_after$args->after";
        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
            ,   $item_output
            ,   $item
            ,   $depth
            ,   $args
        );
    }
    /**
     * @see Walker::start_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function start_lvl( &$output )
    {
        $output .= '<ul class="sub-menu">';
    }
    /**
     * @see Walker::end_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function end_lvl( &$output )
    {
        $output .= '</ul>';
    }
    /**
     * @see Walker::end_el()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    function end_el( &$output )
    {
        $output .= '</li>';
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.