When you want to learn how to customize a WordPress theme with CSS, one of the first things you’ll need to know is how to edit files within the theme itself.
The process for editing theme files is effectively the same whether you are looking to customize CSS or HTML, and in previous tutorials in this series we already covered this process, for the purpose of modifying HTML.
So to avoid retreading the same ground, take a look at “How to Edit HTML in a WordPress Theme” and “How to Install WordPress Locally With XAMPP” to learn about:
- Editing files through the theme editor
- Downloading and uploading files via FTP or remote connection
- Why you should consider making your changes within a child theme
- Editing offline via XAMPP
With the methods of editing theme files already covered, in this tutorial we’ll stay focused on how to edit css in WordPress by learning about these topics:
- How to add custom CSS through the theme customizer
- How to identify the stylesheet(s) a theme is using
- How to identify which CSS needs to be changed, and where, in order to customize a specific part of a theme
Note: This article assumes you have a basic knowledge of CSS, but not necessarily of how to edit CSS in WordPress.
Premium WordPress Themes and Plugins
Before we start, don’t forget you can explore the thousands of WordPress themes on ThemeForest and WordPress plugins on CodeCanyon. Purchase these high-quality WordPress themes and plugins and improve your website experience for you and your visitors.
How to Edit CSS in the WordPress Theme Customizer
WordPress has a dedicated area in which you can add your own custom CSS code. This code will be loaded at the right time to ensure it overrides the default styling of the theme, and using this approach doesn’t make any direct changes to theme files.
In the left sidebar menu of your WordPress admin panel go to Appearance > Customize:
This will take you the theme customization area, where you can click on the menu item Additional CSS:
A large field will appear, into which you can add any custom CSS you like:
Save your changes by clicking the blue Publish button at the top of the left sidebar when you’re done adding custom code.
How to Identify a Theme’s Stylesheet(s)
If you don’t want to use the Additonal CSS area in the Theme Customizer, and instead want to edit theme CSS directly, you’ll need a way to find out which files a theme is actually using for styling.
In most cases themes will use the standard structure for WordPress and have a file named "style.css" in the theme’s root directory. In fact, this is an essential theme file so you will always find it in any theme.
However when you open it up for editing you may find it’s empty of code, and the developer is loading styling from else where in the theme. Or, you may even find they are loading in multiple stylesheet files.
There are two ways to check which stylesheets are being used by a theme.
1. Inspecting Head Code
The first method is to inspect the <head> code of the theme. You can do this by right clicking anywhere on the page and choosing View Page Source, then locating the <head>...</head> tags.
Between those tags, look for <link> elements that also have rel='stylesheet'. Then look to see which of those are coming from your theme’s directory. The URLs of the stylesheets will tell you where in the theme structure to find them.
Note that if you are running a plugin that combines and minifies all your site’s stylesheets into one file this technique will not work, because all you will see is the URL of that single file. Instead, use technique two, checking the functions file.
2. Checking the Functions File
Whenever a theme uses a stylesheet it has to tell WordPress which file it wants to use, through a function named wp_enqueue_style(). Thus we can see exactly which stylesheet(s) the theme loads by finding its use of this function.
Every theme has a file named “functions.php” located in its root directory. Utilization of the wp_enqueue_style() function is typically in this file, so open it up and start searching for the function name.
When you locate instances of the wp_enqueue_style() function, look in between the parentheses for the second parameter, i.e. the bit of text after the first comma. That text shows you the location of the stylesheet. For example:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
In the above code, the second parameter is:
get_template_directory_uri() . '/css/mainstyle.css')
This tells us the stylesheet is in a theme sub-directory named "css", and that its file name is "mainstyle.css".
How to Identify Which CSS to Change
Once you know how to add to or edit theme CSS, the next thing to learn is how to find out which code you actually need to change.
The best way to do this is using the developer tools in your browser, ideally either Chrome or Firefox due to the quality of their tools.
Let’s say, for example, you want to change the font size of your post titles. Right-click on one of the post titles and select the Inspect option:
This will open up the Developer Tools panel. Look in its Styles tab for a font-size property.
If you don’t see one, the browser might be showing you a parent or child element, so in the Elements tab try clicking on nearby elements until you find an element that both accurately highlights the shape of the post title text and has a font-size property:
Now, in the Styles tab, try changing the value for the font-size property. If you see the text change size in the browser window you know you’ve found the correct CSS.
To learn where in the stylesheet this CSS is, look to the top right of the place where you just edited the font-size value. You should see a filename, then a colon, then a number.
The filename tells you which stylesheet the code is in, and the number after the colon tells you on which line you will find that code. For example, the image above shows code from the “style.css” file on line 4054. If you are directly editing the theme stylesheet you can now open it up, go to the line number in question, and change the CSS.
If you are working in the Additional CSS field of the Theme Customizer, or within a child theme, you will also need to target the same selector as does the original CSS, so you can override it with your own styling.
Back in the browser developer tools, look for the selector that’s above the font-size property you just changed. It’s to the left of the stylesheet file and line number specification we just looked at.
Copy that whole selector and paste it into your custom code, then use it to correctly target your modified font-size value.
Always Check for Baked-in Theme Options
Before you go to the trouble of customizing CSS, always check in the Theme Customizer for options the developer may have already baked into the theme.
Themes often have quite comprehensive customization options that don’t require custom code. So, before editing any CSS, you can save yourself a lot of time by seeing if there’s already a push-button way to make the change you need.
How to Customize a WordPress Theme Step by Step
Now that we’ve talked about how to customize a WordPress theme’s CSS and HTML, you might feel a little unsure of where to begin. So let’s boil things down to a basic list of steps to follow:
- Check the Theme Customizer to see if there’s already an option available that can facilitate the change you want to make
- If not, and you need to add some simple custom CSS, use the Additional CSS field in the Theme Customizer
- If you need to make more extensive customizations to HTML or CSS, consider making them within a child theme
- To make small changes directly to the theme, use the WordPress in built theme editor
- For more in depth changes directly to a theme, use either FTP, a remote connection, or work completely offline with XAMPP
- Once you have your editing method selected, identify the theme’s stylesheet(s) by inspecting your site’s
<head>code or looking in the theme’s "functions.php" for use of thewp_enqueue_style()function - Locate the specific lines of CSS you need to modify, and their related selectors, by using the Inspect function of Chrome or Firefox developer tools
When you dig into all the above and get familiar, you’ll start to see just how customizable WordPress is.
Before you know it, you’ll be making your own completely original child themes and creating designs all your own.
And it just so happens that learning “How to Make a Child Theme in WordPress” is the next tutorial coming up in this series. Stay tuned!
No comments:
Post a Comment