By Carl Heaton

So, you’ve downloaded plugins and customized your site as best you can, but it’s still not what you’ve imagined. Before you get your hands dirty and start changing the behind-the-scenes code, a WordPress child theme might be the next thing you should be looking for.

Creating a WordPress child theme can save you a lot of time in the future and reduce a lot of added stress you don’t need, especially when the original theme needs updating. Many WordPress themes come with child themes internally installed so all you have to do is punch in some of that lovely code that you’ve been studying so hard, and on your way you go!

But there are a lot of themes which don’t come with this little helper. In this case we need to find a child theme plugin, and as usual… we have a great one!

One Click Child Theme

wordpress child theme

There are unlimited possibilities with ‘One Click Child Theme’, especially when a client is looking for a specific change and the WordPress theme doesn’t support it.

This plugin has helped us in so many ways in the past, by allowing us to change any CSS by simply adding some short-code to the child theme, from background colour to setting mobile queries, and anything in between, the possibilities are endless.

Installing ‘One Click Child Theme’ Plugin

Remember: always test these plugins and short codes before using them on your live site. You never know what kind of wacky s#&* will happen and how it will affect your site, so use your favourite local host or ‘This Is Tap’ to make these changes.

If you don’t know how to install or test your plugins, then you should cool your jets and step back for a moment. Then, check out our post “wordpress where are all your plugins?” to find out how.

Creating a WordPress child theme.

Step#1: Under appearance click ‘Child Theme’wordpress child theme

Step#2: Create a ‘Theme Name’ and ‘Description’

Make the name and description relevant to the website so the child theme is easily found in the future.wordpress child theme

Your child theme is now created. This is where the magic begins!wordpress child theme

Note: A new theme is created in the WordPress theme section.

Step #3: Under ‘Appearance’ Click ‘Editor’

Step#4: Enter the CSS code.

Make sure you are in the ‘Style.css’ section of the child theme.  wordpress child theme

Don’t worry! We’ll have some CSS examples for you at the end of this post.

Step #5: Click ‘Update File’

Once you input that lovely CSS code all you have to do is hit ‘Update file’ and if you’ve done it all correctly, the changes should be instant!wordpress child theme

There you have it, we’ve showed you how to create a new WordPress child theme and upload some CSS. As we always remind you…

*DON’T BE A DUMBASS AND MAKE CHANGES TO YOUR SITE LIVE, DO THEM OFFLINE FIRST!*

Making Adjustments To The Parent Theme

One click child theme will always be there for you. If your parent theme is deleted or changed, don’t freak out, the child theme you’ve created will still exist.

The day will come when an update to the parent theme will be necessary.

All you have to do is:

  1. Download the zip file of the parent theme
  2. Delete the parent theme through your favorite FTP (like Filezilla) in the ‘Themes’ directory
  3. Unzip and upload the new parent theme file to the ‘themes’ directory

When uploading or changing any files within a site, make sure you have a backup of the site and all its files. In a programmer’s world, problems are always a possibility and having your ass backed up at all times will get you out of any sticky situation.

Sample CSS for One Click Child Theme

We are using the ‘Twenty Fifteen’ theme, which is pretty simple and dull without spiffing it up with some fancy code of your own.wordpress child theme

 

Small changes can be made, like background and text colour. But other than that, it’s a pretty lame page without adding some of your own code.

Just to show how simple one click child theme is, we’ll change the paragraph (<p>) color and font size using the following:

p {

color: yellow;

font-size: 80px;

}

wordpress child theme

Input the code and BAM!  It’s as simple as that.

After you Press ‘Update File’ the site should have all the changes. After adding the code, our site should look like this now.wordpress child theme

Okay! Not many sites will ever need yellow font at a gigantic size of 80px, but we did this for your sake, to show you how easy this plugin is to use. So please no crazy replies on how this code isn’t realistic. Just take what we showed you and run with it!

 

The possibilities of CSS are virtually endless and the WordPress child theme allows you to change anything your little heart desires… so remember, a programmer never stops adding to their skills so don’t stop learning!

carl68

About The Author

Carl

He is our senior instructor and originally from Manchester UK. Carl teaches our Web Design and Online Marketing Courses.