One place for hosting & domains

      Child

      How to Create a WordPress Child Theme

      When you have specific requirements, selecting a WordPress theme is no easy task. Your choice needs to look the part and provide all the functions you need — Some compromise is almost inevitable.

      Customizing your chosen theme is one way to get around this issue. However, WordPress themes need to be updated periodically. When the developer of your theme releases a new version, all your customizations could be reset.

      The solution?

      Create a WordPress child theme that inherits the original theme’s functionality but maintains your styling. Even if you apply a theme update, your customized child theme will remain intact.

      In this post, we’re going to take a closer look at WordPress child themes — from why you need one to how to create your own. Let’s dive in!

      What Is A Child Theme?

      DreamHost Glossary

      Child Theme

      A ‘child theme’ is a WordPress theme with the same appearance and functionality as its ‘parent theme’. However, you can customize its files separately from its parent theme’s files.

      Read More

      WordPress allows you to make a lightweight copy of any theme for the sake of customization. The original theme becomes the parent theme, and the copy is known as a child theme.

      The child is dependent on the parent, drawing on the functions and design of the original theme. When the parent theme receives an update, so does the child.

      But much like a teenager, the child theme does have some independence. When you customize the child theme, the changes are applied on top of the original parent theme. Those additions remain, even when the parent theme is updated or changed in some other way.

      It’s also worth noting that customizations to your child theme don’t affect the parent theme. In fact, they are stored separately. This means you have freedom to experiment, without worrying about breaking the underlying code. You can even delete your child theme completely, and it will have no effect on the original parent theme.

      Using a child theme makes it easier to maintain and update your site. It will also help you avoid the risk of editing the parent theme directly, which could be overwritten and lost.

      Differences Between Child And Parent Themes

      DreamHost Glossary

      Parent Theme

      When working with WordPress child themes, there’s always a parent theme. It’s the theme that the child inherits its style and functionality from. Any changes to the child theme won’t impact the parent’s code.

      Read More

      There are several technical differences between a parent theme and a child theme. For example, a parent theme folder typically includes:

      • A style.css file that determines the look and feel of your website.
      • A functions.php file that enables you to add features or modify the default behavior of WordPress.
      • Several template files that define how different pages on your site are displayed.

      In contrast, a child theme folder only needs two essential files: style.css and functions.php. You will add these files within the /wp-content/themes/ directory.

      You can use a child theme to make stylistic changes to your website, such as changing the default color palette, fonts, and layouts.

      For example, let’s say you want to change your site’s color scheme. You can do this by creating a new style.css file in the child theme directory and adding the following code:

      body {

      background-color:#fff;

      }

      h1 {

      color: #000

      }

      We’ve changed the background color and H1 color in the code above. These edits will override the parent theme’s styling and update the colors on your site. You can make as many changes as needed in the child theme’s style.css file.

      A child theme inherits everything from the parent theme. This includes all template files, functions, and assets such as images and JavaScript files. If you want to make changes to these elements, you need to copy them into the child theme directory from the parent theme. You can then edit the files.

      Why You Should Use A Child Theme

      There are several advantages to using a child theme on your WordPress site, including:

      • Protecting theme changes against automatic updates.
      • Adjusting visual elements of your theme.
      • Learning how to edit themes, which is a step toward developing your own theme.

      Using a child theme also requires minimal coding experience. In most cases, you only need to add a few lines of code to the style.css file. This makes it easy to get started with a child theme, even if you’re not a theme developer.

      If you do want to dive deeper, you can add new elements and functions to your child theme via custom code.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      How To Create A WordPress Child Theme Using A Plugin

      Using a plugin is probably the easiest way to create a WordPress child theme. The plugin can walk you through the entire process in simple steps, meaning you don’t need any technical knowledge.

      In this tutorial, we’ll be working with the Child Theme Configurator plugin. This user-friendly tool can help you analyze your theme for issues, create a child theme, and edit it to meet your web design layout and style specifications.

      Step 1: Download And Install The Child Theme Configurator Plugin

      To start, you’ll need to download and install Child Theme Configurator. You can do this by navigating to the plugin’s page and clicking on the Download button:

      Child Theme Configurator by Lilaea Media screenshot of download button

      Your computer will download the theme files in a ZIP file. Then, navigate to your WordPress dashboard and go to Plugins > Add New to upload the files.

      Click on Upload Plugin > Choose File, and select the downloaded folder:

      Add plugins "upload plugin" screenshot where you can upload a .zip file

      Once the plugin is installed, you’ll just need to activate it. Keep in mind that you’ll also need to choose a WordPress theme from which to make your child theme.

      Step 2: Analyze The Parent Theme

      Next, navigate to Tools > Child Themes:

      wordpress menu showing the nav bar where you can find "child themes" in "tools"

      The plugin will walk you through the steps to create a child theme. Simply select CREATE a new Child Theme to get started:

      screenshot of the first step: select an action with "create a new child theme" selected

      You’ll be prompted to select your parent theme from the dropdown menu. If you have multiple themes on your WordPress site, make sure to choose the one you want to customize:

      step 2: select a parent theme showing a search bar which "Twenty Twenty-Four" entered all all four versions of Twenty Teenty displaying as search results

      Now hit Analyze to check the parent theme for any potential code issues:

      step 2: analyze parent theme

      If the plugin finds any compatibility or coding issues, it will list them here. Otherwise, you’ll see a green success message telling you it’s fine to proceed with making the child theme:

      screenshot of the analysis page showing a check mark that this theme appears OK to use as a child theme and the relevant code

      Once you’ve determined that your parent theme will be suitable for a child theme, you can move on to the next step. (You can also show a raw data analysis or submit support requests to the plugin’s creator from this page.)

      Step 3: Name Your Child Theme Directory

      Next, you’ll be prompted to create a child theme directory name. This is the name of the folder within your website’s files.

      You can name it anything you like as long as it’s unique to your site and contains acceptable characters. We’re using “twentytwentyfour-child” for simplicity’s sake:

      You can name child theme anything you like as long as it's unique to your site and contains acceptable characters.

      Keep in mind that naming the theme directory is not the same as naming your child theme or adding a theme description. Those steps will come later.

      Step 4: Select The Child And Parent Theme Stylesheets

      Next, you’ll need to choose the new stylesheet for your child theme. If you select the primary stylesheet (style.css), your custom CSS styles will override the existing theme content.

      DreamHost Glossary

      CSS

      Cascading Style Sheets (CSS) is an essential coding language used for styling webpages. CSS helps you create beautiful pages by modifying the appearance of various elements, including font style, color, layout, and more.

      Read More

      This is the default option, and we recommend choosing it if you’re new to child themes:

      step 5: select where to save new styles with "primary stylesheet" selected instead of "separate stylesheet"

      You’ll now be prompted to choose your parent theme stylesheet handling method. There are various options, but we recommend sticking with Use the WordPress style queue for most use cases:

      step 6: select parent theme stylesheet handling with "use the wordpress style queue" selected

      As a beginner, it’s better to use the default option until you’re more familiar with how the parent theme handles the stylesheet. The other options aren’t always compatible with all themes.

      Step 5: Name Your Child Theme

      The next step is to name your child theme and write a description for it.

      step 7: customer the child theme name, description, author, version, etc. with respective text boxes in the attributes editor

      Child Theme Configurator will pull the default information from your parent theme and display it here. If you’re simply making a child theme for personal use, you can leave the data as-is.

      However, if your parent theme will serve as the basis for a new theme you’re developing, you might want to add a brief description and a unique name.

      Step 6: Copy The Parent Settings To The Child Theme

      The plugin will now ask you to confirm that it can copy the parent theme’s settings to your child theme:

      step 8: copy menus, widgets, and other customizer settings from the parents theme to the child theme with the checkbox selected

      This step will ensure that your child theme pulls its functionality and appearance from the parent theme. Note that if you’re working with a premium or restricted theme as the parent, you may not be able to perform this step.

      Step 7: Create Your New Child Theme And Preview It

      The final step is to make your child theme. Click on the Create New Child Theme button and wait for the plugin to do its job:

      step 9: click to run the configurator and "create new child theme" button

      You should get a notification that your child theme was created successfully:

      child theme twenty twenty-four child has been generated successfully

      Always preview your child theme before activating it on your website. This step will help you verify that everything is working as it should. Then, hit Activate & Publish to get started with your child theme.

      How To Manually Create A WordPress Child Theme

      If you’d rather not use a plugin to create your child theme, you can use the manual method. You might prefer this route if you’re already using too many plugins on your website.

      Additionally, manually creating a WordPress child theme lets you make all the changes you want at a granular level. Just keep in mind you’ll need an intermediate knowledge of CSS code.

      Here’s a step-by-step guide:

      Step 1: Develop A Plan For Your Changes

      First, find a parent theme you like and list the changes you want to make. You can view the developer tools and see the theme’s code to make the correct changes.

      To view the developer tools, right-click anywhere on your site while running the theme and select Inspect Element. You’ll then see a page of data that looks something like this:

      blue screen of code with "background-color" highlighted in three places

      Here, you can search for background colors, font information, margin size, and more. Then, you can make a list of features you’d like to adjust in your child theme.

      Step 2: Back Up Your Site

      It’s essential to back up your current site before making any changes to avoid losing your settings. You can always revert to this backup if needed. You might also consider utilizing a staging website in case you make critical mistakes.

      There are a couple of different ways to back up your site. You can do it manually using a backup plugin, which is probably the easiest method for most people.

      Alternatively, you can partner with a WordPress hosting provider that takes care of website backups. Our DreamPress managed hosting plans include automatic and on-demand backups to safeguard your data.

      Step 3: Create A Folder For Your Child Theme

      You’ll need to create a folder to store your child theme files. To achieve this, first access your files via a Secure File Transfer Protocol (SFTP) client such as Filezilla and navigate to the themes folder:

      files showing where theme files live under wp-content>themes

      Here, you can create a new directory for your child theme. Make a new folder that carries the parent theme’s name and add “-child” to the end.

      For example, if your parent theme directory is named “twentytwentyfour”, your child theme directory will be called “twentytwentyfour-child”.

      Step 4: Make A Stylesheet For Your Child Theme

      Now you’ll need to make a new text file and name it “style.css”. This file will form the basis of your child theme. It will need some basic header information, including its name, URL, description, and more:

      style sheet with 8 lines showing each written out line of the theme name, URL, description, author, author URL, parent theme, version, and text domain

      Now save and add the style.css file to the directory folder you just made.

      Step 5: Enqueue The Stylesheets

      Next, you’ll need to enqueue the parent and child theme stylesheets.

      The enqueue function ensures that your child theme will take its style data from the parent theme. It also allows you to edit the child theme without affecting its parent.

      Make a new functions file in your child theme directory and name it “functions.php”. You can then tell your child theme to reference the base theme by adding the following code:

      <?php

      add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

      function enqueue_parent_styles() {

      wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

      }

      ?>

      Save the text file and navigate to your WordPress dashboard to activate the theme.

      Step 6: Activate The Child Theme

      Finally, it’s time to activate your child theme. You can upload it manually by going to Appearance > Themes > Upload. Then, choose a .zip version of your child theme directory:

      wordpress sidebar nav showing you can find themes under appearance

      Activate your child theme. It should now be live!

      How To Customize Your Child Theme

      Once you’ve activated your new child theme, it’s time to take it for a spin. There are several different ways you can customize the design and functionality.

      One principle to bear in mind is that WordPress automatically looks for files in the child directory before scanning the parent theme files. This means any stylesheet or template you add to your child theme will take precedence over the same file in the parent folder.

      The child-before-parent system gives us loads of options.

      Creating Custom Styles

      For basic design changes that aren’t covered by the Theme Options panel, you can create your own custom styles. In most cases, you can simply rewrite existing parent styling rules in a new stylesheet.

      The best way to find the CSS you want to modify is by using the Inspector Tools in your browser. You can look at the CSS and the HTML behind any webpage by right-clicking on it and selecting Inspect Element.

      At the bottom or the right side of your screen, you’ll find the code for the page. Hover your mouse over the code and highlight the HTML in sections:

      inspect code showing the various HMTL sections

      As you hover, it will also display the CSS rules. You can edit the CSS directly with the developer tools to see how it looks.

      inspect page HTML code showing the span class and background color in HTML

      In this example, we changed the background color from “#9888fd” to “#9888fe” to see how it would look. The background color will change instantly, but it’s not permanent.

      You now need to copy the CSS rule and add it to the style.css file of your child theme like this:

      body {

      Background-color: #9888fe;

      }

      Save these changes in the style.css file and return to your WordPress dashboard to preview the theme. This process might require trial and error, so take your time to perfect the style.

      Override Parent Templates

      Just as we can create a new stylesheet for custom CSS, it’s possible to override parent templates with new content. This allows you to make wholesale changes to the structure of specific parts of your website — such as the header and navigation menu, the footer, or the single posts template.

      Let’s imagine that you want to change the blog post layout in your child theme, so the title of each post appears above the featured image.

      This section of your site is controlled by the content.php template file. To start making changes, download a copy of content.php from the parent folder via SFTP.

      Next, open the child template in your text editor. You might see something like this:

      twentytwentyfour_post_thumbnail();

      <header>
      <!-- Title and other header info here -->
      </header>

      To adjust the layout of your header, you might change the code to read:

      <header>
      <!-- Title and other header info here -->
      </header>

      // Post thumbnail
      twentytwentyfour_post_thumbnail();

      Finally, save the file and upload it to the child theme folder. Make sure to retain the original name of the file, otherwise WordPress won’t recognize your edited template.

      Custom Page Templates

      Want something totally different? You can also add brand new templates to your child theme.

      The process is exactly like developing templates for a regular theme, except you may also need to create custom header and footer templates. These files need to be referenced in your new custom template — and don’t forget to add some new CSS via the existing child stylesheet.

      Creating New PHP Functions

      If you want to introduce new features in your child theme, you can create a child functions.php file. This works in tandem with the parent functions file, rather than replacing it.

      As such, you don’t need to make a copy of the original file — simply write any additional scripts you want to add on top. The child functions file will run first, followed by the parent version.

      Adding a functions file to your child theme opens up a whole range of possibilities. For example, you could:

      • Register new widgets and shortcodes.
      • Add custom post types and taxonomies.
      • Create new theme options.
      • Hook up external stylesheets and JavaScript files.
      • Lay the groundwork for translating and localizing content.
      • Override certain parent theme functions.

      You can learn more about creating these functions in our complete guide to functions.php.

      Using Theme Hooks

      The most efficient way of adding features to your new functions file is by using hooks.

      Hooks are part of the core functionality of WordPress. They allow you to alter various parts of your website without having to edit individual templates.

      Instead, you simply assign your code to the relevant hook in the functions file. WordPress will then automatically apply this code to matching elements in the parent theme.

      In WordPress, hooks come in two varieties:

      • Action Hooks: Used to “hook” custom code into specific parts of your WordPress theme, such as a new widget area or a custom message to be displayed after each blog post.
      • Filter Hooks: Used to modify content generated either by WordPress or a parent theme, before it’s sent to a browser or stored in the database. In terms of child themes, they are most often used to adjust the length of excerpts.

      Most hooks only require a small code snippet. For example, here’s the code you would need for adding some content to the footer of your site:

      function my_custom_footer_content() {
      echo '<div>Custom footer content here</div>';
      }
      add_action('wp_footer', 'my_custom_footer_content');

      You see that ‘wp_footer’ bit? That’s the hook, and it tells WordPress where this code needs to go. In this case, your custom function should come straight after the footer template — wherever that is invoked within your theme. Neat, huh?

      WordPress Child Theme FAQs

      We’d like to think this guide has been pretty comprehensive so far. But if you still have questions hanging, we have answers:

      Should I activate parent or child theme in WordPress?

      There’s a simple rule here: activate the theme you want to use.

      If you want to revert to the original design as your active theme, activate the parent. But if you want to enable those glorious customizations, be sure to activate the child theme.

      What are the disadvantages of using a child theme?

      There aren’t many disadvantages to using a child theme. It’s a little more technical than customizing your site via the Dashboard. To make bigger changes, you will need at least some basic knowledge of HTML, CSS, and PHP.

      It’s also worth noting that a poorly optimized child theme can slow down your site, and you’re always going to be reliant on the parent theme.

      Can a child theme exist without a parent theme?

      Nope, a child theme doesn’t work without a parent theme.

      The concept of a child theme is inherently dependent on a parent theme. Remember that the parent supplies everything other than the custom styles and templates you add. What’s more, the whole folder structure of your site would be messed up if you removed the parent folder.

      If you want to separate out your child design, consider converting it to a standalone theme.

      Can you have multiple child themes for one parent theme?

      Yes, you can. This means you can craft multiple versions of the same site to suit different audiences. You could even run A/B testing this way.

      What are the best WordPress child theme creator plugins?

      Along with Child Theme Configurator, which we worked with earlier, check out WP Child Theme Generator and Child Theme Wizard.

      WordPress.org has its very own experimental child theme plugin, too. It’s called Create Block Theme.

      What is the difference between a child theme and a custom theme?

      Dependency is probably the biggest difference. A child theme leans on the core files of a parent theme, whereas a custom theme stands alone.

      That independence means that theme developers can introduce new core features and more customization. On the flip side, you need to be comfortable with code to create and maintain a custom theme.

      It requires way more development time to build a complete theme from scratch, as well.

      Protect Your Theme Customizations And Updates

      Using a child theme helps you avoid the complications of editing a parent theme directly. A child theme is easy to adjust, enabling you to make sweeping design changes to an existing website. Plus, it isn’t affected by automatic theme updates.

      Here’s a quick recap of how to create a child theme manually:

      • Make a plan.
      • Back up your current site.
      • Create a folder for your child theme using an SFTP client.
      • Make a style sheet and upload it to your site.
      • Enqueue the child and parent theme stylesheets.
      • Activate and preview your child theme.
      • Make changes using CSS.

      Having a beautiful theme is just one part of running a successful website. You’ll also need a hosting provider that fits your needs. Check out DreamHost’s shared hosting packages for affordable plans that prioritize website performance, with 100% uptime guaranteed!

      We Make WordPress Easier for You

      Leave migrating your site, installing WordPress, managing security and updates, and optimizing server performance to us. Now you can focus on what matters most: growing your website.

      Managed WordPress Hosting - DreamPress

      How to Create a WooCommerce Child Theme


      Let’s say you have a WooCommerce store up and running.

      If you’re using the official Storefront theme, it might even look quite professional. However, you may still want to customize the appearance of your WooCommerce store to match your vision.

      The best solution is often to create a WooCommerce child theme. That’s because a child theme enables you to make changes to your original theme without editing it directly. It simplifies the process of customizing your store’s appearance and eliminates potential risks to your theme and store.

      In this article, we’ll look at how you can style your WooCommerce store using themes. Then, we’ll show you how to create your own child theme in just five steps. Let’s get started!

      A Quick Look at WooCommerce Themes

      With the launch of the WooCommerce plugin in 2011, WordPress became the most popular e-commerce platform. WooCommerce is currently used to power 25% of all online stores, making it 6% more popular than its closest competitor.

       

      One of the elements that has made WooCommerce so successful is how easy it is to create a unique store with minimal effort. However, this alone doesn’t explain the platform’s popularity.

      Another huge factor in WooCommerce’s success is the nearly infinite customization possibilities it offers. When combined with the right theme, you have access to a lot of design flexibility.

      WooCommerce is compatible with almost all WordPress themes. However, most of them will not be optimized to handle the unique features of the plugin.

      Fortunately, the Storefront theme is an excellent option. This is the official WooCommerce theme, built specifically to integrate with the plugin. It looks compelling right out of the box, with a simple and clean design that puts the focus on your products:

      the WooCommerce Storefront theme

      This bare-bones design also makes Storefront an ideal base for customization. This is where child themes come in handy, which we’ll look at next.

      Why You Might Want to Create a WooCommerce Child Theme

      If you’ve spent much time reading up on WordPress, you’ve probably come across child themes before.

      In short, a child theme starts life as a copy of another theme, which is known as the ‘parent theme’. You can then make changes to the child theme and test them out without editing the parent theme directly. This is important because altering the original theme can result in irreversible errors and even damage to your website.

      You might create a child theme because you want to use another theme as a basis, rather than having to build a new theme entirely from scratch. Alternatively, you may only want to make some minor changes to a theme’s branding or overall aesthetic. The sky really is the limit, depending on how much time you’re willing to devote to the project.

      When it comes to WooCommerce, most child themes are based on Storefront:

      Storefront child theme options in the official WooCommerce store

      You can download several child theme options from the official WooCommerce store or from other sites like ThemeForest. However, it’s possible that none of the existing child themes offered match your needs, or you may simply want to create a unique look. What’s more, you might not want to spend money on a premium theme if you feel you could do better yourself.

      In a post on the official WooCommerce blog, the plugin’s developers discuss the most common motivation behind using a child theme for your online store:

      “The aim with our own Storefront child themes is to deliver a store experience perfect for your own niche. After installing Galleria, and not touching any settings, you instantly have a store fit to sell high-end fashion items. With ProShop, you can rapidly set up a stylish sports store.”

      The actual process of creating a child theme is the same whether you’re making one specifically for WooCommerce or for a more general WordPress site. However, you will need to keep your store’s purpose in mind as you customize your child theme. An e-commerce site requires a different design philosophy than a blog, after all. Let’s see what this process looks like in practice!

      How to Create a WooCommerce Child Theme (In 5 Steps)

      Now, we’re going to walk you through how to create a WooCommerce child theme. In this example, we’ll create a basic theme that uses Storefront as its parent, although you can use any theme as a base.

      We’ll show you how the process works when starting from scratch. However, if you want to skip some of these steps and get straight to customizing your site, you can also download and install a sample Storefront child theme.

      Finally, we highly recommend creating a backup of your site before you proceed any further. This will keep your store safe if something breaks during the development process.

      It’s also smart to use a staging environment for creating and tweaking your child theme. Once you’ve taken these security precautions, you can proceed to the first step!

      Step 1: Make a Folder for Your WooCommerce Child Theme

      The first thing you’ll need to do is to create the folder that will contain your theme. If you’re adding the child theme directly to an existing site, the best way to do this is via SFTP. You can do this using a free application like FileZilla.

      Once you have the program up and running, log in to your site with your hosting credentials. Then, you’ll need to navigate to the wp-content/themes/ folder. This is where your site’s themes are installed.

      All you need to do is create a new folder within this one:

      the WordPress themes folder in FTP client

      When creating a child theme, it’s best to give it a name that reflects the parent. For example, we’re making a child theme for Storefront, so we’ll name our folder “storefront-child.”

      The first thing you’ll need to create and place in this folder is a simple text file called functions.php. This is an important core file that helps to dictate how your site looks and acts. However, most child themes can use the functions contained in the parent theme’s file and don’t need their own.

      For that reason, this file can be left blank for now. Simply create a text file with the name functions.php, and save it in your child theme’s folder:

      WordPress child theme location in FTP client

      Your theme is now almost ready to be activated and used. First, however, it will need a stylesheet.

      Step 2: Create Your Child Theme’s Stylesheet

      The next file you need to create is your theme’s Cascading Style Sheet (CSS). This file defines the styles that will be applied to your site’s pages and content. In other words, it enables you to specify the look of individual elements on your website. When people talk about updating styles, they’re usually referring to updating a site’s CSS file.

      Your parent theme will already contain a stylesheet, but a child theme’s CSS can be used to override those styles. We’ll look at how exactly this works later on.

      For now, you’ll just need to create the CSS file. To do this, once again add a text file to your wp-content/themes/storefront-child folder (or whatever name you used for your own child theme). This one should be called style.css:

      WordPress child theme location in FTP client

      You’ll also need to add some basic information. Copy and paste the following snippet into your new style.css file:

      /*
      Theme Name: Storefront Child
      Theme URI: http://example.com/storefront-child/
      Description: My first WooCommerce child theme
      Author: Your Name
      Author URI: http://example.com
      Version: 1.0.0
      License: GNU General Public License v2 or later
      License URI: http://www.gnu.org/licenses/gpl-2.0.html
      */

      These are the details about your theme that you’ll see when viewing it in a theme directory or in your WordPress dashboard. Feel free to replace the placeholder data with information more specific to you and your theme.

      Step 3: Configure the Child Theme to Inherit the Parent Theme’s Styles

      As we’ve already mentioned, you’ll want your child theme to use the parent theme’s default styles. However, you’ll also need to override the styles you want to change. This might sound complex — and CSS can indeed get tricky —  but at its core, the child will always use the parent theme’s styles unless it specifically contains a replacement.

      For example, let’s say your parent theme defines the style for h1 header elements as 20px and red. If the child’s style.css file does not contain an entry for H1 headers, then the parent style will be applied to all H1 content. However, if we were to add an H1 style to the child’s stylesheet that defined these headings as 18px and blue, it would override the parent’s directions.

      Adding this functionality to your child theme is actually very simple. All you need to do is to reference your parent theme in your child’s stylesheet.

      Simply add the following snippet after the information you pasted into the style.css file earlier:

      Template: storefront

      This code defines the parent theme and will ensure your child theme uses Storefront’s styles wherever you have not specified a replacement. If you’re creating a child for a different theme, you can simply use its folder’s name instead.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      Step 4: Activate the Child Theme

      At this point, your child theme is now technically ready. It’s configured to work on your site, so let’s activate it and see how it looks.

      Go to Appearance > Themes in your WordPress dashboard, and you’ll see your child theme already installed:

      activating your WooCommerce child theme in WordPress

      Select Activate to make it your site’s current theme. You can now preview it from the front end:

      editing your WooCommerce child theme

      As you can see, it looks exactly the same as the original theme right now. While the child theme is active, all it’s doing is pulling in the styles from your parent theme. To customize its appearance, you’ll need to get creative with your child theme’s stylesheet.

      Step 5: Add Styles to the Child Theme

      Finally, it’s time to start styling your child theme. Exactly how you do this is up to you, your creativity, and what you want your store to look like. However, let’s walk through an example of what you can do.

      To illustrate how editing your child theme works, we’ll change the look of our store’s buttons. At the moment, they appear gray with black text, but we could update this styling to make them stand out more:

      editing your WooCommerce child theme

      Open your child theme’s style.css file again, and add the following code after the last */ in the file’s header:

      a.button,
      button.button,
      input.button,
      #review_form #submit {
      background: pink;
      color: red;
      }

      If you save your file and view it on the front end now, you’ll see the change in action. The buttons will now be a vibrant pink with red text:

      editing your WooCommerce child theme

      You can also make changes to your theme’s template files. You’ll just need to copy the template file you want to alter, such as header.php, from your parent to your child theme folder.

      However, you’ll also need to make some changes to specify which function WordPress uses to reference the template files. This requires using the get_stylesheet_directory(); function instead of get_template_directory() to reference your templates.

      To learn more about how to do this, you can read about all the templates that WooCommerce uses.

      At this point, you have created a WooCommerce child theme! Of course, there’s plenty more you can do, but you now know how to start tinkering. We recommend you brush up on CSS to get the most out of your styling!

      Create a WooCommerce Child Theme

      WooCommerce makes it easy to create an online store, and you can even change its look using the Storefront theme or one of many custom themes.

      However, you don’t have to rely on the creativity of others. Creating your own WooCommerce child theme is not as difficult as you might think, and it gives you nearly total control over the look and functionality of your store.

      Happy selling!

      Your Store Deserves WooCommerce Hosting

      Sell anything, anywhere, anytime on the world’s biggest eCommerce platform.

      shared hosting



      Source link

      How to Create a WordPress Child Theme (Tutorial)


      In this article, we’re going to talk more about what WordPress child themes are and why you 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 customization options. However, there are some protocols you should follow before you dive under the hood. Otherwise, your customizations may not work as intended.

      That’s where child themes come to the rescue. They’re a WordPress feature enabling you to customize your themes safely and keep all your tweaks organized. Once you learn how to use them, your life should get a lot easier, particularly if you spend a lot of time playing with your theme’s style and behavior.

      What is a WordPress Child Theme?

      A WordPress child theme works just the same as a regular one on the surface. Once activated, it’ll work just as any of your other themes would. The difference is, child themes have a ‘parent’ from which they inherit all their attributes.

      For example, imagine you’re using the Twenty Twenty-Two theme on your blog. You can create a child for it at any point, which would look and work just the same. However, you can customize every aspect of how a child theme works without affecting its parent. Here’s how that can work in your favor:

      • You can update your themes safely. When you update a theme, you also lose any changes you’ve made to its code in the process. However, if you’re using a child theme and you update its parent, you bypass this issue.
      • It’s easier to keep track of the changes you make to a theme. Many WordPress themes include dozens of files and hundreds of lines of code. That means any change to them — no matter how small — can be tricky because it’s easy to lose track of those tweaks. With a child theme, you can make changes to your heart’s content and still keep things tidy.

      Let’s summarize what we’ve learned thus far using an example.

      If you create a child theme for Twenty Twenty-Two, WordPress will recognize it as a different item. However, the child theme will inherit all of its parent’s styles and features. WordPress then loads any changes that override its default configuration. If so, it’ll render those instead of the default Twenty Twenty-Two theme files.

      It sounds tricky, but it’s simple once you learn how to create one and see it in action.

      When It Makes Sense to Use a WordPress Child Theme

      If you plan on making changes to your theme, you should create a child for it. However, if you’re completely satisfied with the way your theme works and looks, you can use it as is.

      Pro tip: You can also decide to use WordPress’ custom/additional CSS capability if only CSS changes are required. This is much simpler than creating a child theme and can be done directly from the Customizer.

      If you’re still on the fence about whether it’s a good idea to use a child theme or not, here are 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.
      • When using a theme that receives constant updates (which is a good thing!) and you don’t want to lose your customizations during the process.
      • To test changes you may want to implement on your active theme using a safe environment.

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

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

      If this is your first time setting up a WordPress child theme, you should definitely back up your website. Don’t be scared — the process is very straightforward, but it 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 you’re just doing this for testing purposes, feel free to pick one of WordPress’ default themes for now.

      1. Create a Folder for Your Child Theme

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

      There are plenty of ways to interact with your website’s file structure — such as through your panel — but we’re partial to Secure File Transfer Protocol (SFTP) due to its ease of use. To access your website via FTP, you’ll need a dedicated client. We recommend using FileZilla since it’s easy to pick up even for beginners, and it’s under constant development. If you’re not au fait with using FTP, you’ll also need to brush up on your skills before tackling these steps.

      Once installed, access your website’s directory using your SFTP credentials. This directory most often shows up as public_html but at DreamHost, the default is the domain you’ve added (example.com).

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

      The Themes folder in wpcontent

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

      Creating a child theme folder

      Your child theme’s folder can have any name you want. However, for practical purposes, we recommend giving it a title you can easily recognize, such as twentytwentytwo-child (or something else, depending on what its parent theme is).

      Once you have a folder for your child theme ready to go, you’re ready to move on to step number two.

      2. Create a Theme Stylesheet

      As you 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 child theme will inherit all its parent’s styles. However, you can override those by adding new code to the style.css file you’re about to create.

      While your child theme’s style.css file will come in handy down the line, it also fulfills an important purpose right now. It simply tells WordPress “Hey, I’m a theme as well, load me alongside the rest!”

      For that to happen, you need to return to your child theme’s directory and access it. Right now, 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, type style.css and confirm your decision.

      Creating a style.css file

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

      /*
      Theme Name: Twenty Twenty-Two Child
      Theme URI: http://example.com/twenty-twenty-two-child/
      Description: Your first child theme!
      Author: John Doe
      Author URI: http://example.com
      Template: twentytwentytwo
      Version: 1.0.0
      License: GNU General Public License v2 or later
      License URI: http://www.gnu.org/licenses/gpl-2.0.html
      Tags: child theme
      Text Domain: twenty-twenty-two-child
      */

      At first glance, this seems like a lot of information, but for a child theme to work, there’s only one field you need to get right: Template. In the example above, you can see we used twentytwentytwo, which is the name of the Twenty Twenty-Two theme’s directory. If you’re using a different theme as a parent, you need to replace that value with the name of its folder (not the theme’s full name).

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

      Moving on, after you’ve set the correct Template value and tweaked the code, you can save the changes to your style.css file and close the text editor. Now, FileZilla will ask you if you want to replace the file on your server with the local copy you just modified. Say Yes, and access your WordPress dashboard. If you look at the Themes tab, you should see a new addition.

      The Theme’s tab in WordPress

      3. Configure Your Child Theme to Inherit Its Parent’s Style

      By now, you 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 do this, we’re going to use 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 (not the one we just created). Afterward, your child theme will be ready for you to use.

      To start, return to your child theme’s directory. Inside, create a new file called functions.php, just as you did with style.css during step number two.

      Creating a functions.php file for a child theme

      Now open the file using FileZilla’s 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 style.css file.

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

      Now save the changes to your functions.php file and close it. Make sure to agree when FileZilla asks you if you want to replace your website’s functions.php file, and that’s it! Now your child theme is ready for its grand debut.

      4. Activate Your New Child Theme

      To use your child theme, return to your WordPress dashboard and go to the Appearance > Themes tab. Inside, there should be one theme without a featured image — your child theme.

      Activating a child theme

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

      The Twenty Twenty-Two theme

      Feel free to take a quick look around just to triple check everything is working correctly. If the answer is “Yes” (which it should be), you’re ready to move on to the second part of this tutorial, where we’ll talk about how to use your new child theme.

      However, before that, let’s make one quick pit stop and add a featured image to your child theme.

      5. Add an Image to Your Child Theme

      Just so we’re clear — when we talk about a theme’s featured image, we’re referring to the graphic that shows up above its name within the Themes tab. Here are a few examples.

      A theme’s featured image

      Newly minted child themes don’t come with these images, so you need to provide one for WordPress to load it. Fortunately, this is a very simple process. All you have to do is add a PNG image called screenshot.png within your child theme’s directory.

      Adding a screenshot.png file to your child theme’s directory

      WordPress will display this image at a 387 x 290 resolution. However, you’ll probably want to save it using a higher dimension so it displays well on larger screens. In any case, you can use any image you want as your theme’s screenshot.

      A child theme with a featured image

      With that out of the way, your Themes tab should be looking fabulous once more, so it’s time to get back to business.

      Get Content Delivered Straight to Your Inbox

      Subscribe to our blog and receive great content just like this delivered straight to your inbox.

      How to Customize Your WordPress Child Theme (4 Tips)

      At this stage, you should have a fully working child theme on your hands. More importantly, you also have a firm understanding of how the entire process works and why each step in creating one is necessary. This means we can jump right into playing around with your child theme using the files you just created!

      1. Add Custom Styles

      As you already know, every WordPress child theme automatically inherits its parent’s styles. However, they also have their own stylesheet. Any customizations you add to your child theme’s style.css file will then override their parent’s styles if there’s any conflict between them.

      Tweaking your theme’s style using CSS is simple as long as you know what its elements are. Even if you don’t, you can easily find out using a web inspector, such as Chrome DevTools, which is included with your browser. Just right-click the element you want to alter and select the Inspect option.

      Inspecting an element in Google Chrome

      Now, the page’s source code will show up on a column to your right, including the specific class for the element you’re inspecting:

      Analyzing an element’s CSS class

      Armed with that information, you can access your child theme’s style.css file and add the necessary code to tweak it. You can then save the changes to your style.css file and you’re good to go. Return to your website’s front end to see what your theme looks like now.

      2. Learn to Override Your Parent Theme’s Files

      A minute ago, we talked about how your child theme’s style.css automatically override its parent theme’s code. The same holds true for any other file of which there are two between your parent theme and its child.

      Imagine, for example, you decide to create a child for the Twenty Twenty-Two theme. The parent, in this case, has a footer.php file within its theme folder:

      A theme’s footer.php file

      If you were to create a footer.php file within its child theme, WordPress would automatically load that one instead. The platform does this as long as 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 twentytwentytwo directory, the same has to hold true for its counterpart.

      Adding a footer.php file to a child theme

      As long as both files share the same name, WordPress will do the rest. Using this trick, you’ll be able to alter any aspect of your theme’s functionality. Plus, if you ever break 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 can choose which template to use alongside it. Some of the most common examples include full-width layouts or those with sidebars.

      Choosing a page template in WordPress

      You can add a new layout to any theme you want, although the process is a bit involved. If you want to try your hand at creating a new one, here’s a tutorial to get you started.

      4. Use Theme Hooks

      In WordPress, hooks are triggers that enable you 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 own functions.php file. This way, any modifications you make remain independent of its parent theme.

      Unlock the Benefits of WordPress Child Themes

      WordPress child themes can be intimidating at first. Creating one requires you to roll up your sleeves, but after you do it, you’ll realize the process isn’t that complicated. Plus, adding customizations to your child theme should provide you with a better understanding of how WordPress works, which can open a lot of doors. Who knows? At some point, you may even end up creating your own theme.

      Do More with DreamPress

      DreamPress Plus and Pro users get access to Jetpack Professional (and 200+ premium themes) at no added cost!

      Managed WordPress Hosting - DreamPress



      Source link