- By
For newbies, adding CSS to a WordPress website is no easy task. It is, however, sometimes a very necessary one. There’s actually plenty of ways to customise your site (with page builders, various plugins and WordPress theme settings, etc), but sometimes, all you need to do is change one or two very specific aspects of a design — which is where CSS comes in. But how do you do this? Where in WordPress do you start? Fear not, we have the answers…
Here’s what you need to know:
How to add CSS to WordPress:
– (note: video credits to Topher DeRosia – creator of HeroPress)
Video Transcript:
Hi! This is Topher with WinningWP. In this video we’re going to take a look at how to add custom CSS to WordPress the right way. Imagine for a moment you want to make a slight change to the way your site looks. You Google around a little bit and you find a little snippet of CSS and they say, ” Just put this in your site.” But where do you put it? And how do you know it’s done the right way? Let me show you. First we need to determine what your CSS is for. There are really only two areas that you might want to apply CSS. One is for general site design which is layout, and colors, etc. The other is content design and that’s how your specific content looks: image treatment, and blockquote size, etc. In the future you may want to change your site design. Get a whole new theme altogether and yet keep the little tweaks you made for how your content looks. Let me show you what I mean. Here we have a pretty simple site and it’s easy to describe the layout. There’s a search bar at the top, a header bar, a content area, and it’s hard to see because it’s empty but I have a sidebar right here. The background is all white, the footer is gray and the search bar is black. These are the sort of things that you would change related to your theme. Here we have our content, and we have a certain amount of padding to the right of images and captions are italicized. Those would be content related changes, so let’s take a look at how to do both. Site design changes are tied to your theme which makes sense. If you change your theme in the future you don’t want to keep the CSS because it’s all about how it looks. So we want to change your current theme and then have it go away if you ever get rid of that theme. You have two choices, one is the Customizer and the other is editing style.css. Neither are very difficult but the Customizer truly is by far the easiest. Let me show you what I mean. I’d like to change the header of my site to be red. So the first thing I’m going to do is find its name. In Chrome I right-click and hit inspect. And right here it says site-header-main. So that’s what I want to change. Now here at the top of my site is the Customize button. If I scroll to the bottom of the Customizer I can click Additional CSS. There’s a little bit of instruction here on how to use it. If you click close then it comes right up here. So I’m going to type site-header-main and in curly braces put in background-color red. Now you don’t necessarily need to know how to use the inspector like I did and you don’t need to know that f is red. You may have gotten this code from a website somewhere and that’s fine, you don’t have to know how to find it yourself. I’m just showing you how put it in here. Now that it’s there I can click publish and now I can close this tab and there now I have a red header. You can put as much CSS in there as you wish. You can completely change the whole design of your site if you wished. But now I want to show you the other way to edit the CSS. I’m going to remove the code that I put in before and save it and now we’re going to edit our theme’s style.css file. Going to go to the Dashboard, under Appearance, Themes. Now your active theme is always here in the top-left. You really only want to do this particular method if you’re using a child theme. You can see here I have make install but my active theme is make – child theme. This makes it so that if make does an update it doesn’t wipe out my customizations which are going to be in my child theme and my child theme will never get an update because child themes don’t get updates. If you can confirm that you’re using a child theme then in the menu over here is a link for Editor. And right here they’ll tell you everything I just said about child themes. So go ahead and click I understand if you’re using a child theme. The first file that comes up is your style.css. It will always be that way. And all of this text here is information about your theme. You don’t need to pay any attention to it. Go right to the bottom and you’ll see here that mine says, “Add your custom styles below.” Before we do any editing in this file I want to recommend that you back it up. And that’s really simple. We’re just going to copy and paste it into another file somewhere. So if you’re in Windows, you can do Control + A or in a Mac you can do Command + A. It will highlight everything and either Control or Command + C and it copies it. And you can paste into any other file that can hold text. You don’t really need to keep it permanently, you’re only keeping it while you’re editing this one and if this one goes perfectly then once you’re done you simply delete your backup. But if this one breaks and you get lost you can simply erase this one and paste back in what you copied out. So I’m going to paste in the exact same code that I did with the Customizer and click Update File. And then reload my site. And there we are, it’s also red. Now if the Customizer is so easy, why would you ever want to put in your style.css file? The reason is that your style.css file loads a lot earlier than the Customizer. So if you did it with the Customizer you might get an instance where the page fully loads, looks white for a split-second and then flashes to red. But if you put it in style.css it doesn’t do that. Another one of the things I loved about the Customizer is that you could see your changes as you typed them. So a common workflow for me is to write all my CSS in the Customizer and then copy and paste it all over into style.css. You don’t have to do that. You could leave it all in Customizer and it would work just find forever. If you’re just starting out my recommendation is that you do only the Customizer. It’s quick, it’s easy, it’s painless and the negatives are very minimal. If you want to experiment and get your feet a little bit wet with the inner workings of WordPress then go ahead and edit your style.css file. Now the other type of CSS that you might want to work with is for managing your content. Now for this you don’t want it tied to the theme. You want it to stick even if you change themes. You may always want image captions to be not italicized no matter what theme you’re using. In that case you want to use a plugin. I’m using this plugin called Simple Custom CSS. Then under Appearance there’s a Custom CSS menu item. And it allows you to simply type CSS right here. So I’m going to find out the name of this caption. I right-click and Inspect. And it says it’s called wp-caption-text. So over here I can type in .wp-caption-text, font-style: normal; I click Update Custom CSS and then we’ll reload our page. And you can see it’s not italicized anymore. So now I’m going to go change my theme to . And you’ll see that my image caption is still not italicized and yet the whole concept of a red header is gone because all that code was tied to the other theme. So to review, if you want to manage your theme you would either use the Customizer or under Appearance go to Editor and edit your style sheet. If you want to manage the CSS for your content then you want a plugin which keeps your CSS separate from the theme. Something like Custom CSS. If you’d like to learn more about WordPress check out www.winningwp.com.
Anything to add?
