0
Design plays a big role in conversion of a site. You design a website to stand out from the rest of your competitors and attract your visitors or customers.
One of the easiest and maintainable ways to convert a design into working website is to use WordPress, that is why it is the most used CMS in the world.
But if you don’t know how to customize a WordPress theme your website will be similar to all the websites using that particular theme.
So you need to know how to customize WordPress theme to make it look like the design you want.
You can customize a WordPress theme in different ways, we can categories them as:
- Basic level
- Intermediate level
- Advanced level
Basic level customization
Image Source:www.justlearnwp.com
For these customizations you don’t need any coding knowledge, you can make all these changes from the WordPress admin panel.
Go to Dashboard > Appearance > Customize
WordPress-customization-img.jpg
Here you will find some basic theme customization options. These options varies from theme to theme, I will show some of the common options which you will find in most themes.
These options are self explanatory.
Site Identity
site-identity-img.jpg
Here you can set your site title, tagline and favicon.
Colors
colors-img.jpg
Available options can differ from theme to theme but it generally allow you to set font and theme colors.
Header and background image
These two are generally separate options but they let you set background image for header and body section.
Menus
menus-img.jpg
First you need to create a menu from Appearance > Menus , then from here you can set the location i.e. where this menu will be placed.
Widgets
widgets-img.jpg
Go to Appearance > Widgets to find all available widgets.
This option will show you which sections you can add widgets to, click on each item and then you can add widgets to that particular section. This same action can be preformed from Appearance > Widgets section too.
Static Front Page
static-front-page-img.jpg
WordPress generally shows latest blog post in the front page but from here you can set any other page as your front page.
Intermediate level customization
Image Source:www.layerswp.com
As you may have seen with basic option you can only do limited customization but what if your design requires a different look of a certain element of the page?
If you have knowledge of css you can certainly change the entire look of a theme.
Let’s see how and where you can add your css.
Additional css option within theme
WordPress official themes twenty sixteen and twenty seventeen have added an additional css option in customization section where you can add your own css.
additional-css-img.jpg
There is one dependency though the css you write here will be theme dependent i.e. if you change the theme all your css will be lost. It can be a problem specially if you have customize any global selectors like body or header etc.
To avoid this problem you can try this:
Custom css plugin
You can use some plugins to write your css this way you can make your css theme independent. Here is a list of plugins you can try-
All of them are just plug and play type plugin you don’t need to configure anything.
Let’s see how to write the css.
The best way is, find the exact selector by using chrome dev tool or some similar code inspector tool then copy and paste the selector in your custom css panel and modify it as required.
devtool-img.jpg
For example
Inspected css
.site-content-contain{ background-color:#fff; }
Modified css
.site-content-contain{ background-color:#ccc; }
Advanced level customization
Image Source:www.childthemeconfigurator.com
If you really want some major customization in your theme you need to know more than just basic customization and css, because with that you can’t add any new element to your theme, you can just modify the existing elements.
If you have some understanding of php and wordpress framework (not very complex) you are good to go.
Let see how to do this:
Child theme
The best way to customize a theme is to create child theme, it’s just an extension of the parent theme where it inherits everything from the parent but can have its own features is well.
Many might argue why don’t you simply edit the core files of the theme?
The simple answer is that you can but need to keep in mind once you update the theme all your changes will be lost because you can’t control the core files, theme author controls it.
How to create a child theme
Let’s make a child theme of Twenty Seventeen theme.
First create a folder with a name of your choice in the same location where other themes are located.
Now create a style.css file within the folder you created and paste the following code in your style.css file.
/*Theme Name: Twenty Seventeen ChildTheme URI: www.yourself.comAuthor: YourselfAuthor URI: www.yourself.comVersion: 1.0Template: twentyseventeen*/@import url("../twentyseventeen/style.css");
In the Template section you need to give the parent theme directory name and import the parent theme style.css in your style sheet , rest entries you can enter as you wish.
What you can customize
With child theme you can customize everything in a theme. Just to name a few common things that can be done
- New template
- New menu (registration)
- New widgets
- New functions
- Custom styling
Conclusion
So having the knowledge of wordpress customization is very important to give a unique look and feel to your wordpress websites . So don’t hold back your designing imaginations because you know you can customize themes accordingly.
What common challenges do you face while customizing a theme? Do let us know in the comments section below.
