• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
Just Peachy Consulting and Web Design

Just Peachy Consulting and Web Design

  • Home
  • Websites
    • Portfolio
    • Website Care
    • FAQ
  • Technology Consulting
  • Content Marketing
  • Blog
  • Contact

Making a WordPress Theme Your Own

March 23, 2017 by Alexandra Martines 3 Comments

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.

Making a WordPress Theme Your Own

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.

An explanation of CSS syntax

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 (an image of 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.

Filed Under: Blog

Reader Interactions

Comments

  1. Janis says

    October 3, 2017 at 8:39 pm

    Hi Alex, thanks, this is really cool. One question: with this way of customizing, is there still the issue of changes being lost when a theme update is applied?

    Reply
    • Alexandra Martines says

      October 3, 2017 at 9:32 pm

      Hey Janis! As long as you’re just editing your theme’s CSS in the Customizer, you shouldn’t need to worry about theme updates. There’s no guarantee – a major theme update might change an item’s class or apply a new style that overrides yours, but it’s unlikely to happen.

      If you want to make more significant changes to your theme (especially adding or changing PHP code), you’ll want a child theme. Some themes come with a child theme, but you can also generate your own very easily with this plugin: https://wordpress.org/plugins/one-click-child-theme/. Child themes use all of the code of the main theme but don’t get theme updates of their own, so there’s no chance of accidentally removing your code. Bonus: You get to name the child theme, so you can call it something like “Janis’s theme” if you want.

      Reply

Trackbacks

  1. The Easiest Ways to Customize a WordPress Theme - Just Peachy says:
    April 8, 2018 at 11:52 pm

    […] It won’t always be that easy to customize a WordPress theme, but it won’t get too much more difficult. In fact, I have a whole blog post and video covering the basics of CSS for WordPress right here. […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

{{Privy:Embed campaign=474067}}

Recent Posts

How GDPR Affects US Small Business Owners

Disclaimer: This isn't legal advice, and I'm not a lawyer. If you've been reading your emails, you know there have been some big changes to online privacy laws lately. Most of this chatter is about … Read more about How GDPR Affects US Small Business Owners

When to Hire a WordPress Professional to Customize your Website

With WordPress sites running the gamut from basic blogs to massive eCommerce stores, it can be difficult to figure out when you need to hire a WordPress professional and when you can DIY it. If … Read more about When to Hire a WordPress Professional to Customize your Website

The Easiest Ways to Customize a WordPress Theme

One of the trickiest things about DIYing a website for your business is creating something that looks as gorgeous as you imagined it would. From buttons that seem to be stuck at blue when your brand … Read more about The Easiest Ways to Customize a WordPress Theme

Why Website Maintenance Matters

Just like a car, websites require maintenance to keep them working. Your car won't take you very far if you never change its oil, and your website won't take your business very far if you don't look … Read more about Why Website Maintenance Matters

Why Small Businesses Should Care About Net Neutrality

If you're reading this article right now, chances are you have Internet access at your home or work. If you have Internet access, there's about a 98% chance you've heard something about how the FCC … Read more about Why Small Businesses Should Care About Net Neutrality

Footer

Connect

  • Facebook
  • Instagram
  • LinkedIn

Contact

(413) 376-8822
[email protected]

Quick Links

  • Cart
  • Terms
  • Privacy Policy
  • Cookie Policy
Change Cookie Consent

Keep Up

Subscribe to the latest in tech tips and web strategy.

Copyright © 2023 · Business Pro on Genesis Framework · WordPress · Log in

Request a Website Audit