Having installed all your favorite WordPress themes throughout your journey of using WordPress CMS, I’m sure you’d now be on a look out for a means to play with your existing theme. So, that’s exactly what I have covered in this tutorial.
What Have I Showcased Here?
In this post, I’ve covered a stepwise procedure of customizing a WordPress theme so that it looks just the way a WordPress user wants it to look like. I’ve dealt with using CSS for customizing the look and feel of a WordPress theme.
Understanding the basics of CSS (Cascading Style Sheet)
CSS is basically a language that’s utilized for applying styling options such as colors, fonts, layouts etc. to HTML. Serving as a sheet of instructions for styling HTML, CSS allows you to apply specific properties to the web page coding. For example, if you want to change a particular text within a specific section of your website, you can do the same using the CSS specified below:
[php]
.skirts {
color: pink;
text-decoration: underline;
font-weight: bold;
}
[/php]
In the above CSS, .skirts is the selector and color, text-decoration and font-weight are the CSS properties.
Now, let’s have a look at the process of customizing a WordPress theme:
1. Turning On The Tool For Making CSS Changes
The two very popular web browsers come pre-equipped with tools that allow you to make customize your WordPress theme’s CSS files. If you are using Google Chrome, then DevTools is the tool that I’m talking about. For turning this tool ‘ON’, all you need to do is simply toggle the window using keyboard shortcuts i.e. Ctrl + Shift + I.
Likewise in case of Safari, you need to go to Safari-> Preferences-> Advanced and select the checkbox for “Show Develop menu in menu bar”. Once you’ve turned on the respective tool for the chosen web browser, you can use the prior mentioned shortcuts as shown below:
2. Let’s Understand The Customization Of WordPress Theme Using An Example
With the CSS Changer tool turned ‘On’ and the web browser as Google Chrome, simply navigate to the Linen theme demo site where you can notice a subtle border, both above and below the navigation menu. Now, let’s change the color of this border. Just follow the steps covered below:
Step 1
Use the shortcut keys for opening the inspector tools and search for the spyglass icon placed towards the lowest left hand corner of the panel. The screen-shot for same is shown below:
Step 2
Now, mouse hover to select different elements placed on the web page. Just target the element you want to change by clicking on. As you click on the element, the inspector will lock on to that element. Further, you need to click on the spyglass icon again, followed by clicking on top navigation bar. Open the inspector panel and you’ll notice something like this:
If you look at the code displayed within the inspector panel, you’ll find that the one towards the left side is for the HTML and the one towards the right side is for the CSS. On the latter side, you can see a set of CSS rules as shown below:
[php]
#navigation {
margin: 30px 0 0 0;
border-top: 1px solid #efefef;
border-bottom: 1px solid #efefef;
}
[/php]
Here, #navigation is the selector and the three lines viz: margin, border-top and border-bottom indicate the styling instructions. All these three lines follow the same format as shown below:
[php]
property:value;
[/php]
The semi-colon marks the end of the line.
For instance, the line margin: 30px 0 0 0; means adding a space of 30 pixels above the navigation element.
Step 3
Google Chrome comes with a built-in HEX color picker. You simply need to click on the color square for border-top property, followed by choosing a new color for the border. Here’s a look at how this is being done:
As you can see from the above screen-shot, the top border will actually change as you choose a new color.
3. Making The Changes Applicable To Your WordPress Theme
Although DevTools allows you to preview the changes for your WP themes, it doesn’t change your live website. So, in order to apply these changes to your site’s theme, just edit the CSS file for your theme. For this, simply go to your WordPress admin dashboard -> Appearance -> Editor and open the style.css file.
The screen-shot for this is shown below:
Once you’re done with changing the CSS style rule, hit on the ‘Update File‘ button.
Finally, go to your website and you should be able to see the changes live.
That’s it!
Wrapping it all up
Playing with the colors, patterns and styles of WordPress themes has been extremely tempting for WordPress designers and developers. Here’s hoping the above tutorial would have offered you a fundamental understanding of the method utilized for customizing a WordPress theme.
About The Author:
Sophia is a renowned WordPress developer by profession. If you’re about to hire WordPress developer, then you can get in touch with her. She has already written excellent stuff on best tricks and practices on web development. Sophia already has multiple WordPress-related articles under her name. .
