How to Create a Custom WordPress Theme in 3 Minutes
Description
Learn how you can create your very own custom starter theme for WordPress from scratch.
We’ll set up node with SCSS and browser sync for a niceer and more modern developer experience. All in all a great little starter theme for your next WordPress project…
Resources
Transcript
How to create your own custom WordPress theme from scratch...
When starting a new WordPress project, there's thousands of themes to choose from, as well as dozens of different page builders.
But nothing beats a custom theme if you want total control of both your design as well as performance.
To get started, we will open up the folder where WordPress is installed, navigate to wp-content -> themes and create a new folder. We will call our theme “blank”, so that’s what we will name our folder.
Then there's just two files that's needed before we can activate our theme. That's style.css and index.php.
In style.css we can add headers with some basic information about our theme and us as an author, as well as any styles we'd want to add.
In index.php, we'll include header and footer files where we'll add some basic HTML markup as well as call wp_head() and wp_footer(). So that WordPress and plugins can insert any code that they require.
If we now activate our theme and visit the home page, we should see that our beautiful theme is now working but that we still have some work left to do...
For starters, our style.css file isn't being loaded yet so we'll go ahead and create functions.php where we will enqueue our stylesheet. While we’re at it, we will enqueue a JS file as well.
We also want to add a page.php file to display content of pages. We'll do the same for single.php, which shows single blog posts, but with a title as well.
In index.php we will also add a simple loop, since that file is the template file used for archive pages, like a list of blog posts for example.
We'll also want to add a navigation menu to our theme. For that we'll first turn to functions.php to register a nav menu, then we can simply include it in our headers.php file.
Some additional sprinkling of WordPress functions is also needed to allow WordPress to do its magic, such as managing the title tag and dynamically add classes to the body element.
Now we should have all the basic functionality needed for a simple WordPress theme, but let's make the developer experience a bit nicer by adding support for SCSS as well as browser sync.
To do that, we will use Node.js. If you don’t have Node installed on your computer already, we won’t cover how to install it in this video, but I will put a link in the description below…
To set everything up, we will head to the terminal and initialize a Node.js project by running npm init. We can then proceed to install the packages we need.
We will install "node-sass" which compiles SCSS files into css files that a web browser can interpret, "browser-sync" to have content in our web browser refresh automatically whenever a file changes and "concurrently" to do both those things simultaneously by running a single command.
After the installation, we'll define some basic scripts and configuration in our package.json file.
We will then create a style.scss file and copy all our styles from style.css. We will also make sure to add an exclamation mark after the opening tag of our comment containing all the meta data, so that that comment will be included in the CSS output.
We can now take advantage of all the benefits of SCSS in our theme, like partials and importing, a nicer variable syntax, nesting of selectors and more…
We can now also run npm run dev and watch any changes we make take effect immediately.
That's it for this video.
Feel free to download the code from this video, and use it to create your own awesome WordPress theme. Link's in the description below.
Also hit the like button and subscribe to see more quick WordPress videos like this, and I will see you in the next one!