Child theme is the right way to customize WordPress themes
Want to customize a theme you downloaded? You should never make changes to the original theme files, because when you update the theme, your changes will be gone. Instead of that, you should use a child theme. Keep reading and we’ll tell you how. Skip the intro and follow these steps to create your own child theme.
What is a child theme?
A Child theme is a theme for your site, that allows you to make changes to your site’s styles and functionality without affecting the original theme’s code. It looks like a regular theme but it uses the original theme’s files as a template (A parent theme). A child theme inherits the functionality and styling of the parent theme.
How to use a child theme?
You can use basically any theme as a parent theme for your child theme. Big themes or frameworks that are heavily relying to Customizer and theme options may not be child theme compatible (but usually are though). In those cases the customizer and theme options may just be enough for your customization needs. Those themes were built that you wouldn’t have to touch the theme’s code ever. (In case you’re wondering: you won’t lose theme options or Customizer data if you update your theme.)
Getting started – Create a child theme in 6 simple steps.
Easy steps for creating a child theme.
1. Create a folder and name it. Use “my-child-theme” or whatever you like to call your new theme!
2. Add two files to your “my-child-theme” folder: style.css and functions.php
3. Add these lines to your style.css file:
/* Theme Name: twentysixteen Example Child Theme Theme URI: http://example.com Description: Example Child Theme for Twentysixteen Author: Firstname Lastname Author URI: http://example.com Template: twentysixteen Version: 1.0.0 */ /* Add your Custom CSS after this line */
Replace example data with your own. “Theme Name” must always be unique. Recommended naming convention is “nameofparenttheme-nameofchildtheme”. “Template” field is the most important part. There you’ll write the name of your parent theme. At this example we use twentysixteen as a parent.
4. Add these lines to your functions.php file:
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') ); }
With functions.php file we make sure that your new child theme uses the styles of the parent theme and the styles of your own style.css.
If your parent theme uses more than one css-file for styling, you would have to duplicate the fourth line and change the css-file’s name at the end of the line. Multiple css-files:
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/example.css' );
5. Upload your child theme folder to /wp-content/themes using FTP. It’s okay if you’re not familiar with FTP. Here’s a quick tutorial:
a) Download and install FTP-client to your computer. I personally recommend Cyberduck (https://cyberduck.io)
b) Click “Open Connection” (Or similar in other FTP clients)
c) Fill in your (S)FTP-details and click Connect. At Pilvia, you’ll find your details easily at one central place. (See the image.)
d) Upload folder to /wp-content/themes
6. Active your new child theme at your wp-admin > Dashboard > Appearance > Themes.
Well done, congratulations!
You have just created a child theme for your site! Now you can make changes to your style.css and it will automatically override the parent theme’s styles. Want to customize even more?
Customize more than just CSS styles
Use functions.php for adding functionality to your theme. Here’s how you can add your own Google Font:
function pilvia_add_fonts() { echo '<link href="http://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css">'; } add_action( 'wp_head', 'pilvia_add_fonts');
Override files of the parent theme
Let’s say you want to add something to the footer.php of your site. Simply copy/paste footer.php from the parent theme’s folder to the child theme’s folder. Now you can make changes to it, without losing the edits if theme gets update.