WordPress Child themes are essential in a freelancer’s or agency’s web development cycle.
WordPress allows web designers to use themes and plugins to customize their sites so that they can look and function as they wish. However, if you’re not using a child theme, this privilege may not benefit you as you expect.
Just imagine losing all the changes you spent hours making simply because a theme or plugin has been updated. Nobody wants to reinvent the wheel, as this wastes a lot of time.
This article will show you how to create and use child themes in WordPress. Stay tuned if you never want to lose your work again.
Table of Contents
Why You Should Use Child Themes for WordPress Customization?
Save your Changes. When you update a parent theme, any customizations you made directly to its files will be lost. A child theme helps keep your modifications separate so they remain intact even after updating the parent theme.
Separation of code. This makes reverting to the parent theme or switching between themes easier without losing any customizations.
Self Testing. You can experiment with new styles or functionality without affecting the original theme files. This reduces the risk of breaking the site while testing new features.
Easy Debugging. Issues that arise are isolated to the child theme, making debugging easier since you won’t have to examine the parent theme’s code.
Flexibility of Customization. You can override specific template file functions and styles with child themes while inheriting the default designs and functionalities from the parent theme.
Reusability. If you frequently work on multiple sites, child themes allow you to reuse your custom code more easily across different projects.
Learning Opportunity. Working with child themes helps you understand the WordPress hierarchy. You also learn how the WordPress templates and stylesheets work, which can be beneficial in more advanced developments.
How to Create Your WordPress Child Theme?
Setting Up the Child Theme Folder
First, create your Theme folder in your WordPress installation directory.
To do so, navigate to your WordPress installation folder using your hosting manager. We shall use the InstaWP Code editor.
Sign in to your InstaWP account.
Click on Add New to create a staging website.
You can create the site from scratch.
Choose the version of WordPress and PHP. Choose the server location nearest to your region.
Click Next Step to continue.
Click Next Step to continue.
You can select popular plugins you want to use for testing and click Create Site.
InstaWP will spin up a WordPress site in just seconds.
Your site is now ready.
Click on the URL to view the site.
To access your WordPress admin dashboard, click on Magic Login.
To view the WordPress files, click on the Code Editor.
You can choose Open in VS Code or click on Open in Web Editor to view the code via your browser.
Now navigate to wp-content/themes/
Inside the themes folder, create a new directory for your Child theme. Name it something logical.
Using the parent themes with -child is a good option for example if your parent theme is twentytwentyfour, the child theme can be twentytwentyfour-child.
Understanding style.css and functions.php
Style.css: The Stylesheet
The style.css file in the child theme defines the custom styles(CSS) you want to apply to your parent theme’s styles. WordPress also uses it to identify the theme’s details, such as theme name, author, description, etc.
Key Parts of Style.css
The file typically has two sections;
The theme header: contains metadata about the theme.
The CSS rules: Contains your custom styles.
Functions.php: The Functionality file.
The functions.php file in a child theme works like a plugin. It allows you to add new functions, modify existing functionality, and, most importantly, enqueue the parent theme’s styles. It is executed automatically when the child theme is active.
Unlike template files like header.php and footer.php, which are used to override specific parts of the theme, functions.php is used to add or modify functionality without changing the parent theme’s code.
Key Functions in functions.php
Enqueueing Parent theme styles. One of the most critical tasks in the child theme is to ensure that the parent theme’s styles are loaded. This is done by using the wp_equeue_styles() function inside the functions.php.
Adding New Functions. You can write new functions to extend the functionality of the theme.
Modifying Parent theme functions. You can modify or remove actions and filters from the parent theme.
Adding custom javascript or CSS. You can also enqueue custom javascript or additional CSS files using functions.php.
Adding Widget areas or menus. You can register new widget areas or menus in functions.php.
Registering the Child Theme in WordPress
Create the style.css file
In the child theme directory, create a style.css file. In this file, you will put your custom CSS code, which acts as the key identifier for your child theme.
Add the following code to your style.css file.
| /* Theme Name: Twenty Twenty-Four Child Theme URI: https://example.com/twentytwentfour-child Description: A child theme for the Twenty Twenty-Four theme Author: Your Name Author URI: https://your-site.com Template: twentytwentyfour Version: 1.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: light, two-columns, responsive-layout Text Domain: twentytwentyfour-child */ |
Theme Name: This is the name of the child theme. It’s recommended you name it after your parent theme.
Author: (optional) Your Name.
License and License URI (Optional) is used to define the license of your theme.
Template: This must match the exact name of the parent theme’s directory.
Version: This is the version of the theme. It’s useful when updating the theme.
Tags:(Optional) These tags are used to filter themes in the WordPress dashboard.
TextDomain: (Optional) Used for internationalization and translation purposes.
Your child theme is now registered.
Now, go to your WordPress dashboard.
Navigate to Appearance – Themes.
You will be able to see your child’s theme. Click on Theme Details to view your theme details and ensure they are correct.
Create the functions.php file
In your child theme’s directory, create a functions.php file. This file is used to enqueue the parent’s theme and add custom functionality.
Add the following code to your functions.php file to ensure the parent theme’s styles are loaded.
| <?php // Enqueue parent and child theme styles function my_child_theme_enqueue_styles() { // Enqueue parent style wp_enqueue_style(‘parent-style’, get_template_directory_uri() . ‘/style.css’); // Enqueue child style, making sure it’s loaded after the parent style wp_enqueue_style(‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array(‘parent-style’)); } add_action(‘wp_enqueue_scripts’, ‘my_child_theme_enqueue_styles’); |
wp_enqueue_style(‘parent-style’, get_template_directory_uri() . ‘/style.css’) This function loads the parent theme’s styles.css file. get_template_directory_uri() gets the URL of the parent theme’s directory.
wp_enqueue_style(‘child-style’, get_stylesheet_uri(), array(‘parent-style’)) This function loads the child theme’s styles.css
The third parameter (array(‘parent-style’)) ensures that the parent themes’ styles are loaded before the child theme’s styles.
This code ensures that your child theme loads the parent theme’s stylesheet so that the design is consistent and any additional styles you add will override the parent theme’s styles.
add_action(‘wp_enqueue_scripts’, ‘my_child_theme_enqueue_styles’): This hooks the function to the wp_enqueue_scripts action, ensuring that the styles are loaded properly.
Once you have created your child theme’s style.css and functions.php files, go to your WordPress dashboard.
Navigate to Appearance – Themes. You should see the child’s theme listed. Click Activate to start using it.
Overriding Parent Theme Styles and Features
To override the parent theme’s styles and features, we use the child theme’s styles.css and functions.php, respectively.
Overriding Parent Theme Styles.
You can add custom CSS to modify the site’s design. These styles will override the parent theme’s styles, provided they have the same or higher specificity.
For example, let’s add a custom header color.
| /* Custom header color */ header.wp-block-template-part .wp-block-group { background-color: #eee !important; } /* Override parent theme’s font size for paragraphs */ p { font-size: 18px; } |
This code adds a custom header color to the website.
Overriding Parent Theme Features.
In the child theme’s functions.php file, you can override or add new functionalities to the parent theme. The child theme’s functions are loaded after the parent theme’s functions, so you can modify or remove the parent theme’s functions.
Overriding a Function.
To override a function in the parent theme, you can redefine it in the child theme’s functions.php. If the parent theme uses a function that is not wrapped in the function_exists() check, you can directly declare it again in the child theme.
For example, overriding a parent theme’s custom logo.
| <?php // Original parent theme function for custom logo function parent_theme_custom_logo() { echo ‘<img src=“parent-logo.png” alt=“Parent Logo”>’; } // Child theme function to override the custom logo function parent_theme_custom_logo() { echo ‘<img src=“child-logo.png” alt=“Child Logo”>’; // New logo for child theme } |
By redeclaring the parent_theme_custom_logo() in the child theme, you override the parent theme’s functionality entirely.
Overriding parent theme widgets.
You can also override parent theme widgets or register new ones in the child theme.
For example, adding a custom widget in functions.php
| // Register a new widget area function my_custom_widget_area() { register_sidebar(array( ‘name’ => ‘Custom Footer Area’, ‘id’ => ‘custom-widget-area’, ‘before_widget’ => ‘<div class=”custom-widget”>’, ‘after_widget’ => ‘</div>’, ‘before_title’ => ‘<h2 class=”widget-title”>’, ‘after_title’ => ‘</h2>’, )); } add_action(‘widgets_init’, ‘my_custom_widget_area’); |
This registers a new widget area called Custom Footer Widget, that you can use for custom content in the footer, overriding or complementing any widget areas defined by the parent theme.
Removing a function.
If you want to remove a specific function from the parent theme, you can do so by using remove_action() or remove_filter() functions.
For example, removing a parent theme function that adds the header image.
| <?php // Remove parent theme’s header image action function remove_parent_header_image() { remove_action(‘wp_head’, ‘parent_theme_header_image’); } add_action(‘after_setup_theme’, ‘remove_parent_header_image’); |
This code removes the parent theme’s action hook that inserts the header image, allowing you to customize or remove the feature.
Adding New Code Without Touching the Parent Theme
Using Hooks and Filters.
WordPress hooks and filters are extremely powerful for overriding and extending parent theme functionality. They allow you to modify the behavior of the parent theme without directly editing its files. For example, modifying the parent theme’s footer text using a filter.
In this example, we use the add_filter() function to change the footer text by hooking into a filter provided by the parent theme.
| <?php // Modify parent theme’s footer text function child_theme_modify_footer_text($footer_text) { return ‘Custom Footer Text – Powered by WordPress and Child Theme’; } add_filter(‘parent_theme_footer_text’, ‘child_theme_modify_footer_text’); |
InstaWP: The Best Tool for Testing Child Themes
InstaWP has a Staging environment that helps you test your child theme without affecting the live site.
Setting Up a Safe Staging Environment with InstaWP
Testing child themes on a live site is risky because a broken theme can affect site performance and the user experience. InstaWP provides a safe, isolated staging environment where you can;
Prevent Site Breakage: The InstaWP staging environment allows you to test a child theme without affecting your live site. If anything goes wrong, it won’t affect your site visitors or customers.
Debugging in real-time: You can freely experiment with different modifications, test features, and debug any issues within a safe space without rolling out your changes to production.
Making Child Theme Adjustments in a Risk-Free Environment
Test Multiple Parent themes. InstaWP allows you to spin up multiple WordPress sites and test your child’s theme against different parent themes. For example, if you are designing a child theme for a widely used theme, you can deploy different environments and check compatibility without creating multiple local setups.
Easily Clone Environments. If you want to make incremental changes and compare results between different modifications of your child theme, you can simply clone the environment and test each version independently.
Previewing Changes in Real-Time
Shareable links. You can easily share a link to your WordPress instance with your clients or team members. They can preview the features of the child theme in real-time and make suggestions where necessary without having to access your main site.
Going Live with Your Child Theme
Best Practices for Migrating to Production
Back up your existing site. Before making any changes to the production environment, always create a full backup of your site. This will help you in case anything goes wrong during migration.
Test thoroughly on a Staging environment. Before publishing your child theme, test everything on a staging environment that mirrors your production site. This allows you to fix any issues before they impact users.
Synchronize your Database changes. When migrating to production, it is important to handle any database changes carefully to avoid overwriting or corrupting live data.
Handle URLs and links correctly. During migration, ensure that all internal links, image URLs, and paths are updated to reflect the production environment, especially if you have been working on development or staging URLs.
Review and test on production. Once the migration is complete, review the live site to ensure everything is transferred correctly. Check for broken links and images, test all the site critical features, and ensure that the production site database has all the required changes without any missing data.
InstaWP’s Role in Ensuring a Smooth Transition
InstaWP plays a significant role in ensuring a smooth transition by providing a versatile and safe environment to test and prepare your site before moving it to production.
Testing Environments for Pre-migration checks. InstaWP allows you to quickly spin up a staging environment to test your changes before migration. This ensures you catch any issues or incompatibilities that may arise when migrating to production.
You can create a cloned version of your live site on InstaWP to replicate your production setup using the same versions of PHP, database structures, and server configurations, helping you anticipate any potential issues during migration.
Testing Plugin and theme compatibility. Before migrating your custom child theme configurations, InstaWP allows you to test how the child theme interacts with the parent theme, test different plugins with the child theme, and ensure everything works well before pushing the changes to production.
How InstaWP Can Streamline Your Development Workflow
Instant WordPress Site Creation. InstaWP allows you to spin fresh WordPress installations within seconds, making it perfect for quick tests and demos. There’s no need to go through the manual setup proces,s which saves time.
Pre-configured Templates. You can save pre-defined templates, including custom themes, plugins, and settings, to launch pre-configured sites instantly. This is useful when you need consistent ups for your projects or testing environments.
Staging Environments. InstaWP provides built-in staging environments, allowing you to clone your site and make changes in a sandboxed environment. This eliminates the risk of breaking a live site, letting you test updates, custom themes, or plugins without any worry.
Integration with Development tools. InstaWP integrates with popular development tools like Git, WP-CLI, VSCode, and SSH enabling developers to maintain their preferred workflow. Whether you’re working with custom themes or plugins, these integrations streamline the development process.
Version Control. InstaWP allows you to save different snapshots of your site during the development process. This feature is valuable for tracking changes and rolling back to a previous version if something goes wrong.
InstaWP simplifies the development process by cutting out the repetitive tasks associated with setting up. Testing and migrating WordPress sites allow you to focus more on building and refining your projects.
Conclusion.
Using child themes is the best practice for anyone interested in customizing a WordPress site beyond what’s available in the theme’s options panel. It ensures a more maintainable, update-friendly, and robust approach to development. InstaWP is an ideal tool that streamlines the development and testing process, ensuring the child themes are ready for production without hassle.
