How To Install A Parent And Child Theme In Wordpress

Tutorial: How to Install a WordPress Child Theme

In this article, we're going to talk more about what WordPress child themes are and why yous should use them. Then we'll talk about some situations where it makes sense to create a child theme and teach you how to do it.

One of the best things about using WordPress is its near endless customizability. Still, there are some protocols yous should follow before you swoop nether the hood. Otherwise, your customizations may non piece of work as intended.

That'south where child themes come to the rescue. They're a WordPress feature enabling you lot to customize your themes safely and go on all your tweaks organized. Once yous learn how to employ them, your life should get a lot easier, peculiarly if you spend a lot of time playing with your theme'south way and behavior.

What WordPress Child Themes Are (And Why You Should Use Them)

A WordPress child theme works just the same every bit a regular one on the surface. Once activated, it'll piece of work just as whatever of your other themes would. The deviation is, child themes have a 'parent' from which they inherit all their attributes.

For example, imagine yous're using the Twenty Seventeen theme on your blog. You can create a child for it at any point, which would expect and piece of work merely the same. However, you can customize every aspect of how a child theme works without affecting its parent. Here's how that tin work in your favor:

You can update your themes safely. When y'all update a theme, you also lose whatsoever changes you've made to its code in the process. Nevertheless, if you're using a child theme and you update its parent, you bypass this outcome.
It's easier to keep rail of the changes you make to a theme. Many WordPress themes include dozens of files and hundreds of lines of lawmaking. Making whatsoever alter to them — no thing how pocket-size — can be tricky because it'due south easy to lose rail of those tweaks. With a child theme, you can make changes to your heart's content and all the same keep things tidy.

Let's summarize what we've learned thus far using an case.

If you create a child theme for Twenty Seventeen, WordPress will recognize it as a unlike item. However, the child theme will inherit all of its parent's styles and features. WordPress so loads any changes that override its default configuration. If and so, it'll return those instead of the default Twenty Seventeen files.

Information technology sounds catchy, just information technology'due south simple once you learn how to create one and run into it in action.

When It Makes Sense to Utilise a WordPress Child Theme

If you lot plan on making changes to your theme, you should create a child for it. However, if yous're completely satisfied with the way your theme works and looks, y'all can utilise it as is.

Pro tip: Y'all can as well decide to use WordPress' custom/additional CSS capability if merely CSS changes are required. This is much simpler than creating a child theme and can exist done straight from the Customizer.

If you're still on the fence about whether it's a skillful thought to use a child theme or not, here's a few examples of situations where doing so makes sense:

If you're going to make any changes — permanent or temporary — to your active theme's functionality or style.
If you lot're using a theme that receives constant updates (which is a good thing!) and you don't want to lose your customizations during the procedure.
To exam changes you may want to implement on your agile theme using a condom environment.

Any of these scenarios are good reasons to use kid themes day-to-day. However, if yous're going to create one mainly for test purposes, yous may also want to look into setting upward a staging website.

How to Create a WordPress Child Theme (in 5 Steps)

If this is your first time setting upward a WordPress child theme, you should definitely back up your website. Don't exist scared — the process is very straightforward, but information technology always pays to err on the side of caution.

Also, before we jump in, you should already know which theme you want to use as the parent in this scenario. If y'all're just doing this for testing purposes, feel gratis to choice one of WordPress' default themes for at present.

i. Create a Folder for Your Child Theme

The first step is, of grade, the simplest. Each theme you install on your website has its own folder within a dedicated themes directory on your server. To kicking things off, we're going to create a new subdirectory for your new child theme.

There are plenty of ways to collaborate with your website'southward file structure — such as through your console — but we're fractional to Secure File Transfer Protocol (SFTP) due to its ease of utilise. To access your website via FTP, you'll need a dedicated client. Nosotros recommend using FileZilla since it's easy to pick upward even for beginners, and it'southward under constant development. If yous're not au fait with using FTP, you lot'll besides need to castor up on your skills before tackling these steps.

One time installed, access your website's directory using your SFTP credentials. This directory most often shows upwards equally public_html only at DreamHost, the default is the domain you've added (example.com).

Enter the directory and make your way to wp-content/themes/. Inside, yous'll find a unique folder for each of your WordPress themes.

Now, right-click anywhere inside the themes directory, pick the Create directory option, and then ready a name for your new folder:

Your kid theme's folder tin have any proper name you desire. Still, for practical purposes, nosotros recommend giving information technology a championship you can easily recognize, such as twentyseventeen-child (or something else, depending on what its parent theme is).

One time y'all have a folder for your child theme prepare to get, yous're ready to motility on to step number 2.

ii. Create a Theme Stylesheet

As you lot may know, stylesheets are the CSS files that provide your pages with most of their visual flair. Each theme comes with its own unique stylesheet, and your child is no exception. Remember that by default your kid theme will inherit all its parent's styles. However, you can override those by adding new code to the style.css file y'all're about to create.

While your child theme'south mode.css file will come in handy down the line, it also fulfills an of import purpose right at present. It merely tells WordPress "Hey, I'chiliad a theme as well, load me alongside the rest!"

For that to happen, you need to return to your child theme'south directory and admission it.

Right at present, the folder should be empty. Right-click anywhere within and choose the Create new file option. When FileZilla prompts you to choose a name for it, blazon style.css and ostend your conclusion.

Finally, we need to add a short snippet of code to that file. Correct-click on it and choose View/Edit. This choice will download a copy of the file to your estimator and open it using your local editor. When the file is open, you'll need to paste in the following text:

/*
Theme Name: Twenty Seventeen Child
Theme URI: http://instance.com/twenty-seventeen-child/
Description: Your first child theme!
Author: John Doe
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.0
License: GNU Full general Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-ii.0.html
Tags: child theme
Text Domain: 20-seventeen-child
*/

At showtime glance, this seems like a lot of information, just for a child theme to piece of work, in that location's only one field you need to become right: Template. In the example above, you can run into nosotros used twentyseventeen, which is the name of the Xx Seventeen theme's directory. If you're using a different theme as a parent, you lot need to supervene upon that value with the proper noun of its folder (not the theme's full name).

You'll also want to pick a title and clarification that makes sense for your child theme since yous'll see both within WordPress' Theme tab. As for the rest of the fields, the values can be replaced with annihilation you lot like.

Moving on, after yous've prepare the correct Template value and tweaked the code, you can save the changes to your manner.css file and shut the text editor. Now, FileZilla will ask you if you desire to replace the file on your server with the local re-create yous just modified. Say Yes, and access your WordPress dashboard. If yous look at the Themes tab, you should see a new addition.

At this phase, you can activate your child theme, but it'southward even so not going to work as intended since we oasis't told WordPress it should inherit its parent's functionality. Don't actuate the theme yet — nosotros'll take intendance of inheritance in the next step.

three. Configure Your Child Theme to Inherit Its Parent'southward Style

By now, yous should have created a folder and style.css file for your new child theme. Within the latter, we included information designating it as a theme. The next step is to make sure your child theme inherits its parent's style and features.

To exercise this, we're going to employ a functions.php file, which enables you to instruct WordPress to add new features. Within that file, we're going to add a script to queue up your parent theme's stylesheet (non the one nosotros just created). After, you'll kid theme will be gear up for you to apply.

To commencement, return to your child theme's directory. Within, create a new file chosen functions.php, just equally yous did with mode.css during step number two.

Now open the file using FileZilla'due south View/Edit option and paste the following code within:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

In this case, there's no need to replace any of the code's values. The same code will work regardless of which parent theme you're using since you already designated this using the manner.css file.

To make a long story short, that snippet of code tells WordPress information technology should load your parent theme's stylesheet, which is the last piece of the puzzle you lot need for your child theme to work.

Now salve the changes to your functions.php file and close it. Make sure to agree when FileZilla asks you if you want to supersede your website'south functions.php file, and that's it! Now your kid theme is ready for its chiliad debut.

4. Actuate Your New Child Theme

To utilize your kid theme, render to your WordPress dashboard and get to the Advent > Themes tab. Within, in that location should be one theme without a featured image — your child theme.

Click on the Activate push button next to the theme's name and open your website as you ordinarily would. If you followed the previous three steps to the letter of the alphabet, your site should look exactly as it did before we got started.

Experience costless to take a quick look around just to triple bank check everything is working correctly. If the reply is "Yes" (which it should exist), you're ready to move on to the second role of this tutorial, where we'll talk well-nigh how to use your new child theme.

However, before that, allow's brand 1 quick pit terminate and add together a featured image to your child theme.

v. Add an Epitome to Your Child Theme

Only and so we're articulate — when we talk about a theme'due south featured image, we're referring to the graphic that shows upwards in a higher place its proper noun within the Themes tab. Here are a few examples.

Newly minted kid themes don't come up with these images, so you need to provide i for WordPress to load it. Fortunately, this is a very simple process. All y'all accept to do is add a PNG prototype called screenshot.png within your kid theme's directory.

WordPress will brandish this prototype at a 387 10 290 resolution. However, you'll probably desire to salvage it using a college dimension, so it displays well on larger screens. In any instance, yous can use any image you lot want every bit your theme's screenshot.

With that out of the mode, your Themes tab should be looking fabulous again, so it's time to go back to concern.

iv Tips to Get the Most Out of Your WordPress Child Themes

At this stage, you should have a fully working child theme on your easily. More than chiefly, you also accept a firm understanding of how the entire process works and why each step in creating one is necessary. This means nosotros can jump correct into playing around with your kid theme using the files you but created!

1. Add Custom Styles

As you lot already know, every WordPress child theme automatically inherits its parent's styles. However, they too accept their ain stylesheet. Whatsoever customizations you add to your child theme's manner.css file will then override their parent'southward styles if there's whatever conflict between them.

Tweaking your theme'southward style using CSS is unproblematic equally long as y'all know what its elements are. Even if y'all don't, you can hands observe out using a web inspector, such as Chrome DevTools which is included with your browser. Merely right-click the element you want to change and select the Inspect selection.

At present, the page's source lawmaking will show upwardly on a column to your correct, including the specific course for the chemical element yous're inspecting:

Armed with that data, you can access your child theme'southward way.css file and add together the necessary code to tweak it. You lot can then salve the changes to your mode.css file and you're skilful to go. Return to your website's front terminate to run across what your theme looks like now.

ii. Acquire to Override Your Parent Theme's Files

A minute agone, we talked about how your child theme's style.css automatically override its parent theme'due south lawmaking. The same holds truthful for any other file of which there are two between your parent theme and its child.

Imagine, for example, you determine to create a child for the Twenty Seventeen theme. The parent, in this case, has a footer.php file inside its theme folder:

If y'all were to create a footer.php file within its child theme, WordPress would automatically load that i instead. The platform does this as long equally both files share the same folder tree structure. In this case, since your parent theme's footer.php file is located at the top of the twentyseventeen directory, the aforementioned has to hold true for its counterpart:

Every bit long as both files share the same name, WordPress will practise the remainder. Using this flim-flam, you'll be able to alter whatever attribute of your theme's functionality. Plus, if you ever pause anything, you can simply delete the offending file from your child theme's directory and start over.

3. Create Custom Page Templates

Whenever you create a new page in WordPress, you tin can cull a which template to use alongside it. Some of the nigh common examples include full-width layouts or those with sidebars.

You can add a new layout to any theme you want, although the process is a bit involved. If y'all want to endeavor your hand at creating a new ane, here'due south a tutorial to get you started.

4. Use Theme Hooks

In WordPress, hooks are triggers that enable you lot to add custom code when something happens or tweak the way your files work. These are both things you can accomplish by modifying your files, but using hooks is much cleaner since they exist separately.

Learning how to create hooks is a bit beyond the scope of this article, though.

In short, you can add hooks to your child theme using its ain functions.php file. This way, any modifications you lot brand remain independent of its parent theme.

Conclusion

WordPress child themes can be intimidating at first. Creating ane requires you to roll up your sleeves, but afterward you do information technology, you'll realize the process isn't that complicated. Plus, adding customizations to your child theme should provide yous with a better understanding of how WordPress works, which can open a lot of doors. Who knows? At some bespeak, yous may even finish up creating your own theme.