The best way to customize the css of a theme is by creating child theme. This tutorial will guide you
all the process to create child theme regardless your technical skills.
Why To Use Child Theme
child theme inherits all the designs and characteristics of parent theme. You can further modify its
code and change the functionality. In this way you wont change the parent functionality. If you do so
if the child theme is failed it is always safe to get back to parent theme. You would not like to
mess up the code of parent so that in case of failure, your whole site might look ugly.
How Chile theme works.
Child theme is a separate directory from parent having different style.css and functions. php. You can
add your requirements in the child. WordPress first loads the child theme and fill the missing
functionality.
Creating a child Theme in WordPress.
1. First go to your File Manager. You can also do this through FTP.
2. Go to public_html > wp-content > themes folder
3. Create a new folder and give name of your child theme. It is always wise to put your parent them and “-child” as a suffix. Example twentytwelve-child for twentytwelve
4. Insid the child folder create a new style named as style.css. and populate the code example is
given below.
/* Theme Name: Twenty Seventeen Child Theme URL: http://yourthemedomain.com Description: Twenty Seventeen Child Theme Author: Your Name Author URL: http://yourdomain.com Template: twentyseventeen Version: 1.10.0 Text Domain: twentyseventeen-child */
5. Here in above you can modify according to your need. The most important entity is Template because
it is telling the name of parent theme. Once you finished filling the fields click save and close the
file.
Note: Please Be very careful while adding Template name. You might get some errors. such as: Parent-Theme missing inspite of having parent theme. If you get such errors than you can see the exact name of parent theme in the filemanager.
6. Again create a new file functions.php. Then copy and paste the code below .
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>7. Now go to your dashboard and change the theme to child theme. Fo rthat you can go Appearance >
Theme and activate the child theme you have just created
8. This is an optional step. You can creatively design your screenshot in photoshop or any photo editing software and name as screenshot.png and upload in the child theme directory of your file manager( Where you created functions.php and style.php). Using Screenshot looks awesome.
Walla! You have created a new child theme
Now you can change the design of your theme. Here are basic examples. There are plenty of things you
might want to do. You can get help from google for css syntax. But I’ll show some basics.
To perform basic customizing you have to go to Customize > Additional Css and add css
Changing Color of Background
.body{
background:black;
}Giving Padding(space) in sidebar
.widget {
padding: 20px;
}
So you are now welcome to try many designs. If you have any confusion please contact.