If you want to customize WordPress theme child theme is very helpful. You can modify main theme without touching any files of main theme.
What is child theme?
A theme which contain the functionality of another theme or its parent theme.
You can add or change the functionalities and looks of main theme. It uses functions and css of its parent theme. Only need to add/edit those styles or functions which you want to change and nothing else.
Now see how you can create a child theme.
In Step 1 you need to create a folder for child inside your theme folder wp-content/themes/. You can give any name to your folder. It will be good if you add -child.
Now in step 2 you need to create a style.css, this file is important and required to create a child theme. Add the following lines at the top of your stylesheet (style.css).
Theme Name - Parentthemename-child.
Description - Give details of your theme.
Author - Your name
Template - Name of Parent theme folder.
@import - stylesheet of parent theme
In this way:
Two things are necessary in the above lines, one is Theme Name and second is Template. All the lines will come inside the comment syntax /* */
@import will call the style sheet of parent theme. All the rules of parent's css will be applied here and if you want to change the rule you need to define them after this.
This is a basic process, only style.css is needed for basic theme customization. Now you can find your child theme under themes>appearance, you can activate it from here, but you will not find any changes.
Now make some childish changes in style.css for our child such as navigation and sidebar background color.
Nothing new to explain here for styling it is only some extra rule for already existing classes for navigation and sidebar in parent style sheet. You can add extra classes or completely override existing classes by just define them here.
On the other hand if you want to change structure or design you need to create a template file with same name as it is in parent folder. Like to change header design, create a template header.php inside the child folder and then you can make changes in this file whatever you want. Do the same with other templates if you want to change.
Let's take an example of navigation. If you would like to move navigation above the site title then copy header.php file in child folder. Search for <nav tag, copy the code till </nav> and paste it above the <hgroup>.
Another thing, to add or modify the functionality of base/parent, you need to create a functions.php in the same folder.
Now add a function to your theme.
Example:
You can display this message anywhere in the template in this way.
What is child theme?
A theme which contain the functionality of another theme or its parent theme.
You can add or change the functionalities and looks of main theme. It uses functions and css of its parent theme. Only need to add/edit those styles or functions which you want to change and nothing else.
Now see how you can create a child theme.
In Step 1 you need to create a folder for child inside your theme folder wp-content/themes/. You can give any name to your folder. It will be good if you add -child.
Theme Name - Parentthemename-child.
Description - Give details of your theme.
Author - Your name
Template - Name of Parent theme folder.
@import - stylesheet of parent theme
In this way:
/*
Theme Name: Twenty twelve child
Description: Child of Twentytwelve
Author: WTC
Template: twentytwelve
*/
@import url("../twentytwelve/style.css");
/* custom css from here*/
Theme Name: Twenty twelve child
Description: Child of Twentytwelve
Author: WTC
Template: twentytwelve
*/
@import url("../twentytwelve/style.css");
/* custom css from here*/
Two things are necessary in the above lines, one is Theme Name and second is Template. All the lines will come inside the comment syntax /* */
@import will call the style sheet of parent theme. All the rules of parent's css will be applied here and if you want to change the rule you need to define them after this.
This is a basic process, only style.css is needed for basic theme customization. Now you can find your child theme under themes>appearance, you can activate it from here, but you will not find any changes.
Now make some childish changes in style.css for our child such as navigation and sidebar background color.
.main-navigation
{
background-color: #eeeee3;
padding-left: 5px;
}
.widget-area
{
background-color: #eeeeee;
padding: 10px;
}
{
background-color: #eeeee3;
padding-left: 5px;
}
.widget-area
{
background-color: #eeeeee;
padding: 10px;
}
Nothing new to explain here for styling it is only some extra rule for already existing classes for navigation and sidebar in parent style sheet. You can add extra classes or completely override existing classes by just define them here.
On the other hand if you want to change structure or design you need to create a template file with same name as it is in parent folder. Like to change header design, create a template header.php inside the child folder and then you can make changes in this file whatever you want. Do the same with other templates if you want to change.
Let's take an example of navigation. If you would like to move navigation above the site title then copy header.php file in child folder. Search for <nav tag, copy the code till </nav> and paste it above the <hgroup>.
Another thing, to add or modify the functionality of base/parent, you need to create a functions.php in the same folder.
Now add a function to your theme.
Example:
function a_short_message () {
echo "This is a child theme" ;
}
echo "This is a child theme" ;
}
You can display this message anywhere in the template in this way.
<?php echo a_short_message(); ?>
You can also override the existing parent function by following these steps.
- Copy the function and paste it into the child's functions.php.
- Remove the parent function.
- Activate the child function.
Example:
function child_setup() {
/* Remove the parent registered sidebars */
remove_action( 'widgets_init', 'twentyeleven_widgets_init' );
function child_widgets_init() {
register_sidebar( array(
'name' => __( 'Extra Sidebar', 'tto' ),
'id' => 'sidebar-1',
'description' => __( 'The Sidebar. Displayed on all but full width and homepage template.', 'mytheme' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => "</aside>",
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'child_widgets_init' );
}
That's it. It is lot easier to create child theme only need to follow the method as described above. Hopefully, it will help you to create your own child of any parent.
If you want to know how to customize layout with the help of child read Customizing Twenty Twelve Theme With Three Column Through Child.
If you want to know how to customize layout with the help of child read Customizing Twenty Twelve Theme With Three Column Through Child.
0 Comment