WordPress CSS for Dummies: A Basic Theme Customization Intro for WordPress

wordpress theme customization

Let’s face it, none of the WordPress themes out there look just the way you want them to. That’s why you hire people like me. But for the do-it-yourself type, this post is meant to be an intro into basic CSS WordPress theme customization. The knowledge here works on any site, but the focus will be on implementing it via WordPress and using language anyone can understand.

What is CSS?

First, what is CSS? The term stands for Cascading Style Sheets, and it determines how HTML is displayed. In other words, this determines what your site looks like. So if the CSS code says your footer should have padding on the bottom of it, you will have a big blank space down there. WordPress themes come with a lot of CSS already written in them, which you can override in order to customize your theme. Many themes come with a lot of options, but with CSS you can customize even the most basic WordPress theme.

Exploring your CSS

To get a look at your page’s html elements and current CSS rules, you can use your browser’s developer tools. The F12 key brings them up. In Chrome by default it will be a bar on the right, with the HTML elements of the site displayed at the top and CSS rules at the bottom. In Microsoft’s Edge it’s much the same, with the bar by default being at the bottom with HTML on the left and CSS on the right.

Go ahead and try it right now and we will take a look at my site’s HTML. The first thing you will see is my site’s body element with all the various classes associated with it. Under that you’ll have a div element with an ID of page and class of site. These are the boxes that my whole site rests in. Click on the body element if it’s not already highlighted, and look at the bottom box. You should see the CSS rules that make my site look the way it does. A rule for body.custom-background should be right at the top. Under that it tells your browser to use my gray background image, to center it, to auto size it based on screen size, to repeat (tile) it, and for it to scroll in the background as you scroll on the page.

Click the part where it says “repeat” and change it to “no-repeat” and see what happens. Did it? You just changed how my background displays! And you should see that instead of a background, I just have a little box of texture at the top. Feel free to mess with the other rules there too – it’s only changing in your browser and reloading the page will undo it.

Inspect that element

Here is another trick: Right click here on this text, then select “Inspect” or “Inspect Element.” If you did it right, your HTML box will have jumped to a bunch of p elements. Those are paragraphs in this post. You may notice that it has a rule for the p elements down below that sets the margin. That’s what governs how far these paragraphs are apart. You can right click any element of the page and inspect it this way to see what rules are applied to it and to explore the HTML layout of the page.

If you’re using Chrome, you may notice in the lower right a bunch of boxes nested within each other with numbers labeled margin, border, padding. You can also hover over the elements in the HTML section to show these on the page. Margins and padding are part of what positions elements on a site. You can also use the device toolbar (ctrl-shift-m) to see how your site looks on mobile. You may need to reload the page while looking at it with the screen set to emulate a device to get an accurate view. Responsiveness is very important, so it’s helpful to make sure your site looks good on all common devices.

Okay, but how do I edit my site?

Now you may be thinking: This is fun and all, but I don’t want to make your site look different. How do I make rules that customize my theme? For this you need to inspect your site to find out how to reference the part of your page that you want to change. For instance, right click my logo and inspect it.

You will see an img (short for image) element. You may also notice it has the class “custom-logo.” Then look at the next line up – it has shifted to the left a bit, which means the img element is inside it. It is an a element, which is a hyperlink – if you click it it will go back to my home page. You may notice that it has the class custom-logo-link. Then above that is a div element, which is simply a basic section of the site. It has the class “site-branding” and contains the logo and my tagline. Above, and again to the left, is another div with the “site-header-main” class – this one also contains my menu buttons. And above that is the header element, which has the ID of “masthead” and the class of “site-header”.

CSS Selectors

Ok, so what are all these elements and classes and IDs and how do they help us? The ID is a unique identifier for that particular element, so using that to set a style would only affect that on the page – and WordPress has some unique IDs based on posts as well you can use if you look for them, like #post-145 to reference this post. Classes can be applied to multiple elements, so you have to be careful about being too general and affecting things other than what you’re after. The way to reference these is called selectors. You may have already noticed based on looking at the css rules, but you use selectors like this:

Elements get referenced as-is. For example: body, div, header, p, h1, etc.
Classes get referenced with a period. For example: .site-branding or .custom-background.
IDs get referenced with a #.

More specific CSS rules override less specific ones. Same specificity gets overridden by the latest one, so being further down in the stylesheet or in a stylesheet called later. Using !important after a rule makes it override everything except other !important rules. There are other selectors and more advanced ways to use them, but this basic knowledge is enough to get you started.

CSS Declarations

Now you have to pair the selectors you found with declarations. A very common thing people want to do is move things around or get rid of space. The easiest declarations to do this are float, margin, and padding.

Float can be used to make an element float to the left or the right within its’ parent element (or to stop it from doing so). For instance, applying float:right to my “post comment” button would make it go from the left to the right side below the comment box.

Margin is used to set a margin around an element without actually expanding the element. Margins of two touching elements are sometimes combined vertically, but not horizontally. You can use margin to set all 4 margins, or specifically set one with margin-top, margin-bottom, margin-right, or margin-left. When using margin you input up to 4 numbers going top, right, bottom, left. Less than 4 it uses the existing to define the other on the same axis. So margin: 5px 5px; would set a 5 pixel margin top/bottom and left/right. Margin:5px 5px 2px; would be 5px top, 5px right/left, and 2px bottom.

Padding uses the same formatting as margin, but it adds padding into the element to expand it. This is especially noticeable on elements where an image or text is set to expand to the width or height of the element – margin would simply move it around, padding would make the contents bigger.

To use margin and padding you also need to know one more thing: Units of measurement. What’s an em or a px or a %? Px is pixels, so 50px would mean 50 pixels. Em is the same size as the current font – so 1em would mean 1 unit of font size. If the font is 16px, 2em would be 32px. And % measures as a percent of the parent element. 100% would fill out the element (or overlap if other CSS rules are moving/expanding things). 50% would be half the size. Note that you can go over 100%, but be careful with sizing things, especially with important labels – you could break your theme’s responsiveness.

Other Declarations and the @media Rule

Other commonly used declarations include font-size to adjust the size of the font and font-family to change the font. Read up on font stacks before you use this – basically you specify the font you want and a set of backup fonts in case the browser someone is using doesn’t have it. Width and height to adjust the size of the element, and many more. You can also use the @media rule to determine when your other rules take effect, which is what is commonly used to make a site responsive. A few example uses of the @media rule:

@media screen and (min-width: 1024px) {
body {font-size:25px;}
}
This would make the font size on the body element of your site 25 pixels in size for all computer screens or devices with a width above 1024 px. Since it uses “screen” it wouldn’t affect printers.

@media screen and (max-width: 1023px) {
body {background-color:blue;}
}
This would make the body of your site have a blue background for all screens or devices with 1023 or less pixels of width.

Writing your first css rule

Now that you have a selector and some basic declarations, you can write a functional rule. For example, if I want to increase the font size of the paragraphs in my body I could inspect my text and see how to select it. I see a div with a class of .entry-content, and the elements I want edited below that are p. So I can go:

.entry-content p {font-size:30px;}

That rule would make my font size of the paragraphs in this article 30 pixels.

But where do I put it?

Now that you have a rule, you need to know where to put it. Most good themes now have some manner of adding custom CSS built right in. If yours doesn’t, you will have to either use a plugin that adds it or make a child theme. See your specific theme’s documents to determine where to put the custom CSS, but one place you might check is the WordPress customizer. Many have an entry for “Additional CSS” or “Custom CSS” right there.

If you have a box in the customizer, you’re in luck – it’s very easy to use and you can see the effect right away. Just make sure to put it outside of any /* */ if your theme has some in the box describing it, as anything between those is just a text comment and isn’t applied. Just plug your custom CSS rule in there and it should work.

If it doesn’t work, you can examine the page to see why. If it’s showing up in the list of rules down there but has a line through it, something else is overriding it. That means you either need to get more specific (like, say, adding #primary to the above font size rule to reference the div with the id “primary” a few steps above it); or you need to use !important. Using !important is fine with custom css and is often needed to override a theme, and it’s perfectly safe to do – it just means your CSS will overwrite even more specific CSS elsewhere. So if you aren’t specific enough you could end up changing something you don’t mean to. For example, the following rule would change ANY text within a paragraph anywhere in the site for all screen sizes, and could break formatting on custom boxes added by plugins and such and ruin a theme’s responsiveness:

p {font-size:30px !important;}

What if I don’t have a custom CSS option?

If you don’t have a box in the customizer there are some plugins available that add one, but as I haven’t used them so I can’t recommend which one works best.

Or you could create a child theme, which allows css changes and a lot more. Custom templates, functions, etc. – you can make a whole new theme based off the parent theme. The Child Theme Configurator works well for automating that process. Alternatively you can do it manually – but that is outside the scope of this guide.

Experiment a little

So that’s that. If you’re still with me this far, you should now be able to do some very basic css changes and are on the track to learning and understanding more about WordPress theme customization. Experiment a bit. The nice thing about CSS is, if you break your site, you can easily undo your changes just by erasing the rule – and if you test things first in your browser’s dev tools other people won’t ever even see it.

I hope this tutorial is helpful, and if you need help figuring out or just want to have me customize your site or theme I’m available for web design and consultation. Only $50/hr, and I charge in 15 minute increments if you just need some quick changes.

Leave a Reply

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