With its unparalleled flexibility, you can create a stunning website in WordPress and customize it to your liking. One powerful feature of WordPress is the ability to create child themes.

Child themes allow you to modify the design of a parent theme without making direct changes to its files.

Let’s show you how to create and customize your website using this feature.

Key Highlights

1. WordPress child themes enable safe and efficient customization by inheriting the functionality and styling of parent themes without altering core files
2. Child theme protects your customizations from being lost during theme updates, ensuring a consistent design and smooth user experience
3. To create a child theme, generate a new folder with a style.css file and a functions.php file. Then import the parent theme’s styles
4. Customizing a child theme involves creating new template files, modifying code from the parent theme, or using the WordPress Customization API
5. Popular WordPress child themes, such as Divi and Genesis, offer a solid foundation for customization, providing impressive designs and powerful features

What Is a WordPress Child Theme?

A WordPress child theme is a special type of theme that inherits the functionality and styling of its parent theme. It allows you to modify and customize without directly altering the original theme’s code.

It lets you use the same templates, stylesheets, and functions as the parent theme but allows you to override and modify them as needed.

Essentially, a child theme acts as a protective layer. You can make changes without fearing losing them during updates or grappling with complex coding.

Why Use a WordPress Child Theme?

WordPress child theme comes with a host of advantages. Here are some compelling reasons why you should consider using a child theme:

1. Protection of Main Theme

Using a child theme, you separate your custom code, styles, and templates from the parent theme’s core files.

This ensures that your customizations don’t interfere with or modify the original theme, keeping it intact and maintaining its original functionality. Making direct changes to the core files of a theme, such as the functions.php, style.css, or template files, can be a nightmare if you make mistakes or accidentally delete crucial code.

2. Updates

When a parent theme receives updates, it includes new features, bug fixes, performance improvements, or security patches. Let’s say you have done your customizations on this parent theme. The update will overwrite all your customizations.

But if you have a child theme, it ensures that your changes remain intact even as the parent theme is updated.

Customizations made within a child theme are not affected by updates to the parent theme, meaning you won’t have to reapply your changes each time an update is released.

3. Consistency in Design

A child theme automatically inherits the styles, templates, and layout elements from the parent theme.

These customizations are stored in a single location, separate from the parent theme’s files. This ensures your site maintains a consistent design foundation, even when the parent theme is updated.

Also, the child theme allows you to create reusable design elements, such as custom CSS classes, template parts, and functions, which you can apply consistently across multiple pages or even other websites.

How to Create a WordPress Child Theme

Creating a child theme is not complex. Follow these simple steps:

1. Create a New Directory

Start by creating a new directory (folder) in your WordPress installation’s /wp-content/themes/ folder.

Name the new directory something descriptive, typically by appending “-child” to the parent theme’s name (e.g., twentynineteen-child for the Twenty Nineteen theme).

2. Create a New Stylesheet

Within the new child theme directory that you have created, create a style.css file. This file will contain the necessary header information for your child theme and any custom CSS rules you want to add.

3. Add Header Information

Open the style.css file you have created in a text editor and add the following header at the top:

/*
Theme Name: Your Child Theme Name
Template: parent-theme-name
Version: 1.0.0
*/

Replace Your Child Theme Name with the name you’ve chosen for your child theme, and replace parent-theme-name with the directory name of the parent theme. You can update the Version field as you change your child theme over time.

4. Enqueue Parent Theme Styles

To inherit the parent theme’s styles, create another file in the child theme directory and name it   functions.php.

The functions.php acts as a theme-specific functions file. It allows you to add custom functionality, modify existing features, and hook into various WordPress actions and filters.

In essence, the functions.php file enables you to extend and customize the behavior of your WordPress site without the need for a plugin.

Open the functions.php file in a text editor and add the following PHP code to enqueue the parent theme’s stylesheet:

<?php
add_action('wp_enqueue_scripts', 'my_child_theme_enqueue_styles');
function my_child_theme_enqueue_styles() {
   wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}

5. Activate Your Child Theme

Log in to your WordPress admin dashboard. Go to Appearance > Themes. You should see your newly created child theme listed alongside the other installed themes.

Click Activate to start using your child theme.

That’s it. You’ve successfully created a WordPress child theme.

Customizing a WordPress Child Theme

When customizing a WordPress child theme, the possibilities are virtually endless. You can modify the appearance, layout, and functionality of your website.

You can also use tools such as Customization API, which enable you to add custom settings, controls, and live previews to the WordPress Customizer.

1. Identify What You Want to Modify

Customization starts with identifying the specific elements or features you want to modify. Understand your goals and desired outcome. This will help you focus your customization efforts and achieve a more coherent and polished result.

Determine the purpose of your customization, whether it’s improving your site’s aesthetics, enhancing user experience, or adding new functionality.

Have clear objectives to guide you in identifying the appropriate modifications. Some customizations to consider include:

• Changing colors
• Adjusting layout
• Adding or removing elements
• Modifying post and page templates
• Creating custom widget areas

2. Create a New Template File

Having new template files in your WordPress child theme allows you to customize specific parts of your website, such as individual pages, posts, or custom post types, with a unique layout and design.

Here’s how to create a new template:

• Decide the purpose of your template - Do you want to create a template for a custom homepage, a specific page, a blog post, or a custom post type? Let’s say you want to create a custom template file for a full-width page layout without a sidebar.

• Choose a base file - Identify a suitable template file from your parent theme to use as a starting point. This file will provide the basic structure and functionality for your new template. Common base files include page.php, single.php, or archive.php.

• Create a new file in your child theme – In your child theme directory, create a new PHP file with a descriptive name, such as template-custom-homepage.php or template-portfolio.php. The name should reflect the purpose of the template.

From our example, create a new PHP file in your child theme directory and name it template-full-width.php.

• Add a template header - Open the new file in a text editor and add the following header at the top:
  

  ---

<?php
/*
Template Name: Full Width Page
*/?>

Below the header, add the following code to include the parent theme’s header.php and start the content area:

<?php get_header(); ?>

<div id="primary" class="content-area full-width">
   <main id="main" class="site-main">

This line of code is a WordPress function called get_header(). It’s responsible for including the header.php file from your active theme (in this case, your parent theme) into your custom template.

The HTML code below defines the structure and styling of the content area for your custom template.

Next, add the code to display the page content and any comments, if enabled.

        <?php
       while ( have_posts() ) :
           the_post();
           get_template_part( 'template-parts/content', 'page' );

           // If comments are open or we have at least one comment, load up the comment template.
           if ( comments_open() || get_comments_number() ) :
               comments_template();
           endif;
       endwhile;
       ?>

Finally, close the content area and include the parent theme’s footer.php.

    </main>
</div>

<?php get_footer(); ?>

Now, let’s combine all this code. Here’s the complete code for the custom full-width page template:

<?php
/*
Template Name: Full Width Page
*/?>

<?php get_header(); ?>

<div id="primary" class="content-area full-width">
   <main id="main" class="site-main">

       <?php
       while ( have_posts() ) :
           the_post();
           get_template_part( 'template-parts/content', 'page' );

           // If comments are open or we have at least one comment, load up the comment template.
           if ( comments_open() || get_comments_number() ) :
               comments_template();
           endif;
       endwhile;
       ?>

   </main>
</div>

<?php get_footer(); ?>

Save the file and upload it to your child theme directory on your web server.

This code creates a custom full-width page template for your WordPress child theme. It includes the parent theme’s header.php and footer.php files, defines the content area structure, and displays the content of the selected pages using a full-width layout without a sidebar.

3. Copy Code From the Parent Theme

When customizing your WordPress child theme, you may need to copy code from the parent theme to make modifications.

This way, you can preserve the original functionality and design while making targeted changes.

1. Identify the file - First, determine which parent theme file contains the code you want to copy. This could be a template file (e.g., page.php, single.php, archive.php), a template part file (e.g., content-page.php, content-single.php), or any other file (e.g., functions.php, style.css).
2. Locate the file - Access your WordPress site’s files via an FTP client or your web hosting control panel’s file manager. Navigate to the /wp-content/themes/ directory and find the parent theme folder. Locate the desired file within the parent theme folder.
3. Create a new file in your child theme - In your child theme directory, create a new file with the same name as the parent theme file you want to copy. For example, if you want to copy code from the parent theme’s page.php, create a new page.php file in your child theme.
4. Copy the code - Open the parent theme file in a text editor and copy the desired code. Depending on your customization needs, you may want to copy the entire file or just specific parts. Paste the copied code into the corresponding file in your child theme.

4. Modify the Code

After copying the desired code, it’s time to make modifications based on your specific customization requirements.

But first, there are a few things:

• Understand the code structure - Take time to understand the code structure and the purpose of each section.
• Make a backup - It’s always a good idea to back up your child theme files.
• Use a text editor to edit your code - Text editors, such as Notepad++, Atom, or Visual Studio Code, provide syntax highlighting, making it easier to read and understand the code.

Play around with the code. You can change the following:

Change font and colors

If you want to change the font and colors of your headings, modify the CSS in your child theme’s style.css file.

h1, h2, h3, h4, h5, h6 {
   font-family: 'Roboto', sans-serif;
   color: #1a1a1a;
}

Add a custom logo

To add a custom logo to your header, modify the header.php file in your child theme.

<div class="logo">
   <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" alt="<?php bloginfo( 'name' ); ?>" />
   </a>
</div>

Add a custom widget area

To add a new widget area to your theme, modify the functions.php file.

function my_child_theme_widgets_init() {
   register_sidebar( array(
       'name'          => esc_html__( 'Custom Widget Area', 'my-child-theme' ),
       'id'            => 'custom-widget-area',
       'description'   => esc_html__( 'Add widgets here.', 'my-child-theme' ),
       'before_widget' => '<section id="%1$s" class="widget %2$s">',
       'after_widget'  => '</section>',
       'before_title'  => '<h2 class="widget-title">',
       'after_title'   => '</h2>',
   ) );
}
add_action( 'widgets_init', 'my_child_theme_widgets_init' );

These are just a few examples of modifications you can make to your WordPress child theme.

Expert Tips

• Remember to test your changes thoroughly and maintain backups of your files to avoid potential issues.
• Make sure to add comments to your code to explain the purpose of your modifications. This makes it easier for you or others to understand and maintain the code in the future.

5. Save the File

After making modifications, click “Save” or use the keyboard shortcut (usually Ctrl + S on Windows and Cmd + S on macOS) in your text editor to save the changes. Make sure you save the file with the same name and extension as the original file.

Then upload the modified file. If you are working with your files locally, use an FTP client or your web hosting control panel’s file manager to upload the modified file to your child theme directory on your web server. Make sure to overwrite the existing file with your new, modified version.

6. Preview Changes

Before making your customizations live on your website, preview your changes to ensure they look and function as intended.

The WordPress Customizer lets you preview changes to your theme without affecting your live site.

Log in to your WordPress admin dashboard to access the Customizer, then navigate to Appearance > Customize. The Customizer will display your site with the child theme applied, allowing you to see your modifications in real-time.

7. Repeat the Process

Customizing your WordPress child theme is often an ongoing process. You may want to make additional modifications or updates over time.

Each modification may require you to go through the customization steps repeatedly.

Make sure to clear your cache every time you upload the modified files—if you’re using a caching plugin or your web host employs server-side caching. This ensures your website visitors see the most recent version of your site with your customizations applied.

Popular WordPress Child Themes

WordPress developers have created child themes that are both visually appealing and packed with features.

These child themes are crafted to cater to different niches and industries, making it easy for users to find a perfect match for their requirements — from the drag & drop themes that make customization a breeze to impressive WordPress themes that won’t break the bank.

1. Divi Child Theme

The Divi Child Theme, created by Elegant Theme, is built on the powerful Divi framework, making it an ideal choice for beginners and seasoned professionals.

One of its key features is its intuitive visual builder. It allows you to create stunning and responsive designs.

This child theme also has a vast library of pre-built layouts and modules that you can easily customize to suit your website’s specific needs.

It also has seamless compatibility with the Divi parent theme. This means that your website will benefit from regular updates and improvements to the Divi framework.

2. Genesis Child Theme

Genesis Child Theme is built on top of the Genesis Framework. This framework is known for its SEO-friendly structure, performance, and extensibility.

To create a Genesis Child Theme, follow these steps:

Create a new directory in your “wp-content/themes” folder with a suitable name for your child theme.

Create a “style.css” file in the new directory, and include a comment header with the necessary information about your child theme.

/*
Theme Name: Your Genesis Child Theme Name
Theme URI: Your Theme's URI
Description: A brief description of your theme
Author: Your Name
Author URI: Your Website
Template: genesis
Version: 1.0.0
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: your-child-theme-text-domain
*/

Create a “functions.php” file in the new directory. To load the Genesis Framework and your child theme’s stylesheet, add the following PHP code:

<?php
// Load the Genesis Framework.
include_once(get_template_directory() . '/lib/init.php');

// Load the child theme's stylesheet.
add_action('wp_enqueue_scripts', 'your_child_theme_enqueue_styles');
function your_child_theme_enqueue_styles() {
   wp_enqueue_style('your-child-theme-style', get_stylesheet_uri());
}

Then activate your Genesis Child Theme in the WordPress admin area under “Appearance” > “Themes”.

There are also many pre-built Genesis Child Themes available for purchase or download.

3. Avada Child Theme

Avada provides a solid foundation for creating a wide range of website designs and layouts with a user-friendly page builder, numerous pre-built templates, and customization options.

Avada is compatible with many popular WordPress plugins, such as WooCommerce, bbPress, and Contact Form 7. Therefore, Avada child themes leverage this compatibility to seamlessly integrate various plugins and extend your website’s functionality.

4. Astra Child Theme

Its parent theme, Astra, is a highly popular, lightweight, and customizable WordPress theme. Astra is designed for performance. It’s lightweight and fast-loading.

Astra Child inherits this performance-focused approach, ensuring your website loads quickly and provides a better user experience.

The parent theme is also compatible with popular page builders like Elementor, Beaver Builder, and Gutenberg. You can, therefore, use it to create custom layouts and designs for your website using your preferred page builder.

5. Oceanwp Child Theme

One unique feature of the OceanWP child theme is that OceanWP offers a ready-to-use child theme that you can easily install via the OceanWP Theme Panel if you’re using OceanWP version 3.3.0 or above and Ocean Extra plugin version 2.0.0 or above.

This makes it easy for you to create a child theme without having to create one manually.

Additionally, OceanWP is built with SEO best practices in mind, ensuring that your website is optimized for search engines.

Conclusion

By leveraging the protective layers of WordPress child themes , you can unleash your creativity without fear of breaking your site or losing your customizations.

Create custom template files and make code modifications. And if you do encounter any issues along the way, you can easily delete the child theme and start again from scratch without losing any original content or settings.

So go ahead and experiment with the child themes.

Next Steps: What Now?

• Choose a parent theme – Browse a vast selection of WordPress themes and select the one that best suits your website’s purpose and style.
• Check out our list of the best themes for blogs to find the perfect fit for your blogging needs.
• Experiment with page builders like Elementor, Beaver Builder, or Divi.
• Optimize your website performance with WordPress Hosting

Further Reading – Useful Resources

• 25 Best WordPress Magazine Themes of 2022 (FREE & PAID)
• Best Ecommerce WordPress Themes in 2022
• How to Choose a WordPress Theme: All You Need to Consider