Child Theme

Creating Child Theme using WordPress

Spread the love
  • 7
  •  
  •  
  •  
  •  
  •  

Most of us would need to customize the wordpress theme we want to use.  If you start making changes to the existing them code then there are chances to lose all your customization once you upgrade the theme.

To get full control of the theme and making sure it is not overwritten with the future updates of the theme, you need child themes. This saves you from writing all the code from scratch, as you just write a new child of an original parent theme, updating only the parts you want. Along with that there is no risk of your custom code to be overwritten with the future updates of the theme.

NOTE : A child theme depends completely on its parent in order to work. Without its parent theme present, it will not do a thing and cannot even be activated.

Steps to create child theme in wordpress :

  1. CREATE A FOLDER UNDER WP-CONTENT/THEMES

    A best practice is to give your theme’s folder the same name as the parent theme and append it with -child. So for example if we are using the Twenty Fifteen theme, we will call our folder twentyfifteen-child.
    However, you are free to use any name you want to, just make sure not to include any spaces because that might cause errors.

  2. CREATE A STYLE SHEET AND IMPORT PARENT STYLES

    Create a new text file and call it style.css under folder created in step 1 and paste the following code in the style.css file

    /*
    Theme Name: Twenty Fifteen Child
    Theme URI: http://yoursite.ext/twenty-fifteen-child/
    Description: Twenty Fifteen Child Theme
    Author: Irfan Moosani
    Author URI: http://irfan.moosani.net
    Template: twentyfifteen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain: twenty-fifteen-child
    */
    
  3. In the same style.css paste the following code as save the file:
    @import url("../twentyfifteen/style.css");
    

    so the code looks like

    /*
    Theme Name: Twenty Fifteen Child
    Theme URI: http://yoursite.ext/twenty-fifteen-child/
    Description: Twenty Fifteen Child Theme
    Author: Irfan Moosani
    Author URI: http://irfan.moosani.net
    Template: twentyfifteen
    Version: 1.0.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
    Text Domain: twenty-fifteen-child
    */
    
    @import url("../twentyfifteen/style.css");
    
  4. Now visit WordPress Administrator > Appearance > ThemesYou will see the new child them listed there. You can activate the theme.
    As we haven’t overwritten any part of theme yet, there will be no difference on the site, that you will notice.
    But now you can write overriding the functions by creating a new file functions.php
  5. I will demonstrate a basic google analytics function to be included in the child themeDefine a function say add_google analytics in the file function.php in the following manner
    <?php function add_googleanalytics() { ?>
    <!--- PASTE THE JAVASCRIPT PROVIDED BY GOOGLE ANALYTICS HERE -->
    
    <?php } 
    //add_googleanalytics function ends here 
    add_action('wp_footer', 'add_googleanalytics'); 
    // add_action() adds functionality—do stuff—at a particular point. 
    // Do NOT close the php tag with ?> at the end of the file
    
    

NOTE : This Google analytics code will work only when the child theme, in which it is defined, is activated.


Spread the love
  • 7
  •  
  •  
  •  
  •  
  •  
  • 7
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *