Are you looking to create a child theme in WordPress?
Once you learn the WordPress basics, you probably want to learn how to customize your WordPress site. Child themes are a great starting point for anyone looking to customize WordPress themes.
In this article, we will show you how to create a child theme in WordPress.
Why Do You Need a Child Theme?
A child theme is a WordPress theme that inherits the functionality, features, and style of another WordPress theme, the parent theme. You can then customize the child theme without making any changes to the parent theme.
Child themes are the best way to customize a WordPress theme because they save time and effort. The parent theme already contains lots of formatting and functionality, so you don’t have to code everything from scratch.
They also make it safe to update your WordPress themes. Because you modified the child theme and not the parent, you won’t lose any customization when you update the parent theme.
Once you’re happy with your child theme, you can even use it on another WordPress site.
Before You Start Creating a Child Theme
To create a child theme, you should be aware that you will be working with code. You’ll need a basic understanding of HTML and CSS to understand what changes you need to make to the code to achieve your goals.
Some knowledge of PHP is also helpful. You should at least be familiar with copying and pasting code snippets from other sources.
We recommend you practice on your local development environment. You can move a live WordPress site to local server for testing purposes or use dummy content for theme development.
Finally, you need to decide on a parent theme. You should choose a parent theme that’s similar in appearance and features to your end goal. The aim is to make as few changes as possible.
In this article, we’ll use the Twenty Twenty-One theme, which is one of the default WordPress themes.
Creating Your First Child Theme
You can create a child theme manually by creating the folder and files that are needed. Or you can create a child theme using a plugin.
The manual method is helpful because it will help you become familiar with the files you need to work with later in the tutorial. The plugin method can be used if you have difficulties creating those files.
You only need to use one method, and you can jump to the method you prefer using the links below.
Method 1: Creating a Child Theme Using Code
First, you need to open /wp-content/themes/ in your WordPress installation folder and create a new folder for your child theme. You can name this folder anything you want. For this tutorial, we will be naming it wpbdemo.
Next, you need to create the first two files for your child theme. Start by opening a text editor like Notepad. Then you need to paste the following code into the empty document.
Theme Name: WPB Child Theme Theme URI: https://www.wpbeginner.com/ Description: A Twenty Twenty-One child theme Author: WPBeginner Author URI: https://www.wpbeginner.com Template: twentytwentyone Version: 1.0.0 Text Domain: twentytwentyonechild
This code contains information about the child theme, so feel free to change it to meet your needs. Now save this file as style.css in the child theme folder you just created. This is your child theme’s main stylesheet.
The next thing you need to do is create a second file that will import, or enqueue, the stylesheets from the parent theme. To do that, create a new document in your text editor and copy in the following code.
/* enqueue scripts and style from parent theme */
function twentytwentyone_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');
This code will work when you use Twenty Twenty-One as the parent theme. If you use a different parent theme, then you need to use different code as described in the WordPress Theme Handbook.
If you have difficulty modifying the code for a different parent theme, then you might want to use the plugin method instead.
Now save this file as functions.php in your child theme folder. We’ll come back to this file later to add functionality to your child theme.
Note: In the past, the parent theme was imported using the @import command in style.css. We don’t recommend this method anymore because it will increase the amount of time needed to load the style sheets.
You’ve now created a very basic child theme, and when you navigate to Appearance » Themes you should see the WPB Child Theme. You’ll need to click the Activate button to start using the child theme on your site.
Since you haven’t changed anything in your child theme yet, your site will use the functionality and appearance of its parent theme. You can now move on to the next section where you’ll customize the child theme.
Method 2: Creating a Child Theme Using a Plugin
Child Theme Configurator is an easy to use WordPress plugin that lets you create and customize child themes quickly without using code.
The first thing you need to do is install and activate the Child Theme Configurator plugin. For more details, see our step by step guide on how to install a WordPress plugin.
On activation, you need to navigate to Tools » Child Themes in your WordPress dashboard.
On the Parent/Child tab you’ll be asked to select a parent theme from a drop down menu. We’ll select the Twenty Twenty-One theme.
Once you click the Analyze button the plugin will make sure the theme is suitable for use as a parent theme. Twenty Twenty-One is OK.
Next, you will be asked to name the folder the child theme will be saved in and choose where to save the styles. We’ll leave the default settings.
In the following section, you’ll be asked to choose how the parent theme stylesheet will be accessed. Again, we will go with the default setting.
When you get to Section 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 lose the parent theme’s menus and widgets. Child Theme Configuratator can copy them from the parent theme to the child theme. Check the box Section 8 box if you’d like to do this.
Finally, click the button to create your new child theme. The plugin will create a folder for your child themes 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 and your child theme will go live.
At this stage, the child theme will look and behave exactly like the parent theme. Next, we’ll begin to customize it.
Customizing Your Child Theme
Now we’ll customize the child theme so that it looks a little different from the parent theme. We do this by adding code to the style.css file, and that requires some familiarity with CSS.
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 Inspector, or by copying it directly from the parent theme’s style.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.
For example, if you want to see the CSS used for the body of the post, then simply take your mouse over the post and right-click to select Inspect.
This will split your browser screen into two parts. At the bottom of the screen, you will see the HTML and CSS for the page. Depending on your browser’s settings, the HTML and CSS may appear on the right of the screen instead.
As you move your mouse over different HTML lines, the Chrome inspector will highlight them in the top window. It will also show you the CSS rules related to the highlighted element.
You can try editing the CSS right there to see how it would look. Let’s try changing the background color of the body to #fdf8ef.
You will see that the page background color will change, but the change is only temporary. To make it permanent, you’ll need to copy this CSS rule and paste in your child theme’s style.css file.
body {
background-color: #fdf8ef;
}
Save the changes you made to style.css file and then preview your site.
You can go on to repeat the process for anything you want to change in your theme’s stylesheet. Here is the complete stylesheet that we have created for the child theme. Feel free to experiment and modify it.
Theme Name: WPB Child Theme
Theme URI: https://www.wpbeginner.com/
Description: A Twenty Twenty-One child theme
Author: WPBeginner
Author URI: https://www.wpbeginner.com
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
You can also copy some code directly from the parent theme’s style.css file. You can then paste it into the child theme’s style.css file and then modify it.
That’s particularly helpful when using Twenty Twenty-One as a parent theme because it makes extensive use of CSS variables.
For example, when we modified the page’s background color above, the original code was:
background-color: var(--global--color-background);
Here ‘–global–color-background’ is a variable. The variable can be used in multiple locations throughout the theme. To change the color in all of those places at once, you simply have to change the value of the variable.
You need to navigate to /wp-content/themes/twentytwentyone in your WordPress installation folder and then open the style.css file in your text editor. You can then find where the –global–color-background is defined.
--global--color-background: var(--global--color-green);
We discover that the variable is defined by yet another variable!
In fact, in the :root section of the parent theme’s style.css we find a whole range of color variables defined. This is the color palette used by the Twenty Twenty-One theme.
:root {
--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;
}
Once you choose the perfect color scheme for your WordPress site, these variables will let you quickly customize your child theme.
You simply copy that code and paste it into your child theme’s style.css file. Then you need to replace the color codes with new ones you chose for your own color palette.
Those colors will then be automatically used in multiple places throughout your child theme. It’s not only quicker but will make the colors of your theme more consistent.
Be adventurous. The green color variable doesn’t have to be green.
You can do the same for other variables. Twenty Twenty-One’s style.css lists variables for font families and sizes, headings, line spacing and more. You can copy any of these to your new style.css file where you can customize them.
Editing the Template Files
Each WordPress theme has a different layout. For example, the Twenty Twenty-One theme has a header, content loop, footer widget area, and footer.
Each section is handled by a different file in the twentytwentyone folder. These files are called templates.
Templates are usually named after the area they are used for. For example, the footer section is usually handled by footer.php file, and header and navigation areas are handled by header.php file.
Some areas, like the content area, might be handled by multiple files called content templates.
If you’d like to modify a template, then you first find the file in the parent theme folder and copy it to the child theme folder. After that, you should open the file in a text editor and make the modifications you want.
In this tutorial, we’ll copy the footer.php file from the parent theme folder to the child theme folder. Once you’ve done that, you need to open the file in a plain text editor like Notepad.
As an example, we’ll 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 -->
Once you save the file and visit your WordPress site, you should be able to see the new copyright notice.
Adding 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 it to the parent theme, it 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’ll add a new widget area to our theme.
We can do that by adding this code snippet into our child theme’s functions.php file.
<?php
// 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 and you will see your new custom widget area.
You can learn more about adding widget areas in our guide on how to add dynamic widget ready areas and sidebars in WordPress.
There are plenty of other features you can add to your theme using custom code snippets. Check out these 25+ extremely useful tricks for the WordPress functions file.
Troubleshooting
If you’ve never created a child theme before, then there’s a good chance you’ll make some mistakes. Just don’t give up too quickly. Check out our list of most common WordPress errors to find a fix.
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 how to find and fix the syntax error in WordPress.
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 tutorial helped you learn how to create a WordPress child theme. You may also want to learn how to choose the best website builder or check out our list of must have plugins to grow your site.
If you liked this guide, then please consider subscribing to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Yogesh Sambare says
Hi, Team wpbeginner,
Thanks for this awesome guide, now I think I’m able to make my themes child theme, and it’s really helpful for me .
WPBeginner Support says
Glad you found our guide helpful!
Admin
Ricardo says
The line:
“wp_get_theme()->get(‘Version’) )”
Should be:
“wp_get_theme()->get(‘Version’) )”
cheers!
WPBeginner Support says
While our comments automatically changed that in your message, we see the issue, thank you for letting us know
Admin
Rubb says
Can I delete the plugin after I create the child theme?
WPBeginner Support says
Currently, you can do that with the plugin
Admin
Eitan says
You need to add quotation marks to the Y = (“Y”) at the echo date, or you’ll get an error. – echo date(“Y”)
WPBeginner Support says
Thank you for pointing out the typo
Admin
Bomo says
So now that we have created a child theme, how do we update the parent theme when the child theme is activated?
WPBeginner Support says
You would update the parent theme as you normally would. For safety, you may want to create a backup before you update the parent theme in case there is a conflict somewhere.
Admin
RYAD says
But do we have to activate the parent theme before we update and them desactivate it and reactivate the child theme ?
WPBeginner Support says
No, you can update the theme without it being active
Mahesh Yadav says
One thing I want to know, if we make a child theme then we have 2 CSS files to load one parent theme CSS and second child them CSS. Wouldn’t it increase the site load time and It added one more CSS to load?
WPBeginner Support says
While the load time would technically increase, it shouldn’t be by a noticeable amount.
Admin
Nadia Shaheen says
Great work!
stay blessed and keep sharing awesome content.
WPBeginner Support says
Thank you, glad you liked our content
Admin
Fahad says
Great Work !
This site is super helpful
Keep it up !!
WPBeginner Support says
Thank you, glad our article was helpful
Admin
Daniel Waduka says
I am just starting to use child themes, and this article has been of so much help to me.
Thanks so much.
WPBeginner Support says
Glad our guide could be helpful
Admin
Marcos Flores says
Hi! i’ve been reading this article and it works! but i also read wordpress documentation about this and they say this
“Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php ”
Should i use both method? or if i user the function.php i dont need to write import function inside style.css (located in my child-theme folder)
Khema says
Your instructions are missing a step with the functions.php creation. It should mention that needs to wrap the whole file. In this case I didn’t want to add the example you used and to another piece of code from the article you linked to. Naturally those codes didn’t include the php tag.
Thanks for the article. It’s very very helpful.
rReons says
So question. I was using my wordpress theme without any child theme and was doing all the changes in to it. I have created a child theme thanks to your guide and I’m using that now as the website theme.
My question is both themes have the same modifications changes. If I update the main theme from now on, will the changes affect the child theme also?
balu says
He! wpbeginner. WordPress official site saying this. You need to update the post. Thank You!
Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.
Pat says
Great info…you made it to my save list!! Thanks!
Alfonso de Garay says
I have a Child theme with the theme latest version installed in my site. WP version 4.7.5. Received a notice that says WP version is available please update now.
1. Do I have to backup my site again before updating?
2. Do I have to create another Child theme using Child version 1 one?
2. How can I change the Name, email and URL to Chile version 1
WPBeginner Support says
Hi Alfonso,
WordPress updates normally do not affect your themes so you do not need to create another child theme. You should always backup your website before updating WordPress.
Admin
Lisa Bruce says
Hi, I can see that this video/post is a few years old, so I’m a little late to the party, but I have a questions I was hoping you could help me with.
I am a relatively new to WP and just came to realize the importance of child themes. I have been working on developing a site for a friend and have made several changes to the theme that I am using. I found a bug in the theme and contacted the theme developer and they said that the bug had been fixed in a recent update.
If I install the update I believe I will loose all my customizations. Is it too late to create a child them? Is it possible to do it now and then install the update? I prefer not to have to start from scratch.
WPBeginner Support says
Hi Lisa,
If you know what changes you made and to which files, then first download a backup of your existing theme to your computer. After that, install the updated version. You can now create a child theme and then copy and paste the code from your customized version to the child theme.
Admin
Nell Yang says
Thank you for this helpful post. I have always been looking for a video to show me how exactly should I use child theme. It is quite time consuming that each time after I updated my theme, all my styles just went away. It is frustrating to do everything over again. I tried to read the documents from wordpress but still don’t know how to proceed after activate the child theme. Keep up the good work! Thank you again!
Tony Agee says
Good instructional video. Most tutorials I have watched tell you to paste the code in the file but they neglect to tell you what medium to paste the code to. I was going to use Notepad++ but I guess you can use regular notepad.
JP says
Hello, i just want to say that you are a very good writer, very clear and simple. I past a long time on your article for learn WP.
Thank you!
Rob Brooks says
Hi. Thank you for being a great WP resource. I am new to WP and really appreciate your guidance. I have followed the article to the letter but when I go to enable the child template on the site, I get the error “The parent theme is missing. Please install the “Real Estate Lite” parent theme. As you see I am using a free template called Real Estate light. it is located in the ../real-estate-lite/ directory of wp-content/themes. My code is below… did I do something wrong?
Theme Name: Real Estate Lite Child Theme Theme URI: http://www.example.com/ Description: Real Estate Lite child theme Author: me Author URI: http://www.example.com Template: Real Estate Lite Version: 1.0.0 */ @import url("../real-estate-lite/style.css");In addition, I will mention the theme was free and is running on WP version 4.7.2 (Running on Plesk). I created style.css file directly on the server so no FTP issues.
I have already made significant changes to the parent style.css file as well as functions.php … I am not sure if this would affect this, but going to test on an unedited dummy domain to see if I get the same results
Any guidance/assistance you can provide would be greatly appreciated.
WPBeginner Support says
Hey Rob,
You will need parent theme to be installed on your site and Template value should match parent theme’s actual name which you can see in it’s style.css file.
Admin
Carrie says
Hi! Great article! I am finally starting to understand how to edit css so that I get the result I want, thanks to this article.
Thanks much for the simplified explanation!
Nalin says
I created a child theme & Using @import for the “style.css” on a child theme. Now I want to change in another css file of parent theme’s folder ….. /font_awesome/css/fontawesome.css
Now, I want to know that where I will put my new fontawesome.css in child theme & how to use @import command.
or any other process to use more css file in child theme.
Rebecca says
So, I don’t have the wp content folder on my computer. What should I do?
Should I have downloaded this at some point?
WPBeginner Support says
Hi Rebecca,
The wp-content file is hosted on your hosting account not on your computer. You will need an FTP client to connect to your server.
Admin
Brad says
Using @ import is no longer best practice
SAppa says
Then what is the best practice now? You should be able to back up your comment.
Jual beli rumah says
Thankyou
Jean-philippe says
I am learning so much since a few hours on your website. Everytime I search something in google related to “how to” in wordpress I find that the best information is here at WPbeginner. It is always well explained and easy to understand. I will always come back for information here without a doubt.
WPBeginner Support says
Hi Jean-philippe,
Thanks for the kind words, we are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Admin
Smart Rashed says
This is the article ,which i am looking for,thanks man.
Kevin says
I know this will be a stupid question. I’m so new to this and have no skills at all. If I am creating a file, style sheet, etc. on my wp installation file on my local pc, how does that get onto my website? I guess I’m missing that? I use like 3 different PCs to work on my website and those local files aren’t on all of them. Again, I am sure I am missing something really dumb. Not seeing the connection.
WPBeginner Support says
The files you edit on your computer need to be transferred to your website using an FTP client. See our guide on how to upload WordPress files using FTP.
Admin
Kevin says
Ok, I got that and made a child theme, but when I activate it, the formatting on the site is all off from the parent theme. What did I do wrong?
Francesco says
Hi there,
I’m following your tutorial but WordPress (4.5.3) doesn’t recognise the new folder on my online server. How can I work around this?
Thanks,
F.
Muhammad Moosa says
Helpful article indeed, I followed it and created a child theme. Thanks.
Carolina says
Hi, thanks for the tutorial, very helpfull. But I have a question. Can I create a child theme from an already established website? I have a client who designed his own website but did not create a child theme. How to go about it?
WPBeginner Support says
If their current theme follows WordPress coding standards and best practices then you should have no trouble creating a child theme.
Admin
Mike says
Thank you so much for the article and video. Apparently since these were created WordPress has new best practices listed in their codex which is confusing me.
“The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice.”
Do I stick with the steps you outlined herein verbosely, or do I omit the import function and create the PHP file, or do I implement both?
My theme’s style.css file only contains a header so importing that file seems irrelevant, and there are multiple CSS files like main.css located elsewhere in the parent’s file structure. Not knowing any better as a beginner I have already made changes to main.css to achieve some of my goals and only now I realize the child theme is necessary.
Any advice is greatly appreciated.
Best regards,
Mike
WPBeginner Support says
You will need to import at least your style.css file it should be in your parent themes main directory. It should automatically import other CSS files.
Admin
Mike says
Even if the style.css has nothing but the header?
Jack says
If your style.css file do not have imports to other css styles, you can import them directly, just like style.css.
Olamide says
Good day. When I did a live preview of the child theme, I noticed that it didn’t have the css of the parent theme. Maybe this is as a result of an error in the way I inserted the code?
This is the code that I inserted:
/*
Theme Name: sparkling child
Theme URI: https://www.wpbeginner.com/
Description: sparkling child theme
Author: djetlawyer
Author URI: http://www.example.com
Template: sparkling
Version: 1.0.0
*/
@import url(“../sparkling/style.css”);
The parent theme is “sparkling”. If there is any error, please correct me.
Thank you.
WPBeginner Support says
The code is correct.
Admin
lucia says
Hi there,
I am trying to set up a child theme to activate my footer on twenty twelve, but I don’t know what code to use to set it up.
I tried this webpage
with various suggestions , and I have tried to change your suggestion as given on twenty thirteen , but I don’t succeed.
Could you please give me the right working code for setting up a child them for twelve twelve.
Leigh says
This was incredibly helpful – especially your HTML for us to copy. I’ve never been so excited to see colors change on a website before. This is easily the best “how-to” out there for this theme!
Bhautik Andhariya says
Hello, I have tried same example that you shown. But my child theme is replacing all the style of its parent theme.
It doesn’t have any style of it’s parent. What is the solution? Can you please help me? I am new in wordpress and i am learning it.
Angelo says
Hi there!
I’ve just installed the Bose template and also created a child theme for it. However, the following error message appears on the center of my website:
Warning: implode(): Invalid arguments passed in /home/hello582/public_html/teste/wp-content/themes/bose/featured.php on line 12
I’m a very beginner at websites creation, so I haven’t got any clue about what the problem is. Could anyone help me?
Thanks a lot!
WPBeginner Support says
Please contact the theme developer for support.
Admin
Djamila says
Hi,
Thanks for the article! I could not get my child theme to ‘appear’ in the template section and it turned out I indeed misspelled the way the original template was named. What a difference a capital makes, huh?
However, now that I have my child theme I was able to update the parent theme and when I did all of a sudden I got an issue with a super important plugin ( I am building a review blog on a local database, for now and it’s the wrap up/grading plugin belong to the template designers).
In the parent template they ‘upgraded’ this plugin. I personally prefer the old one, but okay…anyway…underneath my review you now see *both*, the old wrap up with grades and the new one, which looks out of whack too. I have de-activated and re-activated but it stays like that. Super annoying and I don’t know where to look to either keep the old one (prettier) or only the new one and outlines as should.
Where should I start? Thanks for any help you can give me.
WPBeginner Support says
Contact the plugin support.
Admin
Amanda says
Thanks for a great article!
If I use a child theme, will I still be able to customize it using the Appearance> Theme Options that comes with my theme in the admin panel such as font size, background colors etc. or do I have to go the code route?
If I have activated the Child theme and I use the Appearance tab to update the styling instead of using code, is it essentially still updating the parent theme because the related files are not in the child theme folder?
WPBeginner Support says
Yes, your child theme will inherit all these options.
Admin
Amanda says
Thanks for your reply.
So if I activate the Child Theme and use the settings in the Appearance tab of my admin panel to change the styling (instead of writing css code), my changes won’t be overwritten when I do a theme or WordPress update on the parent theme?
Would I still need to copy the stylesheet, header, footer files etc. to the child theme folder to make the scenario above work?
Laura says
I’ve been following these (and other) steps to create a child theme based on twentytwelve. The issue I’m running into is that wordpress seems to ignore only some of the css I’ve changed from the original theme and it’s driving me nuts. For example, I’ve successfully changed the background colour of the menu, but it simply won’t let me change the text colours of anything. I’ve used your approach of editing it in chrome’s code inspector thing (which worked great, the colour got changed, suggesting my code was correct) and pasting the changed code into the style.css of the child theme, but it doesn’t seem to get picked up at all. I don’t know what to do about this, any insights would be very welcome!
Boyet says
Thank you very much for this tutorial. I don’t have problem editing my child theme’s stylesheet, header, and footer files.
My question is, what will I do if I wanted to change something in a file located in my mother theme’s folder like: public_html/wp-content/themes/shopera/woocommerce?
Do I need to create the same path in my child theme?
Thanks in advance…
WPBeginner Support says
Yes.
Admin
Tony Arnold says
Very helpful and largely understood and executed.
I am trying to make my header image full width.My theme doesn’t ‘allow’ this as standard so do i change the file?
Thank you
Sohail Farooq says
Love this article I tried and got it worked at once.
Xander says
Hi, there!
It seems I have got stuck a little bit. I have already made some changes in the some .php-files (e.g. header.php, footer.php and so on) of my parent theme without having a child theme installed.
Now I want to create a child theme because updates of the parent one have been coming. What should I do with all those already modified files? Should I copy them in the child theme’s directory? What are folder I need to have it it? Should I create the same folders that the parent theme has got for the child theme?
Thank you,
WPBeginner Support says
You don’t need all the folders of your parent theme. You just need to recreate the files where you have made changes. We have a tutorial on how update themes without losing changes. It has a section where you can find out which files you have modified in your theme and what changes you have made to them.
Download a fresh copy of your parent theme on your computer. Download the old theme to your computer and then upload the fresh copy. After that create a new child theme. Copy the files where you have made changes from the fresh theme to your child theme. Copy the changes you have made in the old theme files into the files of your new child theme.
It would take some troubleshooting before you get it right. So we strongly recommend you to backup your site first. If possible test your changes on a local WordPress install first.
Admin
Xander says
Thank you. Could you please give me a link on the tutorial mentioned?
There is another obstacle – I have changed functions.php file, how can I reconcile both of them in the parent and child themes?
Chris says
Can I load and install my new child theme on another site? If so how?
Thanks!
WPBeginner Support says
Download your child theme to your computer. Create a zip file containing the theme folder. Go to the admin area of another site and then visit Appearance » Themes. Click on the add new theme button and then click on the upload button. Upload the zip file you created earlier. WordPress will extract and install your child theme.
You will also need to install the parent theme as well.
Admin
Daniel Garneau says
Hello,
I find this tutorial very useful to learn how to create a child theme. But in the process I made the following ajustments. There needs to be two files in the child-theme directory. They have to be named style.css and functions.php.
style.css must contain at least (supposing one is using the TwentyTen theme):
@import url(“../twentyten/style.css”);
Template: twentyten
When I consulted the turorial on 2015-05-12, the “template: twentyten” line was in the comment block. It must be a command that can be read by WordPress.
Also, there must be a functions.php file, and it has to have minimally the following line of command :
<?php
Your tutorial along with the wp codex, helped me creating my first child theme. Thank you.
Maria says
Is it safe to say that the changes I made in the custom css field can be placed into my child’s theme style.css?
WPBeginner Support says
Yes.
Admin
Louise Mason says
I am falling at the first fence – how do i find /wp-content/themes/? Actually where is the WordPress installation folder? In the video i can’t see what you click on or how you open it, the file manager just appears by magic!
WPBeginner Support says
You can access File Manager by visiting your web hosting dashboard. Login to your web hosting account and locate File Manager.
Admin
Sonam says
when I select the file manager of my web hosting account , I get four options :
1)home directory
2)web root
3)public ftp root
4)Document root
which one should I select to work on.
Kylee says
Hi – I go with Home Directory. That takes me to all the files. I click on Public HTML on the left to access my various sites. You probably figured it out at some stage but just in case you didn’t…
Viju says
Hi,
I’m using a child theme for my website. What I’m struggling is to give a version to my style.css of the child theme. WordPress seems to append default wordpress version at the end of the file like /style.css?ver=4.1.1
I’m incrementing the value of ‘version’ in my child’s style.css , but wordpress is not picking it.
Because of this my changes to the child theme are not getting reflected to users who has the cached version of the css.
can you advise how to handle this ?
Stephen James says
At the very start I am lost. Where did you get the style css code at the start???? You only tell us to past it in but not where it came from. Surely if I am using a different theme it will be a different code.
Vatsal Savani says
Hey Stephen,
The code at the start is like general info for the theme, it is nearly the same for every theme, you just have to change the content after the colon, i.e. If your theme name was stephenstheme, you may have the code at the start be like:
Theme Name: stephenstheme
Theme URI: http://www.yourwebsite.com
Description: A Twenty Thirteen child theme made by stephen
Author: Stephen James
Author URI: http://www.yourwebsite.com
Template: twentythirteen
Version: x.x.x
Hope you get what I mean, good luck!