{"id":4227,"date":"2022-04-26T13:27:26","date_gmt":"2022-04-26T10:27:26","guid":{"rendered":"https:\/\/www.scalahosting.com\/kb\/?p=4227"},"modified":"2022-09-01T11:32:16","modified_gmt":"2022-09-01T08:32:16","slug":"how-to-create-a-child-theme-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.scalahosting.com\/kb\/how-to-create-a-child-theme-in-wordpress\/","title":{"rendered":"How to Create a Child Theme in WordPress"},"content":{"rendered":"\n

With <\/span>over nine thousand themes<\/b> in the <\/span>official WordPress repository<\/b> and <\/span>countless others<\/b> available on third-party websites, it’s safe to say that you’re somewhat spoiled for choice when it comes to <\/span>picking a design for your WP project<\/b><\/a>.<\/span><\/p>\n\n\n\n

Sometimes, however, website owners find out that off-the-shelf themes can’t give them the appearance they’re after. If you find yourself in a similar position, you’ll want to take an existing theme and <\/span>add some custom code to it<\/b>. However, before you do that, you’ll need to <\/span>create a child theme<\/b>.<\/span><\/p>\n\n\n\n

Let’s see what this means.<\/span><\/b><\/p>\n\n\n\n

What Is a Parent Theme?<\/b><\/b><\/h2>\n\n\n\n

We’ll start by clearing up some of the principal concepts behind WordPress themes. First, we’ll look at <\/span>parent themes<\/b>.<\/span><\/p>\n\n\n\n

Any standard WordPress theme<\/b> can be a parent theme, regardless of whether you download it from the official repository or from a third-party website. Here’s how it works.<\/span><\/p>\n\n\n\n

A WordPress theme itself is a collection of files that determine your website’s look. Every theme has its own directory inside the <\/span>\/wp-content\/themes <\/i><\/b>subfolder of your site’s document root. A database entry tells <\/span>WordPress<\/b><\/a> which of these folders belongs to the active theme, so the content management system knows which <\/span>CSS stylesheets, <\/b>PHP<\/b><\/a>, JavaScript, and media files<\/b> it needs to use to render the site’s appearance. If you want to modify the design to your specific needs, you’ll need to add your custom code to these files.<\/span><\/p>\n\n\n\n

The thing is, <\/span>WordPress themes<\/b><\/a> receive regular updates<\/b>, which you must install as soon as they’re available. In addition to bringing new features that improve your website’s user experience, these updates also carry <\/span>vulnerability patches critical to your site’s security<\/b>.<\/span><\/p>\n\n\n\n

When you update a theme, you effectively download new versions of the theme’s files, <\/span>overwriting the old ones in the process<\/b>. In other words, if you update a theme you’ve customized, <\/span>all your work will be lost<\/b>.<\/span><\/b><\/p>\n\n\n\n

What is a Child Theme?<\/b><\/b><\/h2>\n\n\n\n

A child theme works in tandem with the parent theme to allow you to <\/span>keep your custom code without preventing you from installing critical updates<\/b>.<\/span><\/p>\n\n\n\n

In some ways, it acts as a standalone theme in that it has its own folder inside the <\/span>\/wp-content\/themes<\/i><\/b> directory and is available on the <\/span>Appearance <\/b>> <\/span>Themes<\/b> page inside the <\/span>WordPress dashboard<\/b><\/a>.<\/span><\/p>\n\n\n\n

However, instead of containing all the templates that determine your site’s look and functionality, <\/span>it only holds your <\/b>custom design elements<\/b><\/a>. In fact, if your modifications are limited to the site’s typography, your child theme will consist <\/span>of two files only<\/b>.<\/span><\/p>\n\n\n\n

WordPress will read the custom code from these files, and for the rest of your site’s look, it will <\/span>fall back to the parent theme<\/b>.<\/span><\/p>\n\n\n\n

You can update the parent theme<\/b> whenever there’s a new version without touching the child theme and losing your custom look.<\/span><\/b><\/p>\n\n\n\n

How to Create a Child Theme<\/b><\/b><\/h2>\n\n\n\n

There are a couple of ways of setting up a child theme folder \u2013 <\/span>manually or with a plugin<\/b>.<\/span><\/p>\n\n\n\n

Obviously, the second method is <\/span>preferred by less experienced users<\/b>. There’s certainly no shortage of options. The “child theme” term returns quite a few search results in the <\/span>WordPress official plugin repository<\/b><\/a>, with each add-on offering a broad range of options and features.<\/span><\/p>\n\n\n

\n
\"How<\/figure>\n<\/div>\n\n\n

The steps you’ll need to take to set up a child theme via a plugin depend on the plugin itself. However, it’s fair to say that you’re <\/span>unlikely to run into any serious problems<\/b>. Most plugin vendors try to make their products’ interface as intuitive as possible, and there are often quite a few tooltips telling you what each of the buttons does.<\/span> In some cases, you can rely on technical support from the plugin developer, as well.<\/span><\/p>\n\n\n\n

The manual creation of a child theme is a bit more complex. However, it could help you better understand <\/span>how themes work in general<\/b>, which, in turn, could be useful later when you’re customizing your website’s look.<\/span><\/p>\n\n\n\n

If you’re doing it for the first time, using <\/span>a staging environment or a test installation<\/b> might not be a bad call. You’re unlikely to do any serious damage to the site, but you can never be too careful. What’s more, you’ll want to make sure everything works <\/span>before pushing the changes to production<\/b>.<\/span><\/p>\n\n\n\n

To manually set up a new child theme in WordPress, you need to <\/span>create a new folder and set up a couple of files<\/b>. Those comfortable working with the command-line can use <\/span>SSH<\/b><\/a>, though most people will prefer doing it via the control panel’s file manager. For our example, we’ll create a child theme of <\/span>Twenty Twenty-Two<\/b> \u2013 the default WordPress theme at the time of writing. Let’s see the exact steps:<\/span><\/p>\n\n\n\n

1. Navigate to <\/b>\/wp-content\/themes<\/i><\/b> and set up the child theme’s new folder<\/b>
<\/b><\/h3>\n\n\n\n

If your site is on your account’s main domain, its document root folder should be public_html (unless you’ve changed it yourself). Open it, and go to <\/span>wp-content\/themes<\/span><\/i>. You’ll see the folders of the themes currently installed on your website.<\/span><\/p>\n\n\n

\n
\"How<\/figure>\n<\/div>\n\n\n

To set up a new one, you’ll need to create a folder for it. Although you can use a random name, it’s considered best practice to append “<\/span>–<\/span><\/i>child” to the name of the parent theme. In our case, we’ll name the folder “<\/span>twentytwentytwo-child<\/span><\/i>.”<\/span><\/p>\n\n\n

\n
\"How<\/figure>\n<\/div>\n\n\n

2. Set up a stylesheet \u2013 style.css<\/b><\/h3>\n\n\n\n

The child theme’s main stylesheet, style.css, usually carries<\/span> the bulk of the customizations<\/b>. Using your File Manager, you can create it straight on the server via <\/span>New <\/b>> <\/span>New File<\/b>.<\/span><\/p>\n\n\n

\n
\"How<\/figure>\n<\/div>\n\n\n

3. Enqueue your stylesheet<\/b><\/h3>\n\n\n\n

In addition to containing your custom typography, the style.css file also <\/span>points WordPress to the parent theme<\/b>. You need a couple of main lines in the style.css file to set up a child theme \u2013 <\/span>theme name and template<\/b>. Here’s what it should look like:<\/span><\/p>\n\n\n\n

\/*\n
Theme Name: Twenty Twenty-Two\n
Template: [the name of the parent theme]\n
*\/<\/i><\/b><\/p>\n\n\n

\n
\"How<\/figure>\n<\/div>\n\n\n

NOTE: <\/b>You need the name of the parent theme’s folder in <\/span>wp-content\/themes<\/span><\/i>, not the name you see in the WP dashboard.<\/span><\/p>\n\n\n\n

Don’t forget to add <\/span>\/* <\/b>at the beginning and <\/span>*\/ <\/b>at the end of this section.<\/span><\/p>\n\n\n\n

If you want, you can add additional information. If you’re distributing the theme, for example, you can enter the author, the version, some contact details, etc.<\/span><\/p>\n\n\n\n

Save and close<\/b> the file when you’re done.<\/span><\/p>\n\n\n\n

4. Create a functions.php file<\/b><\/h3>\n\n\n\n

If you look inside the WP dashboard, you’ll see that the child theme is already listed on the <\/span>Appearance <\/b>> <\/span>Themes <\/b>page. What you need to do now is connect it to the parent theme. To do that, you need to create a second file called <\/span>functions.php<\/i><\/b> in the child theme folder.<\/span><\/p>\n\n\n

\n
\"How<\/figure>\n<\/div>\n\n\n

5. Connect the child theme to the parent one<\/b><\/h3>\n\n\n\n

Open the <\/span>functions.php <\/span><\/i>file and paste the code you see below.<\/span><\/p>\n\n\n\n

<?php\n
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );\n
function enqueue_parent_styles() {\n
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’\/style.css’ );\n
}\n
?><\/i><\/b><\/p>\n\n\n\n

The code above means that the child theme inherits the parent theme’s style and functionality while also <\/span>retaining the customizations you add to it<\/b>.<\/span><\/p>\n\n\n\n

6. Activate the theme<\/b><\/h3>\n\n\n\n

 Finally, it’s time to go back to the WP dashboard and activate the new child theme from the <\/span>Appearance <\/b>> <\/span>Themes <\/b>page.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

With over nine thousand themes in the official WordPress repository and countless others available on third-party websites, it’s safe to say that you’re somewhat spoiled for choice when it comes to picking a design for your WP project. Sometimes, however, website owners find out that off-the-shelf themes can’t give them the appearance they’re after. If […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[34],"tags":[],"class_list":["post-4227","post","type-post","status-publish","format-standard","hentry","category-web-hosting"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts\/4227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/comments?post=4227"}],"version-history":[{"count":10,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts\/4227\/revisions"}],"predecessor-version":[{"id":5062,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/posts\/4227\/revisions\/5062"}],"wp:attachment":[{"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/media?parent=4227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/categories?post=4227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.scalahosting.com\/kb\/wp-json\/wp\/v2\/tags?post=4227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}