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:
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.
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.
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.
For a more in-depth look at the file structure of a WordPress theme like Boostrap see our template hierarchy article here.
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:
[understrap_child_themes]
OverStrap
If you haven’t yet checked out OverStrap then I massively recommend you do. Its our range of premium ready to go child themes for UnderStrap to fast forward the development of your next web project.
Currently the pack consists of 5 varied styles of templates:
- Blog – built in lightweight slider
- Portfolio – easy to use portfolio plugin and clean design
- Event – display a countdown to an event
- Corporate – a business style theme with built in lead generation form on the homepage
- Tech – modern technology theme for Saas and software
You can check out more details and the price of OverStrap here.
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.
Additional Help
Are you stuck on something? Why not ask us for help in the comments below.