How to Convert a Static HTML Menu to a Dynamic WordPress Menu with Custom CSS Classes

Creating a dynamic menu in WordPress not only saves time but also allows for easy updates and better flexibility. In this guide, we’ll walk through converting a static HTML menu to a dynamic WordPress menu and styling it using custom CSS classes.

Step 1: Register the Menu in functions.php

The first step is to register the menu locations. This will allow WordPress to recognize where the menus should appear on your site.

1. Open your theme’s functions.php file (wp-content > themes > [your theme folder] > functions.php).
2. Add the following code to register the menu locations:

   // Register Navigation Menus
   function register_navbar(){
       register_nav_menus(array(
           'theme_primary_menu' => 'Primary Menu',
           'theme_footer_menu' => 'Footer Menu',
           'theme_right_sidebar_menu' => 'Right Sidebar Menu'
       ));
   }
   add_action('after_setup_theme', 'register_navbar');

This code defines multiple menu locations, allowing you to manage them directly from the WordPress dashboard.

Step 2: Add the Menu to header.php

Next, integrate the menu into your theme’s header.php file where you want the navigation to appear.

1. Open header.php and replace your static HTML menu code with this dynamic menu code:

   <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
       <div class="container">
           <a class="navbar-brand" href="#!">Start Bootstrap</a>
           <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
               <?php
                   wp_nav_menu(array(
                       'theme_location' => 'theme_primary_menu',  // Specify menu location
                       'container' => 'false',                    // Remove the default container
                       'items_wrap' => '<ul class="navbar-nav ms-auto mb-2 mb-lg-0">%3$s</ul>' // Add Bootstrap classes to <ul>
                   ));
               ?>
           </div>
       </div>
   </nav>

This code dynamically loads the menu you registered as theme_primary_menu and applies Bootstrap classes to the menu list.

Step 3: Add Custom Classes to Menu Items

To style each menu item, you can add classes to the <li> and <a> elements.

1. Go back to functions.php and add these functions to apply custom classes:

   // Add class to <li> elements
   function theme_menu_li_class($classes, $item, $args) {
       $classes['class'] = 'nav-item';
       return $classes;
   }
   add_filter('nav_menu_css_class', 'theme_menu_li_class', 1, 3);

   // Add class to <a> elements
   function theme_menu_anchor_link($attributes, $item, $args) {
       $attributes['class'] = 'nav-link';
       return $attributes;
   }
   add_filter('nav_menu_link_attributes', 'theme_menu_anchor_link', 1, 3);

The theme_menu_li_class function assigns the nav-item class to each <li>, while theme_menu_anchor_link adds the nav-link class to each <a> tag. These classes will style the menu according to Bootstrap’s navbar styles.

Your Dynamic WordPress Menu is Ready!

Now, you have a dynamic WordPress menu with custom classes and Bootstrap styling. You can manage this menu from the WordPress admin area under Appearance > Menus, making it easy to update links and rearrange items without touching code.