Creating A WordPress Child Theme

Creating A WordPress Child Theme

That there penny sorta dropped on creating a wordpress child theme t’other day!  Strange really as I was trying to figure out something else completely different, more on whatever in tha future and you know how it goes for some bizarre reason, when you stop searching for the unknown out of the blue a solution drops by?

Ubuntu - www.ubuntu.comWhilst looking for known unknowns out in t’internet land, creating a wordpress child theme wasn’t exactly at the top of me things to figure out list. So lets get one thing straight right of the bat and of course we’re repeating ourselves a tad.

This is a space for yours truly to try and keep track of something new we’ve sorted and most definitely not a how to guide!

We both may have read that so many of the wordpress developer geeks will tell you to sort out a child theme before you start altering your theme code in whatever .php / .css file your using.

Fair enough, got me head round the principle of that one?

Not saying that we actually took any notice!  We both know that when you jump in with both feet, being told what to do, is not the same as understanding what they are actually saying or even appreciating how to achieve whatever.

Off course when we first set out on our self learning on the fly journey, way back when, that was never an issue and to be honest it didn’t really matter.  Not that we didn’t care, exactly the opposite, we were so busy getting our heads round a new language if you will and figuring out how to do other things like ftp, which plugins to use and whether or not to pay for a theme?

GeditTrying to get our heads round the various terms and phrases used was difficult enough, never mind start creating a child theme from scratch when we didn’t really know what the theme itself was doing for us.  Learning to change and modify bits of code would take ages in itself, as we slowly got our heads round what functions.php, style.css or index.php was all about.

Just because we’re not sure of the gubbins involved doesn’t mean we cant do what we do.  After all we got our heads round driving a car, though still not a clue how the engine works?

In the beginning, we decided quickly, that it’s not important to know the nuts and bolts of how whatever theme works on the inside, rather what’s important is can we put our information, whether that be text, photos or videos, where we wanted ’em and were we satisfied at any given time with the results / look of what we’ve done?

We both know that over time we’ll still be making more than a few tweaks to whatever, as we learn new nuggets along the way.  Anyways here’s yours truly keeping a note on how we’ve started to get our head round creating a wordpress child theme.

Eight Rounds Rapid – Channel Swimmer

Memo To Self: We need to use ftp: filezilla, c-panel, cyber duck or whatever.

So here we go using Ubuntu, Gedit & Filezilla:

In our folder of choice?

  • Create a new folder first to store our new files.
  • Simple enough some may say?
  • What do we call this folder and where are we going to put it?
  • Where we place the folder on our machine is down to thee, just don’t forget where, when we come to use filezilla later.
  • Naming the Folder?
  • Suppose this all depends on what theme we’re using at any given time!
  • If we’re using a theme called twentyfourteen, twentyeleven or whatever the principle is all but the same.
  • To keep it simple just add _child after the name of your theme
  • That be the name of our folder so from the theme names above our new folder will be as follows :
    • twentyfourteen becomes twentyfourteen_child
    • twentyeleven becomes twentyeleven_child
    • whatever becomes whatever_child
    • yourthemename becomes yourthemename_child

Filezilla - free FTP solution All we’ve done so far is to create a new folder, saved it somewhere we can remember and called it the same as our theme and placed _child at the end.

Memo to Self: Don’t forget the underscore after the theme name and before child.

Job done that’s the folder sorted for the now.

Now to get our heads round adding the important bit?  The .css file style.css?

Totally sounded scary did that in my book, when all we were trying to do was get our heads round what all the different files did in the first place. (Still am to be honest!)

Not to worry about the unknowns as we’re creating a wordpress child theme from scratch and this ‘ere style.css file is the first file we’ll create.  Stressing not about anything else for the now in my head for starters we’re on a roll.

Suppose tha next question is ………………..

How do we create a .css file anyways?

  • Open up your text editor of choice?
  • As we’re using Ubuntu our weapon of choice will be Gedit to create me file
  • Maybe your using notepad++ or whatever text editor you’ve got available will do.
  • What we use isn’t the important thing it’s how and where we save our file that makes it work.
  • Open a new text document.  We’re going to create our new child theme for wordpress.
  • So commences a whole new learning curve.
  • Maybe daunting at first for yours truly.

Though not as scary as we first imagined, but as with everything we do for the very first time, patience and perseverance will provide us with the know how and inclination to move forward with the desire and wanting to learn something new.

At the end of the day all we need to do is check out the info from: http://codex.wordpress.org

Confusion creates chaos and we love chaos, it’s all a matter of seeing through the crap that others create to baffle you with whatever else they have in their agenda of things to do and maybe get you to purchase a premium theme?

Memo To Self: So how do we actually start to create our child theme on a new text document then?

OK so what goes into this ‘ere blank text document then?

  1. Start by typing the following /*
  2. Then type Theme Name:
  3. Remember to add a space after every colon
  4. Enter the name of the theme that you are using and add the word child at the end so as above we could use:
    • Twenty Fourteen Child
    • Twenty Eleven Child
    • Whatever Child
    • Your Theme Name Child
  5. Just don’t forget the colon : and space.
  6. Next add a description.  Just change the name in the example below to the theme that you are using.
  7. Description: Child Theme for the Twenty Fourteen Theme
  8. Now add the author, that could be you, your firm, your mates whomever you choose.
  9. Author: Adrian Berry
  10. Now add the URI (Uniform Resource Identifier) Think url and your on a roll, link to your home / about page.
  11. Author URI: http://www.blackeyedadmin.co.uk/
  12. Add the template which is the name of the theme that you are currently creating the child theme for.
  13. Template: Twenty Fourteen
  14. Add a version the numbering is so down to you
  15. Version: 0.1.0
  16. Close everything by adding */
  17. add the following to import the main theme
  18. @import url(“../twentyfourteen/style.css”);
  19. Add your new content below here!
  20. You may not need this to be honest, but it makes life easier in the early days.
  21. /* Add Your New Content Below Here: …………………………………  */
  22. Save the text document
  23. File save as ….
  24. style.css
  25. Save this file inside the folder that we created earlier, twentyfourteen_child etc
  26. As before the name of the folder depends on the theme that we’re creating the child theme for.

Job done, off course we’ve made that damn long winded and that’s ok in my book for the now.  As we suggested earlier, this is yours truly keeping track for meself and not a how to guide.  So now that we’ve got our style.ccs file sorted.  we need to ftp the folder to our host and away we go with a brand new child theme for our wordpress space.

When we ftp our new child folder we place it in the themes folder of our wordpress space.

If all goes well?  We’ll be able to activate the child theme within wordpress and when it comes to updating the main theme all our changes will still be intact as we’ve used our very own child theme to do whatever rather than the main theme itself.

Off course maybe we could’ve phrased that a tad better but for the now, No Worries.  In a nutshell, all we have to do now is copy and paste the code below into a new text document.  Change the names to suit and save as a brand new file in another folder and that be a new child theme created for whatever new space we have in mind.

Here’s a link to the official http://codex.wordpress.org/Child_Themes How to Create a Child Theme which provides you with the what to do and why info etc.

Below is the end result that works depending on tweaking the theme name and other bits and bobs.

/*

Theme Name: Twenty Fourteen
Theme URI: http://www.whateveryourwebsiteiscalledgoeshere.com/twentyfourteen-child
Description: Child theme for the Twenty Fourteen theme
Author: Adrian Berry
Author URI: http://www.whateveryourwebsiteiscalledgoeshere.com/about/
Template: Twenty Fourteen
Version: 0.1.0
*/

@import url(“../twentyfourteen/style.css”);

/* Add Your New Content Below Here: …………………………………  */

Travel Safe

~ Inabit ~