A common question I hear from potential clients is, “Can you help me change the color for a section of my WordPress website? I’d like this sub-heading to be different.” Yes, I can. Today I’ll begin to give you the tools to make these basic theme edits yourself. As with most things in life, there are several ways you can approach making changes to your WordPress theme. Every choice you make for your website, from your theme to the plugins can influence how easy or challenging it is to change any one particular part. Some modifications are more straightforward than others. This post assumes a basic understanding of CSS.
Step one
Backup Backup Backup!
Before you make ANY changes to your site, please make backups first!
Step two: Theme Customizer (and/or Frameworks)
Depending on what you want to change, you may be able to modify things within the WordPress customizer or through tools provided by the theme’s framework.
This is where you can edit may features of your site, from some colours to basic layout. This depends on how your theme was written and some themes may let you edit different areas of your site. Some themes use a framework and you may have additional places where you can make edits.
For example, with Twenty Sixteen, I can choose a default colour scheme and then further edit the primary background colour and the links.
If your theme has a framework, you may have customization settings there as well. Please refer to your particular theme’s documentation for more information.
Custom CSS
However, what if I want to change the page header, and make my site’s tag display in italics and sans-serif?
For this theme, I can’t change that in the customizer. I’m going to need to add custom CSS.
For that I’m going to first inspect the elements I want to change. Most web browsers allow you to inspect the elements of a website. This example shows the wording for Firefox and Chrome. Yes you could view the page source and go about everything that way, but this is much simpler.
Through this tool, I learn that the class I want to edit is called .site-description
So now I can set the font family and the color that I desire!
.site-description {
font-family: sans-serif;
color: #1979B3;
}
Additional Resources
- Intro to CSS (for beginners)
- WordPress CSS Coding Standards (advanced)
There are many other tools and ways you can make edits to your theme’s CSS. This post provides a very brief introduction. I hope this quick guide will help you begin to make changes to your WordPress website.