webpopular.net dark logo webpopular.net light logo webpopular.net mobile dark logo webpopular.net mobile light logo
  • Home
  • Services
    • App Development
    • Website Consulting
    • Website Design
    • WordPress Development
    • Search Engine Optimization
      • Search Engine Optimization
      • SEO Company Audit
      • Free SEO audit
      • Enterprise SEO audit
      • SEO technical audit service
      • WordPress SEO consultant
    • Social Media Marketing
    • ADA Web Development Compliance
    • Enterprise ADA Web Development Compliance
    • WordPress Maintenance & Support
    • WordPress Security
    • Web Hosting
  • Portfolio
  • Blog
  • Contact Us
  • (214) 282-3530
  • search
NextPrevious

How to create a child theme in WordPress

A webpopular.net

article by: natalie| WordPress| 0 comments| 7 August, 2019| 0
  1. Create a new directory in your existing wp-content–>themes folder and name it <parent-theme>-child
  2. Access newly created folder and create a new file called style.css
  3. Populate that file with the following code:
    /*Theme Name: Twenty Seventeen Child 
        Theme URL: webpopular.net
        Description: Twenty Seventeen Child Theme
        Author: John Doe
        Author URL: webpopular.net
        Template: twentyseventeen
        Version: 1.0.0 Text
        Text Domain: twentyseventeen-child   
    */ 
    /*Custom CSS goes after this line
    */
        

    WordPress Child Theme CSS Information

  4. Give this new theme a name and change all other values to match your theme and domain name. The most important field is Template field because it tells WordPress which parent theme your child theme is based on.  Once you are done, click Save.
  5. Add a new functions.php file in the same folder. Don’t copy/paste the code from the parent theme’s file, because it needs to remain separate from any changes you make to the child theme. Instead, create a blank file or add any new .php functions required for your child theme.
  6. Enqueue the 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 then you will have to make sure to maintain all of the Parent Theme dependencies.
    <?php
      function my_theme_enqueue_styles() { 
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css'); 
      }
      add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
    ?>
      
  7. If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting ‘parent-style’ as a dependency ensures that the child theme stylesheet loads after it. The complete (recommended) example becomes:
    <?php
      function my_theme_enqueue_styles() {
        $parent_style= 'parent-style';
        wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css');
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style, wp_get_theme(), get('Version'));
      }
      add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
    ?>
  8. From the WordPress Admin area, go to Appearance -> Themes to activate your newly added child theme.

WordPress Child Theme CSS Information

  • Theme Name: The name of the Child theme, and should be the primary theme’s name with Child at the end.
  • Theme URL: The URL to the home page of your theme.
  • Description: Property that describes your theme.
  • Author: The name of the person/organization that developed the child theme.
  • Author URL: The web address to uniquely identify the author of a theme.
  • Template: The name of your parent theme.
  • Version: The version number for your template. This should increment utilizing WordPress Version Numbering
  • Text Domain: A unique identifier that allows translations to work properly in wordpress. This must match the slug of the theme url.
How-to

Leave a Comment

Cancel reply

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

NextPrevious

We are webpopular.net

Our team is ready to help you get started improving your business. We are here to help, whether you need a website created to reach a bigger audience, increase SEO for your site, or you simply want to improve your web design. We have a wide variety of services to cater to your needs!

Recent Posts

10 proven ways to grow your site traffic 2021

How to increase website traffic: a case study

Tips on getting more organic traffic to your site

Best free stock music sites for commercial use 2021

Services

Website Consulting

Website Design

WordPress Development

Search Engine Optimization

SEO Company Audit

Social Media Marketing

ADA Web Development Compliance

Enterprise ADA Web Development Compliance

WordPress Maintenance & Support

WordPress Security

Web Hosting

Contact Us

Facebook Twitter LinkedIn Instagram

Feel free to email us, call us, or fill out the form on our Contact page for more information.

Phone: 214-282-3530
Email: bbass@webpopular.net

Copyright © 2023 | All Rights Reserved

webpopular.net logo
  • Home
  • Services
    • App Development
    • Website Consulting
    • Website Design
    • WordPress Development
    • Search Engine Optimization
      • Search Engine Optimization
      • SEO Company Audit
      • Free SEO audit
      • Enterprise SEO audit
      • SEO technical audit service
      • WordPress SEO consultant
    • Social Media Marketing
    • ADA Web Development Compliance
    • Enterprise ADA Web Development Compliance
    • WordPress Maintenance & Support
    • WordPress Security
    • Web Hosting
  • Portfolio
  • Blog
  • Contact Us
  • (214) 282-3530
  • search
webpopular.net mobile logo