Build Your Blog With MD Part 2: Child Theme Basics & Principles

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)

WordPress Content Themes

Your ‘root’ folder may be called something like ‘public_html’ or ‘htdocs’. This is where your WordPress files are.

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' );
Example of functions in Coda 2

This is what a few functions coded into your functions.php file would look like. Also, I code in Coda 2 with the “Specials Board” color scheme (syntax highlighting). Coda doubles as an FTP and amazing code editor and is worth the investment in the time it saves alone.

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.

Overwrite Child Theme Files

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.

MD Child Theme Content BlocksBrowse 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.

10 comments add yours

  1. Awesome explanation on using the child theme and how to customize the site. My developer has been helping me with it and I am directing him to this guide.

    They way you made MD4 simply made it extremely flexible. While some will be scared off by the coding needed to make it their own, from a development angle, I absolutely love the direction you took it!

    Can’t wait to learn about hooks and get MD4 live and replace my Thesis version.

  2. Hey Alex. I’ve been working with a theme that is all about short codes so posts and pages are covered in them. Any suggestions on coming over to MD DIY style? Or for that matter, the use of short codes in general?

    • Hey Somone!

      If the shortcodes are in the theme, then when you switch to a new theme you’ll just see the shortcodes as text. See if the company offers some kind of plugin that has the functionality in it so you can install it and at least save the content.

      Otherwise, the only way to do it is to clean everything up by hand. Maybe it’s not a bad thing, it gives you a chance to write new (and maybe even better!) copy.

      Shortcodes can be useful, but make sure they’re at least in a plugin to prevent data loss when you switch themes. I’m going to include a few in the MD plugin in an update one of these days.

      Beat of luck, can’t wait to see what you build with MD!

  3. how much of the design of kolakube is doable with an out of the box installation of MD?

    How much child theme and custom code is needed to form a layout like this page?

    • Hey Seth,

      The only customizations I made to Kolakube is changing the header from white to dark and building the custom menu. You can see default MD in this screenshot. These customizations were made with a template file and some custom CSS I wrote that I could send to you if you wanted that exact look.

      This page is all standard MD. I aligned the images with built-in CSS classes I wrote into the post editor. Until I make something like shortcodes to streamline this formatting, you can add those classes to any images or div elements (a tutorial on this coming soon).

      Of course, I’m able to help with more specific requests once you get MD up on your own site.

    • Hey Josh, once I release MD Popups (coming very soon, early this month) I’ll be focusing a lot more on creating content and tutorials like these. Until then, if you have any questions, feel free to ask in the support forums.

Leave a Comment