I'm learning Wordpress, but I have a background in vanilla web dev.

Anyways I have learnt how to create a custom HTML structure for a menu. And that's by using the navWalker class (making a custom class that extends the NavWalker class).

So I have created a WalkerMenuObject class (which extends NavWalker). It is loading the custom defined menu on the page. However it is not able to read any of the CSS styles that have been enqued in the functions.php file. As a result, I am not able to use CSS styles on that menu.

My theme folder is setup something like this:

/themeName/
 -header.php
 -functions.php
   /css/
    -main.css
   
   /includes/
    -WalkerMenuObject.php
    -walkerStyles.css (desired file)

My functions.php file does this:

function load_css(){

    wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), false, 'all');
    wp_enqueue_style('bootstrap');

    wp_register_style('main', get_template_directory_uri() . '/css/main.css', array(), false, 'all');
    wp_enqueue_style('main');

    wp_register_style('walkerStyles', get_template_directory_uri() . '/includes/walkerStyles.css', array(), false, 'all');
    wp_enqueue_style('walkerStyles');
}

add_action('wp_enqueue_scripts', 'load_css');

add_theme_support('menus');

function registerNavWalker(){

     wp_register_style('walkerStyles', get_template_directory_uri() . '/includes/walkerStyles.css', array(), false, 'all');
    wp_enqueue_style('walkerStyles');
    
    require "includes/WalkerMenuObject.php";
}

add_action('after_setup_theme', 'registerNavWalker');

As you can see, the functions.php is calling the registerNavWalker function in the after-theme-setup hook. So I'm guessing at this point, it has already loaded all the css files including walkerStyles.css (as defined in the load_css function).

But in my NavWalker file, I have hardcoded in a class name in the tag of the menu. The is properly loading on my page and I can see the menu and the text..but the styles of that as defined in walkerStyles.css AND main.css are not loading.

You can see I have also taken that extra step of trying to register and enqueue walkerStyles within the registerNavWalker function. But wordpress tells me that that is an incorrect way of loading stylesheets because stylesheets are only supposed to be loaded in hooks.

So what is the proper way of doing this? Is there some way I can designate the stylesheet loading within the WalkerMenuObject class itself so that I don't have to worry about it in the functions.php file?

I'm learning Wordpress, but I have a background in vanilla web dev.

Anyways I have learnt how to create a custom HTML structure for a menu. And that's by using the navWalker class (making a custom class that extends the NavWalker class).

So I have created a WalkerMenuObject class (which extends NavWalker). It is loading the custom defined menu on the page. However it is not able to read any of the CSS styles that have been enqued in the functions.php file. As a result, I am not able to use CSS styles on that menu.

My theme folder is setup something like this:

/themeName/
 -header.php
 -functions.php
   /css/
    -main.css
   
   /includes/
    -WalkerMenuObject.php
    -walkerStyles.css (desired file)

My functions.php file does this:

function load_css(){

    wp_register_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), false, 'all');
    wp_enqueue_style('bootstrap');

    wp_register_style('main', get_template_directory_uri() . '/css/main.css', array(), false, 'all');
    wp_enqueue_style('main');

    wp_register_style('walkerStyles', get_template_directory_uri() . '/includes/walkerStyles.css', array(), false, 'all');
    wp_enqueue_style('walkerStyles');
}

add_action('wp_enqueue_scripts', 'load_css');

add_theme_support('menus');

function registerNavWalker(){

     wp_register_style('walkerStyles', get_template_directory_uri() . '/includes/walkerStyles.css', array(), false, 'all');
    wp_enqueue_style('walkerStyles');
    
    require "includes/WalkerMenuObject.php";
}

add_action('after_setup_theme', 'registerNavWalker');

As you can see, the functions.php is calling the registerNavWalker function in the after-theme-setup hook. So I'm guessing at this point, it has already loaded all the css files including walkerStyles.css (as defined in the load_css function).

But in my NavWalker file, I have hardcoded in a class name in the tag of the menu. The is properly loading on my page and I can see the menu and the text..but the styles of that as defined in walkerStyles.css AND main.css are not loading.

You can see I have also taken that extra step of trying to register and enqueue walkerStyles within the registerNavWalker function. But wordpress tells me that that is an incorrect way of loading stylesheets because stylesheets are only supposed to be loaded in hooks.

So what is the proper way of doing this? Is there some way I can designate the stylesheet loading within the WalkerMenuObject class itself so that I don't have to worry about it in the functions.php file?

• plugin-development
• menus
• themes
• css
• walker

• This question is similar to: How to define the HTML structure when registering a menu in Wordpress?. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – mmm Commented Feb 4 at 23:43

1 Answer 1

Walkers don't have associated stylesheets. That's not how they work. You need to load them separately by enqueuing the stylesheet in the wp_enqueue_scripts hook, as you've done in load_css(). The walker class gets used by setting the walker argument of wp_nav_menu() to an instance of the class when you're rendering the menu in a template. Since the class isn't instantiated or used until the menu is rendered it can't enqueue stylesheets in the header.

If the markup of your menu matches what you expect from the walker class, and you can see your stylesheet being loaded by a <link rel="stylesheet" /> tag in the header, then you've done everything correctly. If you're still not getting the result you expect then the problem is likely with your CSS. It's likely that the selector is incorrect, or its specificity is not sufficient to override existing styles.