How to Create a WordPress Child Theme

How to Create a WordPress Child Theme


Hello and thanks for watching WPBeginner. Today
you’ll learn how to create a WordPress child theme for your site. Learning how to create a child theme puts you more in control of your WordPress website. So when would you need to create a child theme? If you want to make changes to your site,
the best way to do that is to make a child theme that inherits all the code from the
original or theme. But it also keeps all your changes in a safe place
that won’t get overwritten when you update that theme. So for requirements,
you want to have some understanding of HTML/CSS. You also want to know how to copy and paste some code for php. You also want to practice on a test site before
doing this on your live site. You’ll need to be able to access files on
your site by using an FTP client like Filezilla to connect and upload files to your site. So getting started,
I’m on a test site here and I am working with the 2013 theme that comes with WordPress. First, I’ll go to the wp-content/themes folder
on my wordpress installation and create a new folder for the child theme. I’m going name
it wpbdemo. Next, I’ll open notepad and paste this code
inside. I’m going to save it as style.css in the wpbdemo folder. And basically, this file tells WordPress that
I’m using the 2013 theme as a template and that this is a child theme here. Remember that parent folder name is case sensitive
so we want to get that right. twentythirteen is the name of the parent theme, it’s also
the name of the folder that this file is looking for. This last line and it shows how we import the parent’s
stylesheet into the child theme. Now that’s all we need to do to officially
create a child theme. I can save this file, go to my site appearance–>theme in the back end and I see my child theme here. I can activate it and start using it immediately. Even though I created child theme here, I
haven’t added any custom code so my site is pulling in all the parent theme’s code right now. Let’s
look at how we can change that. Say I want to change some items on the
nav bar here. I want to change the color of it. How do I find out what i’m using so I
can change that? Chrome and Firefox have an inspect element
built in to show you the code behind a site. Right now I’m using chrome so I’ll right click on the
nav bar on my site and click inspect. Now I have a split screen with code at the
bottom and my site at the top. As I hover over different lines of code, the
site area is highlighted to tell me where I’m at. I also have these triangles that are showing
how the site is nested. If I click on one, it can expands to show more code inside that code. With the navbar I see this is highlighted and I can look over here to see the background color and what it is this is what I want to change. With this inspect area, I can click on the
color here, test out the different colors for my site. When I type something in, I see it
change over here immediately, which is cool, but it’s not changing the live site, it’s just showing
me a preview of what it will look like. Its a pretty nice feature for testing things out. What I want to do to make it permanent is,
I want to go in, copy this code right here and paste it in my styles.css file to make it
live on my site. I can click and highlight the code and either
click ctrl+c or command+c to copy and go over here and put it and paste it. I need to save my file and go to my site, once I click refresh to see it live. You can do the same thing for all the other
areas you want to change on your site. This can be used to change things like font sizes, fonts, background color, link color and so much more. Next, we’re going to look at how a page is setup. You
see this as one page but the back end, there are several different template files
that are being used and that make up this whole page. We have a header template, content, widget
area, footer area and more. If I want to change the footer area and remove
the powered by WordPress, then I’ll need to deal with the footer template. Go to the
parent folder for 2013, find the footer.php file, I want to copy it and go back to my child theme
folder and paste it in there. Now I can open up this file and edit it. I want
to replace the powered by WordPress area with a copyright notice. I’ll find the code I’m
working with and replace it like this. Once I click save I can go to my site to
refresh and see that I removed that part in the footer. In this next section, we’ll go over how to
add some new functionality to your site. When making changes to your site, you often
see tutorials telling you to add php code to your functions.php page. This is where
a lot of your site’s functionality is kept. To make changes, we want to create a new file
called functions.php in our child theme. I’m going to add some code that will change
the default header image for my site. I’ll add this code to my functions.php file and
it tells my site that this will be the new default header and where to look for the images. I’ve already created the new header image
along with a header thumbnail and I’ve uploaded them to my child theme area here. This mimics the 2013 parent theme folder structure. And now I can go to my appearance–>header and
see my new function in action. There are a ton of function snippets that you can
add to your site to change it up how you want. Over here’s a list of over 25 of the most useful
functions you can add to your site to play with them and customize your site even further. Now let’s look at our site and see some of the
changes we’ve made overall. You see we’ve changed the header image here, the nav
color and down here we updated the footer to show copyright information. On the back end, we’ve copied all the files
and folder structure over to create a working child theme that if there is an update to
the parent, I can update the parrent and I won’t lose all the work I just did. I hope you liked this video and found it helpful. If you did, click on the like button below and leave us a comment. And if you want to receive more helpful videos don’t forget to subscribe to our channel and check out WPBeginner for more useful information on WordPress

51 thoughts on “How to Create a WordPress Child Theme

  1. I found the video very helpful… just wish it went a little slower. Seemed to be rushing me through before I could absorb the information. (Of course, that's what the pause button is for.)

  2. unfortunately, I created a child theme after I've done some modifications to the original style sheet and now that I've activated the newly created theme, it looks so different from the parent theme and kinda distorted. Any one's got an idea how can I transfer my customization to the new child theme? I don't wanna start over, I'm not a css pro and it would take a lot of time really 🙁

  3. Nice video! One question pls. How to set up a child theme for multisite wordpress network? I use three domains with same theme, but want to do specific variations for each of these. Tnx n keep up with the good work!

  4. There a lot of wordpress tutorials on YouTube. I think this series is the best for web designers! I really appreciate these videos.

  5. Can you help me with my site? I added affiliate products but it's in two column rows, very narrow. can I use inspect element to say make it three rows for viewing.
    www.latesttrends.ca

  6. I've been watching all the tutorials from this youtube page. However, I don't understand how they manage to removed the "Proudly powered by WordPress" and change it to copyright thingy.

    Also, I would like to remove this "You may use these HTML tags and attributes: <a href="" title=""> "

    This is my website rmlogy.com and seriously, I haven't accomplished anything yet.

  7. I think there's something missing that maybe wpbeginners may not intuit, 

    step 1: go to wp-content themes folder on your wp installation
    step 2: create new folder with the name of your child theme under themes
    step 3: next open note pad and paste "this code" inside
    step 4: save as style.css in your child theme folder
    this is supposed to tell wp which theme you are using as a template?
    step 5: select child theme in wordpress because it should just show up

    Where's the part where wp knows that you've changed some code in a new folder to create child theme? i'm assuming that's what the ftp is for: so do you upload the entire wordpress folder with the new style.css file or do you only upload the new style,css file?

    is it possible you guys know this stuff so well that you've taken important steps for granted?

  8. Hi, Good tutorial!

    However, I ran into a problem… I got a template that for some reason got the style.css in the actually CSS folder… There is also another style.css in the root but thats blank… Meaning, my child theme overrides nothing as the actually active css is within the CSS folder… How do I get my child theme to actually override a file thats in a folder?

    Cheers

  9. A little slower by the presenter would have been nice.  LOTS of good information that is difficult to follow when the presenter is going that fast (yes, I know the audio was spliced).

  10. Hello, How may I have you overlook the website I have built? to make sure all is well. My biggest fear is to update and all my changes to be lost

  11. for all those Who are complaining about the speed of the video, you can change the speed on youtube and choose 0.5 and voila, never mind that she Will sound drunk lol

  12. PLEASE HELP!!! i learned the hard way what a child theme was…i bought a premium theme and altered the living hell out of it. it looked great on every device…for a while. then i noticed that the update to the theme screwed the entire site up. i contacted the developer and he said just not to update the theme…so i didn't and it has been good. but now i notice that it is no longer responsive, which leads me to this question: if i have a site that i love how it looks and functions on the computer, but it isn't responsive, how do i create a child theme and still keep all of my content? is there a way? or do i have to basically empty wordpress and build my entire site again with another theme and then make a child theme from that? i am very confused with this and frustrated! nobody ever told me not to mess with the actual theme! another question: once you make the child theme based on the parent theme, you could add all sorts of plugins to the child theme correct? and it won't alter the main one? PLEASE HELP!!!

  13. This is suppose to be for beginners, but you go way too fast for beginners. Also in the beginning of the video at 1:10 you say to paste the code in notepad, but you don't say where that code comes from. Beginners are going to know where that code comes from. Now I need to find another video to figure that out. Need to think like a beginner.

  14. I saw this video and thought – ok I am hopeless. Because now my home page has HOME in navigation, HOME on the friggin' banner and HOME on right side of the banner. WP is incredibly complicated.

  15. Do you not remember what a beginner is? Where did you get the code from. What program do we use to open and edit a .css file? What about the "functions.php" file that WordPress says needs to be changed to create a child theme?

  16. Yeah, maybe not so great for beginners, but for me, exactly the content and speed required. Fantastic video. Good job.

  17. Although this method probably still works, accepted best practice nowadays is to include (enqueue) your scripts and styles in your child theme's functions.php file, instead of using @import in your stylesheet.
    https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/

  18. Hi!
    A question just for interest.
    When go to Appearance > themes, all of themes have featured image
    How to create this image for child theme?

  19. @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. ref: https://codex.wordpress.org/Child_Themes

  20. This was a terrible tutorial. The speaker goes WAY TOO FAST to understand and the examples that she used were very confusing. This needs a massive do-over.

  21. This is bas practice. You shouldn't import child theme CSS into another stylesheet. Any time you import in CSS, it's can't be done asynchronously. As a result, you are increasing page load time. You should enqueue the child theme CSS in functions.php.

  22. I decided to go the child theme route since I was going to be making some changes to the main theme I was using.

    When I created the child theme and activated it, the widgets and menus all reset on the site. The data was still saved, but the site just decided to display the default. I had to go back in to the menu to readjust it, however, I couldn't get the widgets to resort back to the changes I had made while still using the parent theme.

    Any idea how to get this to adjust?

    Thanks

  23. my child theme seems to be corrupted. It was working fine yesterday. Now i only see my navigation menu while all of my pages have disappeared. I can see my main navigation menu, but no pages under each tab. My parent theme still works, yet it doesn't have the customization that i set with my now broken child theme. Also, when i activate other themes, my pages reappear just as it does when i use my parent theme. It still doesn't have all of my customizations that i set when i had my child theme.
    I copied all of my custom css that i made with my child theme. Could i make another child theme and copy the css to the new child theme in hopes that my child theme would work properly again? Is there a way to fix my child theme by moving folders in the cpanel? Any help would be greatly appreciated. I am using the latest version of wordpress with the responsive theme. My website is https://www.honestarttsentertainment.com

  24. OMG Thank you so much!
    I needed this. Working on it right now.

    You are literally saving money for non-developers like me 🙂

  25. do you have any tutorial for theme editor ? I have purchased theme but i dont know how to edit this theme according to my wish.

Leave a Reply

Your email address will not be published. Required fields are marked *