SAVE 25% when you purchase our Theme Bundle and Make Plus together. View bundle deal.

How to customize a WordPress theme

By Drew Strojny on November 7, 2013

How to customize a WordPress theme

You’ve got WordPress set up, you’ve installed your favorite theme, and now you want more. You want to learn how to customize a WordPress theme so it looks just right. Where do you get started? How hard is it?

You might think the hardest part of the process is learning WordPress or doing something fancy with code. In fact, it’s learning a few basic concepts and applying them when you want to customize your theme. There are even some fantastic free tools available to make this process fun.

The basics of CSS (cascading style sheets)

Oh no! CSS sounds complicated! It really isn’t, trust me. You’ll be a pro in no time. CSS at the core is a language (a basic one) for applying style (colors, fonts, layout) to HTML. HTML is what a web page (even a WordPress web page) is built on. Think of it like a doll that you can dress up in different outfits. The “body” of the doll is called HTML and “outfit” is called a CSS stylesheet. It’s a sheet of instructions for styling the HTML. Makes sense right? What if instead of actually choosing an outfit for your doll, you wrote down some instructions on a piece of paper for how the doll should be dressed:

  • Pants: green
  • Shirt: white
  • Shoes: black, velcro

CSS works the exact same way! You specify selectors (the pants) and apply properties (green). The HTML provides convenient indicators, called ID’s and classes, that make it easy to target all kinds of different parts of your website. Let’s say you wanted to change some text in a certain section of your website. You’d write something like this:

.pants {
  color: green;
  text-decoration: underline;
  font-weight: bold;
}

.pants is the selector and color, text-decoration, and font-weight are the properties.

Now imagine you had all kinds of wacky things you could specify for your doll. That’s a bit like CSS. You’ll want to bookmark and study up on a decent CSS property reference guide.

Start to customize your WordPress theme

I know what you might be thinking. Where am I supposed to practice my CSS? How do I know if it’s working? Do I need to set up all kinds of advanced coding tools and local development environments? As cool as those tools are, no, you don’t need them to make some basic WordPress theme customizations.

Believe it or not, there is a magical tool built right into two major web browsers (Google Chrome and Safari). Google Chrome calls their version DevTools and Safari calls theirs Web Inspector. This tool actually gives you the power to make CSS changes to any website you’re browsing! This means you could do something crazy, like go to the New York Times and change all the text to blue!

Now before you get too excited, this only changes the website for you, not everyone else. But, that’s what’s really cool about it. You can learn how to customize your wordpress theme CSS files without any risk, on any website, including your own of course.

How do I turn it on?

For Google Chrome, DevTools is on by default, you just need to toggle the window for it. I recommend doing this with keyboard shortcuts. Press Ctrl + Shift + I (or Cmd + Opt + I on Mac) to open the DevTools. If you’re using Safari you’ll have to first navigate to Safari → Preferences → Advanced, and check the box for “Show Develop menu in menu bar.” Once you’ve turned that on, you can use the same keyboard shortcuts mentioned above to toggle the window. It should look like this:

Customize a WordPress theme with

Real example

Now that you’ve turned it on, let’s walk through a real example. We’re going to use Google Chrome. Navigate to the Linen theme demo site. You’ll notice a subtle border above and below the navigation menu. Let’s practice changing the border color.

Did you know that Surf Office, Postmatic, Yeah Dave, and over 700,000 small businesses run their websites with Make, our free WordPress page builder. Discover the Make page builder now.

Open up your inspector tools using the keyboard shortcut I mentioned above and look for a small spyglass icon in the lower left hand corner of the panel. Click the spyglass.

Find CSS selectors by clicking the spyglass

Now, start hovering your mouse cursor around the actual webpage. As you hover, the cursor is selecting different elements on the page. Think of this like targeting. Target the element you want to change. If you hover carefully you can even drill down a bit inside some of the elements. Whenever you click, the inspector “locks on” to that element. To change the element you’re locked on to, you need to click the spyglass icon again. Go ahead and click on the top navigation bar to lock on.

Customize a WordPress theme with DevTools

Look at the inspector panel. This is a little intimidating at first, but don’t worry, it’s not that bad. There is some code on the left and some code on the right. The one on the left is for the HTML (body of the doll) and the one on the right is for the CSS (the doll’s outfit). You’ll notice on the CSS side a set of CSS rules:

#navigation {
  margin: 30px 0 0 0;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}

The #navigation is the selector (the part of the doll we’re targeting) and the 3 lines inside the brackets are the styling instructions. Each line follows the same the format: property: value;. Remember discussing properties earlier? These are all the different options we have for styling our doll. The semi-colon goes at the end of each line to indicate the line has ended. This set of instructions looks like this in English:

  • Add a space of 30 pixels above the navigation element.
  • Add a 1px solid border in the HEX color #efefef above the navigation element.
  • Add a 1px solid border in the HEX color #efefef below the navigation element.

Let’s try changing the border color.

You might be wondering what HEX codes are. They sound complicated, but they’re just 6 character letter / number representations of colors. Google Chrome has a nice HEX color picker built right in. Click the color square for the border-top property and choose a new color.

Color picker in Google Chrome DevTools

Notice how the top border actually changes live while you choose a color! Now, try changing the bottom border to a different color. Nice work! You’re on your way to being a professional WordPress theme customizer.

Making it permanent

Remember what we discussed earlier about these changes only showing up for you? The tool only provides a preview of how it would look if you did make the changes, it doesn’t actually change your live website. The next step is to take your changes and apply them to your theme. Your WordPress theme has a CSS file that holds all of these style rules.

The easiest way to edit your CSS file is to visit Appearance → Editor from your WordPress dashboard. You’ll want to open the style.css file (which should be open by default). This is your stylesheet. These are all the instructions for how to dress your doll. The specific instruction blurb you changed in our example above actually exists in that file.

Search for the style rule you changed in the browser and actually change it for real!

Update your customized CSS in the WordPress theme editor

Now click the Update File button below the editor. Visit your site and the changes should now be live. Nice work!

Power up with a child theme

Two problems pop up when you start changing your theme’s stylesheet:

  1. If the developer of the theme ever releases an update, and you update your theme, all your changes will be lost.
  2. It’s easy to make a mess of the original code, and forget what exactly you changed.

Luckily, WordPress has support for child themes, which help you sidestep this problem. So, before you get started with your customizing, learn how to use a WordPress child theme. You should also know, we include child themes with all of our WordPress templates here at The Theme Foundry.

Wrapping it up

We obviously just scratched the surface of customizing a WordPress theme, but hopefully you’ve got a better fundamental understanding of how to customize a WordPress theme. If you want to get more advanced, you’ll want to study more about CSS and how it relates HTML. These are building blocks of your WordPress theme.

Are there any other customization concepts you’d like to learn about? Drop us a note in the comments.

Enjoy this post? Read more like it in Tutorials.

25 Comments

  1. Kristy Ewing

    EXCELLENT article you guys! IF ONLY I could have found such a complete tutorial a few years ago, it would have saved me hours upon hours of learning how to do the simplest things in bits and pieces! Making the transition of building sites from “scratch” (ala Dreamweaver) to manipulating the layout of a WordPress theme has its challenges. It makes all the difference in the world when one can start with themes that are as beautifully designed, cleanly coded as The Theme Foundry’s. Having child themes that are ready to roll shows how you go the extra measure to provide robust themes with more bang for the buck.

  2. Drew Strojny

    Thanks Kristy! Glad to hear you enjoyed the post :-)

    We appreciate the compliments on our themes as well. You’re the best!

  3. Micki

    OMG, this is AWESOME!!!!!! Thank you! The way you explained it is perfect even for beginners. And I did not know about DevTools…… thank you.

  4. Cindy

    Blasted awesome! Seriously. Easy to understand, looks complete. Thanks for posting this!

  5. Dan

    Great article very easy to understand. I was wondering how to manipulate the HTML code of my template, i can find the CSS editor but not the HTML code to edit.

  6. lovern

    Hi,

    I signed up for wordpress and really got confused on ow to change my theme.
    I can’t seem to find the right path where i could add html.

    Please help :)

  7. Drew Strojny

    Hey Lovern,

    I think you’re on WordPress.com. At any rate, head over to Appearance → Themes to change your theme.

  8. David

    This is great stuff!
    Now I want to know how to use Google’s Workspaces to customize a WordPress Child Theme. Can you help with that?

    Thanks!

  9. Zack Tollman

    Hi David!

    I’ve never heard of Google’s Workspaces. I am not sure if it can be used to customize a Child Theme. We typically recommend a good text editor and an FTP client to modify a theme.

  10. Muhammad Umair

    Thanks Drew for beginner level theme modiciation tutorial

    If some of your readers are having a hard time learning CSS from tutorials then they can try Code Academy.

    Whenever our clients want to learn WordPress theme modifications on their own we recommend them Code Academy because it’s interactive way of learning. After few hours of training on their interactive platform most can use basic HTML and CSS to modify tons of stuff on their Website.

    Cheers

  11. Robni

    This is awesome!

    I have one problem though : many times the changes I make in the editor don’t apply… Do you have any idea what the problem could be?

  12. Pedro

    Hi Robni,

    Try opening your code editor with administrator privileges. Then you should be able to change and save your code.

  13. Troy

    Thanks for the insightful article. A few follow up questions – is there a good tutorial explaining how to use a ‘page template’, how to change ‘widget areas’, and how to access/tweak template layouts? Recommend a good book or website that goes through all of this? Here’s another dumb question — why doesn’t WordPress have a really simplified drag/drop/build mechanism similar to Weebly? Or equivalently, I wonder why Weebly doesn’t allow you to self-host on your own server? In any case, seems like learning CSS/PHP/HTML/etc gives you much more power but it forces non-programmers to confront programmer issues/concepts, no?

  14. Lonnie Bruhn

    I have to say, I have an advanced knowledge of website design and structure. I have redesigned my site giving it new facelifts for years and built and debugged many others. One site from scratch and only using Notepad 2 with clean xhtlml and css validation. A proud moment fr me.

    I came across your article doing research for a friend who is about to install and build his new podcast site using Genesis Framework. (my personal preference and recommendation) I also am trying to find a way to debug a problem I am currently having with styling my Gig Press plug-in with in my current theme, ‘suffusion’.

    I was actually trying to explain to him tonight, how the concept works. Then in doing my research, I came across your article. I have never read an article explaining it so eloquently and simple. I forwarded it to him so he can really grasp the concept and with the added devtools to your tutorial newbies get their hands dirty right away. That is very exciting when you realize how powerful css can be. By the way, I live an die by Devetools. He will really get this now. It is selfish but the entire reason I want him to read it is it will make my life easier because I will get less calls for a job I wasn’t hired for :)

    Seriously this was a great article and I bookmarked it so I could send this to the many others I know who need help before I get involved. Well done.

  15. Victoria

    This was a great and simple tutorial! And it was very easy to follow. But I still can’t change my custom changes I make to the theme. I’m on the free plan so maybe that’s the problem? Do you have to pay in order to customize your theme and it actually update and show on your website? And when I clicked appearance, there wasn’t an edit option? What do I do??
    Thanks!
    Victoria

  16. Stella

    Hi there, I’m really struggling with the last step of this tutorial. I’m trying to apply the CSS code but cannot find the original layout code, all the wordpress shows me on the customise CSS page is a blank page. This is all well and good except that whenever I apply the coding I want to change, nothing happens. Can someone help me?

    Thanks!

  17. Scott Rollo

    Hi Stella!

    Using a child theme for the first time can be a bit tricky — hopefully I can help :).

    Your child theme, by default, will not contain any CSS. To apply custom styles to your theme, you’ll want to:

    1. Copy your parent theme’s CSS rule.
    2. Edit this code.
    3. Add the edited CSS rule to your child theme.

    The CSS in your child theme will override the CSS in your parent theme.

Comments are closed.