Build With MD: Child Theme Basics & Principles

[toc]

Installing a Child Theme to your blog is the same process as installing the Marketers Delight theme. Once you’ve downloaded it from your Kolakube account, upload it to your site then activate it in place of Marketers Delight in your Themes panel.

A Child Theme builds off of MD, or as we’ll refer to it the Parent Theme, so your blog won’t look any different after you activate it. Now we’ll be ready to start making changes to it.

1. Why is a Child Theme so Important?

Apart from organization, a Child Theme keeps the changes you make separate from MD. Marketers Delight is always getting new updates and that means files and code are being changed within it all the time.

Each time you get new updates, any changes you made will be lost by the official update. So using a Child Theme is a smart, preventative measure that still gives you the control to change any aspect of your site.

There’s no fancy interface involved, just raw code, baby. I want to show you why this is a good thing for you.

Now, if you don’t care about staying up to date and want to take the existing version of MD and turn it into something else, that’s perfectly fine. This series is just for those who want to stay in the update cycle while still personalizing their site.

2. Getting Started Working With Your Child Theme

Once installed and activated, you’re ready to start working with your Child Theme. The first step we need to take is to connect to your website via FTP so we can edit files.

If you’re already familiar with connecting to your site via FTP, then you’re ahead of the curve! If not, I found some guides for some of the most popular web hosts that will show you how to do it.

See if your host is listed below, otherwise Google search something like how to connect to FTP (HOSTNAME)

• WPEngine instructions
• Pagely instructions
• HostGator instructions
• GoDaddy instructions
• Bluehost instructions
• Dreamhost instructions

Once connected to FTP and are in your root folder (where you see a bunch of wp-*.php files), you’ll want to navigate into your themes directory which is located inside the /wp-content/ folder.

Making Your Child Theme Your Own

Once you get to your themes directory, you should see the Marketers Delight (marketers-delight) theme and your Child theme (md-child-theme).

To personalize and take ownership over your Child Theme (after all, you’ll be the one putting code into it), take a few seconds to rename the folder from md-child-theme to something else like your site’s name (your-site-name).

Keep in mind that once you rename the folder, you’ll need to reactivate the Child Theme from your Themes dashboard.

Also go ahead and open up style.css inside your Child Theme and edit the commented text at the top of the file. Change the name of the theme, add your name, and even write a little description about your site.

Do not change the Template field as this will break your theme.

What are functions.php and style.css?

These 2 files are included in your Child Theme by default and are the files you will most likely work with the most.

Your functions file is where you can add blocks of code that will manipulate any part of your site. You’ll usually see code that goes into it that resembles something like:

function function_name() {
    // code here...
}

add_action( 'place_to_load_function', 'function_name' );

This is very powerful code and makes customizing different kinds of content on your site effortless. Hooks and functions will be closely examined in the next post in Build With MD.

Now your stylesheet (style.css) is where CSS will go. You may already be familiar with CSS, it’s the language that controls things like colors, fonts, layout spacing, and any kind of visual part of your blog.

CSS is very powerful and you’ll probably be working with this file the most out of any other files in your Child Theme. Marketers Delight has some very useful classes that you can reuse, which will save you from writing a lot of CSS! This will be covered more thoroughly in part 4 of Build With MD.

3. Child Theme Mirroring

With the basics of your Child Theme out of the way, let’s talk about the concept that makes Child Theme’s so powerful: mirroring.

Think about growing up…

Think of your Child Theme as a young child and a Parent Theme (Marketers Delight) as the child’s parent.

A child inherits genes, DNA, and other traits from a parent to become their own person. But because a child is its own being, their own unique traits and interests will develop based on the framework of life passed to them from their parent.

They can choose to follow different paths of life their parents did and build themselves in different ways based on lessons they learned from their parents. But genetically they’re still connected; just different.

In terms of your theme…

To make your Child Theme your own, you can overwrite template files from Marketers Delight and make changes to them to alter the look and functionality of your pages. You’re building on top of code directly from MD, but changing it so it achieves a different outcome.

When I talk about mirroring, I literally mean copy and paste a template file from Marketers Delight into your Child Theme. Think of it like a trait is being passed onto a child each time you move a file into your Child Theme.

The only thing to make sure of is that the file in your Child Theme matches the same directory path as it did in the parent theme.

Meaning if you copy a file from MD’s root folder, you also paste it into your Child Theme’s root folder.

A Real World Example

In Marketers Delight, the main file that makes up all pages, posts, archives, etc. is index.php. While this file is very barebones and non-specific to any particular template, it lays the foundation that makes up every page.

If you wanted to edit something about the HTML structure or any other kind of change, you’d simply duplicate the file via FTP then move it into your Child Theme’s folder.

Once it’s in your Child Theme you have full reign to make any change you want to the file. This process can be repeated for any other template file.

Note: when I say template file I mean files that have HTML in them. You can overwrite any .php file in the root folder except for functions.php (your Child Theme loads its own separate one) and any file in the /content/ folder. All other files are loaded by MD and can only be manipulated in other ways.

4. Editing Specific Templates Only

By default, Marketers Delight doesn’t come with any page-specific templates. Everything is loaded through the generic index.php file and added in via hooks (again, hooks will be covered in part 3).

So let’s say you wanted to add something only to your pages in WordPress and not any posts or archives.

First, start off by duplicating index.php from MD and moving it to your Child Theme. Then, because you only want to target pages, rename the file to page.php.

From that change you’ll be able to now add code to that file that will only affect pages on your site.

Manipulating Other Types of Templates

WordPress is full of templates and makes editing different types of templates easy. Some other of the most common templates you may want to overwrite are as follows:

• home.php – modify the template of your blog posts listing
• single.php – modify blog post templates only
• front-page.php – modify the front page you set in Dashboard Settings > Reading
• category.php – modify category pages

In Marketers Delight, start by duplicating index.php then renaming it to the template file you want to edit.

Read the Template Hierarchy in detail to learn more template files →

Manipulating Page-Specific Templates

This is where the real power of the template system comes in. The above methods will manipulate the templates of the entire type (posts, pages, categories, etc.) you create. If you want to only edit the template of one specific page type follow this simple formula for file names:

1. As always, duplicate index.php and move it to your Child Theme.
2. If you want to override a specific page, rename the file to page-(SLUG).php

The (SLUG) meaning the URL in the browser. So if I were editing the Sample Page added by WordPress by default (http://domain.com/sample-page/) the file would be called:

page-sample-page.php

You may do this with any category as well:

category-uncategorized.php

and of course, any post:

single-hello-world.php

Read the Template Hierarchy in detail to learn more template files →

5. Editing Parts of Your Templates

Sometimes editing an entire template is an overkill and you just want to modify certain parts of your template. For example, the post byline.

In the root directory of Marketers Delight is a folder called /content/. Inside that folder are a whole bunch of different files that make up different parts of MD.

MD is built in the same way Lego blocks are put together: in pieces. These pieces can be loaded and used anywhere, a concept I’ll explore in the next post in this series.

Browse this file and you’ll find all kinds of recognizable elements: headline, content text, pagination, logo, etc.

These content parts work in the same way other template files do, just duplicate any file and move it into your Child Theme. Keep in mind your Child Theme must also have a /content/ folder and those files must go in it.

Taking These Concepts to the Next Level With Hooks + Filters

Overwriting templates is a simple way to customize different page templates and other parts of your blog, but this can be taken a step and further simplified with hooks and filters.

Creating a new template file for every change and addition you want to make to your blog can become very tedious and will create a confusing, cluttered Child Theme.

By learning how to use hooks, you can easily add and remove content around your site as well as keep a more organized Child Theme.

For an example of a hook in action already on your site, check out your Child Theme’s functions.php file. The function in there hooks 2 stylesheets into your blogs header to load both MD’s stylesheet and your Child Themes. This is a concept we’ll look over much closer in the next edition of Build With MD.

Also in the next edition, I’ll show you how to use Hooks and Filters to more efficiently build your blog. Some topics I’ll cover are:

1. How to add a yellow announcement bar to the top of your page (like on Kolakube)
2. How to conditionally remove certain elements from different types of pages / posts
3. Using get_template_part() to rebuild post templates
4. …and more!

I hope you enjoyed and learned a lot from this edition of Build With MD. If you have any questions or comments about the material covered, please leave a comment below. See you next time.