Creating your own WordPress theme is more simple than you think. In this first instalment of a multi-post guide I’ll be going through the basics of getting WordPress up and running locally with a fresh base theme.
Who is this post for?
Maybe you’re still in School, College or University and have dabbled in web development but are fairly new to WordPress. Maybe you’ve tinkered with some default themes but got lost in a sea of functions. Maybe you’re a hobbyist who wants to know more. This post is for you.
You know HTML, CSS, jQuery and are familiar with WordPress and PHP. You have successfully worked with off-the-shelf themes but you’ve never got your hands dirty with WordPress theming directly. This post is also for you.
The Web Designer
You’re predominantly a designer, you spend most of your day in Photoshop or Sketch. You understand the web and the power of WordPress but you don’t know where to start. This post is for you too.
Where to begin, setting up a base theme
I have used so many skeleton and base themes in my time that I have lost count. Many have grown old with time and have never been updated. The most reliable one I have found to date is _s also known as underscores. This is an open source project with lots of contributers, powered by the very people that created WordPress (Automattic) – so I really hope its going to stay around.
Head over to underscores.me and you’ll see a lovely panel like this:
Open up the advanced part and fill out all the details.
- Theme Name: The Name of your Theme, keep it simple to one or two words
- Theme Slug: This is the folder name where the theme will be saved into, no spaces, no capitalisation
- Author: Your name or your company name
- Author URI: Your website or company website
- Description: Keep it under 10 words
If you’re familiar with SASS, you can sassify the files with saves out a bunch of lovely SCSS files to get you started.
If you have no idea what SASS is – that’s fine, don’t tick that option and you can stick with plain CSS.
Setting up a local environment
Now that you’ve downloaded your base theme, you’re going to want to put it somewhere and get it up and running!
However, if the setup is too confusing, let me know and I’ll write another specific post for getting setup with MAMP and WAMP
Assuming MAMP is all setup, there are still a few steps you’re going to need to do to get WordPress up and running locally.
Firstly, go grab a copy of WordPress from wordpress.org/latest.zip
Download that to your local hard drive, then unzip.
Move that zip over to a sensible location on your hard drive. I source control everything so I put it directly into my GitLocal folder. You may want to drop this in a Dropbox or Google Drive controlled folder.
Move your base theme, making sure it is unzipped into your WordPress folder and drop it into the
Now that’s done, open MAMP from your Applications menu.
Click Preferences in MAMP.
Then go to the Web Server tab.
Then choose the little folder with dots in it and point it to your newly created folder with all of the WordPress files in there.
If you now go to http://localhost:8888/, which is the default WordPress URL when running MAMP, you will see a local version of your WordPress web server with one major problem, it isn’t working.
No problem, we’ve got some more steps to complete before you’re all set up.
First we’ll create a database and then we’ll connect WordPress to it.
Go to your web browser, MAMP should have opened a new tab in your web browser when you launched it that looks like this:
If you don’t see it, go back to MAMP and click “Open WebStart page”.
To create a database go to Tools > phpMyAdmin.
You’ll now have access to your databases through your web browser.
Click the Databases tab, add a database name in and click “Create”.
Now go to the folder you stored all the WordPress files in an rename the
wp-config-example.php file to
wp-config.php. There is a way to do this via the browser, but I think that being familiar with the wp-config.php file at this stage is more useful (and quicker).
Open up the
On lines 23 to 29 you’ll see…
define('DB_NAME', 'database_name_here'); /** MySQL database username */ define('DB_USER', 'username_here'); /** MySQL database password */ define('DB_PASSWORD', 'password_here');
database_name_here with the database name you added above e.g.
Now save the file.
You will now see the standard WordPress setup screen:
Follow the steps to setup your username/password and then login.
Navigate to Appearance > Themes and Activate your base theme.
In your browser revisit or refresh http://localhost:8888/ and you’ll see your base theme running.
More next week
Next week I’ll be going through the WordPress hierarchy, files you need and best practices for your functions.php file.
So if you’re not signed up already, sign up now to be the first to hear.