---
title: 'Build an Awesome Daisy UI WordPress Theme - Part 2'
url: 'https://www.worldoweb.co.uk/2023/awesome-daisy-ui-wordpress-theme-part-2'
markdown: 'https://www.worldoweb.co.uk/2023/awesome-daisy-ui-wordpress-theme-part-2.md'
date: '2023-11-25'
description: 'Learn how to add navigation and footer to your Daisy UI WordPress theme in this step-by-step tutorial. In this second part, we will build the basic layout, navigation and footer for our theme.'
taxonomy:
  category:
    - 'Web Development'
    - WordPress
  tag:
    - PHP
    - Tutorial
    - CSS
    - Tailwind
    - 'Daisy UI'
---

# Build an Awesome Daisy UI WordPress Theme - Part 2

 Published on November 25, 2023 by Tracy Ridge in  [Web Development](https://www.worldoweb.co.uk/category/category:Web%20Development) 

 [WordPress](https://www.worldoweb.co.uk/category/category:WordPress) 

Daisy UI is an awesome selection of Tailwind components for your next WordPress classic theme. You can have your custom theme up and running within a few weeks. In the [first part](https://www.worldoweb.co.uk/2023/awesome-daisy-ui-wordpress-theme-part-1) of the series, we set up the environment to build an awesome Daisy UI WordPress theme. This part features building the basic layout, navigation and footer.

- [Part 1 – Setting Up](https://www.worldoweb.co.uk/2023/awesome-daisy-ui-wordpress-theme-part-1)
- Part 2 – Adding Nav, Footer – You are here
- [Part 3 – Mobile Friendly Navigation, Widgets](https://www.worldoweb.co.uk/2024/awesome-daisy-ui-wordpress-theme-part-3)
- [Part 4 – Post navigation, comments and Post Meta](https://www.worldoweb.co.uk/2024/awesome-daisy-ui-wordpress-theme-part-4)

![The layout before changes](https://www.worldoweb.co.uk/user/pages/2023/awesome-daisy-ui-wordpress-theme-part-2/Layout-Before.png)The layout before making any changes.

## Dependency Changes

Since the first part, there have been many changes to the infrastructure. Node has been updated, using NVM, to 20.10.0. If you have already set up your environment you can use [npm-check-updates](https://github.com/raineorshine/npm-check-updates) to update your dependencies otherwise [clone part 2 of the repository on github](https://github.com/ridgey28/wow-daisyui/tree/part-2). You can find [part 1 here](https://github.com/ridgey28/wow-daisyui).

```bash
npx npm-check-updates -u
```

Followed by:

```bash
npm install
```

## Layout Changes

The main change added is a margin around the content in the wrapper which starts in the header, below the navigation and ends above the footer in footer.php. I opted to use a [simple footer](https://daisyui.com/components/footer/#footer-with-copyright-text?target=_blank) which contains the basic information.

![The footer](https://www.worldoweb.co.uk/user/pages/2023/awesome-daisy-ui-wordpress-theme-part-2/footer.png)Added a simple footer

Managing content inside the individual blog posts and pages can be time-consuming when creating your articles in the post editor. To address this problem there is a Tailwind plugin that automatically includes default styles and sizes for headings, paragraphs, tables and so forth. To install the Typography plugin run the following command in your projects terminal.

```bash
npm install -D @tailwindcss/typography
```

There are many classes that you can use from the [Typography](https://tailwindcss.com/docs/typography-plugin) library. We will simply add the **prose** class to the entry-contents.php file.

```php
<div class="prose" itemprop="mainEntityOfPage">
....
</div>
```

**Other changes made:** The headings in entry.php have been made larger using [Tailwind font sizes](https://tailwindcss.com/docs/font-size#setting-the-font-size).

![The navigation before the changes](https://www.worldoweb.co.uk/user/pages/2023/awesome-daisy-ui-wordpress-theme-part-2/navigation.png)

## How it looked before the changes to the navigation.Navigation

The navigation is the trickiest part of this setup. I have changed the menu to a shorter one in the WordPress dashboard. In **Appearance -> Menus** choose the short menu in the menu section. I have chosen a 3-part navigation with the logo on the left, nav items, including a dropdown in the middle and a search feature at the end. Something similar to [this](https://daisyui.com/components/navbar/#navbar-with-menu-and-submenu?target=_blank&rel=nofollow).

To implement this open **header.php** and add the following:

```php

   <?php get_template_part('inc/class-daisyui-navwalker');?>

    <header id="header" role="banner">
        <div class="navbar bg-base-200">
            <div class="navbar-start" id="site-title" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
                <?php
                            if ( is_front_page() || is_home() || is_front_page() && is_home() ) { echo '<h1>'; }
                            echo '<a href="' . esc_url( home_url( '/' ) ) . '" title="' . esc_attr( get_bloginfo( 'name' ) ) . '" rel="home" itemprop="url"><span class="btn btn-ghost text-xl" itemprop="name">' . esc_html( get_bloginfo( 'name' ) ) . '</span></a>';
                            if ( is_front_page() || is_home() || is_front_page() && is_home() ) { echo '</h1>'; }
                            ?>
                        </div>
                        <nav class="navbar-center" id="menu" role="navigation" itemscope itemtype="https://schema.org/SiteNavigationElement">
                            <?php
                     wp_nav_menu( array('menu_id' => 'navbar-menu',
                     'container'=>false,
                     'theme_location' => 'main-menu',
                     'link_before' => '<span itemprop="name">',
                     'link_after' => '</span>',
                     'items_wrap' => '<ul id="%1$s" class="menu menu-horizontal px-1">%3$s</ul>',
                     'walker' => new Daisyui_NavWalker() ) ); ?>
                </nav>
                <div class="navbar-end" id="search"><?php get_search_form(); ?></div>
            </div>
        </header>
```

To incorporate the Daisy sub-navigation, we have to customise a NavWalker class that walks through each element to build the navigation. In the custom NavWalker class, we search for the menu-item-has-children CSS class and add our custom code. It’s a little bit hacky but it does the job. If you have any suggestions or alternative ways of doing it get in touch. Take a look at [class-daisy-navwalker.php on GitHub](https://github.com/ridgey28/wow-daisyui/blob/part-2/inc/class-daisyui-navwalker.php).

![The navigation after the changes](https://www.worldoweb.co.uk/user/pages/2023/awesome-daisy-ui-wordpress-theme-part-2/navigation-after-changes.png)

The navigation after the changes

## Todo

As you can see many more features need to be added in future parts.

Theme – Default Daisy UI theme Automatic light/dark mode Footer Navigation ~ Search – Not Implemented ~ ~ Mobile friendly ~ ~ Sidebar ~ ~ Next/Previous Post ~ ~ Homepage ~ ~ Post Meta ~ ~ Comments ~

## Conclusion – Daisy UI WordPress Theme Part 2

This concludes part 2 of building an awesome Daisy UI WordPress theme. There are many more changes to be made in the upcoming parts including making our design mobile friendly. Stay tuned! Please feel free to get in touch If you have any questions.

### Share

 [X](https://x.com/intent/tweet?text=Build%20an%20Awesome%20Daisy%20UI%20WordPress%20Theme%20-%20Part%202&url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2023%2Fawesome-daisy-ui-wordpress-theme-part-2&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.worldoweb.co.uk%2F2023%2Fawesome-daisy-ui-wordpress-theme-part-2 "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2023%2Fawesome-daisy-ui-wordpress-theme-part-2&title=Build%20an%20Awesome%20Daisy%20UI%20WordPress%20Theme%20-%20Part%202 "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2023%2Fawesome-daisy-ui-wordpress-theme-part-2 "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Build%20an%20Awesome%20Daisy%20UI%20WordPress%20Theme%20-%20Part%202%20https%3A%2F%2Fwww.worldoweb.co.uk%2F2023%2Fawesome-daisy-ui-wordpress-theme-part-2 "Share on Bluesky") [Email](mailto:?subject=Build%20an%20Awesome%20Daisy%20UI%20WordPress%20Theme%20-%20Part%202&body=https%3A%2F%2Fwww.worldoweb.co.uk%2F2023%2Fawesome-daisy-ui-wordpress-theme-part-2 "Share via email") 

#### Tags

 [ PHP](https://www.worldoweb.co.uk/tag/tag:PHP) [ Tutorial](https://www.worldoweb.co.uk/tag/tag:Tutorial) [ CSS](https://www.worldoweb.co.uk/tag/tag:CSS) [ Tailwind](https://www.worldoweb.co.uk/tag/tag:Tailwind) [ Daisy UI](https://www.worldoweb.co.uk/tag/tag:Daisy%20UI) 

##### Next

 [ ← Hot New Web Dev - November 2023 ](https://www.worldoweb.co.uk/2023/hot-new-web-dev-november-2023) 

OR

##### Previous

 [ 5 Things I Wish I Knew Before Starting Programming → ](https://www.worldoweb.co.uk/2023/programming-things-i-wish-i-knew)

---

## Navigation

- Previous: [Hot New Web Dev - November 2023](https://www.worldoweb.co.uk/2023/hot-new-web-dev-november-2023.md)
- Next: [5 Things I Wish I Knew Before Starting Programming](https://www.worldoweb.co.uk/2023/programming-things-i-wish-i-knew.md)