BBB Question: How to Make a WordPress Child Theme (and why you should)

Posted by on in Bitchin' Book Blog, Coding Tutorials & Plugins / 9 comments


BBB Question: How to Make a WordPress Child Theme (and why you should)

Bitchin’ Book Blog consists of tips to help you become a better blogger and have a sleek, professional, and user-friendly website. It is also a collection of WordPress tutorials and code snippets to help enhance your blog. If you have a question about blogging/web design, or want to request a tutorial, you can do so here (it’s completely anonymous)!

We have a great question this week for all you who are using pre-made WordPress themes!

What are the benefits of using WordPress child themes? I’m afraid to try to tweak my “functions” or “themes” files. Is there an easy way to make a child theme? Molli

What is a child theme and why should you use one?

If you have bought a pre-made theme, you’ve probably heard people saying, “Don’t edit the theme files.” Because if you edit the theme files, then when the theme gets updated, any changes you’ve made will be overwritten! But luckily, child themes give us a way around this.

Honestly, I can’t really explain child themes better than WordPress.org does:

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme. WordPress.org

So basically, you create a child theme, and then that child theme uses everything in the parent theme, but you can add new CSS or functions to your child theme which act independently of the parent. So if the parent gets updated, your child theme still remains completely the same. Let’s get started!

How to create a child theme

This is actually super easy! For now we’re going to start working on your desktop, and then when we’re done, we’ll upload it to WordPress.

Create a new folder that will be the name of your child theme. Do not use any spaces! A good naming convention is something like: parenttheme-child. So if you’re creating a child theme of “Twenty Twelve”, you would do twentytwelve-child. But ultimately, this can be called anything (as long as there are no spaces or odd symbols—but dashes and underscores are fine).

The Stylesheet

Now, using a text editor like Notepad++ (Windows) or Textwrangler (Mac), create a new CSS file named style.css and save it inside that folder. At the very top of that file, paste this:

/*
Theme Name:     Twenty Twelve Child
Theme URI:      http://example.com/
Description:    Child theme for the Twenty Twelve theme 
Author:         Your name here
Author URI:     http://example.com/about/
Template:       twentytwelve
Version:        0.1.0
*/

@import url("../twentyeleven/style.css");

This is the example for creating a child theme of Twenty Twelve. You need to make a few edits accordingly:

  • Theme Name (required): This can be anything. I suggest you use “Parent Theme Name” followed by “Child”, but ultimately it’s up to you.
  • Theme URI (optional): This can just be the URL of your blog.
  • Description (optional): Just put a description—it can be anything!
  • Author (optional): Your name here.
  • Author URI (optional): This can just be the URL of your blog.
  • Template (required): ***IMPORTANT*** This must be the directory name of your parent theme. You can find this out by logging in via FTP, going to wp-content » themes and searching for your theme. You need to note down the name of the directory (with proper capitalization). Another way to find out the directory name is to find an image on your blog that is included with your theme. For example, if you view the source of my blog and find the main stylesheet, the URL is: http://www.nosegraze.com/wp-content/themes/nose-graze/stylesheets/theme.css . This URL tells us that my theme directory name is nose-graze.
  • @import (required): This is to import the stylesheet from your parent theme. Make sure you replace “twentyeleven” with the directory of the parent theme (same as above).

Now, below this, you can start putting in all of your CSS to overwrite the parent theme! So you can change the body background colour and body font colour like this:

body {
	background:black;
	color:white;
}

Tip: if you find that things aren’t overriding correctly, try adding !important at the end. Like this:

body {
	background:black !important;
	color:white !important;
}

The Functions File

If you want to be able to make additions to your theme functions.php file, you can create a brand new file in your child theme! This child theme’s functions.php file will be loaded in addition to the parent theme’s functions.php file.

Using a text editor, create a file called functions.php and save it in the same folder as the style.css file. Then copy this into the file:

<?php

//Your code here

?>

All of your new PHP code can be put inside those PHP tags.

How to upload and activate your child theme

By FTP

Connect to your site through FTP and navigate to wp-content » themes. Then simply upload your child theme folder into that directory.

Now when you log in to WordPress, you can go to Appearance » Themes and you should see your child theme listed there. Activate it and you now have a brand new child theme!

Through WordPress

If you’re not familiar with FTP, you can also upload your child theme through WordPress. First, you have to zip up your child theme folder. Once you have it converted into a .zip file, log in to your WordPress admin panel.

Go to Appearance » Themes, then click “Install Themes”, then “Upload”. Now you can upload your .zip file. Once it gets uploaded successfully, it should be listed on your main Themes page. Activate it and you now have a brand new child theme!

Note:

Keep in mind that you cannot have a child theme of a child theme. So if you use the Genesis framework with a child theme, you cannot make a child theme of that child theme.

Submit a Question/Request

Do you have a question about blogging or WordPress? Or a request for a tutorial? Click the button below, fill out the form, and I'll respond in a future Bitchin' Book Blog post!

9 Responses to “BBB Question: How to Make a WordPress Child Theme (and why you should)”

  1. Kelley (Another Novel Read)

    LOVE this pot, Ashley! Thank you so much! One of these days I’ll get time to tweak my blog theme, and this is just the reminder I needed. I used to be a web design geek back in the day, but I’ve lost so much of it. Your BBB posts always make me happy. :) I am definitely bookmarking this for later!
    Kelley (Another Novel Read) recently posted..Setbacks and CutbacksMy Profile

    Kelley (Another Novel Read) rated it: Excellent - 5 starsExcellent - 5 starsExcellent - 5 starsExcellent - 5 starsExcellent - 5 stars
    • Ashley

      Awesome, Kelley! I hope this is helpful to you when you start the tweaks. :)

Leave a Reply

CommentLuv badge