WordPress Theme Development

Over the past few weeks, I’ve received several emails regarding WordPress theme development, how on earth I developed my own theme, and any tips and tricks I have to make theme development a bit easier for the novice web developer. By no means am I a professional web developer, but I do have a background in web design and HTML/CSS, so I thought I’d share with you my step-by-step process for developing my own WordPress theme!

When I first became self-hosted back in June, I was thrilled at the opportunity to have complete creative freedom in regards to how my site looked. Custom colors, custom layouts, custom everything! But, when I started browsing sites to purchase themes, those $50+ price tags scared me off and there was no way that I was going to drop that amount of money on a theme that I probably could build myself.

There are a few options when it comes to developing a theme:

• Purchase a theme ($$$)
• Develop a child theme
• Build a theme from scratch

At first, I didn’t want to undertake developing an entire theme, so I found the world of child themes. Child themes inherit the properties and files from a parent theme and override the parent theme properties with properties that are set in the child theme. I’m pretty sure that about 85% of you who just read that are probably confused. Check out this WordPress Codex page on child themes for a little more clarification. Child themes are going to be great for those first time web developers who are looking to understand web development and make minor changes to a pre-existing theme.

In this post, I’m going to discuss my experience with building a theme from scratch. Developing a theme from scratch is best done if you have some prior knowledge of HTML/CSS.

Before we go any further, make sure to read WordPress’ Theme Handbook. If you read any of it, please read the first two sections called “Getting Started” and “Theme Basics.”

Developing your own theme is definitely a huge undertaking, especially if you have no prior coding knowledge. Even with a moderate amount of HTML/CSS background, this theme still took me a good three months to fully develop. So, if you’re interested in getting into theme development but have no coding experience, check out W3Schools tutorials on HTML and CSS. Once you’re comfortable with that, feel free to dive into theme development!

Set A Gameplan

Create a mood board

Mood boards are a great way to get inspiration and narrow down what you want your site to look like. When finding items for your mood board, think about

• Colors
• Fonts
• Things you love
• Patterns
• Your logo

Here’s a look at my mood board I used for creating this theme. You can check out more details on my Blog FAQ page.

Take note of design aspects from other sites

This is my favorite part! There are a few blogs out there that I truly love in regards to the design of the site. I definitely pulled a lot of inspiration from Mostly Morgan, Jessica Slaughter, and Cristina Was Here.

From Mostly Morgan, I really liked the way she displays the date at the top of her post, her navigation bar at the top, her ‘view post’ button, and the “Pin It” overlay on her images. Morgan’s blog was my main source of inspiration, and that’s okay! Don’t feel bad if you love almost every aspect of a blog or site. As long as you’re not directly copying and pasting code or using those design elements in the exact same way with the exact same coloring, you’ll be just fine.

Decide on a layout

There are a few options for the layout of your site. You can have the sidebar on the right and content on the left, the sidebar on the left with the content on the right, or you can have the sidebar at the bottom and the content at the top.

The first option is the most popular among bloggers, and it’s the layout I’ll be showcasing in this post, but if you want to use either of the other options, feel free to do so! A Beautiful Mess has an amazing article on 10 Blog Layout Tips.

Set Up a Development Environment

Alright, so we can’t get into the nitty-gritty until you have a development environment set up on your computer. Development environment? What is a development environment and why do I need one?

A development environment is a way for you to build and work on a theme through a local server on your computer. I’m not going to go into details about how to set it up, so check out these few sites to configure your development environment properly:

• How to set up a development environment
• Installing WAMP on Windows
• Installing MAMP on Mac

Download Underscores

Underscores is the best thing I have ever stumbled upon in regards to theme development. It takes the stress out of properly setting up files and doing most of the “backend” work. Underscores is a free, bare-bones starter theme that is a great place to jump off of. It’s also produced and maintained by Automatic, the company that oversees WordPress.

Enter the name for your theme, and click “Generate.” A .zip file will begin downloading. Once the download is finished, unzip the file and place it in your wp-content/themes folder where you installed WordPress.

Inside the theme folder, you’ll find all the necessary files to have a successful WordPress theme! Go to your WordPress dashboard, hover over ‘Appearance’ and click ‘Themes.’ Your theme should be somewhere in the Themes menu. Hover over it and activate it. You’re now ready to start developing!

If you’re stuck, check out this site or this video. If you’re still stuck, email me at hello@livingthegraylife.com.

Start Developing

Okay that’s harder than it sounds, but you’ll get the hang of it sooner or later. My favorite text editor right now is CotEditor on the Mac. There’s plenty of options when it comes to text editors. Creative Bloq has a great roundup posts if you’re looking for a new one! Or if you have no idea what I’m talking about, check out that post and download one of the options. You’ll thank me later.

For this specific theme, I moved the main navigation menu to the top, changed the ‘view post’ button, modified the location of the post meta data (moved the date to the top of the post and removed the tags and categories), changed the previous and next post button at the end of every post, and modified the spacing of a majority of the items.

I want to show you all how I created this exact theme, but that would take a novel, and I’m pretty sure y’all don’t want to read a novel. So, please leave any requests as to what you’d like to see down in the comments!

Toolkit for Successful Theme Development

Google Fonts
WP Beginner
WordPress Template Tags

Alright so there’s a quick look at how I develop my WordPress themes. I by no means got this theme to work on the first try, and it’s not perfect either. But, it works for what I need it to do, so it’s all good. If you have any questions please let me know!

Have you tried your hand at theme development?

~abigail gray