What is child theme?
Themes for children are a theme that inherits the functions and styles of different themes called the parent them. What changes you have made to reflect, do not affect the original theme or the parent theme. However, if the theme of your parent changes, it is reflected in the theme of your child. A child themes subject is the preferred way to change the current theme.
Why should we use child themes?
There are many reasons why WordPress developers use child themes for even minor changes, as there are many examples that we would like to change the color of the theme, the size of the font, the layout, possibly using a separate call for actions like buttons, etc. the problem is that modifying a parent theme parent theme still prevents you from updating to a later version in the future because you will miss any changes when you try to update. The child theme solves this issue by activating all the functions of the selected theme. You can update it without losing any changes. It is ideal for beginners who want to create and play their own themes.
How to Create a Child Theme
Creating a child theme from the beginning is very easy. However, if you have already edited the theme files directly without secondary element (that is, the child theme), you will need to get all your changes in the second component, so that major updates do not clean up the updates. Please confirm that the main theme is displayed on the “appearance on themes” page. Otherwise, it will not work. To create a child theme, there is at least one directory (that is, child theme directory) and create two “style.css” and “functions.php” files.
First, create a new directory that will include all your child theme files. You must create this directory in your theme directory “yoursite.com / wp-content / themes”. The directory must have a naming convention. It is the best way to give child theme the same parental name, but eventually at the end adds a “-child”. For example, if you create a “twentyseventeen” theme for “twentyseventeen-child”, make sure there are no spaces in your child’s theme directory name, if it there it may produce errors.
Next, we need to create a style file called style.css. This file contains all the CSS rules and alerts that guide the theme’s appearance. In style environments, below header comments are needed at the beginning of the style.css file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Theme Name: Twenty Seventeen Child Theme URI: http://yoursite.com/twenty-seventeen-child/ Description: Twenty Seventeen Child Theme Author: Narendra Author URI: http://scripthere.com/ Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready Text Domain: twenty-seventeen-child */ |
Most of the style.css header comment tags are self-explanatory, just couple things to note, The theme name (i.e Theme Name:) is unique with your theme and the template (i.e Template:) matches the name of the original theme directory. The older theme of this example is the “twentyseventeen” theme, so the pattern is “twentyseventeen”. It is possible that you work on another theme, so adjust it accordingly.
Next, to load parental and child theme styles. In the former method, it was meant to import a parent theme style using “@import:”. This is because the style sheet download time is a long, recommended way to add styles to the theme use “wp_enqueue_scripts” and “wp_enqueue_style” at child theme “functions.php”. If your child’s theme in style.css contains (as usual) the actual CSS code, you need to register it. If you set “parent-style” to addiction, child themes will be added later. Here is a recommended example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php /** * Twenty Seventeen Child functions and definitions * @package Twenty_Seventeen * @subpackage Twenty_Seventeen_Child * @since 1.0 */ /** * Enqueue scripts and styles callback. */ function child_theme_enqueue_styles_callback() { // This is 'twentyseventeen-style' for the Twenty Seventeen theme. $parent_style = 'parent-style'; // Parent Theme stylesheet. wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); // Child Theme stylesheet. wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style), wp_get_theme()->get('Version') ); } /** * Enqueue scripts and styles callback hook. */ add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_styles_callback' ); |
Next, you can activate your child theme, go to the WordPress admin dashboard “appearance” → “Themes” and find the child theme there. Click “Theme details” to display the title of the stylesheet title. It’s for that information. Click the “Activate” button. It’s a great job! The theme has come into effect.
Done! You created the first child’s theme WordPress. However, there is no doubt that it looks just like the parent’s theme. So, what’s happening with the child’s theme? Do not worry. Next, in order to show exactly what you want, you will learn how to shape your child’s theme.
Customize your child theme :
Styling: The introduction of adding custom styles is one of the easiest ways to change themes using CSS. You can skip the older theme style by setting the stylesheet appropriate and adding the code to the child theme style.css list. You can customize colors, relationships, fonts, and other basic elements, follow the below example child theme style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
#primary { background-color:wheat; } #secondary{ background-color:lightyellow; padding-left: 15px; padding-right:15px; padding-top: 15px !important; } #content div{ background-color:lavender; } #content { background-color:lightcoral; } .entry-title a:link { color: red; } .entry-title a:visited { color: green; } .entry-title a:hover { color: hotpink; } .entry-title a:active { color: blue; } .entry-title { color: red; } .entry-header { padding-top: 15px !important; } |
If you want to change other then style ( i.e Alter parent theme template files), WordPress always goes through the template hierarchy when you add a child theme, but first check the theme of the child at all stages of the hierarchy, then check the parent theme. Add a similar file to the list of children’s themes and change the page to the parent list. For example, if you want to change the footer code for your site, you can add a page footer.php page and replace the footer content as you like at child theme. please follow below example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?php /** * The template for displaying the footer * Contains the closing of the #content div and all content after. * @package Twenty_Seventeen * @subpackage Twenty_Seventeen_Child * @since 1.0 * @version 1.0 */ ?> </div><!-- #content --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="wrap"> <div class="site-info"> <a href="<?php echo esc_url( __( 'http://scripthere.com/', 'twenty-seventeen-child' ) ); ?>"> <?php printf( __( 'Proudly powered by %s', 'twenty-seventeen-child' ), 'ScriptHere' ); ?> </a> </div><!-- .site-info --> </div><!-- .wrap --> </footer><!-- #colophon --> </div><!-- .site-content-contain --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html> |
If you want to change the functionality of the parent theme, use the child theme functions.php. This is different from the style.css, the child theme functions.php does not replace the parent. Instead, it loads in addition to the previous functions. In particular, it is pre-loaded before the parent file, In other words, you can associate child’s theme functions by conditionally declaring the theme of the user’s functions. Follow the example below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/** * Add custom image sizes attribute to enhance responsive image functionality * for content images callback. */ if (!function_exists('content_image_sizes_attr_callback')) { /** * Add custom image sizes attribute to enhance responsive image functionality * for content images. */ function content_image_sizes_attr_callback( $sizes, $size ) { $width = $size[0]; //check if ( 740 <= $width ) { $sizes = '(max-width: 700px) 79vw, (max-width: 760px) 80vw, 720px'; } //return sizes return $sizes; } } /** * Add custom image sizes attribute to enhance responsive image functionality * for content images hook. */ add_filter( 'wp_calculate_image_sizes', 'content_image_sizes_attr_callback', 10, 2 ); |
Finally,
We learned about basic child themes, how to use them, causes and reasons. For example, if you are modifying existing themes, commercial themes on your site, you’re mostly using the child themes. This is truly amazing knowledge in your learning curve.
