How To Use WordPress Page Navi With Daisy UI Navigation

In 2023 I revamped my WordPress theme to include Daisy UI. In this article, I will show you how to change the default styles of the popular WordPress Page Navi plugin to use the styles created by Daisy UI without editing the plugin.

The WP-PageNavi WordPress plugin has been around for more than 16 years and it is popular enough that theme developers started to include support for it. It’s been a favourite for users ever since.

Here are some key features and details about WP-PageNavi:

1. Enhanced Navigation: Instead of just having a “previous” and “next” link, this plugin allows users to see more page numbers at once, similar to how Google’s search result pages have a navigation system.
2. Customisable: The plugin offers various settings and customization options, so you can decide how many pages you want to display at once, whether to show the first and last page links and more.
3. Integration: To use WP-PageNavi, you would typically need to replace WordPress’s default previous_posts_link() and next_posts_link() functions in your theme with the plugin’s wp_pagenavi() function.
4. Styling: The plugin often comes with default styles, but it’s common for developers to override these styles to match their site design.
5. Compatibility: While the plugin is updated periodically, it’s always a good idea to ensure that the version you’re installing is compatible with your version of WordPress.

Prerequisites

Please note: This has been tested on a traditional classic theme build. I do not recommend implementing this on your production/live version of WordPress.

If you want to experiment I recommend Local, by Flywheel. Local is a cross-platform WordPress development environment. You can either download your current theme or use a starter theme. I’m a big fan of Blank Slate. I also used Node and installed Tailwind Mix to compile the necessary CSS.

To get started with Tailwind Mix you may find Build an Awesome Daisy UI WordPress Theme – Part 1 useful. You will also need the page-navi plugin installed.

Disable Page Navi CSS

To disable the CSS go to the WordPress dashboard and click on Settings -> Page-Navi. Go to the section Page-navigation options and select No in Use pagenavi-css.css.

Below is a screenshot of my current settings for the plugin which works for me. I recommend using these options and testing others to get the correct format you need.

Adding to WordPress

To use Daisy UI you need to use WordPress filters to change the CSS classes. Daisy uses several other components including joins and buttons to create the pagination. Take a look at Daisy UI’s pagination page for more details.

Add the following to functions.php

/********
 * Change page-navi css classes
 * */
add_filter('wp_pagenavi_class_previouspostslink', 'theme_pagination_class');
add_filter('wp_pagenavi_class_nextpostslink', 'theme_pagination_class');
add_filter('wp_pagenavi_class_page', 'theme_pagination_class');
add_filter('wp_pagenavi_class_extend', 'theme_pagination_class');
add_filter('wp_pagenavi_class_current', 'theme_pagination_class');
add_filter('wp_pagenavi_wrapper_class', 'theme_pagination_class');

function theme_pagination_class($class_name)
{
    switch ($class_name) {
        case 'previouspostslink':
            $class_name = 'join-item btn btn-outline';
            break;
        case 'nextpostslink':
            $class_name = 'join-item btn btn-outline';
            break;
        case 'page':
            $class_name = 'btn join-item';
            break;
        case 'extend':
            $class_name = 'join-item btn btn-disabled';
            break;
        case 'current':
            $class_name = 'btn btn-active';
            break;
        case 'wrapper_class':
            $class_name = 'join';
    }

    return $class_name;
}

Here is a list of all the classes available.

• pages
• first
• previouspostslink
• extend
• smaller
• page
• current
• larger
• nextpostslink
• last
• wrapper_class

Other Options

If you don’t want to install a local development environment you have a few options. However, it also depends on your colour theme and your patience. You could use the Daisy UI theme customiser to create a theme similar to your current one.

You can then use a Tailwind playground to extract the generated CSS. If this method is used there will likely be more code than is needed and don’t forget to extract the CSS variables from the bottom of the base section and the component. See my example on Tailwind Play for reference.

Another option is to strip the CSS variables and manually assign your colours to the specific classes. Whatever you you choose it’s entirely up to you.

Conclusion

If you have found a better alternative to do this, or used another CSS framework or even rolled your own I would love to hear your thoughts.

Sources

Github – wp-pagenavi