How to customise your WordPress website with CSS

WordPress CSS Changes

Learn to customise WordPress with CSS using this simple step by step guide.

UPDATE: IF you need to edit other code like PHP and HTML then check out this post.

The Problem

Raise your hand if you’ve ever had this problem... 

You wanted to make a small change to your WordPress website and felt frustrated because you KNEW it would take just a few minutes if you only knew where to start.

You know the changes I mean - those little cosmetic tweaks, like changing the spacing of your menu items, changing the colour of some text or the size of a heading. As you know, it’s annoying to have to pay a developer to do what you know isn’t a complicated job.

Well, here’s the good news: making these changes to your WordPress website by yourself doesn’t have to be that daunting. With the right tools at hand, a little bit of know-how and a smidgen of curiosity, you can very easily get your WordPress website looking exactly the way you want it to.

Before we start, watch this short video to see how quick and easy it really is to do this.  Then check out the step-by-step instructions below.

In this how-to post I’ll walk you through how to make these kinds of changes to your WordPress website right now.  No technical understanding required; all techie terms will be explained!

Ready? Let’s dive in.

The 4 Steps to customising your website with CSS

STEP 1) Decide what you want to change and how you want to change it.

It may sound obvious, but before you dive in to customise WordPress with CSS you need to get clear on what you want to do.

Whatever you do, don’t start with a vague notion such as “I want my navigation menu bar to look nicer”.  This approach will ensure you get lost down that rabbit-hole of endless coding possibilities.

A better start is to have a specific result in mind e.g. “I want the space between my menu items to be wider.” That’s clear, specific and still leaves a little room to play with the actual details of the change once you get started.  I have a logical (left-brain) tendency rather than a creative (right-brain) one so I find it easier to try a few different sizes to see what the effect will look like rather than trying to visualise the outcome beforehand.

So, in your browser, just go to the website page you want to change.​

See, no fancy computer science stuff going on here. By having a clear idea of what you will do you can actually focus on getting that one job done and getting back to the real job of running your business.

STEP 2) Prepare Your Free Tools

old toolbox

Now that you know what you want you can arm yourself with every website developer’s secret weapon – the browser developer toolkit.

Now, don’t let the technical-sounding name put you off; it’s really easy - I’ll let Mozilla (they make the FireFox browser) explain:

"Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load."

From https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools

How can you actually use this?

You get this developer toolkit to appear by pressing F12 in your browser (Chrome, Firefox, IE/Edge) or right-clicking and selecting “inspect” or “inspect element”. On the Mac it’s Command + Option + I.

This will present you with the following panels at the bottom of your browser. It does look intimidating at first glance, but luckily everything we’ll be using is selected by default.

In the left pane is the actual HTML – HyperTextMarkup Language – i.e. the language that builds the current page.

Next, in the right pane is the CSS – Cascading Style Sheet – the code which styles the HTML elements selected in the left pane. 

So, now that you’re armed with all you need, it’s time for the fun stuff!  

STEP 3) Find the website code to change ... and change it!

code

For this step, you’ll want to find and select the part of your site you want to change i.e. the HTML element you want to style.

Do this by clicking this little Element Inspector button.

chrome developer tools zoom

After that, as you move your mouse across the web page, you will notice the different HTML elements being highlighted. At the same time the HTML pane will show the code for the highlighted element; pretty nifty, right?

When your mouse is over the element that you want to change, just click on that element.

selected html and css

The HTML code is selected in the left pane while the relevant CSS code is shown in the right pane.  This is where you can actually customise WordPress with CSS code!

By now you can see where this is going ...

And here’s the really cool bit: you can change the CSS code (or the HTML) and see what your changes will look like, live in the browser!

Using Google's homepage as an example

google search page

Let’s pretend this is our website and we want to change a few things, namely:

  1. The colour of the button text
  2. The size of the button text
  3. The distance between these buttons

​First, we click the Inspect element tool

inspect element

Hover the mouse cursor over the Google Search button and click on it once highlighted.

google search button

In the developer tools CSS pane we adjust the button colour by changing the first rule.

Simply click on a rule and press Tab until you get a new line.

gsearchcss

Now we add the rule we want.

To change the font colour, type the following then press Enter​

Color:red;

Then, to change the font size, type the following and press Enter

Font-size:x-large;

Finally, to change the spacing between the buttons, enter the following

margin: 0 30px;

As soon as you type the new rule you can see the changes take effect in your browser!

The Google buttons should now look like this:​

google buttons changed


Obviously it's no designer's dream come true but it serves to demonstrate exactly how you can find the code you need to change to get what you want on your site.

How to know which rules you need to change

You can find a good introduction to all the important rules at W3School's CSS pages.  While it does help to know a little about HTML (HyperText Markup Language) and CSS​ (Cascading Style Sheets) to quickly find the code you want to change, it's not essential - you'll quickly find what you need by experimenting.

Of course, you may need to search to find the exact rule you need to change to get the exact effect you want. Feel free to scroll through the CSS rules to find one you want.

Occasionally you'll make mistakes.  When you make changes that mess up the page and you want to clear your changes, simply press F5 to reload.

If you’re anything like me you will need to try a few times to get something you like, but once you’re happy with your changes copy the CSS you’ve changed or added: select with the mouse and press Ctrl+C or right-click and click Copy.

Be sure to include all the code, including starting and ending curly brackets “{“ and “}”.

STEP 4) Make it permanent

piggy bank

To apply these changes to your website for good you need to find where in your theme to enter your own CSS code, usually called custom CSS or Additional CSS.

Log in to your WordPress dashboard and go to Customise > Additional CSS or to Appearance > Editor.

(Most modern themes should have this customise section but if not, check your theme documentation to find where you can enter custom CSS.)

Paste your copied CSS into this section.  Make sure the format is exactly as you've copied it from the developer window, complete with curly brackets { } and semi-colons ; at the end of each line.

Last, and by no means least, hit Save or Update to record your changes.  And you're done !

NOTE: This is the simplest way but not the safest.  Much safer is to use FTP to connect to your site and make changes that way.

​View Your Changes

Now reload the website page you were playing with (F5) and note your changes have been saved!  Obviously this is a very simple example but you should immediately see the power of this little CSS trick; make any changes you like to the page without damaging your site and test them out before applying them!

If your changes don’t take effect as expected, then go back to the CSS you entered and make sure the format is correct – all opening and closing brackets are intact and each rule contains colons and semi-colons in the correct places.

Now your site looks just as you wanted it to and you can feel rightly proud for having done some real work on your website by yourself without calling in an expensive developer.

Now, of course, there's a lot more to it than what I've just described above.  Feel free to dive deeper by playing around on your own site and learning some CSS syntax and how to apply the rules.​

Two important things to remember ...

  1. If you change your theme you will lose these CSS changes so be sure to copy them somewhere safe.
  2. And don't get carried away!  You can waste a lot of time playing around with these settings - simply change what you need and move on.

Now It's Your Turn

Ready to try it for yourself?  What did you use it for and did it work?  Drop a comment below to let me know how it went.

Maybe you tried already but it just didn’t work?  Let me know in the comments below and we’ll help you sort it out.

Or maybe you don't have time for this type of thing and you need some help?  We can be that help - contact us or comment below.​

READY TO DIVE DEEPER?

Ready to dive deeper into looking after your WordPress website? Grab the free ebook to learn how to
automate all of your maintenance tasks and free up hours of your precious time every month.

WPStrands Free eBook


Also published on Medium.

  • by Seán
  • |
  • February 16, 2017
Click Here to Leave a Comment Below

Leave a Comment:

Share
Tweet
Share