#29: Design a WordPress Theme

Last Updated: September 25, 2020

Notice anything different around here? I did a redesign — and I designed it all myself! Whaaat?! Yep! I’m a little giddy.

I’ve been blogging around here since the summer of 2006, and while I’ve updated my design a couple of times (by finding a new, free template online), I’ve been saying “someday I’ll design my own WordPress theme” for more than a few years now. So the idea of designing my own template has always been intriguing to me, but I didn’t really start thinking about how I was going to go about accomplishing this lofty goal until I added it to my goals list — #29 on my 31 Before 31 List was to design a WordPress theme. Ta-da:

I’m crazy excited with how it turned out and the entire process of learning how to design a WordPress theme from scratch. And since I’ve already been asked a few times how you even go about doing this yourself as a “non programmer”, I thought I’d just go ahead and share my process.

How To Design Your Own WordPress Theme:

1. Getting Started/Disclaimer:

I am not a programmer. I have a background in graphic design, and know my way around HTML, WordPress (admin), and the Internetz in general. CSS on the other is more in my “I know enough to be dangerous” domain. Yes, I can find/replace things, tweak colors/sizes, use Inspect Element tool in Chrome to fix little things, but I also have the magical skill of messing things up on a serious scale from (yes, knowing enough to be dangerous), moving too quickly, and saving over stuff. As for PHP, I knew the word, and I knew it was a programming language, and from tinkering around in WordPress, I knew that it started with: <? php… Watch out, world.

So a couple of months ago, I stumbled across this WordPress Tutorial, and while some of it is a little outdated, the general structure is perfect. It connected quite a few pieces, for me, on how different files work together to create one WordPress blog. Note: that tutorial is not about the design aspect, it’s just about how the pieces fit together. Example: WordPress is based on a php loop system, so your main page that you’re designing in your template is just your homepage, that loops in things like your header (that pretty bit up top), the sidebar (that stuff over there —->>>>>), the footer (the copyright bit at the bottom) etc. And everything else is pretty much just php code that says “Hey you, on my homepage, I want to pull in the header, and my latest blog posts (please include the date, and social like buttons and categories and tags and pictures for each of those), and while you’re at it, throw the sidebar over on the right and the footer at the bottom. Ok, done.”

2. The Design:

First up, a design. I’d been looking for a cheap Photoshop replacement to use on my Mac, and finally stumbled across Pixelmator. While not as robust as Photoshop, it gets the job done better than any of the other cheap/free “Photoshop replacements” that I’ve tried. So I slowly started adding elements of what I want my “homepage” of my blog to look like into a Pixelmator image (adding favs to Evernote over the last few months has helped with recognizing things I like). Note: If you don’t have a background in graphic design, or feel unsure of where to start with a design for your blog, I would recommend starting in Pinterest or Evernote, and start pinning/clipping designs/blogs that you like.

As recommended, I used the 960 grid system as the basis for my template. All this does is make sure you’re starting with proper spacing between elements of your design (the sidebar and a blog post for example) so when you get to the “coding” step, it will be waaaay easier. I didn’t learn the true beauty of the grid until I started in on the CSS bit and now I may just be an evangelist for this system. Trust me. You want to use this.
Tools: Pixelmator, Evernote or Pinterest for gathering inspiration

3. Slice It Up:

Nothing is easier than creating an html page full of sliced up images of your design to make it look like you’re almost there. (You’re not!) From Pixelmator/Photoshop, use the slicing tool to cut up the individual pieces of your design, example: your logo is a slice, your navigation area is a slice and so on.
Tools: Pixelmator, TextWrangler

4. Turn your slices into a CSS-powered HTML page:

What the what? This is where you’re turning step 3 (an html page that is just dumping in images of your design) and making all that prettiness happen from CSS and html.

This was the most rewarding step for me. And the part I learned the most during. I found Google to be amazingly useful during this stage. Sometimes, us non-programmers assume that programmers know everything off the top of their head. Guess what? They don’t! They Google stuff all. the. time. So whenever I felt myself getting stuck: “How do I make the underline go away on a link?” The Internet knows! “How do I make my little category boxes look like they’re hanging from the horizontal line?” Well, the Internet doesn’t know that one directly, but step-by-step and some tinkering, it all comes together.

As recommended, I started with a blank css template, a blank html doc and simply started replacing the images with the real thing. Example: That picture of your blog post title, make it look the same as you did in Photoshop, but with css. If you’re thinking “ahh, you’re crazy pants”, just take it step by step. What font did you use? what size? is it bold? What color? Is it in all caps? And before you know it, you have something that looks like this:

.content h2 {
color: #25acd1;
font-family: Helvetica, Arial;
font-size: 36px;
font-weight: bold;
line-height: 36px;
text-transform: uppercase;
margin-top: 27px;
margin-bottom: 10px;
}

and your first step is done. This step will take a while. Don’t expect to knock it out in an evening. Depending on your skill level and time, you might be able to finish this step in a couple evenings or it could take way longer. I finished the bulk of this step in one evening, and then spent a couple more evenings perfecting the little flaws/oddities that I didn’t want to figure out the first time through.

Does it help to have a web-developer boyfriend at this step? Yes, yes it does. The best part about having a mentor in this stage, is being able to talk something out, even if they throw most of the questions back at you to think out. Although, I think I’m probably a C student because I argued with the expert over things I had no clue about, fell into a few cases of divitus, and was pretty awful about indenting my <div> tags. However, it was having someone repeatedly tell me “you could totally do that” that made me move this goal from hypothetical land to goal land. :)

Anyway, when you’re done with this step, you’ll have what looks and acts like a working blog homepage, but it will be a static file.

Tools: TextWrangler, while there are a ton of CSS resources out there, I’ve found the quickest solution is to Google it.

5. Viva la WordPress:

Step 5 is all about making your static file from step 4 that looks and feels like a working site, into a theme that actually works on WordPress. You’ll be hooking in all the WordPress loops and PHP code to make it a usable theme. This step was slow going, but super rewarding. (And frustrating, especially when I initially copied/pasted in a bunch of code & style references that I didn’t need from the tutorial I’d previously done, and then had to do a lot of cleanup). In this step, you’re starting with your homepage (index.php) and slowly replacing all the bits from Step 4 that are static with php that pulls in the relevant WordPress parts. Using the 960 Grid System mentioned in step 2 makes this part much easier as well.

Tools: TextWranger, MAMP (setup instructions here)

6. Ready. Set. Activate:

Exciiiting! Cross your fingers. Upload the theme via FTP. Do a bit of tidying up after seeing the Preview screen. Activate the new theme, and then squeal with excitement (for several hours and/or days). You’ll undoubtedly encounter a tiny and/or laundry list of things that don’t work quite as lovely as you imagined after you activate the theme. So take a deep breath, open a text file and just start listing them out as you find them, and then tackle them one by one. (Example: On my list? Images needed to be 700px wide now, instead of 420px, I needed to change some settings on my social plugin, I needed to add more padding to the top of my social shares bar etc.)

Tools: Filezilla, WordPress

I hope you found this mini-tutorial helpful! I’m so excited to have finished my first template, and I have so much to learn still. Questions/ideas? Let me know!