A guide for how to turn your WP site layout from “bland default” to “branded va-va-voom.”
(This is technically part of the “how do I webcomic?” series, but it’s not a webcomic-specific walkthrough! The same process works for any kind of Wordpress site.)
Note: I won’t go into detail about writing and editing CSS code, but it’s a skill you’ll need in the Making A Child Theme process. If you’re already familiar with it, awesome. If not, check out last week’s intro post about basic CSS troubleshooting and editing.
Step 1: Find Your Themes Folder
The “Themes” section is easy to find in your Wordpress admin dashboard. It’s the first entry under Appearances:
But to make a child theme, we’re going to need to dig into the actual underlying directories.
There are two basic ways to do this.
(1) Your hosting provider — mine is SiteGround — should have some kind of File Manager service, which you can open in your web browser.
(2) Your host should also provide FTP login information, which you can use to connect with an FTP program — this can be a lot faster, especially if you’re uploading lots of files at once. The program seen here is FileZilla.
Either way, start in the root directory of your site, then navigate into wp-content/themes.
You’ll find a list of folders, one for each individual theme your site has installed. One of these will be your parent theme. For me, that’s Inkblot.
If you look in, say, the /inkblot folder, you’ll see a ton of files:
Clearly, coding a whole theme from the ground up takes work. I sure don’t have the time or patience for it!
Fortunately, a child theme gets to leverage almost all the pre-existing work that went into the parent theme. Most of these files, it’ll just keep using.
Step 2: Make a folder for your new child theme
Pretty self-explanatory.
The new folder goes in the regular top-level /themes folder, next to all the others.
Give it a short but distinctive name. (No “mytheme” or “newtheme” here — what if you want to make a new new theme later on?)
You can see in the screenshot above that I went with /leifthorn for the Leif & Thorn child theme. The child theme over at But I’m A Cat Person is called /bicp-style.
Step 3: Make a new style.css
The only file you absolutely need in a child theme is style.css.
This replaces the stylesheet in your parent theme. So the easiest way to make sure you don’t leave out any important code is…open the folder of the parent theme, save a copy of the style.css from there, and use that as your starting point.
Here’s the stylesheet for Inkblot, as currently uploaded on my website.
And here’s a screenshot of a saved copy, opened in Notepad++ — my favorite text-editing program, because it does helpful things like “color-code all the CSS elements for easier reading”:
Every block of green text here is a comment. In CSS, you mark them by putting /* at the start and */ at the end. Your browser will process everything in-between as “ignore this, it’s not a functional part of the code.”
In your saved file, replace the big comment that starts with “Theme Name…” with the following:
/*
Theme Name: [Child-theme name as you want it to show up in the WP admin dashboard]
Description: Something about how it's [Theme Name], a child theme of [Parent Theme Name].
Author: [Your name]
Author URI: [URL of your website]
Template: [folder name of the parent theme]
*/The most essential part here is the Template line. That’s how WP knows where to find all the content from the parent theme, so it can include those files too.
Like the child-theme folder name, your actual Theme Name should also be distinctive. If you use a name somebody else has used in the big existing Theme Database, WP may try to push you updates from their theme. (Found that out the hard way…)
Here’s a comparison of the start of the original inkblot/style.css and the current leifthorn/style.css, which has the essential Child Theme Header Details, plus some extra info I’ve added over time:
Step 3b: Start putting custom edits in the CSS?
The whole reason you’re making a new stylesheet is so you can dig in and start changing whatever bits of the CSS you want to change.
If you already have ideas, and want to get started right now, awesome!
If you’d rather finish installing your theme first, and then circle back to customizing it, that’s fine too.
(There’s never a point when you have to be “done.” You can keep adding new things, or change your mind about old things and replace them, forever. I tweaked my child-theme fonts in the middle of writing this post.)
Since I already had the files open, I took a couple more comparison screenshots of my two stylesheets. Here’s a section where I basically didn’t change anything — Inkblot original on the left, Leif & Thorn child theme on the right:
This part is all “elaborate fixes and standardizations for weird obscure display quirks in different browsers.” It has lots of /*comments*/, even in the original, because nobody is likely to have all of this memorized.
Not the kind of stuff you (probably) want or need to mess with!
In contrast, here’s a section where I changed a bunch of things. Adding a few properties here, deleting a few there, tweaking the margins and icons to get them just how I want them…
This didn’t have many /*comments*/ in the original. I started adding them as I made the changes.
Be good to yourself, and get in the habit of writing your own comments! No matter how many CSS properties you know by heart, there’s going to be a day when Future You opens your stylesheet, looks through the code, and goes “wait, what did I do that for?” A helpful explanation from Past You will go a long way.
Step 4: Make a new functions.php
You’ll like the process behind functions.php, it’s easy:
This adds to the functions in your parent theme. So if you start with the file totally blank, you’ll be just fine.
There are sexy complicated editing programs you can use to work with PHP, but you can also just use any plaintext editing program — I don’t mean like MS Word, I mean like MS Notepad. This is another place where Notepad++ comes in handy.
I started my file with a bit of “just for safety…” code, which looks like this:
<?php
// make sure we don't expose any info if called directly
if ( !function_exists( 'add_action' ) ) {
echo 'Hi there! I\'m just a plugin, not much I can do when called directly.';
exit;
}
?>(Full disclosure: I know almost nothing about PHP. Any time I use some, it’s borrowed from a template that somebody else wrote.)
So…why make your own functions.php at all, if it’s not going to do anything?
This is mostly a “you might want it later” situation. If you tinker with your website for long enough, eventually there’ll be a day when you google “hey, is there a Wordpress plugin that does X?” and the results are all “lol no there’s not a plugin, this takes 1 line of code, add it to functions.php yourself.”
My current child theme does actually have a few extra functions. Although in this case, if you try to open the file directly, you won’t see them.
Step 5: Upload and activate!
Upload your new style.css and functions.php into your new child theme folder.
(Note: If you made any custom graphics for your theme — a header, a background, etc — you can put them in this folder too. But that isn’t mandatory! It’s just an organization thing. As long as you use the full URL to link to an image, it doesn’t much matter what folder that URL leads to.)
Go back to the Themes section of the admin dashboard, and your theme should be there!
With a blank, image-free box — the pretty picture isn’t automatically generated, you’ll have to make it yourself — but the code itself will be ready.
It’ll also show up in the “Theme File Editor” section. Personally, I’d rather edit the files saved on my own hard drive, and then upload them over FTP…but you can also use these Wordpress tools to directly edit the files on the server.
In the Themes section, click “Live preview” to see your child theme in action. You can use this preview to inspect the CSS, and make any new changes/revisions that come to mind.
Then hit “Activate” to show it to the rest of the world.
Optional bonus: Make the pretty picture
Your readers won’t see this — it’s literally just for you, and any other developers you give access to your dashboard — but hey, why not.
Take a screenshot, open it in your favorite art program, crop to 880×660 px (the official recommended size), and export in PNG format as screenshot.png.
Upload it in your child-theme folder, and ta-da:
Sir Not-Appearing-In-This-Walkthrough: Making new versions of other files
This is next-level editing, so I’m not going to go into detail, just throw in a note that “here’s another thing you can do.”
Remember all the other files in your parent-theme folder? A bunch of the PHP files — not functions.php, but most of the others — are templates for different sections of your site.
If you copy any of these templates into your child-theme folder, they’ll be treated like style.css, and replace the template in your parent theme.
So if you get into a really hardcore layout-editing situation, where all your research suggests the very best approach is “dig directly into the underlying PHP my site is built on”…
Figure out which template has the code you want to knock around, copy it into your child-theme folder, and make your changes there.
If it works, the child-theme version is the one readers will see. If it makes things worse, just delete the whole file, and your site will revert to the original non-broken parent-theme version.
And now you have a child theme!
Enjoy having the full freedom to spruce up your layout…basically in any way you want.
Maybe I’ll come back later and write a third post on Even More Tools for Customizing your Webcomic Site? I’ve always wanted to do “how to make user-switchable color schemes,” which is a whole separate topic that builds on top of this one…Watch this space.
In the meantime: comments and questions are welcome!
Comment Header
Comment Footer