WordPress does make it really easily to completely customize a website theme, but how do you protect your adjustments from being overridden by the theme provider on the next update? In this tutorial, we will go over how to create and use child themes, and why using them is so important. You will need to have a bit of knowledge of HTMl, CSS and/or PHP.
- Why you need a child theme?
- How to create a child Theme (step by step)
- How to Edit Css in child Theme
- Additional Resources
-
Why You Need to Create a Child Theme?
There are a few reasons why you would want to use a child theme:
- If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
- Using a child theme can speed up development time.
- Using a child theme is a great way to learn about WordPress theme development.
-
How to Create a Child theme? (step-by-step)
1.1) First you need to open /wp-content/themes/ in your WordPress installation folder and create a new folder for your child theme. You can name this folder anything you want. For this tutorial we will be naming it wpbchild.
1.2) Open a text editor like Notepad and paste this code:
/*
Theme Name: WP Child Theme
Theme URI: https://hamzashatela.com/
Description: Kallyas theme
Author: Hamza shatlea
Author URI: https://hamzashatela.com
Template: Kallyas theme
Version: 1.0.0
*/
@import url("../Kallyastheme/style.css");1.3) Save this file as style.css in the child theme folder you just created.
Most of that stuff in this file is self explanatory. What you really want to pay attention to is the Template: “Theme you are using”. (Basic understanding of CSS/HTML is required, so that you can make your own changes. Some knowledge of PHP would certainly help.)
This tells WordPress that our theme is a child theme and that our parent theme directory name is “Theme you are using”. The parent folder name is case-sensitive. If we provide WordPress with Template: “Theme You Are Using“, then it will not work. The last line in this code imports our parent theme’s stylesheet to the child theme.
1.4) Go to Appearance » Themes where you will see WPB Child Theme. You need to click on activate button to start using the child theme on your site.
Since you haven’t changed anything in your child theme yet, your site will use all functionality and appearance of its parent theme.
This is the minimum requirement for creating a child theme. Now you can starting adjusting your child theme.
-
How to Edit Child theme Css?
First you need to do is select the theme file you want to modify and then copy it into your child theme.
For example, you want to remove ‘powered by WordPress’ link from the footer area and add a copyright notice there. Simply copy the footer.php file in your child theme and then open it in a plain text editor like notepad. Find out the lines you want to remove and replace them with your own. Like this:
<?php
/**
* The template for displaying the footer
*
* Contains footer content and the closing of the #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?>
</div><!-- #main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<?php get_sidebar( 'main' ); ?>
<div class="site-info">
<p>© Copyright <?php echo date(Y); ?> <?php bloginfo('name'); ?> All rights reserved.</p>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>In the above code, we have replaced Theme credits with a copyright notice.Troubleshooting is a lot easier when creating child themes. For example if you accidentally deleted something that your parent theme required, then you can simply delete the file from your child theme and start over.
Additional Child Theme Resources
1. The One Click Child Theme Plugin – If you are having difficulty wrapping your head around the creation of the child theme folder, then this plugin will create one for you with the click of a button!
2. The WordPress Codex – There is all kinds of great documentation in the WordPress codex. If there is anything you need clarification on in this post, then this should be your first stop.
