Part 6: Add Custom CSS and JavaScript

In this article we’ll add custom CSS and JavaScript to your theme. Then we’ll cover using a bundler and minified files for better optimization. You will want to have custom CSS and JavaScript set up for the next part in our guide.

Adding CSS

In Part 1 we created the style.css file with the required header comment. If you were to add CSS here, you would see that your CSS doesn’t work. Open your style.css file and add a different background color to your body. Save and refresh.

/*
Theme Name: Custom
Author: Brandi
Version: 1.0
*/

body {
	background-color: aqua;
}

Nothing happened. We need to enqueue the stylesheet. Create a new file in the root of your theme folder called functions.php. We’ll need to use an action to tell WordPress we’re adding some styles. Paste in the following code:

<?php

/** styles */
function custom_theme_styles() {
	wp_enqueue_style(
		'style', // handle. a unique name
		get_template_directory_uri() . '/style.css', // path to file
		[], // dependencies
		'1.0.0', // version
		'all' // media
	);
}
add_action('wp_enqueue_scripts', 'custom_theme_styles');

The function name needs to be unique. I like to prefix it with the theme’s name, or even a company name. If you change the function name, be sure to update your callback to it on line 13.

The media line (line 10) is nice because you can enqueue more styles specifically for print, screen, all or even media queries such as (max-width:1200px) or (orientation: landscape).

If you save and refresh will see an aqua background. Remove that body CSS and add your own. We don’t need to overwrite the work we’ve done in the theme.json file.

Adding JavaScript

Create a new folder in your theme called js. Inside that folder create a new file and name it theme.js. For now, just add a simple console log to the file and save. console.log('hello world')

Open your functions.php and add the following code to the bottom of the file:

/** scripts */
function custom_theme_scripts() {
	wp_enqueue_script(
		'main',
		get_template_directory_uri() . '/js/theme.js',
		[],
		'1.0.0',
		true
	);
}
add_action('wp_enqueue_scripts', 'custom_theme_scripts');

It follows the same rules as adding styles. On line 8, instead of being a media option, it’s a Boolean that determines if the file should be loaded in the footer. If you save and refresh. You should see your “hello world” on the console window.

Optimizing With Minified CSS & JS

You can set up your theme to use something like Gulp or Grunt if you wish. However I use our Bundler script to automate this for me. It was built by Daniel, my co-author on this website. He built this tool specifically so we don’t have to have a hard-drive full of node_modules folders. It also auto bumps the version of the JS and CSS files in your theme, if you follow its rules.

First install the bundler globally. Run this in your command line: npm i -g https://github.com/danny1461/project-code-bundler.git. You only need to do this once, not per project.

Setup

Now let’s make some minor updates to the functions file so we can take advantage of the version bumper. Why? WordPress caches your stylesheets. It’s a good thing, we want it to do that! However, if you need to fix CSS bugs later, we want people to see your fixes right away. All we need to do is add a PHP comment in very specific places, right before the version number of the 2 functions we’ve created. I’ve updated the functions.php file for you.

<?php

/** styles */
function custom_theme_styles() {
	wp_enqueue_style(
		'style', // handle. a unique name
		get_template_directory_uri() . '/style.css', // path to file
		[], // dependencies
		/* style.css version */ '1.0.1',
		'all' // media
	);
}
add_action('wp_enqueue_scripts', 'custom_theme_styles');

/** scripts */
function custom_theme_scripts() {
	wp_enqueue_script(
		'main',
		get_template_directory_uri() . '/js/theme.min.js',
		[],
		/* js/theme.min.js version */ '1.0.1',
		true
	);
}
add_action('wp_enqueue_scripts', 'custom_theme_scripts');

Please note lines 9 and 21. That tells the bundler exactly where it needs to bump the version. I also updated the path for the JavaScript file to point to the minified file.

Update Styles

Create a new folder in your theme called css and create a new file called style.scss. The name matters. Don’t change it. You can copy everything in your style.css file into the new style.scss file with one change. We need to add an exclamation at the end of line 1 so Bundler knows to keep the comment on the minified version.

/*!
Theme Name: Custom
Author: Brandi
Version: 1.0
*/

Running Bundler

Open a terminal window at the root of your project. If you’re in VSCode you can simply hit Ctrl+~ to open it up. You have some options when running it. You can either get all the notifications by running bundler, or no notification bundler -no-notify.

Now that it’s running, lets test! Hit save on your css/style.scss file. Bundler detects it’s a WordPress site and will create a minified file in place of your original style.css file. WordPress does not accept the name style.min.css, so Bundler does what it needs to.

Open up your js/theme.js and hit save as well. A theme.min.js file will be generated for you.

If you take a look at your functions file, you will notice that the version number has been bumped.

Note: Bundler will also auto optimize any images you upload to the theme. If you don’t want that to happen, be sure to quit Bundler before uploading by hitting Ctrl+c in your terminal window

You are now ready to add your own custom CSS and JavaScript to your project. And it has basic level optimization to boot.