One Click WordPress Child Theme

Over on the WordPress forums a lot of users starting out with theme development or just wanting to tweak a  theme, post topics on changing a theme, these theme changes range from changing a color or padding to creating a template page with multiple content loops.

If the topic author has modified one of the default themes, they will get a reply including a comment which tells them they should not edit the default theme files but should create a child theme, this is ok for users around the intermediate level, but could be daunting for a starter or someone just wanting to change a title color.

Child Themes

There are lots of posts on the internet about creating a child theme, a child theme is just a small number of files that allow us to modify a theme without editing any of the original files, the child theme will inherit all of the parent themes code and layouts.

The child theme files will be given priority over the parent theme, we can change styles, layout and functions, when a parent theme is updated by it’s author WordPress will delete and re-upload the parent theme, if we have changed files in the parent we have lost our changes!

One Click Child Theme Plugin

There is a plugin over on WordPress.org called One Click Child Theme this will create a basic child theme from the active theme, the child theme it creates is just a folder and one created file the style.css, the plugin also copies rtl.css and screenshot.png, when the child theme is created it is also activated on creation.

What we are going to do in this tutorial post is to look from a beginners perspective, installing the plugin, creating a child theme, changing a simple title style, adding the footer file to our child theme and changing the footer credit section.

Installing the Plugin

We will install the plugin from our WordPress Admin > Plugins > Search,  in the textbox we type ‘one-click-child-theme’, and click the Search Plugins.

child-plugin1

WordPress will return a list of plugins, we choose the plugin and click install, and after it is installed we just click ‘Activate’ to make it active, we can de-activate it after use if we want to.

child-plugin2

That is the plugin activated, so now we can create our first WordPress Child Theme, in this example the twenty eleven child theme is our active theme.

Creating a Child Theme

Navigate to Admin > Appearance > Child Theme, and we enter some details for our new child theme, once we have added our details we click ( Create Child ).

child-plugin3

If we have used a name that we have already created a child theme for we will get an error message, we should get a confirmation message, but on testing in a localhost environment we got this instead, it is nothing to worry about and the theme was create.

child-plugin4

When we visit Appearance > Themes, we will see our child theme is already up and running!

child-plugin5

On visiting Appearance > Editor, we will see our child theme’s files, lets have a look at the generated style.css file, where we can see that everything has been added for us.

child-plugin6

Changing a Style

As a quick test we will change the title color of our website, to do this we need to find out the id or class name of the template element, to do this we could look in the header.php file, but let us use FireFox and the FireBug addon for our example.

FireFox, FireBug and a syntax code editor are essential tools for development, if you do not have a color code syntax editor then we would suggest downloading the free NotePad++, if you will be doing more changes then it is well worth downloading.

Once we have FireFox and FireBug we navigate to the element we want to inspect (Or press F12), and ‘Inspect Element with FireBug’.

child-plugin7

We can see in the screenshot our header title has an id of ‘site-title’, and in the style column we can see the class ‘#site-title a {’, this is the key information we need to change our websites title.

child-plugin8

Either use FTP or File manager to download change and upload the file, or from the Admin > Appearance > Editor, add a new style for our title.

We have also added comments between /* and */, these are handy for later, so we know what we have changed and why.

All our style changes go below the @imports line, as this line loads the styles from the parent to the child theme.

child-plugin9

After we click ( Update File ) our changes will be saved, visit our website to see the changes, we might need to CTRL+F5 to refresh our browser to see the change.

child-plugin10

Adding the Footer File

If we want to change the website layout we have to copy the file we want to edit from the parent to the child theme, in a local environment we just copy and paste the files, but for an online ‘test or production environment’ we can use an FTP client or our ISP > Control Panel > File Manager.

We could use a clean local copy of our parent theme, or we can download from the online parent themes folder, edit and upload back to the child, in this screenshot we are uploading footer.php from a local folder with the free ftp client FileZilla.

child-plugin11

Changing the Footer Credit

As we have a way of transferring file to and from our website, we could easy make our changes on our local PC or Laptop, and even install a local test environment and then upload the modified files to our website.

A second online or a local installation of WordPress will mean we can test our changes, test upgrades, new plugins, and if things error we do not have a website that is locked out or looking bad for our visitors.

Just as a simple footer.php code change example, we have added a tagline in our footer.php file and uploaded it.

The highlighted code comment’s have a very different format outside of PHP and in HTML, <!– comment –>.

<!-- Start added by Digital Raindrops -->
<div class="aligncenter">
See you soon for more WordPress tutorials tips and tricks!
</div>
<!-- End added by Digital Raindrops -->

Here we can see our new file with the code change in our WordPress editor.

child-plugin12

Here is our new footer tagline

child-plugin13

Conclusion

This is a brief introduction to help new developers or WordPress users to make small changes, an overview of Child Themes, the One Click Child Theme plugin, Firefox, FireBug and NotePad++

You will find many helpful posts on this website, in the WordPress Forums and our best friend the Google search engine.

If you do not have a second test WordPress Install or a local installation do look at changing the way you are working, for Windows users we suggest the free InstantWP, others on Google are WAMPP, LAMPP

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

6 thoughts on “One Click WordPress Child Theme

  1. Pingback: Website Final design & production. « mikeysteven

  2. The process fails for me at “creating a child theme”. I get the array(5)…NULL message you describe, but when I navigate back to Themes, I get a warning that says “The active theme is broken. Reverting to the default theme.”

  3. It is very easy to create child theme like me people who is not good in coding but i have a small question i am using CP theme apptheme and they give updates to my theme minimum twice in a year so if I update my parent theme do i need to do change any changes in child theme as well .

Leave a Reply

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Tips

colorizer-1_thumb.png

We thought we would use the WordPress Twenty Eleven theme and the the Farbtastic color picker to colorize our theme from the website front page instead of the admin area. We have been looking at the $_SESSION variable, so we thought … Continue reading

Read More

Posted in WordPress

screenshot

We created this theme as an extension to our post on the WordPress Post Class function after our talk at the #wpldn meetup group, we have extended the theme with a couple of new layouts, adding the date icon. As … Continue reading

Read More