We show you the quickest way to make simple changes to the appearance of your WordPress site’s theme by editing the CSS.
WordPress themes are — for the most part — made of two types of files: PHP and CSS. PHP is a programming language, and the PHP files of a theme contain its logic and are how it interacts with WordPress.
The CSS controls the look of a theme: it contains instructions that tell browsers how to render a web page’s HTML (which is produced by the PHP files and data drawn from a database).
As a very simple example of a CSS style, the following will tell the browser to render body text — text within the HTML <body> element — in the Georgia typeface at a size of 16 pixels:
body {
font-family: Georgia;
font-size: 16px;
}
A CSS file is simply a list of these instructions. The part outside the braces — also known as curly brackets — indicates which element of a page the instructions apply to, and the part inside the braces tells the browser which properties to apply to those elements.
As you can see, if you want to make small changes to your WordPress theme, it’s simply a matter of tweaking the values in its CSS file. In reality, CSS can be horrendously complex if you’re not familiar with it, and it can take a long time to fully understand it, but making small tweaks is not as scary as you might think.
I’d like to give you a quick outline of the best way to go about making such tweaks to your WordPress theme.
Editing WordPress’ CSS
The easiest way to get at your theme’s CSS in a reasonably good interface is to use the Custom CSS module of the Jetpack plugin. Of course, you could just FTP into your hosting account, create a child theme, and do the edits directly, but for minor changes that isn’t really necessary, and because Jetpack allows you to rollback any changes you make, there’s less chance of something going wrong.
You can find Edit CSS under the appearance menu if you have Jetpack installed.
It’s important to understand the basics of how CSS works if you want to make edits. CSS has a rule of precedence that, in part, says that the lower a rule is in the file, the higher its precedence. Basically, if you put something at the bottom of the file, it will override an identical instruction that is further up the file.
Precedence is actually quite complex; but for our purposes it’s enough to know that styles that are loaded later will override those loaded earlier.
So, if in your theme’s style.css file, the body text is set at 16px near the top — as it should be if the theme developer is doing things right — adding a style near the end will override it.
Finding The Right Style
All modern browsers have a set of development tools that can usually be accessed in the right-click menu. Let’s say you want to make the text of your post’s titles smaller. Right-clicking on it and choosing “Inspect element” or similar will bring up a complex-looking interface.
You can ignore most of it. What you’re interested in is the box to the bottom right that shows the CSS styles that influence the appearance of the page. You’re looking for the bit that says “font-size: 20px” or whatever the number is in your case.
That tells you the instruction you should add in the Edit CSS interface of your WordPress installation. If you add that instruction as it appears, it will override the style in your theme.
h1 {
font-size: 25px;
}
Often it won’t be enough to apply new CSS styles to HTML elements like <h1> or <body>. If a developer wants to apply styles to a subset of a particular element — H2 headings within blog articles, for example — they’ll add a class to those elements in the HTML. Classes group together elements so that styles can be applied to them.
So the HTML looks like this:
<h2 class=”blog_headers”>This is my header</h2>
And the CSS looks like this:
.blog_headers {
font-size: 30px;
}
Here the “.” in front of the selector indicates that we want to apply the styles to a class.
Earlier we mentioned precedence — later styles override earlier styles. There’s another rule that determines which styles are applied — the rule of specificity. Specificity dictates that more specific rules have precedence over less specific rule. Again, this can be horrendously complex, specificity rules frequently cause problems for even the most experienced developers, but for our purposes, it’s enough to know that CSS rules applied to classes are more specific than rules applied to HTML elements.
If you try to make a change to your theme’s CSS files and nothing happens, it’s probably because of a specificity problem. Even if you add your style after the style you want to override, a more specific rule will override it.
The trick here is to ensure that your rule is of a greater specificity than the rule you want to override. Now, a responsible developer would do this the hard way and figure out exactly how they could override the offending style with the lowest specificity that gets the job done, but we’re going to cheat.
CSS includes an “important” rule that overrides all other specificity rules. Its use is often discouraged because it can cause serious headaches for anyone who wants to change the CSS later, but it’s the easiest way to get your styles to stick if you aren’t a CSS expert.
Extending the last code example, the CSS would now look like this:
.blog_headers {
font-size: 30px !important;
}
Now, this technique is only going to work for the very simplest of tweaks. It does not make you a CSS master. The same workflow applies to other changes, but you’ll need a greater understanding of how CSS works if you’re going to make more extensive tweaks. If you’re interested in learning about CSS, Code Academy’s CSS: An Overview is a great place to start.