Making a WordPress Theme Your Own

In this post, you’ll learn how to use tools already built into your web browser to make customizing a WordPress theme easy.

Sometimes you find a theme that is 95% perfect. You install it on your site and set up your homepage, but the font isn’t quite right, or the accent color the theme designer chose doesn’t match your branding. You open up the WordPress Customizer, but there aren’t any tools for changing your font or header. You feel like you’re back at square one, and you go looking for another theme.

You might think you need to buy a framework theme with tons of customization options, but they can be expensive, confusing to use, or so bloated they slow down your site. In this post, I’ll show you how you can take the theme you already love and make it perfect.

Note: I use Google Chrome, because its tools have a bit more power than other browsers do. This process should be similar on Firefox, Safari, or Internet Explorer, so use what you like. In Safari, you’ll need to enable Develop options first.

Your Browser’s Page Inspector

If you want to change something in your theme, like the color of links or the font of headings, you’ll have to know some key pieces of information first.

1. Find a link, heading, or whatever it is you want to change. Right click on it and choose Inspect. A window full of code will open at the bottom of the page.
2. On the left side of the window, you’ll see HTML content. On the right are CSS styles. Hover your mouse over a row of HTML content, and it will be highlighted on your website’s page. Move your mouse up and down through the content until you see the item you need highlighted, such as a link or heading.
3. Click on the row for your item. It will be highlighted in blue, and its styles will appear in the CSS to the right.
4. Scroll through the CSS until you see the design item you’d like to change. For example, to change link colors, you’d be looking for something like “color: #881c1c;” (or any other combination of 6 letters and numbers preceded by a pound sign). To change a heading font, you’d look for something like “font-family: helvetica, san-serif;”

One of the best things about the page inspector is that you can change the code right here to preview how your site would look. Try clicking on a font name or hex code for a color, then typing in your change. You’ll see it automatically update on the page.

These changes won’t be saved anywhere, so if things go wrong, you can just refresh your browser.

Customizing Your Theme’s Code

It used to be difficult to add custom CSS to a  theme, but ever since WordPress 4.7, you can add CSS directly in the Customizer. No need for child themes or extra plugins!

1. From the front-end of your site, in the black admin toolbar across the top of the screen, click Customize.
2. The Customizer sidebar will open. Click Additional CSS.
3. Type in your custom CSS after the “*/”. You can also copy and paste CSS directly from the Inspector.

CSS Syntax

The image below offers a quick explanation of CSS syntax. For more, see Mozilla’s Introduction to CSS.

Pro Tips

• You can also use the Inspector to get an idea of how big an image area for a header image or featured image is. This is helpful when you want to know how you should crop or resize your image to make it look great in your theme. Simply inspect the page and hover your mouse over the image’s link in the HTML content area.  The “Natural size” will show the pixel width and height you should edit your image to match.
• If you want to change the color links change to when you put your mouse over them, inspect the link, then right click on it (it will begin with “<a”) in the HTML content area and choose :hover. You’ll see the CSS for the link when you hover over it in the panel to the right.
• The Inspector has its own color picker. Anywhere you see a colored square in the CSS panel, you can click on it to choose from a color picker. The Inspector will insert the appropriate hex code. It also has an eyedropper tool that lets you click anywhere on your page to sample a color.
• At the upper left of the inspect, click the Toggle device toolbar button () to view your webpage on a variety of different devices, including an iPhone, iPad, or other smartphone.

---

Do you already use the inspector to customize your WordPress site? Tell me about your process in the comments! And if you have trouble customizing your theme, get in touch with me.