WordPress’s Twenty Seventeen theme is a popular and versatile choice for building websites, thanks to its clean design and customizable features. One of the best practices when working with WordPress themes is to create a child theme. A child theme allows you to make modifications to the parent theme without affecting its core files. In this tutorial, we will guide you through the process of creating a child theme for Twenty Seventeen, providing you with the full code required.
Create Twenty Seventeen Child Theme in Just 5 Steps
Step 1: Setting up the Child Theme Directory
The first step is to create a new directory for your child theme. Access your WordPress installation via FTP or use the file manager provided by your web hosting service. Navigate to the “wp-content/themes/” directory and create a new folder for your child theme. Give it an appropriate name, such as “twentyseventeen-child.”
Step 2: Creating the Child Theme Stylesheet
In your child theme directory, create a new file called “style.css”. This file will contain the stylesheet for your child theme. Open “style.css” and add the following code:
[dm_code_snippet background=”no” background-mobile=”yes” slim=”no” line-numbers=”yes” bg-color=”#abb8c3″ theme=”dark” language=”css” wrapped=”yes” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
/*
Theme Name: Twenty Seventeen Child
Template: twentyseventeen
*/
@import url("../twentyseventeen/style.css");
[/dm_code_snippet]
In the code above, we define the name of our child theme and specify “twentyseventeen” as the parent theme. The @import line imports the parent theme’s stylesheet, allowing you to override or modify any existing styles.
Step 3: Enqueueing the Child Theme Stylesheet
To enqueue the child theme’s stylesheet, we need to add a function to the child theme’s “functions.php” file. Create a new file called “functions.php” in your child theme directory and add the following code:
[dm_code_snippet background=”no” background-mobile=”yes” slim=”no” line-numbers=”yes” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”yes” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]
<?php
function twentyseventeen_child_enqueue_styles() {
wp_enqueue_style('twentyseventeen-child-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles');
?>
[/dm_code_snippet]
This code registers and enqueues the child theme’s stylesheet. It ensures that your child theme’s styles are loaded after the parent theme’s styles, allowing you to override or extend the existing styles.
Step 4: Activating the Child Theme
Now that your child theme is ready, it’s time to activate it in your WordPress admin dashboard. Log in to your WordPress site, go to “Appearance” > “Themes,” and you should see your newly created child theme listed. Click on the “Activate” button to make it the active theme.
Step 5: Modifying the Child Theme
With your child theme active, you can begin customizing it to suit your needs. You can modify the existing template files, add new files, or override specific styles. Remember that any changes made to the parent theme’s files should be made in the child theme instead to ensure that your modifications are not lost during theme updates.
Conclusion:
Creating a child theme for Twenty Seventeen or any other WordPress theme is a best practice that allows you to customize your site while preserving the integrity of the parent theme. By following the steps outlined in this guide and using the provided code, you can create a child theme for Twenty Seventeen and start building a unique website tailored to your requirements. Happy theming!
