wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes How To Create WordPress Child Theme Manually or With Plugin
Where your child theme folder should be located inside themes

WordPress themes

How To Create WordPress Child Theme Manually or With Plugin

Last updated on March 2, 2017
Posted on December 18, 2016

This post will use Twenty Seventeen theme, but will work with other theme as well. If it does not, then it is due to your theme’s coding, and you might want to contact the theme’s developer.

WordPress seems to ship new theme each time they have a major update. I don’t know if it is a good thing, but the latest theme, WordPress Twenty Seventeen theme is a very different than other previous themes. The appearance is more corporate look than a blog look.

Why You Don’t Need a Child Theme in WP 4.7 or Newer?

Before we begin, we need to know, that for WordPress 4.7 or newer, together with Twenty Seventeen theme, you do NOT need to create a child theme, if you just want to modify the styles, like colors, background colors, text font, anything that can be achieved with the “Colors” theme option, and “Additional CSS” feature on your Customizer.

Note: if you switch on a new theme, you will not see any codes on the “Additional CSS” tab, but you will see the code again if you re-activate the previous theme
Colors and Additional CSS feature to add your custom style
Colors and Additional CSS feature

If you don’t use Twenty Seventeen theme, but you have WP 4.7 or newer, you can look at your theme option first (in Customizer) if your theme has the color option. If it does not have, you can still use the “Additional CSS” feature,if your theme is supporting WP 4.7 features.

Twenty Seventeen theme has “Colors” option.
WordPress 4.7 or newer supported theme, has “Additional CSS”.

However, if you need to modify some other files that is not included in your theme’s customizer like footer, sidebar, removing or adding functions, then you will need to create a child theme.

Creating a WordPress Child Theme without Plugin

I have recorded a video about manually creating Twenty Fifteen child theme a few years ago, also when Twenty Fourteen was released, I posted the steps using @import CSS method. However this method is now no longer recommended by WordPress Child Theme Codex. Therefore we use the recommended method for today tutorial.

While I still recommend you to follow this video however if you have set up your widgets or customize your website using Customizer, you would lose those customizations after activate your manual created child theme, and re-activate those widgets again from your dashboard (Widgets – Inactive widgets). Of course, this is doable, but mostly we forget in which area the widget was located, etc.

Steps

If you like, you can also download Twenty Seventeen theme from here. After recording my video, I just zipped the file and uploaded, who knows you can use it. The file contains functions.php, a style.css and a screenshot.png. A basic child theme.

Twenty Seventeen One Page Parallax Scrolling Website Style

If you follow these steps, you must be aware that your current widgets or customizer settings will be automatically deactivated once you activate your child theme. If you don’t want this to happen, skip this manual step, and go to the method using plugin below.

1. Create a child theme directory folder on your web server. You can do this, using a FTP client like FileZilla, or login directly to your cPanel.

Where your child theme folder should be located inside themes
wp-content-themes-your child theme folder

Mine, I call it, “twentyseventeen-child”.

2. Then, inside that folder, create two files, one is called, style.css and the other one, functions.php.

Files inside your child theme folder, style.css and functions.php
style.css and functions.php

3. In style.css file, add this line of code:

Short code inside style.css file
Short code inside style.css file

Complete code, (replace some texts with your info accordingly)

Twenty Seventeen Child Theme style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
/*
Theme Name: Twenty Seventeen Child
Theme URI: http://yourwebsitehere.com/
Description: Twenty Seventeen Child Theme
Author: Your name here
Author URI: http://yourwebsitehere.com
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-seventeen-child
*/

This short code will work too;
/*
Theme Name: Twenty Seventeen Child
Description: Twenty Seventeen Child Theme
Template: twentyseventeen
*/

4. In functions.php, add these following code;

Codes inside functions.php of the child theme
functions.php code will look like this

Twenty Seventeen Child Theme functions.php
1
2
3
4
5
6
7
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}
?>

More info on codex page.

As you notice, above in the pictures, there is a file, called screenshot.png. This is a screenshot about your new child theme, optional step.

In my opinion, manual creation is still the best, both to learn, and ensure yourself that you created it and it worked.

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

Creating a Child Theme with a Plugin

The following methods will use the help of a plugin and then deleted the plugin, to reduce the plugin usage once we are done. Less plugin is still better, especially if your site is hosted on a shared hosting, which most sites are, especially newbie websites.

1. Dashboard —Plugins — Add New
Search for “Child Theme Configurator” or download directly from the repository.

If you want to use another plugin, you can do that, but avoid the one that still uses @import CSS code, as it is not recommended anymore since slowing down your website’s loading speed.

Once you have installed it, navigate to Tools — Child Themes

Plugin Configuration that we need to focus on;

Child theme plugin configuration
Child theme plugin configuration

2. Select a Parent Theme — Make sure to have “Twenty Seventeen” as the selected theme in the drop down menu. Click “Analyze” button. When it said, the theme is OK, we can continue.

If after analyzing process you found some errors or warnings, I suggest you to contact your theme developer

4. Name the new theme directory. You can change it, but I leave it as is.

7. Customize the child theme info — You can modify anything here, your name, your website, etc.

Important configuration so you will not lose the customizer setting
No 7 is very important

8. Check the checkbox to save parent theme’s customizer, widget, menu settings. This option is very important if you don’t want to lose your widgets later on.

9. Click Create New Child Theme button.

Once we are done, you can “preview your child theme” by clicking the link on the same page. Then you can activate your new child theme.

2. This step is optional. You can continue using the plugin, but in this method, I will deactivate it and deleted it, because the child theme is still there.

3. After deactivate the plugin, we will clean up the codes in the child theme’s directory. The style.css and functions.php.

For the style.css I delete most things, except the “Template: twentyseventeen” line.

For the functions.php I also deleted all codes and replaced with the one from child theme Codex web page.

4. This is also an option step, uploading the screenshot.png with our own image.

That’s it. We have now created a Twenty Seventeen Child Theme or any child theme without needing to re-activate your widgets and do the menu settings again.

child theme twenty seventeen wp 4.7

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Most Comprehensive Tut They Say
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← How to Remove Twenty Fourteen Author Name or Link
→ Twenty Seventeen Footer “Proudly Powered By WordPress” Text

Comments

  1. Devi says

    December 22, 2016 at 2:12 pm

    So helpful , but is possible to update child theme when main theme update is available ? ,

    • Kimi says

      December 22, 2016 at 11:36 pm

      Hi Devi, I don’t think it is possible. We can update the Parent Theme. But if you meant to edit and update the child theme, that we can do 🙂
      Hope this helps. Kimi.

  2. Pamela Peelen says

    January 5, 2017 at 12:49 am

    I am creating a new site which I eventually want to have replace the old site, should I use a child theme

    • Kimi says

      January 5, 2017 at 1:25 pm

      Hello Pamela,

      Replacing the old site with a new site, has nothing to do with a child theme.

      It all depends on the new site. In the new site – if you use WordPress 4.7 and there is Additional CSS, if you have these, then you don’t need a child theme, but if you want to modify the footer, and others that cannot be done with the Additional CSS or your theme options, then you need to create a child theme.

      Before replacing the old site with a new one, I would:

      Backup the old website. In case you will need it one day. I have tutorial on this: https://www.wpvidz.com/backup-wordpress-site-and-files-manually-without-ftp/

      You can also use Backup plugins for this, the reason why I recommend it manually, is to make sure you have backup. Although it can be done with plugins, I think it is best to not 100% rely on a plugin. If it works, you are lucky, but if not, we don’t have a backup.

      About the new site

      Is the new site having the same domain? If yes, then just drop the database, and use the old database to create the new blank site. No need to create a new site from the beginning (Installation process)

      If the new site has different domain, then it is a bit complicated, but I posted in this video tutorial, try this first with a plugin, just change the domain accordingly :https://youtu.be/86b7s5xtdP8
      If it does not work, use this: https://youtu.be/aowoGCspGjc

      Let me know if this helps. I will be glad to help you.

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen
  • Setting Autoplay Twenty Fourteen Slider

Backup & Restore

Backup WordPress Site and Files Manually Without FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2019 wpvidz.com | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)