The UnderStrap Blog UnderStrap Guides

Getting Started With UnderStrap Child Themes

how to quickly get your WordPress project off the ground with a child theme

Alex from UnderStrap Alex from UnderStrap September 24, 2019 No Comments

Not everyone has the time to build a WordPress theme from scratch, but at the same time we all crave that unique – one of a kind look for our website.

There are ways to streamline your website development so you can work in a sensible time frame by engaging in a few hacks, which we will discuss here.

(This is a guide that looks at child themes for the UnderStrap framework but the lessons here can be applied to all sorts of WordPress themes)

What is a child theme?

If you have used WordPress for even a small amount of time you will most probably have come across the themes section. In WordPress you can install a new theme by simply taking a .zip file that was free or even paid-for and uploading it in the /wp-admin/ back end.

Its is an amazingly simple system and its the touches like this that have made WordPress the number one CMS in the world.

You may not know though, that any theme can have a child theme. A child theme will inherit its parents files and settings. Then anything you do in the child theme will overwrite what the parent theme did.

This parent-child system allows you to take a theme or starter framework like UnderStrap, then create a child without editing any of the original theme files. This way you can still update the parent theme when its updated by its author without overwriting your changes. It also keeps things neat and tidy.

You could also create several child themes of the original and switch easily between them in /wp-admin/.

Imagine creating a Halloween and Christmas version of your site that can be switched with one click in the back end.

How to install a child theme

(We are assuming you have your WordPress hosting setup ready to upload by FTP.)

Installing a child theme to work on is dead easy, lets use UnderStrap as an example parent theme. You can use any theme that contains the minimum files needed (see here for WordPress.org’s list of needed files to make a theme “a theme”). If you are creating a child theme from scratch for UnderStrap or any other WordPress theme then ideally check out this official guide.

1. Make sure that the parent theme is ready

Ensure that you have a working theme (UnderStrap in our case) in the /wp-content/themes/ directory and activate it to test it:

UnderStrap Theme Directory

2. Add the UnderStrap child theme

Download the Base child theme from our UnderStrap child themes section.

Upload this to your /wp-content/themes/ directory and unpack.

UnderStrap Child Theme Directory

3. (optional) Now activate the child theme

Perhaps due to sheer excitement you may want to see your new child theme in action. Go to your /wp-content/themes/ section and you should now see a listing for “UnderStrap Child” that you can activate and browse to the front end to see live. Now you can move on to editing the child theme.

UnderStrap Child Theme Listing

Editing a child theme

One of the first things that I do when I work on a child theme is change the name of the folder that it is in. You don’t have to do this but it makes the site seem more like your own, especially when people snooping see your theme folder as /wp-content/my-custom-made-them/ in the sites source.

After the folder name change (you may have to re-activate the theme if you have already activated before the folder name change) you could further customise by changing the theme name in the style.css file contained in the child theme folder.

By changing the info in that style.css file you will see the theme name in the /wp-admin/themes.php theme menu change, which may be a good way to WOW clients.

Changing something that the parent theme does

The whole purpose of creating this child theme is so that you can make changes to the parent. This is easy to do and all it requires you to do is add (or copy) the files into the child theme, WordPress will then choose the child’s version over the parent.

So as an example, you put a single.php (the default template for a single blog post) in the child theme directory that is near identical to the parent’s version but you added several new classes to the heading tags. You can now go to the front end of the website and as long as the child theme is active you should see those changes overwrite the parent’s.

Adding a functions.php file to the child theme allows you to add in code that is processed on every single front end and back end page. This is great for code that you use regularly across many templates, you can create 1 function in functions.php and call it across the whole site. Unfortunately though, you cant override a function in the parent functions.php with the same name the way you can do with templates, here is an article on how to get around this.

For styles, you can simply add the class or ID that you want to override in the parent style-sheet with the same name. The child theme’s style-sheet is loaded after the parent so it will overwrite it.

Ready made UnderStrap child themes

If you haven’t noticed already we have 2 ready to go child themes for UnderStrap, one free and one premium. Download and install them to get your project moving a lot quicker:

Card image cap

CORE Child Theme 14€

The first commercial UnderStrap child theme. Made for a personal/blogging website and focused on content and typography.

> Download sample content Current version: 1.0.7

Card image cap

BASE - Child Theme Free

A basic child theme without any customizations but nicely integrated into the UnderStrap workflow. Ready-made to start your UnderStrap development and design from scratch.

Current version: 0.5.2

Ready To Go Premium Bootstrap Themes

If you are in a rush to get your website up quicker and don’t mind spending a little money then a premium Bootstrap theme may be a good idea. We have collected a list of the best ones we could find on our themes page.

UnderStrap Premium Themes Screenshot

Additional Help

Are you stuck on something? Why not ask us for help in the comments below.


Comments

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