Build an Awesome Daisy UI WordPress Theme – Part 1

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 this multipart tutorial, we will show you first how to set up your environment to build an awesome Daisy UI WordPress theme.

• Part 1 – Setting Up – You are here
• Part 2 – Adding Nav, Footer

Prerequisites

Some familiarity and knowledge of the command line, PHP and the WordPress API is recommended but not essential. Please note that I will be using a Mac for this tutorial so it may be slightly different for Windows or Linux users.

Setting up a Local Development Server

Set up a local WordPress environment on your computer with Local by Flywheel. Follow the on-screen instructions to create a new WordPress installation and start the server.

Download Local

Download a Starter Theme

For this, I use the blank slate. Unzip the file and place the theme in the wp-content folder. Go to the WordPress Admin Dashboard and select Appearance -> Themes to activate the blank slate theme. We are now ready to start editing the theme.

If you need some content you can download an XML theme test data file. You can import it by going to the Admin Dashboard -> Tools -> Import and from here you can install and run the WordPress importer.

Install a Code Editor

I will be using Visual Studio Code for this tutorial. I have created a profile with a range of extensions that have been used. If you already have a favourite editor you can skip this step.

Download VSCode

Install Node

Install Node Server on your computer. I am using a Mac so I use Homebrew to install it. If you are using Windows you can install it several ways. By downloading it from the Node JS homepage or through Chocolatey, a Homebrew alternative for Windows. Linux users can use their built-in package manager to download.

I also recommend NVM which is a Node Version Manager where you can easily install new versions of Node from the command line.

Check that you have Node installed by entering node -v and which node in the command line. Once set up, open the theme inside your code editor. We are now ready to install our scripts to help with the development.

Install Laravel Mix

Make sure you are in the theme directory in your code editor. I use the built-in terminal inside of VS Code.

npm init -y
npm install laravel-mix --save-dev

Create an empty mix configuration file.

touch webpack.mix.js

You should now have the following files and folders in the root of your theme.

• node_modules/
• package.json
• webpack.mix.js

Open the webpack.mix.js file in your code editor and add the following:

let mix = require("laravel-mix");
let path = require("path");

mix.setPublicPath(path.resolve("./"));
mix.js("assets/dev/js/app.js", "assets/js/app.js");
mix.postCss("assets/dev/css/index.css", "assets/css/styles.css", [require("tailwindcss")]);
mix.options({
 purge: {
  options: {
   safelist: [/data-theme$/]
  },
 },
});

mix.version();

Currently, we don’t have the assets folder setup to hold our CSS files and JavaScript so we will do that now. I like using a dev folder for all the development files, processing them into standalone CSS and JS folders to use with the theme.

Here is a one-liner to create your directory structure in the terminal.

mkdir -p {assets/dev/js,assets/dev/css,assets/css,assets/js}

Here is another one-liner to create the files to go inside of them.

touch {assets/dev/js/app.js,assets/js/app.js,assets/dev/css/index.css,assets/css/styles.css}

In package.json let’s add the scripts to run Laravel mix. This may already be added. It should look a little like this.

{
 "name": "wow-daisyui",
 "version": "1.0.0",
 "description": "=== BlankSlate ===",
 "main": "index.js",
 "scripts": {
  "development": "mix",
  "watch": "mix watch",
  "watch-poll": "mix watch -- --watch-options-poll=1000",
  "hot": "mix watch --hot",
  "production": "mix --production"
 },
 "keywords": [],
 "author": "",
 "license": "ISC",
 "devDependencies": {
  "laravel-mix": "^6.0.49",
  "postcss": "^8.4.28",
 }
}

Setup Our Theme to Use our CSS and JS Files

We need to tell our WordPress installation to use the files we have just created. Go to functions.php and search for blankslate_enqueue(). Inside of this function underneath the opening { we need to add the following.

 wp_enqueue_style('style', get_template_directory_uri().'/assets/css/styles.css');
 wp_enqueue_script('index', get_template_directory_uri().'/assets/js/app.js', '', false, true);

Here you can disable the built-in styles by putting // in front of wp_enqueue_style(‘blankslate-style’, get_stylesheet_uri());

The function should look like this now.

add_action('wp_enqueue_scripts', 'blankslate_enqueue');
function blankslate_enqueue()
{
    wp_enqueue_style('style', get_template_directory_uri().'/assets/css/styles.css');
    wp_enqueue_script('index', get_template_directory_uri().'/assets/js/app.js', '', false, true);
//    wp_enqueue_style('blankslate-style', get_stylesheet_uri());
    wp_enqueue_script('jquery');
}

Install Tailwind and Daisy UI

Now we have to install Tailwind and Daisy UI. Enter the following in the terminal:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

Let us edit the Tailwind configuration file to process PHP and JS files. Add the following to tailwind.config.js.

/** @type {import('tailwindcss').Config} */module.exports = {
  content: ["./*.php", "./*/*.php", "./*/*/*.php", "./assets/dev/js/*.js"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Navigate to the assets/dev/css folder. Open the CSS file called index.css in your editor and add the following Tailwind directives.

@tailwind base;
@tailwind components;
@tailwind utilities;

Before installing Daisy UI we can test that Tailwind is working correctly. Open up page.php and you see the <h1> HTML element.

<h1 class="entry-title" itemprop="name"><?php the_title(); ?></h1> <?php edit_post_link(); ?>

Change it to

<h1 class="text-3xl font-bold" itemprop="name"><?php the_title(); ?></h1> <?php edit_post_link(); ?>

Run Laravel Mix

In your terminal enter the following.

npx mix

Alternatively, You may have a section in your sidebar that shows a list of your scripts.

You can also click on watch and it will recompile when you make any file changes. However, this is buggy for me as I have my files uploaded to iCloud.

You should get a message saying that webpack has compiled successfully and an output of the files and their sizes. If you look at your WordPress site it will look like a blank state.

Install Daisy UI

Enter the following in the terminal.

npm i -D daisyui@latest

Update webpack.mix.js to include Daisy.

/** @type {import('tailwindcss').Config} */module.exports = {
  content: ["./*.php", "./*/*.php", "./*/*/*.php", "./assets/dev/js/*.js"],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

If you run npx mix once more and check out your WordPress site you will see that it now uses the default Daisy theme. Check out the code on GitHub.

Conclusion – Daisy UI WordPress Theme

We now have our basic theme installed on a local development server. Over this multipart series, we will add a navigation and a footer to create our own Daisy theme. Check it out soon. In the meantime, if you have any questions please feel free to ask.