Creating WordPress Child Theme

Creating a child theme is easy and allows modifying the parent theme. Child preserves modifications when parent them updates. In this tutorial we will create a child theme for Twenty Thirteen. It is recommended that you create this child them in a local environment and perform testing before publishing it to production (server) environment. If you are creating a child theme on production environment, then make sure you have access to your site via FTP.

thirteenchild folderStep 1. In a WordPress powered site, all themes are located in a directory (folder) called “themes”. “themes” folder is a sub-folder of “wp-content”. Let’s say name of our child theme is “Thirteen Child”, so we need to create sub-folder in “wpcontant/themes” with folder name “thirteenchild”.

Step 2. Now in “thirteenchildfolder create a file called “style.css”. It is the only required file to create child theme.

Step 3. Open the “style.css” file in any editor. The “style.css” file must start with the following code, so copy the code and paste it in “style.css”.

/*
 Theme Name: Thirteen Child
 Theme URI: http://rupesh.me/tag/thirteenchild/
 Description: This is my first child theme based on Twenty Thirteen Theme
 Author: Rupesh Reddy
 Author URI: http://rupesh.me
 Template: twentythirteen
 Version: 1.0.0
 */

 @import url("../twentythirteen/style.css");

 /* =Theme customization starts here
 -------------------------------------------------------------- */

In the above code required lines are only Theme Name and Template. Theme Name is to identify this theme and Template is to identify the parent of this theme. @import is used to import styles from twenty thirteen theme.

Available Themes ListStep 4. To activate this theme, login in to your site, and go to Administration Panels > Appearance > Themes. You will see “Thirteen Child” listed under Available Themes. Click “Activate” to activate your new child theme.

Congrats you created a WordPress Child Theme. At this point you won’t see any difference between “Twenty Thirteen” and “Thirteen Child” themes. But if you make any changes to Thirteen Child those will be preserved even after parent theme updates. Let’s add copyright notice, year and site title to footer of the website.

Step 5. Copy “footer.php” file from “twentythirteen” folder to “thirteenchild” folder.
Thirteenchild Files

Step 6. Open “footer.php” in “thirteenchild” folder in any file editor. Add following code in between <div> and <?php do_action( ‘twentythirteen_credits’ ); ?>

<!--Added by Rupesh Begin  -->
<!--Copyright Year Site Name  -->
<?php esc_attr_e('&copy;', 'twentythirteen'); ?> 
<?php _e(date('Y')); ?> 
<a href="<?php echo home_url('/') ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"><?php bloginfo('name'); ?></a> 
<?php esc_attr_e('.&nbsp;', 'twentythirteen'); ?>
<!--Added by Rupesh End  -->

code add location

Step 7. Save the file and refresh your website, now you should have a copyright notice displaying along with site title.
copyright-notice-display

Troubleshoot tip: For any reason, if you WordPress site clashes after activating the child theme, don’t worry, just delete “thirteenchild” folder using FTP. After deleting, a default theme will be automatically activated and your site will function normally.

Leave a Reply