--- title: 'Build an Awesome Daisy UI WordPress Theme - Part 4' url: 'https://www.worldoweb.co.uk/2024/awesome-daisy-ui-wordpress-theme-part-4' markdown: 'https://www.worldoweb.co.uk/2024/awesome-daisy-ui-wordpress-theme-part-4.md' date: '2024-08-09' description: 'Welcome to Building an Awesome Daisy UI WordPress Theme – Part 4. Daisy UI is an impressive selection of Tailwind components to build your next WordPress classic theme. You can have your custom theme up and running within a few weeks. In the first part of the series, we set up the environment to build an awesome Daisy UI WordPress theme and added a basic layout, footer, and navigation in the second part. The third part made it more mobile-friendly, tidied the search form and added a sidebar. The fourth and final part tidies the post meta and adds single post navigation, comments and page navigation. Part' taxonomy: category: - 'Web Development' - WordPress tag: - PHP - Tutorial - CSS - Tailwind - 'Daisy UI' --- # Build an Awesome Daisy UI WordPress Theme - Part 4 Published on August 9, 2024 by Tracy Ridge in [Web Development](https://www.worldoweb.co.uk/category/category:Web%20Development) [WordPress](https://www.worldoweb.co.uk/category/category:WordPress) Welcome to Building an Awesome Daisy UI WordPress Theme – Part 4. Daisy UI is an impressive selection of Tailwind components to build your next WordPress classic theme. You can have your custom theme up and running within a few weeks. In the first part of the series, we set up the environment to build an awesome Daisy UI WordPress theme and added a basic layout, footer, and navigation in the second part. The third part made it more mobile-friendly, tidied the search form and added a sidebar. The fourth and final part tidies the post meta and adds single post navigation, comments and page navigation. - [Part 1 – Setting Up](https://www.worldoweb.co.uk/2023/awesome-daisy-ui-wordpress-theme-part-1) - [Part 2 – Adding Nav, Footer ](https://www.worldoweb.co.uk/2023/awesome-daisy-ui-wordpress-theme-part-2) - [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 – You are here ## Dependency Changes Since the previous parts were published there have been many changes to the infrastructure. Node has been updated, using NVM, to 22.4.1. 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 4 of the repository on github](https://github.com/ridgey28/wow-daisyui/tree/part-4). ```bash npx npm-check-updates -u ``` Followed by: ```bash npm install ``` ## Single Next & Previous Post Navigation The single post navigation uses the [Daisy UI divider component](https://daisyui.com/components/divider/) which automatically stacks on top of each other if on a smaller screen. To make changes you can find the **slate\_single\_navigation** function in the **inc/custom-functions.php**. It is called in **template-parts/navigation/nav-below-single.php**. Next Previous Post Navigation on a larger screen. ![Next/Previous Post Navigation on larger screen](https://www.worldoweb.co.uk/user/pages/2024/awesome-daisy-ui-wordpress-theme-part-4/Next-Previous-post-navigation.png) Next Previous Post Navigation on a smaller screen. ![Next/Previous Post Navigation on small screen](https://www.worldoweb.co.uk/user/pages/2024/awesome-daisy-ui-wordpress-theme-part-4/Next-Previous-post-navigation-small.png) ## Post Navigation The post navigation uses the WP-PageNavi plugin alongside the [Daisy UI pagination component](https://daisyui.com/components/pagination/). If not using the plugin it defaults to default pagination. To tweak the WP-PageNavi go to theme\_pagination\_class in the **inc/custom-functions.php**. It is called in **template-parts/navigation/nav-below.php**. You can find the recommended settings for WP-PageNavi in the [How To Use WordPress Page Navi With Daisy UI Navigation](https://www.worldoweb.co.uk/2024/how-to-wordpress-page-navi-daisy-ui-nav) article. ![Page Navigation using WP-PageNavi](https://www.worldoweb.co.uk/user/pages/2024/awesome-daisy-ui-wordpress-theme-part-4/page-navigation.png) ## Comments Instead of using the default comments I have added a comment walker class which is loaded from **comments.php**. This is styled using Tailwind CSS and has added SVG icons to give it a little more style. You can find the layout of the comments in **inc/class-slate-comment-walker.php**. ![Displayed comments](https://www.worldoweb.co.uk/user/pages/2024/awesome-daisy-ui-wordpress-theme-part-4/comments.png)Comments These are the settings used to display comments. You can find these in the admin section in **Settings->Discussion** ![Comment Settings page](https://www.worldoweb.co.uk/user/pages/2024/awesome-daisy-ui-wordpress-theme-part-4/comment-settings.png)Comment Settings The HTML comment form uses the following components. These can be changed in the comments.php. - [Text Input](https://daisyui.com/components/input/) - [Textarea](https://daisyui.com/components/textarea/) - [Button](https://daisyui.com/components/button/) ![Comment form](https://www.worldoweb.co.uk/user/pages/2024/awesome-daisy-ui-wordpress-theme-part-4/comment-form.png) ### How it Looks ![a screenshot of the current Daisy UI WordPress Theme - Part 4](https://www.worldoweb.co.uk/user/pages/2024/awesome-daisy-ui-wordpress-theme-part-4/wow-daisy-ui-final-look.png) ## Other Changes In general, the file and folder structure has been tidied up by adding all template parts into a single folder. The post-meta has been given a lift to separate it from the main content. This uses the [Daisy UI badge component](https://daisyui.com/components/badge/) and can be changed in **template-parts/entry/entry-meta.php**. This theme comes without any additional JavaScript. To reflect this I have disabled the app.js file from loading. This can be undone by removing the comments in the **functions.php** file. ![Post Meta](https://www.worldoweb.co.uk/user/pages/2024/awesome-daisy-ui-wordpress-theme-part-4/post-meta.png) ## Conclusion – Daisy UI WordPress Theme – Part 4 This concludes building an awesome Daisy UI WordPress theme. 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%204&url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2024%2Fawesome-daisy-ui-wordpress-theme-part-4&via=worldoweb "Share on X") [Facebook](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fwww.worldoweb.co.uk%2F2024%2Fawesome-daisy-ui-wordpress-theme-part-4 "Share on Facebook") [Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2024%2Fawesome-daisy-ui-wordpress-theme-part-4&title=Build%20an%20Awesome%20Daisy%20UI%20WordPress%20Theme%20-%20Part%204 "Share on Reddit") [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.worldoweb.co.uk%2F2024%2Fawesome-daisy-ui-wordpress-theme-part-4 "Share on LinkedIn") [Bluesky](https://bsky.app/intent/compose?text=Build%20an%20Awesome%20Daisy%20UI%20WordPress%20Theme%20-%20Part%204%20https%3A%2F%2Fwww.worldoweb.co.uk%2F2024%2Fawesome-daisy-ui-wordpress-theme-part-4 "Share on Bluesky") [Email](mailto:?subject=Build%20an%20Awesome%20Daisy%20UI%20WordPress%20Theme%20-%20Part%204&body=https%3A%2F%2Fwww.worldoweb.co.uk%2F2024%2Fawesome-daisy-ui-wordpress-theme-part-4 "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 - August 2024 ](https://www.worldoweb.co.uk/2024/hot-new-web-dev-august-2024) OR ##### Previous [ Hot New Web Dev - July 2024 → ](https://www.worldoweb.co.uk/2024/hot-new-web-dev-july-2024) --- ## Navigation - Previous: [Hot New Web Dev - August 2024](https://www.worldoweb.co.uk/2024/hot-new-web-dev-august-2024.md) - Next: [Hot New Web Dev - July 2024](https://www.worldoweb.co.uk/2024/hot-new-web-dev-july-2024.md)