How to Convert wp_list_pages() to a Custom Styled Menu in WordPress
WordPress provides a variety of built-in functions to display your website's navigation menu, one of which is the wp_list_pages()
function. While this function is a quick and easy way to display a list of pages, it may not always provide the level of customization and control that you need for your website's design and user experience.
In this article, we'll explore how to convert the default wp_list_pages()
function to a custom styled menu, allowing you to have greater control over the appearance and functionality of your website's navigation.
Step 1: Register a Custom Menu
The first step is to register a custom menu in your WordPress theme's functions.php
file. This will enable you to manage and customize your menu from the WordPress admin panel.
// functions.php
register_nav_menus( array(
'primary' => esc_html__( 'Primary', 'custom-ppl' ),
) );
Once you've registered the custom menu, you can go to the Appearance > Menus section in the WordPress admin panel and create your desired menu structure.
Step 2: Display the Custom Menu
Now that you've registered and created your custom menu, you can display it on your website using the wp_nav_menu()
function. This function allows you to pass in various arguments to customize the output of the menu.
// Replace the following code in your template file
<?php wp_list_pages(); ?>
// With this code
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'walker' => new Walker_Nav_Menu_add
) ); ?>
In the above code, we're using the wp_nav_menu()
function to display the custom menu, and we're passing in three key arguments:
'theme_location' => 'primary'
: This tells WordPress to display the menu we registered in the previous step.
'container' => false
: This removes the default <div>
container around the menu.
'walker' => new Walker_Nav_Menu_add
: This is a custom Walker class that we'll define in the next step to handle the menu output.
Step 3: Create a Custom Walker Class
To further customize the output of the menu, we'll create a custom Walker class that extends the default Walker
class provided by WordPress. This class will allow us to control the HTML structure and CSS classes applied to the menu items.
// functions.php
class Walker_Nav_Menu_add extends Walker {
// Your custom Walker class code goes here
}
The code for the Walker_Nav_Menu_add
class is provided in the original question. This class overrides the default behavior of the start_lvl()
, end_lvl()
, start_el()
, and end_el()
methods to generate the desired HTML structure and CSS classes for your menu items.
Styling the Custom Menu
Now that you have the custom menu set up, you can style it using CSS to match the design of your website. You can target the various elements of the menu, such as the parent menu items, dropdown menus, and individual menu items, to achieve the desired look and feel.
Here's an example of some basic CSS styles you can apply:
/* Style the parent menu items */
.nav-link.dropdown-toggle {
font-size: 16px;
font-weight: bold;
color: #333;
padding: 10px 15px;
}
/* Style the dropdown menu */
.dropdown-menu {
background-color: #f5f5f5;
border: none;
border-radius: 0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/* Style the individual menu items */
.dropdown-menu .menu-item a {
font-size: 14px;
color: #555;
padding: 8px 15px;
}
.dropdown-menu .menu-item a:hover {
background-color: #e8e8e8;
color: #333;
}
Remember, this is just a basic example, and you can further customize the styles to match your website's branding and design.
By following these steps, you've successfully converted the default wp_list_pages()
function to a custom styled menu, giving you more control over the appearance and functionality of your website's navigation.
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your website and directly generate recommendations to fix them, ensuring your navigation menu is optimized for user experience and performance.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.