• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • About
  • Work With Me
  • Portfolio
  • Blog
  • Contact
  • Free Checklist

Kara Rajchel

How to Make a WordPress Child Theme (From ANY Theme)

Leave a Comment

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Child themes aren’t just for Genesis! You can make a child theme for any WordPress theme, and it’s easier than you think! Before you learn how to make a WordPress child theme, why would you want to make a WordPress child theme anyway? Well, the answer is this: It’s the safest way to modify your theme. Have you ever been in a situation like this? You have a theme you love, but you just want to make one small change. So you go into the theme files and make a couple small edits. Perfect! Then your theme posts an update, and being the responsible WordPress webmaster you are you install it. Boom! All your changes are gone! By making a child theme from your theme you can avoid losing your work when you update your theme.

How to make a WordPress child theme (From any Theme)

Now let’s get started!

Step 1: Pick a Theme

To begin pick a theme you are going to work with. It can be any WordPress theme, but there is one small restriction. It cannot be a child theme. That is to say, you can’t make a child theme of a child theme. So you can’t make a child theme from one of Genesis’s child themes (for example Parallax Pro), but you can make a child theme of the main Genesis theme (this is exactly what all Genesis Child Themes are!).

Step 2: Start the Child Theme

First, create a directory or folder. Name it whatever you want, the name of the child theme is good. Or if you want to be more clear try THEMENAME-ChildTheme, just so you know what you are doing. Within your directory create a CSS file named style.css. Open up your style.css file in any text editor you want (I like to use Brackets or Atom, but notepad works just as well) and add the following to it:

/*
 Theme Name:   My Child Theme
 Theme URI:    http://example.com/my-child-theme/
 Description:  A Child Theme for THEME NAME.
 Author:       Me
 Author URI:   http://example.com
 Template:     originalthemename (this needs to be your original theme's name you can copy this name from the original theme's style file)
 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 (This is optional)
 Text Domain:  my-child-theme (You can change this to yourthemename just make sure there are no spaces either make it all one word or use hyphens to connect words.)
*/

From here you can go ahead and add your own CSS to make whatever changes you need to make to the theme. If you want to change fonts or colors this is where you would put that CSS code!

Step 3: Create a Functions File

Within your child theme directory create a PHP file called functions (functions.php). Open up your new functions file in your text editor and add the following code:

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; // Change this to your parent or original theme for example the Twenty Fifteen theme is 'twentyfifteen-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' ); ?>

This code is telling WordPress to load your new child theme’s stylesheet. It’s also telling WordPress to do this before loading the parent theme or the original theme you worked with. This helps to ensure your styles will not get overruled by the parent theme’s styles. The code also ensures that the child them style is only loaded once, which will help your theme load faster.

After this, you can also make a screenshot of your site to include in the theme’s directory. This screenshot will show up when you view themes in your Dashboard. To do so save your screenshot to the correct size (currently recommended size is 880 x 660 pixels), and in .jpg format, and same it screenshot.jpg.

Step 4: Upload & Activate

Would you believe me if I told you this is the last step? IT IS! How easy is that? Now all you have to do is save your work and upload it to your WordPress site! To upload it you will need to compress your files into one zip file. On PC right click on your child theme directory (folder) and go to “Send To” and then select “Compressed File”. Rename your new compressed file if needed, then upload it like you would any other WordPress theme.

After your theme has been uploaded you can go to your WordPress dashboard > Appearance > Themes and activate your new child theme. The changes you made to the child theme will now show up on your site. Now you will be able to update your parent theme without fear of overwriting your changes and make changes to your child theme without fear of breaking the parent theme!

Learning how to make a WordPress child theme isn’t hard and is the best way to ensure your theme’s changes are done in a safe manner. You can make a WordPress child theme from any WordPress theme! Child themes can be much more complex than this, but they all start like this.

Learning how to make a WordPress child theme, not for you? Get in touch, I’d love to help you spend more time designing by helping taking over coding tasks for you! I have packages for every need. Learn more here!

Now you know how to make a WordPress child theme! What questions do you have about the process?

Related

How to Make a WordPress Child Theme (From ANY Theme)

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: WordPress Tagged With: child themes, WordPress

Everything You Need To Learn How To Work WIth a Web Developer

Hey web designers & branding pros, spend less time coding and more time doing what you love. Learn about the development process and use handy checklists to ensure your project goes smoothly.

Plus get useful tips to help you grow your web design business and get a developer's point of view (no tech speak, I promise!)

Thank you!

You have successfully joined the list. Check your inbox your checklist is on the way!

Previous Post: « 6 Resources to Help You Fix Your WordPress Website
Next Post: 4 Essential Tools for Balancing Your Web Design Business & The Holidays »

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

// Hi

Kara Rajchel: Web Developer

Hi, I’m Kara. I’m a web developer for web designers & brand strategists who want to spend less time coding and more time doing what they love! I’m here to help you give your clients your best.

// Join the Circle:

  • Behance
  • Email
  • Facebook
  • Instagram
  • Pinterest
  • RSS
  • Twitter

// The Best WP Cache Plugin

SWTE Plugins

// Favorite Host & Domain Registrar

Namecheap.com

  • Balance
  • Create
  • Code
  • Inspire
  • Lifestyle

// Save Time. Grow Your Biz.

Visual Marketing from Tailwind

// Pinning:

// Empower Your WordPress Site

Footer

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie Policy
  • Home
  • Disclosure Policy
  • Privacy Policy
  • Terms of Service
  • Partner with Me
  • Contact

© 2021 Kara Rajchel Web Development // All Rights Reserved.