Most professional web developers use a version control system like GitHub or Bitbucket and automatically deploy their changes to staging or live sites. You can use a deployment system such as DeployHQ to act as an intermediary between your Git repository and your server.

In this article, we will show you how to automatically deploy WordPress theme changes using GitHub and Deploy.

Why Use a Version Control System for WordPress Theme Development?

A version control system allows you to record changes to a file or set of files over time so that you can recall specific versions later. In other words, every time we change a WordPress theme template, image, or CSS file, a version control system keeps track of these changes.

For instance, let’s say you decide to run a batch of changes. If those changes cause an issue, then you can revert (or roll back) to an existing ‘version’ of our WordPress Theme.

Git is a common version control system, and allows multiple users to work on the same code base, such as a WordPress Theme. If two developers edit the same file, Git has built-in controls to deal with these issues (known as merge conflicts).

For more information, check out our beginner’s guide to using Git with WordPress.

Why Use a Deployment System?

A deployment system that integrates with services such as GitHub allows you to automatically or manually upload changes you have made to your WordPress theme.

You can see it as a one-way synchronization system. For example, if you delete a file from your WordPress theme, you’d also have to delete it via FTP as well. With a deployment system, this is automatically done for you when you commit your code changes to GitHub.

In this article, we’ll be working with a deployment system called DeployHQ, or simply Deploy. Deploy works with other Git repository providers like Bitbucket, but we’re going to stick with GitHub for this tutorial.

Setting Up a GitHub Repository for Your WordPress Theme

First, you’ll need to set up an account on GitHub and then use the GitHub client for Windows or Mac to store changes to your WordPress Theme.

To start, you can visit the GitHub website and enter your email address to create a new account.

Next, you’ll need to enter a username and password.

GitHub will also ask you to choose email preferences.

After that, you can scroll down and verify your account by solving a puzzle.

It’s just like reCAPTCHA on your WordPress site.

Once your account is verified, you will see the GitHub dashboard.

From here, you can click the ‘+’ icon at the top and select the ‘New repository’ option.

Next, you can start by setting the repository name, like your WordPress theme’s folder name.  

Then, you’ll need to choose whether this is a Public or Private repository. Public repositories allow everyone to see your code but cannot make changes to it. Private repositories are available only for you to see.

Finally, you can tick the checkbox if you want to add a README file.

Once that’s done, simply click the ‘Create repository’ button.

Your GitHub repository will now be ready for use.

Install GitHub for Windows or Mac

Next, you need to put our WordPress Theme’s code into our repository. A simple way of doing this is by using the GitHub client, which installs on your computer.

Simply visit the GitHub Desktop website and download the Desktop client available for Windows or Mac.

Once the download is complete, launch the GitHub client.

Next, you’ll need to sign in using your GitHub account. You can click the ‘Sign in to GitHub.com’ button.

This will launch GitHub on your web browser.

Simply click the ‘Authorize desktop’ button to allow GitHub Desktop to access your account.

After that, you can open the GitHub Desktop client.

Next, you will need to configure Git. Simply select the ‘Use my GitHub account name and email address’ option and click the ‘Finish’ button.

Next, let’s add the GitHub repository that you created earlier.

To do this, click the ‘Clone a repository from the internet’ option.

You will see a list of your GitHub repositories, including the one you created earlier.

Simply select the repository and choose where you want to store it on your computer under the ‘Local Path’ field. Once that’s done, you can click the ‘Clone’ button.

You’ve now cloned (copied) your repository hosted on GitHub to our computer.  

Next, you need to add our WordPress theme code to the repository’s folder and then commit and sync this code to GitHub.

You can start by finding the folder you selected in the above step on your computer. It should have a README.md file in the folder. Depending on your computer’s settings, you may also see the hidden .git folder.

When you’ve made changes to your WordPress theme’s code, simply copy and paste them into this folder.

After that, you can open the GitHub Mac or Windows app and see the files you’ve just added appear in the window:

You will see the changes highlighted in green. These are the changes that you have saved in the local repository, but you haven’t yet committed those changes.

Next, you will need to commit (upload) these files to GitHub. To do this, simply enter some text into the Summary box to explain the changes we’ve made and click the ‘Commit to master’ button.

This commits the changes you’ve made to the repository.

To upload those changes to GitHub, you can click the ‘Push origin’ button.

To check your commit has been uploaded to GitHub, visit your repository on the GitHub website. If everything works, you’ll see your code changes.

Setting Up Deploy

The final step is to make sure that any changes on your GitHub repository are pushed to your WordPress website.

DeployHQ, or Deploy, is a web-based service that will monitor changes to your GitHub repository, and automatically or manually upload just those changes to your WordPress website.

Imagine it as a connection between your code and the web server.

First, you need to visit the Deploy website and sign up for a new account. Deploy is a paid service, but it offers a free account for one project and 5 deployments per day.

After finishing signing up, you can log in to your Deploy dashboard.

From here, you can click the ‘Create a project’ button to get started.

Next, you need to provide a name for your project.

After that, you can select GitHub as your code hosting platform.

If you scroll down, you’ll find more options like choosing a zone for your project and advanced options.

Once that’s done, click the ‘Create Project’ button to continue.

Deploy will now redirect you to GitHub.

If you are not already signed in, then you will be asked to login. After that, you will be asked to allow Deploy to access your GitHub account.

Simply click the ‘Authorize krystal’ button to continue.

Deploy will fetch the list of your repositories from GitHub and will ask you to select a repository for this project.

Simply click on your WordPress theme repository, and Deploy will import it for you.

In the next step, Deploy will ask you to provide server information. This is where you tell Deploy how to upload files to your WordPress server.

You can start by entering a name and selecting ‘FTP‘ as the protocol option.

Next, you will need to scroll down and enter your FTP credentials.

• Hostname: Your website’s SFTP/FTP host
• Port: Your website host’s SFTP/FTP port (typically SFTP = 22, FTP = 21)
• Username and Password: FTP username and password
• Deployment Path: The path you’d navigate to before uploading your WordPress theme files. For example, public_html/example.com/wp-content/themes/MyTheme, where MyTheme is the WordPress theme you have committed to GitHub.

After entering these details, click the ‘save ‘Create Server’ button.

Deploy will now test your server connection and if everything works correctly, then it will show you a success message.

You can now click on the ‘Deploy’ button to upload your GitHub files to your website.

You will now see the progress of deployment.

Once Deploy has finished, you will see a success message.

You have successfully deployed changes from GitHub to your website using Deploy. Now, when you make changes to your WordPress theme on your computer, you need to commit them to GitHub. After that, you need to visit the Deploy website to start the deployment manually.

Let’s see how to set up automatic deployment so that any changes you commit to GitHub are automatically deployed to your website.

Setting Up Automatic Deployment

First, you need to visit your Deploy dashboard and go to the ‘Projects’ page. From here, simply click on the name of your project.

Next, you can head to the ‘Automatic Deployments’ tab from the menu on the left.

Here, you will need to enable the option next to your server for auto-deployments.

After that, you’ll have to copy the Webhook URL and add it to your GitHub account.

Simply log into your GitHub account in a new browser tab. Then click on your repository and head to the Settings tab. From here, you can go to the Webhooks section from the menu on the left and click the ‘Add webhook’ button.

Now paste the webhook URL you copied from the Deploy server settings page in the Payload URL field.

After that, select application/x-www-form-urlencoded as the Content type from the dropdown:

Next, you can scroll down and select which events should trigger the webhook. You can use the default setting.

Once that’s done, simply click the ‘Add webhook’ button.

That’s all. Your GitHub repository will now notify Deploy when there are new changes to your repository. Deploy will then automatically implement those changes to your website.

We hope this article helped you learn how to automatically deploy WordPress theme changes Using GitHub and Deploy. You may also want to see our guide on how to create a staging environment for a WordPress site and must-have WordPress plugins for business sites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Automatically Deploy WordPress Theme Changes Using GitHub and Deploy first appeared on WPBeginner.

A WordPress starter theme helps programmers start with a solid foundation. It can become the base for your theme development process and give you a good head start.

In this article, we have handpicked some of the best WordPress starter themes that developers can use to create their theme from scratch.

What Is a WordPress Starter Theme?

A WordPress starter theme is a blank theme with minimal design elements and a basic or absolutely no layout. These themes usually come with the most commonly used templates in a WordPress theme.

They have code to display posts, archive pages, single posts, and comments, but with minimal or no styling. This allows theme developers to quickly start adding their own styles and build a new theme, without having to code a website from scratch.

You must remember that starter themes do not come with styling, so you are not able to use them as they are without customization. However, they can be used as a parent theme.

Using a Starter Theme for Developers in WordPress

You can easily use a starter theme to build your own theme with WordPress. It is the best website builder on the market and is used by over 43% of sites on the internet.

WordPress is a self-hosted and open-source platform that gives you complete creative freedom to build a website according to your liking.

To get started, you will need a hosting account where all your website files will be stored. After that, you must get a domain name, which will be your website’s address on the web like wpbeginner.com or www.example.com.

We recommend opting for Bluehost for hosting because they are one of the largest web hosting companies in the world and an officially recommended WordPress hosting provider.

Plus, they are offering a HUGE discount to WPBeginner readers with a free domain name and SSL certificate.

Once you have purchased a hosting plan, you can move on to installing WordPress. Then, you can check our step-by-step guide on how to make a WordPress website.

Now, it’s time for you to select a starter theme that you can build upon. You can select any theme from our expert picks below. If you need help installing them, then you can see our tutorial on how to install a WordPress theme.

That being said, let’s take a look at some of the best starter themes for WordPress that you can use for your theme development.

1. Astra

Astra is a premium WordPress theme for developers. It comes with numerous starter themes and templates to launch a website quickly.

The starter themes by Astra are built for different business niches, and you’ll most likely find a perfect demo site to match your requirements. Plus, the theme is optimized for code and offers powerful design options, Google Fonts, and button presets.

Astra even has built-in dropdown carts, grid settings, gallery options, and an off-canvas sidebar for WooCommerce. These features can be helpful if you are building a starter theme for an online store.

If you are a beginner looking for something functional to start with, then Astra will make things a lot easier for you.

2. SeedProd

SeedProd is the best WordPress theme builder on the market, and it comes with a drag-and-drop builder and 300+ premade templates. It offers a specific starter theme template that developers can use to create their own theme from scratch.

It allows a single-click import for any template that you can then customize with its builder and use features like custom sections, global styles, and advanced layout options.

Additionally, SeedProd can also integrate with email marketing services, making it the best choice for building a starter theme without any coding.

3. Genesis

Genesis is a WordPress theme framework by StudioPress that can provide a solid foundation for building a custom theme. It comes with a 1-click theme setup with tons of useful resources, demo content, plugins, and Gutenberg blocks.

You can take advantage of the 6 layout designs, featured content widgets, custom page templates, and powerful theme options panel. Plus, it focuses on code quality and performance, making it an ideal choice for developers who want to build an SEO-friendly site.

StudioPress is now a part of WP Engine, the most popular managed WordPress hosting company. You can get this framework along with all 35+ StudioPress themes when you sign up for WP Engine hosting to create a website.

Bonus: WPBeginner users also get an additional 20% OFF. Get started with WP Engine today!

4. Underscores

Underscores is probably the most popular of all the WordPress starter themes. It comes with a minimalist design and is super lightweight, with only essential theme files and functionalities.

This starter theme is written in HTML5 and CSS and is completely free. The clean code is meant to get out of your way and help you quickly build a standard-compliant WordPress theme. It also offers template tags, actions, and hooks to further help developers.

Additionally, Underscores has an active community and extensive documentation, making it super easy to build a theme.

5. Sage

Sage is a modern WordPress starter theme based on Gulp, Bootstrap, and Bower. It uses a Theme Wrapper, which helps you avoid repeating the same code in every template.

It also comes with Tailwind CSS integration to allow developers to build layouts quickly. Plus, Sage offers template tags, actions and hooks, and block editor support.

It is actively maintained and has a strong following among WordPress front-end developers.

6. Understrap

Understrap is a WordPress starter theme based on Underscores and Bootstrap 4. It comes with a mobile responsive design and grid framework making it super easy to customize.

Additionally, it has a lightweight foundation and offers a Sass (CSS pre-processor) integration to create more organized stylesheets.

UnderStrap is also fully compatible with WooCommerce, which makes it a great choice for an online store.

7. WP Rig

WP Rig is another WordPress starter theme and development kit that helps you build themes that are highly optimized for performance.

It comes with a build process that lints, optimizes, and minifies your code for better performance. WP Rig also lazy loads your images until they are in the user view to boost page load time.

The theme can even integrate with Gulp to automate repetitive tasks in your development process, such as compiling Sass and minifying JavaScript and CSS.

8. Catch Starter

Catch Starter is a monochrome WordPress starter theme for developers. It comes with a set of features, including a content slider, portfolio, services, and testimonials.

Plus, it offers a theme options panel, custom widgets support, and favicons, making it perfect to kickstart your development with WordPress.

Catch Starter is also super beginner-friendly and translation-ready. We recommend using this theme if you want to create a multilingual website.

9. Highstarter

Highstarter is a lightweight starter theme without libraries or frameworks. It offers many customization options for the header image and supports nested drop-down submenus, pagination, and breadcrumbs.

The theme has a mobile responsive design, RTL language support, and hooks and filters to help developers.

Overall, it is a great starter theme if you want to create a minimalist theme that prioritizes code quality and performance.

10. Beans

Beans is an innovative WordPress starter theme for developers. It is highly flexible with responsive content and adaptive images.

The theme is SEO-friendly and built with an ultimate frontend library to set up and customize your website. Instead of pre-built layouts, Beans offers reusable components like content sections, sidebars, and headers.

It also lets you create custom post types and add new functionalities to your website using shortcodes.

11. JointsWP

JointsWP is a rock-solid WordPress starter theme. It is based on the Foundation 6 framework and comes in CSS or Sass variations.

The theme also has an options panel, custom widgets, and child theme support. Plus, it can integrate with Gulp to automate development tasks.

12. Nebula

Nebula is an advanced WordPress starter theme that is more like a theme framework. It has custom functionality like a recommendation engine for 404 and no-search-result pages, autocomplete search, and more.

Its’ simple syntax code can also serve as a learning source for new developers.

13. Generic

Generic is a minimal WordPress starter theme. This theme is ideal for building custom websites for your customers or using it as a base to create a new theme.

It is super SEO-friendly and comes with its own lightweight CSS grid, making it a great choice for all kinds of websites.

14. BlankSlate

BlankSlate is a simple and extremely flexible WordPress starter theme that is designed with developers in mind.

While it is simple, it comes with a powerful foundation for your themes to rely on. It uses semantic HTML code and also offers custom CSS styles and SEO optimization.

15. Gantry

Gantry is a powerful WordPress theme framework for developers. It allows you to create CMS-friendly themes quickly.

It is an open-source software with a lot to offer, including mega menu support, a layout manager, theme inheritance, a user-friendly interface, and more. Plus, it comes with a visual menu editor and unlimited undo/redo feature, making it a super powerful theme.

16. Air-Light

Air-Light is a minimalist WordPress starter theme based on Underscores. It is fully functional with minimal design options, leaving room for developers to add their own styles to create a new theme.

Additionally, the plugin is fully compatible with custom post types, the block editor, and plugins like Advanced Custom Fields (ACF) that can help you build custom fields for your website.

17. Responsive

Responsive is a free starter theme that offers 100+ Elementor and WordPress block templates.

It can also help with search engine rankings because it is fully optimized for SEO and supports schema markup. Plus, the theme can integrate with popular plugins like BuddyPress, WooCommerce, and LearnDash to build any kind of website you want.

18. Tonik

Tonik is an amazing starter theme that comes with the Sass and CSS frameworks to simplify styling for you. It also uses Webpack to manage, compile, and optimize theme files.

Tonik also offers enhanced templating and PHP namespaces. Plus, it lets you build child themes, making it a great starting point for developers.

19. Blockbase

Blockbase is a popular starter theme by Automattic that supports full site editing. It uses block templates to define your website structure, including header, footers, navigation menu, and more.

It also comes with global styles and PHP integration, making it a great block theme for developers.

Frequently Asked Questions About Starter Themes

Here are some questions that are frequently asked by our readers about WordPress starter themes.

1. Who should use starter WordPress themes?

Ideally, a starter theme should be used by developers and web designers who have a good understanding of development and want to create a custom theme.

These themes are not a good choice for users with no coding knowledge because they primarily offer minimal styling where you have to add customization with coding.

If you are a beginner looking for a website theme, then you can look at our expert picks for the most popular WordPress themes.

2. Do these themes come with support or documentation?

Some of the more popular and premium starter themes offer extensive documentation and support to help set up the theme on your website.

However, if you are going for one of the free starter themes, then you must keep in mind that support and documentation will be limited and may even be unavailable in some cases.

3. Can developers fully customize these themes?

WordPress starter themes are built for full customization. They come with a minimalistic layout and offer complete creative freedom to developers to build their own themes.

We hope this article has helped you find the best WordPress starter themes for developers. You may also want to check out our other WordPress guides for starter themes and business sites.

Related Guides for WordPress Theme Development

• How to Add Dummy Content for Theme Development in WordPress
• How to Customize Your WordPress Theme
• Free vs Premium WordPress Themes (Pros and Cons)
• How to Uninstall and Delete a WordPress Theme
• How Much Does a Custom WordPress Theme Cost?
• What Is a WordPress Theme Framework? Pros, Cons, and More
• Default WordPress Generated CSS Cheat Sheet for Beginners

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post 19 Best WordPress Starter Themes for Developers in 2024 first appeared on WPBeginner.

A child theme is a WordPress theme that inherits the functionality of another WordPress theme. Many users create a child for their current theme so that they can safely customize their website design without losing changes when the theme developer releases an update.

In this article, we will show you how to create a child theme for your WordPress site.

How Does a Child Theme Work, and Why Do You Need It?

A child theme inherits all the features, functions, and styles of another WordPress theme. When you create a child theme, the original theme is called the parent theme.

The inheritance includes the parent theme’s style.css file, which defines the theme’s main style. The child theme can override or extend its inherited properties by adding its own files or by modifying the existing ones.

While it is possible to customize your WordPress theme without installing a child theme, there are several reasons why you may need one anyway:

• Child themes protect your customizations during theme updates, keeping them safe from being overwritten. If you modify the parent theme directly, then those tweaks might vanish when you update.
• Child themes let you safely try out new designs or features without messing up the site’s original theme, similar to a staging environment.
• If you know how to code, then child themes can make the development process more efficient. A child theme’s files are much simpler than a parent theme’s. You can focus on modifying only the parts of the parent theme that you want to change or expand on.

What to Do Before Creating a WordPress Child Theme

We’ve seen lots of WordPress users excited to dive into the technical stuff, only to get discouraged when errors pop up. We get it. That’s why it’s important to know what you are getting into before creating a child theme.

Here are some things we recommend you do first before continuing with this step-by-step guide:

1. Be aware that you will be working with code. At the very least, you will need a basic understanding of HTML, CSS, PHP, and, optionally, JavaScript to understand what changes you need to make. You can read more about this in the WordPress theme handbook.
2. Choose a parent theme that has your desired website design and features. If possible, find one where you only need to make a few changes.
3. Use a local site or a staging site for theme development. You don’t want to create unintentional errors on your live site.
4. Back up your website first.

There are several ways to create a child theme out of your existing theme. One is with manual code, while others require a plugin, which is a lot more beginner-friendly.

The first method may seem intimidating if you lack technical experience. That said, even if you choose one of the plugin methods, we still recommend reading through the manual method to familiarize yourself with the process and the files involved.

With all that in mind, let’s get to how to create a child theme in WordPress. You can jump to the method you prefer using the links below:

Method 1: Creating a Child WordPress Theme Manually

First, you need to open /wp-content/themes/ in your WordPress installation folder.

You can do this by using your WordPress hosting’s file manager or an FTP client. We find the first option to be much easier, so we will use that.

If you are a Bluehost client, then you can log in to your hosting account dashboard and navigate to the ‘Websites’ tab. After that, click ‘Settings.’

In the Overview tab, scroll down to the ‘Quick Links’ section.

Then, select ‘File Manager.’

At this stage, you need to go to your website’s public_html folder and open the /wp-content/themes/ path.

Here, just click the ‘+ Folder’ button in the top left corner to create a new folder for your child theme.

You can name the folder anything you want.

For this tutorial, we will just use the folder name twentytwentyone-child as we will use Twenty Twenty-One as our parent theme. Once done, just click ‘Create New Folder.’

Next, you must open the folder you just made and click ‘+ File’ to create the first file for your child theme.

If you use an FTP client, then you can use a text editor like Notepad and upload the file later.

Go ahead and name this file ‘style.css’ ,as it is your child’s main stylesheet and will contain information about the child theme.

Then, click ‘Create New File.’

Now, just right-click on the style.css file.

After that, click ‘Edit’ to open a new tab like in the screenshot below.

In this new tab, you can paste the following text and adjust it based on your needs:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

Once done, just click ‘Save Changes.’

The next thing you need to do is create a second file and name it functions.php. This file will import or enqueue the stylesheets from the parent theme’s files.

Once you’ve created the document, add the following wp_enqueue code:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    $parenthandle = 'twenty-twenty-one-style'; // This is 'twenty-twenty-one-style' for the Twenty Twenty-one theme.
    $theme = wp_get_theme();
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(), // if the parent theme code has a dependency, copy it to here
        $theme->parent()->get('Version')
    );
    wp_enqueue_style( 'custom-style', get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // this only works if you have Version in the style header
    );
}

Once done, just save the file like in the previous step.

You’ve now created a very basic child theme. When you go to Appearance » Themes in your WordPress admin panel, you should see the Twenty Twenty-One Child option.

Click the ‘Activate’ button to start using the child theme on your site.

Method 2: Creating a Child Classic Theme With a Plugin

This next method uses the Child Theme Configurator plugin. This easy-to-use WordPress plugin lets you create and customize WordPress child themes quickly without using code, but it only works well with a classic (non-block) theme.

The first thing you need to do is install and activate the WordPress plugin. On activation, you need to navigate to Tools » Child Themes in your WordPress dashboard.

In the Parent/Child tab, you’ll be asked to choose an action. Just select ‘CREATE a new Child Theme’ to get started.

Then, select a parent theme from a dropdown menu. We will select the Hestia theme.

After that, just click the ‘Analyze’ button to make sure the theme is suitable for use as a parent theme.

Next, you will be asked to name the folder the child theme will be saved in. You can use any folder name you want.

Below that, you need to select where to save the new styles: in the primary stylesheet or a separate one.

The primary stylesheet is the default stylesheet that comes with your child theme. When you save new custom styles to this file, you are directly modifying the main styles of your child theme. Every modification will overwrite the original theme’s style.

The separate option allows you to save a new custom style to a separate stylesheet file. This is useful if you want to preserve the original theme’s style and not overwrite it.

For demonstration purposes, we will choose the first option. But as you get more creative with your child theme customizations, you can always repeat this process and select the second option.

Moving down, you have to choose how the parent theme’s stylesheet will be accessed.

We will just go with the default ‘Use the WordPress style queue’ as it will let the plugin determine the appropriate actions automatically.

When you get to step 7, you’ll need to click the button labeled ‘Click to Edit Child Theme Attributes’.

You can then fill in the details of your child theme.

When you create a child theme manually, you will lose the parent theme’s menus and widgets. Child Theme Configurator can copy them from the parent theme to the child theme. Check the box in step 8 if you’d like to do this.

Finally, click the ‘Create New Child Theme’ button to make your new child theme.

The plugin will create a folder for your child theme and add the style.css and functions.php files you’ll use to customize the theme later.

Before you activate the theme, you should click the link near the top of the screen to preview it and make sure it looks good and doesn’t break your site.

If everything seems to be working, click the ‘Activate & Publish’ button.

Now, your child theme will go live.

At this stage, the child theme will look and behave exactly like the parent theme.

Method 3: Creating a Child Block Theme With a Plugin

If you use a block theme, then WordPress offers an easy way to create a child theme with the Create Block Theme plugin.

First, you will need to install and activate the WordPress plugin. After that, go to Appearance » Create Block Theme.

Here, simply select ‘Create child of [theme name].’ We are using Twenty Twenty-Four in this example.

Once you’ve selected that option, fill out your theme’s information.

Below that, you can do more things like uploading a screenshot for the theme to differentiate it from other themes, adding image credits, linking to must-have WordPress plugins, adding theme tags, and so on.

Once you are done configuring the settings, just scroll all the way down and hit the ‘Generate’ button.

The plugin will now create and download a new child theme zip file to your computer.

If you open it, you will see three files: readme, style.css, and theme.json.

The theme.json file defines various aspects of a block theme, including its colors, typography, layout, and more. The plugin creates this file by default so that you can override or extend the parent theme’s style in the child theme later on.

At this stage, all you need to do next is go to Appearance » Themes.

After that, click ‘Add New Theme.’

Next, select ‘Upload Theme.’

Then, choose the zip file and click ‘Install Now’ to install the WordPress theme.

Bonus Tip: Find Out If Your Theme Has a Child Theme Generator

If you are lucky, then your WordPress theme may already have an existing feature to create a child theme.

For example, if you use Astra, then you can go to the Astra Child Theme Generator website. After that, just fill out your child theme name and click the ‘Generate’ button.

Your browser will then automatically download your child theme to your computer, which you can then install on WordPress yourself.

We also found some other popular WordPress themes that have a child theme generator:

• OceanWP
• Ultra
• Nozama
• Eclipse

How to Customize Your Classic Child Theme

Technically, you can customize your child theme without code by using the Theme Customizer. The changes you make there won’t affect your parent theme. If you are not comfortable with coding yet, then feel free to use the Customizer.

That said, we also recommend customizing the child theme with code.

Besides learning more about WordPress theme development, code customization allows for the changes to be documented within the child theme’s files, making it easier to track them.

Now, the most basic way to customize a child theme is by adding custom CSS to the style.css file. To do that, you need to know what code you need to customize.

You can simplify the process by copying and modifying the existing code from the parent theme. You can find that code by using the Chrome or Firefox Inspect tool or by copying it directly from the parent theme’s CSS file.

Method 1: Copying Code from the Chrome or Firefox Inspector

The easiest way to discover the CSS code you need to modify is by using the inspector tools that come with Google Chrome and Firefox. These tools allow you to look at the HTML and CSS behind any element of a web page.

You can read more about the inspector tool in our guide on the basics of inspect element: customizing WordPress for DIY users.

When you right-click on your web page and use the inspect element, you will see the HTML and CSS for the page.

As you move your mouse over different HTML lines, the inspector will highlight them in the top window. It will also show you the CSS rules related to the highlighted element, like so:

You can try editing the CSS right there to see how it would look. For example, let’s try changing the background color of the theme’s body to #fdf8ef. Find the line of code that says body { and inside it, the code that says color: .

Just click the color picker icon next to color: and paste the HEX code into the appropriate field, like so:

Now, you know how to change the background color using CSS. To make the changes permanent, you can open your style.css file in the child theme directory (using the file manager or FTP).

Then, paste the following code below the child theme information, like so:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

body {
    background-color: #fdf8ef
}

Here is what it will look like if you go to the WordPress admin and open Appearance » Theme File Editor:

If you are a beginner and want to make other changes, then we recommend getting familiar with HTML and CSS so that you know exactly what element each code is referring to. There are many HTML and CSS cheat sheets online that you can refer to.

Here is the complete stylesheet that we have created for the child theme. Feel free to experiment and modify it:

/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    https://wordpress.org/themes/twentytwentyone/
Description:  Twenty Twenty-One child theme
Author:       WordPress.org
Author URI:   https://wordpress.org/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyonechild
*/

.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}

Method 2: Copying Code From the Parent Theme’s style.css File

Maybe there are a lot of things in your child theme that you want to customize. In that case, it may be quicker to copy some code directly from the parent theme’s style.css file, paste it into your child theme’s CSS file, and then modify it.

The tricky part is that a theme’s stylesheet file can look really long and overwhelming to beginners. However, once you understand the basics, it’s actually not that hard.

Let’s use a real example from the Twenty Twenty-One parent theme’s stylesheet. You need to navigate to /wp-content/themes/twentytwentyone in your WordPress installation folder and then open the style.css file in your file manager, FTP, or Theme File Editor.

You will see the following lines of code:

:root {
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5);
--global--color-white-90: rgba(255, 255, 255, 0.9);
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
}

Lines 3 to 15 control the type of colors (like yellow, green, purple) that the entire theme will use in their specific HEX codes. And then, for lines like ‘global-color-primary’ or ‘global-color-secondary,’ that means those are the primary and secondary colors of that theme.

You can copy these lines of code to your child theme’s stylesheet and then change the HEX codes to create your perfect color scheme.

As you scroll down in the parent theme’s stylesheet, you will notice that other variables may have these color variables, too, like here:

/* Buttons */
--button--color-text: var(--global--color-background);

This basically means all button texts will use the same color as declared in --global--color-background:, which is mint green (--global--color-green: #d1e4dd). If you change the HEX in --global--color-green:, then the button text will look different, too.

You can also follow these tutorials to experiment with your child theme customizations:

• How to Change the Text Color in WordPress
• How to Change Your WordPress Logo Size (Works With Any Theme)
• How to Customize Blockquotes Style in WordPress Themes
• WordPress Body Class 101: Tips and Tricks for Theme Designers
• How to Add a Parallax Effect to Any WordPress Theme

How to Customize Your Block Child Theme

If you use a child block theme, then most of your customizations will be done to your theme.json file, not style.css.

However, during our testing, we found the process to be complicated. Unlike classic child themes, there’s a bigger knowledge gap you need to fill in (especially about JSON and how CSS is handled there) if you are new to WordPress theme development.

That said, we found a much easier alternative using the Create Block Theme plugin. This tool can record any changes made in the WordPress Full Site Editor in your child theme.json’s file. So, you won’t have to touch any code at all because the plugin will take care of it for you.

Let’s show you an example. First, open the WordPress Full Site Editor by going to Appearance » Editor.

You will see several menus to choose from.

Here, just select ‘Styles.’

On the next page, you will see several built-in style combinations to choose from.

For our purpose, you can simply skip all of that and just click the pencil icon.

Now, let’s try changing some parts of your child theme, like the fonts.

For this example, go ahead and click ‘Typography’ in the right sidebar.

Next, you will see some options to change the theme’s global fonts for text, links, headings, captions, and buttons.

Let’s click ‘Headings‘ for the sake of demonstration.

In the Font dropdown menu, change the original pick to any font that’s available.

Feel free to change the appearance, line height, letter spacing, and letter casing if needed.

Once you are done, just click ‘Save.’ After that, you can click the Create Block Theme button (the wrench icon) next to ‘Save.’

Then, click ‘Save Changes.’ This will save all of your changes to the child theme.json file.

If you open your theme.json file, then you will see the changes reflected in the code.

Here’s what we saw after we updated our child theme:

As you can see, now the file includes code that indicates that heading tags will use the Inter font with semi-bold appearance, 1.2 line height, 1 pixel line spacing, and in lowercase.

So, whenever you edit your child block theme, make sure to click the wrench icon and save your changes so that they are well-documented.

How to Edit a Child Theme’s Template Files

Most WordPress themes have templates, which are theme files that control the design and layout of a specific area inside a theme. For example, the footer section is usually handled by the footer.php file, and the header is handled by the header.php file.

Each WordPress theme also has a different layout. For example, the Twenty Twenty-One theme has a header, content loop, footer widget area, and footer.

If you want to modify a template, then you have to find the file in the parent theme folder and copy it to the child theme folder. After that, you should open the file and make the modifications you want.

For example, if you use Bluehost and your parent theme is Twenty Twenty-One, then you can go to /wp-content/themes/twentytwentyone in your file manager. Then, right-click on a template file like footer.php and select ‘Copy.’

After that, enter the file path of your child theme.

Once you are done, simply click ‘Copy Files.’

You will then be redirected to the file path.

To edit the footer.php file, just right-click on it and select ‘Edit.’

As an example, we will remove the ‘Proudly powered by WordPress’ link from the footer area and add a copyright notice there.

To do that, you should delete everything between the <div class= "powered-by"> tags:

<div class="powered-by">
				<?php
				printf(
					/* translators: %s: WordPress. */
					esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
					'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
				);
				?>
			</div><!-- .powered-by -->

Then you need to paste in the code you find below those tags in the example below:

<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->

Here’s what you should now have in the text editor:

Go ahead and save the file to make the changes official.

After that, visit your website to see the new copyright notice.

How to Add New Functionality to Your Child Theme

The functions.php file in a theme uses PHP code to add features or change default features on a WordPress site. It acts like a plugin for your WordPress site that’s automatically activated with your current theme.

You’ll find many WordPress tutorials that ask you to copy and paste code snippets into functions.php. But if you add your modifications to the parent theme, then they will be overwritten whenever you install a new update to the theme.

That’s why we recommend using a child theme when adding custom code snippets. In this tutorial, we will add a new widget area to our theme.

We can do that by adding this code snippet to our child theme’s functions.php file. To make the process even safer, we recommend using the WPCode plugin so that you don’t edit the functions.php file directly, reducing the risk of errors.

You can read our guide on how to add custom code snippets for more information.

Here is the code you need to add your functions.php file:

// Register Sidebars
function custom_sidebars() {

$args = array(
'id'            => 'custom_sidebar',
'name'          => __( 'Custom Widget Area', 'text_domain' ),
'description'   => __( 'A custom widget area', 'text_domain' ),
'before_title'  => '<h3 class="widget-title">',
'after_title'   => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget'  => '</aside>',
);
register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );

Once you save the file, you can visit the Appearance » Widgets page of your WordPress dashboard.

Here, you will see your new custom widget area that you can add widgets to.

There are plenty of other features you can add to your theme using custom code snippets. Check out these extremely useful tricks for the WordPress functions.php file and useful WordPress code snippets for beginners.

How to Troubleshoot Your WordPress Child Theme

If you’ve never created a child theme before, then there’s a good chance you’ll make some mistakes, and that’s normal. This is why we recommend using a backup plugin and creating a local site or staging environment to prevent fatal errors.

All that being said, don’t give up too quickly. The WordPress community is very resourceful, so whatever problem you are having, a solution probably already exists.

For starters, you can check out our most common WordPress errors to find a solution.

The most common errors you’ll probably see are syntax errors caused by something you missed in the code. You’ll find help in solving these issues in our quick guide on how to find and fix the syntax error in WordPress.

Additionally, you can always start again if something goes very wrong. For example, if you accidentally deleted something that your parent theme required, then you can simply delete the file from your child theme and start over.

We hope this article helped you learn how to create a WordPress child theme. You may also want to check out our ultimate guide to boost WordPress speed and performance and our expert pick of the best drag-and-drop page builders to easily design your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a WordPress Child Theme (Beginner’s Guide) first appeared on WPBeginner.