Let's take a closer look on how you can build your own custom theme. If you're totally new to Wordpress theme development, you might have a rocky road ahead. I also assume that you know how to setup your own local development environment, and will skip straight to the good part.
Using a starter theme saves some precious time as we get the basic skeleton ready. We're going to use Sage starter theme by Roots. It comes with a lot of nice features for development, although it lacks a few things that you might want it to have, like woocommerce support, for example. It does not pass the WP theme check out of the box either; so, if you wish to add your theme to wordpress.org, prepare to do some hacking.
With starter theme you aren't usually creating a child theme as the theme will be specially created for the specific project. Of course you can but you really don't especially when you're using a theme like Sage. If you think that building a custom theme is not for you, checkout my post about Buying premium Wordpress theme.
I'm working on a Mac, I hope you are as too.
Open the terminal and navigate to the themes folder. If you're new to terminal, don't worry. There aren't too many commands we need to use. To navigate in terminal, use
cd path-where-to-go the desired directory, `cd .. to return and just cd to go back home.
To install the latest version, clone the repo from Github with
git clone https://github.com/roots/sage.git to your theme directory. If you wish to rename the folder, use
git clone https://github.com/roots/sage.git my-awesome-theme-folder-name.
To install a specific version of Sage, you can use Composer, which is a tool for depency management in PHP. If you don't have composer installed, click here. I'm currently using the version 8.4.1. To install the same version, write the command
composer create-project roots/sage your-theme-name 8.4.1 in your theme directory.
To install theme depencies, navigate to your new theme folder (
cd your-theme) and run
If this command is not familiar to you, you most likely wont have Node & npm installed.
Install Node. First, we install Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)". Then, install node using
email@example.com. We install version v0.12.*, as that works well with our project. Once this is done, run the
npm install as mentioned before.
As assumed, you have your own development environment already running locally. To get started with Sage, open the file
your-theme-name/assets/manifest.json and change the devUrl to yours. If you don't have Gulp isntalled, install Gulp, run
npm install --global gulp-cli. Also, it might be useful to check this out Gulp for beginners.
Start developing using
gulp watch. Use
gulp --production to compile the production version and
gulp clean or just `gulp´ to clean the production version.
Sage is a very popular starter theme and there is a lot of websites build with Sage. Checkout the portfolio here
If you need more help in the actual development phase, feel free to message me @Juutti on Twitter. I might also write part 2 in the future.