How to Customise WordPress Menu

Are you struggling with customizing your WordPress menu to fit a specific HTML structure? This blog post will guide you through the process of removing <ul> and <li> wrapping, adding custom classes to anchor (<a>) tags, and implementing an active class for CSS styling. Follow these steps from start to finish to achieve the desired menu structure for your WordPress theme.

Step 1: Register the Menu Location

First, you need to register a menu location in your functions.php file. This allows WordPress to recognize where to place your custom menu.


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

Step 2: Add Theme Support for Menus

Ensure your theme supports menus by adding the following code to your functions.php file:


function theme_setup() {
    add_theme_support('menus');
}
add_action('after_setup_theme', 'theme_setup');
        

Step 3: Create a Custom Walker Class

To customize how WordPress outputs menu items, create a custom walker class. This will help remove the <ul> and <li> tags and add custom classes to the <a> tags.


class Custom_Walker_Nav_Menu extends Walker_Nav_Menu {
    // Start Level
    function start_lvl(&$output, $depth = 0, $args = null) {
        // Do nothing, to avoid <ul>
    }

    // End Level
    function end_lvl(&$output, $depth = 0, $args = null) {
        // Do nothing, to avoid </ul>
    }

    // Start Element
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        $attributes = ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';
        $class_names = 'custom-class'; // Base custom class
        
        // Add active class for the current item
        if ( in_array('current-menu-item', $item->classes) ) {
            $class_names .= ' active';
        }

        $output .= '<a class="' . $class_names . '"' . $attributes . '>';
        $output .= apply_filters( 'the_title', $item->title, $item->ID );
        $output .= '</a>';
    }

// End Element
    function end_el(&$output, $item, $depth = 0, $args = null) {
        // Do nothing, to avoid </li>
    }
}
        

Step 4: Use the Custom Walker in Your Theme

Now, you need to use this custom walker in your theme file (e.g., header.php) to output the menu correctly.


wp_nav_menu(array(
    'theme_location' => 'main-menu', // Updated with your menu location name
    'walker' => new Custom_Walker_Nav_Menu(),
    'container' => false, // To avoid <div> wrapping the menu
    'items_wrap' => '%3$s', // To avoid <ul> wrapping the items
));
        

Step 5: Assign the Menu in WordPress Admin

Make sure the menu is assigned to the "Main Menu" location:

  1. Go to Appearance > Menus in your WordPress admin panel.
  2. Select your menu or create a new one.
  3. Under "Menu Settings," ensure the menu is assigned to the "Main Menu" location.

Step 6: Verify and Test

Clear your browser cache and refresh your website to see the changes. The menu should now display without <ul> and <li> wrapping, with your custom class added to the <a> tags, and the active class applied to the current menu item.

Troubleshooting Tips

  • If the menu is not showing, double-check your code for syntax errors and ensure the menu is correctly assigned to the main-menu location.
  • Use the browser’s developer tools to inspect the HTML output and ensure there are no conflicts with CSS or JavaScript.
  • Enable WordPress debugging to check for any errors by adding the following to your wp-config.php file:
    
    define('WP_DEBUG', true);
    define('WP_DEBUG_LOG', true);
                    

Conclusion

By following these steps, you can customize your WordPress menu to fit your desired HTML structure and styling. This guide helps you take control of the menu output, ensuring it meets your specific design requirements. Happy coding!

34 0

0 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *


You may like to read


Follow Us

Sponsored Ads

GranNino Ads

Newsletter

Subscribe to our Newsletter to read our latest posts at first

We would not spam your inbox! Promise
Get In Touch

© Fullstack Coding Tips. All Rights Reserved.