WordPress

Revamping Worldoweb: A Dive into My New Design with Daisy UI

Shoutout to Daisy UI: If you’ve been away from worldoweb for some time or just chanced upon it, you’re witnessing my brand-new design. Initiated in early August, I set the month-end as my deadline, and in this post, I’ll walk you through the instruments I utilised and weigh in on the merits and pitfalls of the development process.

During my last blog revamp, I intertwined the blank slate WordPress theme with Tailwind – a novel venture for me back then. Juggling student life and a full-time educational job limits my time, relegating blog redesigns to the bottom of my to-do list. However, I committed to this revamp, wrapping it up well before my deadline, which also allowed me some time to spruce up my portfolio and indulge in a little home DIY.

Tools Used

Local by Flywheel – Free-to-use cross-platform software to create local WordPress development environments.
Laravel Mix – A robust bundler anchored in webpack, streamlining the compilation of JavaScript and CSS.
Tailwind & Daisy UI – While my former design exclusively hinged on Tailwind, I ventured into Daisy UI this time. An offshoot of Tailwind, it offers 53 components, as of my last count.

Daisy UI Components in Action

The card component embellishes my homepage and archive sections. The navbar, footer, hero, divider, pagination, button, swap, avatar, join, and a plethora of form elements are also part of my design palette.

Daisy UI hero component on the homepage

Other Noteworthy Mentions

SonarLint stands out as a sterling linting utility for pristine coding. Earning accolades as the “Tool of the Month” in July 2023, it’s been instrumental in helping me navigate the formatting intricacies of both PHP and JavaScript.

The Good and The Bad

Pros: Crafting the theme was swift. I revamped my prior theme, removing redundant div HTML elements. For the first time, I dabbled with CSS Grid, having previously been acquainted with Flexbox. Daisy UI’s intuitive color labels like bg-primary made theming effortless. I even rolled out Dark and Light mode themes, complete with a switch toggle. If ever the design seems stale, a few tweaks in the CSS variables can refresh it.

Cons: My sole qualm is the slightly bloated CSS file. However, the marginal increase in size pales in comparison to the augmented features it brings to the table. On the brighter side, my JavaScript file slimmed down by eliminating redundant functions during this revamp.

Lessons learned

Blending diverse technologies can be a conundrum, especially when debugging PHP errors. To smooth out the process, I roped in a few WordPress plugins for bug detection and template tracking for my pages.

Tips and Tricks

I chose to do a traditional theme and not follow the current trend of the WordPress block editor. WOW 2023 features a custom navigation that functions with WordPress navigation menus. I embarked on using a custom category walker for the search bar in the navbar.

Other tweaks under the hood. I tweaked the popular wp-navi plugin to use classes from Daisy UI and created a custom next and previous post navigation using the divider component. This stripped out a lot of previously used code.

For singular post content, Tailwind Typography came into play, leveraging the prose classes for styling blog content. Several pages still use the block editor, so I molded PHP files into templates ensuring Tailwind styles’ presence in the final CSS file, subsequently migrating this code to the WordPress admin page editor. Here, simple handwritten lists proved invaluable.