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.
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.
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.
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.
3. In style.css file, add this line of code:
Complete code, (replace some texts with your info accordingly)
/* 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;
<?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' ); } ?>
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.
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;
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.
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.
So helpful , but is possible to update child theme when main theme update is available ? ,
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.
I am creating a new site which I eventually want to have replace the old site, should I use a child theme
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.