{"id":4449,"date":"2018-10-09T18:50:59","date_gmt":"2018-10-09T13:50:59","guid":{"rendered":"https:\/\/stylemixthemes.com\/wp\/?p=4449"},"modified":"2022-06-20T16:12:09","modified_gmt":"2022-06-20T11:12:09","slug":"quick-guide-to-creating-and-customizing-a-wordpress-child-theme","status":"publish","type":"post","link":"https:\/\/stylemixthemes.com\/wp\/quick-guide-to-creating-and-customizing-a-wordpress-child-theme\/","title":{"rendered":"Quick Guide to Creating and Customizing a WordPress Child Theme"},"content":{"rendered":"

While theme development can seem overwhelming, child themes are straightforward to set up and it\u2019s a much quicker alternative to developing a theme from scratch.<\/p>\n

In this post, I\u2019ll share more details on WordPress child themes as well as how to efficiently create and customize one.<\/p>\n

What\u2019s a WordPress Child Theme?<\/h2>\n

Before defining what a WordPress child theme is, it\u2019s important to first understand what\u2019s a WordPress theme<\/a> and where WordPress is drawing information from to display a website\u2019s design.<\/p>\n

According to the WordPress Codex<\/a>, \u201cA theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. A theme modifies the way the data is displayed without altering the underlying software.\u201d<\/p>\n

If your WordPress site has a single active theme with all the required templates and assets, there\u2019s no distinction between the parent or child theme.<\/p>\n

\"WordPress
You can find themes in the WordPress Theme Directory or a third party theme vendor.<\/figcaption><\/figure>\n

However, if you decide you really like a theme you found, but you want to make a few changes to it without creating a theme from scratch, you can create a WordPress child theme to serve this purpose.<\/p>\n

A child theme inherits the original theme\u2019s structure and only includes the customizations you make to it. Instead of replacing a theme entirely, the child theme modifies or adds to the files of the existing theme.<\/p>\n

That way, when your site and is loaded for a visitor, the original theme design loads, but with the  changes you made to it.<\/p>\n

Children in real life \u2013 and not the online world \u2013 are reliant on at least one parental figure to live. Similarly, a child theme is reliant on the original theme to function.<\/p>\n

That\u2019s why when you use a child theme, the original theme is called the parent theme.<\/p>\n

Unlike a human infant, a child theme isn\u2019t a complete theme in and of itself. That means the parent theme needs to be installed before you\u2019re able to activate its corresponding child theme.<\/p>\n

The Perfect Child Theme and When to Use It<\/h2>\n

Any theme can be a parent theme, though, some are better suited for it.<\/p>\n

Choose a theme you like that could use a few small structural customizations to fit your needs, but that doesn\u2019t come with the options to make the customizations you want straight out of the box.<\/p>\n

For example, the Perfect Magazine theme<\/a> was used as a parent theme to create the Newsliner child theme<\/a> to not only change some colors in the design, but to also remove an advertising banner while adding a blog post carousel at the top of the page.<\/p>\n

These kinds of customizations aren\u2019t possible in Perfect Magazine\u2019s options, but they\u2019re not large enough in scale to warrant creating a brand new theme from scratch.<\/p>\n

\"An
Perfect Magazine (pictured left) is a parent theme of Newsliner (right).<\/figcaption><\/figure>\n

Why Create a Child Theme?<\/h2>\n

WordPress Child themes are important for saving and preserving all the work you have put into a site. If you modify a theme directly, then update it with a new software release, all your modifications and customizations will be lost.<\/p>\n

That\u2019s why many website owners opt to not update their parent theme at all. But, it\u2019s a severe security concern since 54% of hacked WordPress sites had out-of-date software<\/a>, which hackers and malware often run scans to find.<\/p>\n

Also, updates often contain vulnerability fixes so ignoring an update means leaving your site wide-open to attack.<\/p>\n

Alternatively, you can create a child theme to avoid these pitfalls.<\/p>\n

As previously mentioned, using a WordPress child theme can also speed up development.<\/p>\n

With the file systems and essential elements of a site already set up, you don\u2019t have to begin from scratch. You\u2019re able to build on a pre-existing theme and take advantage of the functionality while customizing its design.<\/p>\n

Getting Started with a WordPress Child Theme<\/h2>\n

There are a few key elements you need to create a child theme:<\/p>\n

    \n
  1. A theme directory folder<\/li>\n
  2. A style.css<\/em> file<\/li>\n
  3. A functions.php<\/em> file<\/li>\n<\/ol>\n

    While the only required file in a child theme is style.css<\/em>, the functions.php<\/em> file is needed to enqueue the parent theme stylesheet correctly.<\/p>\n

    So, it\u2019s highly<\/em> recommended you create a functions.php<\/em> file in your child theme to avoid errors.<\/p>\n

    Creating a WordPress Child Theme<\/h2>\n

    When creating your WordPress child theme, there are four steps, which are outlined in detail below: creating a directory folder, making a stylesheet, enqueueing the new and parent stylesheets, and activating the theme.<\/p>\n

    Creating a Directory Folder<\/h3>\n

    All themes are located in the \/wp-content\/themes\/<\/strong> folder of your WordPress installation.<\/p>\n

    Navigate to that directory and create a new folder that will serve as the child theme folder.<\/p>\n

    Typically, the theme is retitled using the parent theme\u2019s name, but adding -child<\/strong> at the end.<\/p>\n

    For example, the two file paths will be \/wp-content\/themes\/yourtheme\/ and  \/wp-content\/themes\/yourtheme-child\/<\/em>.<\/p>\n

    There also shouldn\u2019t be spaces in the child theme\u2019s name.<\/p>\n

    While these aren\u2019t hard and fast rules for naming your folder, especially if you\u2019re not distributing the theme for public use, it\u2019s a common WordPress development practise as it helps with organization.<\/p>\n

    Creating a Stylesheet<\/h3>\n

    WordPress child themes are often used for fairly extensive design edits so a separate style.css<\/em> is necessary.<\/p>\n

    The file will contain all the CSS rules and declarations that affect the look of your theme.<\/p>\n

    Create a style.css<\/em> file in the root of your new child theme folder. Then, input this header at the top of the page:<\/p>\n

    \/*\n Theme Name:   Twenty Seventeen Child\n Theme URI:    http:\/\/example.com\/twenty-seventeen-child\/\n Description:  Twenty Seventeen Child Theme\n Author:       Jane Doe\n Author URI:   http:\/\/example.com\n Template:     twentyseventeen\n Version:      1.0.0\n License:      GNU General Public License v2 or later\n License URI:  http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\n Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\n Text Domain:  twenty-seventeen-child\n*\/\n\n<\/pre>\n
    The header is a vital part of the file, as it tells WordPress basic details about the theme. It also signals that it\u2019s a child theme with a particular parent as indicated by the Template<\/strong> portion.<\/p>\n
    The only requirements for the header are the Theme Name<\/strong> and the Template<\/strong>. But, it\u2019s best practise to fill out the rest.<\/p>\n
    Be sure to also change all the required details so they\u2019re accurate. For example, the Author<\/strong> and Author URI<\/strong> as well as references to Twenty Seventeen if the parent theme you\u2019re using is a different one.<\/p>\n
    The Tags<\/strong> section relates to the WordPress Theme Directory. If you want to upload your theme there, make sure to choose tags that pertain to your theme.<\/p>\n
    Enqueueing the Parent and Child Theme Stylesheets<\/h3>\n
    Next, it\u2019s important to make sure each theme\u2019s stylesheet loads correctly in a process called enqueuing.<\/p>\n
    To enqueue means adding an item or a list of items to a queue for data processing. In this case, the queue is the files that your website needs to load when a browser requests them.<\/p>\n
    If you were to skip enqueuing, your site would only pull from your child theme stylesheet and wouldn\u2019t use any of the styles the parent theme provides.<\/p>\n
    It may also be important to note that it\u2019s possible to enqueue the parent style.css<\/em> using the @import<\/em> method. But, this is no longer recommended due to performance issues.<\/p>\n
    To enqueue the stylesheets, you need to create a functions.php<\/em> file if you haven\u2019t already.<\/p>\n
    This can be done by creating a new file and naming it functions.php<\/em>. Then. place this code at the very top:<\/p>\n
    &lt;?php\n\n<\/pre>\n
    Be sure not to include any spaces before the line above or it will result in an error.<\/p>\n
    In the functions.php<\/em> file, add the code below to make sure your site is properly loading both the parent style.css<\/em> as well as the child theme\u2019s style.css<\/em> in the correct order:<\/p>\n
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\n\nfunction my_theme_enqueue_styles() {\n\n    $parent_style = 'parent-style'; \/\/ This is 'twentyseventeen-style' for the Twenty Seventeen theme.\n\n    wp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\n    wp_enqueue_style( 'child-style',\n        get_stylesheet_directory_uri() . '\/style.css',\n        array( $parent_style ),\n        wp_get_theme()-&gt;get('Version')\n    );\n}\n?&gt;\n\n<\/pre>\n
    Make sure you change the parent-style<\/strong> being stored in the $parent-style<\/strong> variable to include the name of your theme.<\/p>\n
    As recommended by the WordPress Codex<\/a>, this code will make sure the parent style.css<\/em> is loaded as a dependency, meaning it\u2019s required for the child theme\u2019s style.css<\/em> to load.<\/p>\n
    Activating the Child Theme<\/h3>\n
    Once you have saved all your files, go to Appearance > Themes<\/strong> to find your child theme, then click the Activate button.<\/p>\n
    You won\u2019t need to also activate your parent theme. Although, it should still be installed and stay in the \/wp-content\/themes\/<\/em> folder.<\/p>\n
    The header text in your child theme\u2019s style.css<\/em> will connect the two together and clarify the relationship for your WordPress installation.<\/p>\n
    \"The
    When you activate your child theme, the parent theme should still remain in the themes folder.<\/figcaption><\/figure>\n
    Once you have activated your child theme, you may need to resave your menu<\/a> in Appearance > Menus<\/strong> as well as some other content in Theme Options<\/strong> of the Customizer if you experience issues with your design.<\/p>\n
    Quick Customization Tips<\/h2>\n
    Before you start tearing into the development process, below are a couple tips on customizing your WordPress child theme.<\/p>\n
    Theme Image<\/h3>\n
    On the Appearance > Themes<\/strong> page, you have to include your own image for the theme.<\/p>\n
    If you want to insert something instead to replace the checkered box, you can upload a 880 x 660 PNG image file named screenshot.png<\/em>.<\/p>\n
    Put the image in the root of your child theme folder. That way, the WordPress installation will know to use it as the image for your theme.<\/p>\n
    Overriding Parent Theme Files<\/h3>\n
    If you want to insert new files into your WordPress child theme to override old components, copy the parent file over to the child theme, which you can then customize.<\/p>\n
    When loading the site, WordPress will check to see if the child theme has any files that correspond to the parent theme. If any are found, they will override the original parent theme\u2019s file.<\/p>\n
    It Doesn\u2019t Take A Village<\/h2>\n
    WordPress child theme creation doesn\u2019t have to be as complicated as it may sound. Follow the steps above, and rest assured, your edits will stay intact. It will also help your site be a little more secure.<\/p>\n
    What kind of child theme do you want to make? Were you able to successfully create it? Did you run into troubles in the process? Feel free to share your experience in the comments below.<\/strong><\/p>\n\n\n
    FURTHER READING<\/h3>\n\n\n\n
    \n