So you have already went through the process of learning how to install WordPress on your website, installed a theme and now you would like to take this further and learn how to modify themes to your own taste. Being able to customize a WordPress theme is not easy to learn, but it is not too difficult either. The thing that people often feel scared of is the fact that they may need to learn some code. Perhaps you have seen computer code in action before in the background of your website and think it looks like complete gibberish. The good news is that learning to modify the code of your WordPress theme to suit your own style does not require any advanced coding knowledge. Once you have understood a few key concepts, the whole process becomes quite easy. The tough part is getting over that initial hump of learning some key CSS terms. Like anything complex in nature, the more effort you put in to understand it, the clearer it becomes in your mind.
You might ask "why would I want to modify the code?"
. This is a matter of personal taste. Maybe you want to change the width of the borders that surround your content. Or you want to alter the appearance of the sidebar or even change the kind of font that your website uses. As you become more proficient in using WordPress, curiosity starts to take over. It is a natural process. You have learnt the basics but maybe you start to think "how would my website look if I just made this small change"
? Learning how to edit your theme's code will give you the chance to do this.
Think of the Leaf theme
we talked about in this article
. This is a theme that we recommended as fantastic for beginner writers who want to start a blog. Maybe you have already applied the Leaf theme to your website. But you want to change the appearance of specific elements like the header or the font-family that this theme imposes on specific parts of your website. This is where good foundation knowledge of CSS comes into play. You can transform some basic themes like the Leaf theme into beautiful looking customized website designs.
The first concern many people have is making a mistake that impacts your entire website and causes it to look awful or just not work at all. This is why you need to know of a nifty tool contained in google Chrome entitled DevTools. This is turned on by default and allows you to change the look of any website on your computer alone. This is key because changing it on your computer alone means that the look of the website won't be affected for anybody else. All you need to do is navigate to the page you want to experiment with and use the keyboard shortcut Ctrl+Shift+I. This brings up list of code on the side pane of your browser window.
Once you have opened up DevTools, hover your mouse over any element of the page. This will show you what line of code is used for styling that section. This can be intimidating at first but you don't need to worry. There are two panes of code displayed on the DevTools pane. The left-hand side shows the HTML, and the right shows the CSS. Since we are concerned with stylish, let's focus on CSS for the moment.
To keep things simple when first experimenting with altering your WordPress website theme, you should first try to change the border colour. To do this, select the lower border and examine the CSS code that applies to it. You will find one element called border-bottom. That is the lower border. Beside this element is the property that displays its colour in HEX code format. HEX code format is displayed as a # key followed by a series of letters. To change this colour, click on the square beside the HEX code. This will display a spectrum of colours. Clock on a different one to the current option. You will now see in real time how the colour of the lower border on this page changes. Voila, it's like magic! We won't get too much into CSS terms here, but learning the most frequently used ones will mean that you can make a series of subtle changes in no time that will add an individual touch to your site.
We discussed earlier how the DevTools is not a permanent change to your website. It just changes how a page is displayed on your computer. When you have become confident enough to make real changes to the CSS code of your WordPress site, it is time to open up the styling sheet. You can find this in WordPress by clicking on Appearance-Editor from your dashboard. This will open the style.css by default, which is the file you want to alter. To make the appearance same as that you performed prior to this on the lower border colour, perform a CTRL+F for the code you changed earlier. Make the same change or change it to a different colour and click update file. This will mean that the change has now been applied for everyone who visits your site.
This is the crux of the basic method to change your WordPress theme. It can get a lot more complicated, but once you are familiar with key CSS terms it is deceptively easy to make some drastic improvements to the look of your website. Some problems can arise when the developer makes updates to your theme. Consider the scenario when the developer performs a vital security update. In this case, the style.css will be reset and any changes you have made will be lost. This can get quite frustrating and is why you should consider using a theme framework. In this case, having a framework means that any changes the developer makes will only apply to the framework of the theme, but your so-called "child theme" remains the same. If you want to get more into theme editing you need to learn HTML and CSS quite in-depth. But starting off with the basics makes for a great start!