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.
Step 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 “wp–contant/themes” with folder name “thirteenchild”.
Step 2. Now in “thirteenchild” folder 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: https://rupesh.me/tag/thirteenchild/ Description: This is my first child theme based on Twenty Thirteen Theme Author: Rupesh Reddy Author URI: https://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.
Step 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.
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('©', '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('. ', 'twentythirteen'); ?> <!--Added by Rupesh End -->
Step 7. Save the file and refresh your website, now you should have a copyright notice displaying along with site title.
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.