Otherwhere

Books, movies, reviewage and other mixy things


Warning: Creating default object from empty value in /home4/jessicabo/public_html/otherwhereco/wp-content/plugins/wordpress-code-snippet/wcs.php on line 332

Warning: Creating default object from empty value in /home4/jessicabo/public_html/otherwhereco/wp-content/plugins/wordpress-code-snippet/wcs.php on line 332

Thank God for WordPress themes! They make our lives much easier and allow for great websites without (too much) headache. But no theme is ever perfect and it seems no matter what you do, you have to change something.

Navigating through theme files can be a total pain, especially when you are trying to find that one CSS rule you need to change. Maybe a background or a few colors? Thankfully there is a much easier way to do this that allows you to make whatever changes you need to theme without actually touching any of the original theme files! The best part is, if there is an update for the theme, you won’t lose any of your hard work.

That’s all great… now how the frack do I do this?

Easy. Child themes. But first let’s check out how your theme is organized in your WordPress stuff.

Here is an example of the file structure for your WordPress site.

http://www.example.com/ – this is your main directory

http://www.example.com/wp-content/ – this is where you themes and plugins live

http://www.example.com/wp-content/themes/ – this is where your themes live.

In “themes” almost everybody will already have a folder for the twentyten theme. This folder contains all of the CSS, HTML and PHP files needed to make that theme work. It’s a great theme! There is a lot of great functionality built into it including the ability to change the header image, colors, backgrounds, layouts, etc… right from the back end. This is a great choice for people who don’t have much experience with CSS and PHP. But what if you found and downloaded this totally awesome new theme called ‘frackyeahtheme’ and it doesn’t have any of those options? This is where child themes come in.

Making a child theme and putting it in the right place.

To make a child theme you need only two things. A style.css file, which you will use to change the CSS of the current theme. And a folder to put it in. This folder will go into the themes folder at http://www.example.com/wp-content/themes/

Step 1 make that style.css (and like it).

Open up whatever editor you use for code, Dreamweaver, Notepad, etc… and make a new document. Save it as style.css and put it somewhere where you can find it later. Seriously keep your shite organized.

At the top of your spanking new style.css document add this.

This header is what tells WordPress that this is a child theme for the frackyeahtheme that you downloaded. Most of this info should be self explanatory. The really important part is where it says Template: – this needs to be your Parent theme name. If you don’t know what it is, it is the name of the folder of the theme you are making a child for. In this case it’s frackyeahtheme. Moving on!

Step 2 add that folder like a rockstar
Using an FTP client like CyberDuck or FileZilla or whatever, navigate to http://www.example.com/wp-content/themes/ and you are going to create a new folder called frackyeahtheme-child. Boom! Now you are going to drag your spanking new style.css file into said folder. Bam! You just created a child theme.

The last thing you will have to do is go to the backend of your WordPress site and under Appearance > Themes you will find your new child theme. Turn that shite on! And you are in business.

Awesome! But we haven’t changed anything in the style.css file
Here the possibilities are endless. Within your child theme you can change anything you want. The brilliant part being is anything you don’t change will be dictated by the parent theme itself.

Let’s say you love everything about your new theme except you want to change the background image of your new theme along with some font stuff.

See that little @import rule? That needs to point to the parent theme’s style.css file. This will load in all of the rules from that theme. Then anything you list below that (all of your stuff) will override the rules in the parent theme.

IMPORTANT: You can’t put any rules ABOVE the @import it will break it and you’ll be sad.

Save that shite to your fancy frakyeahtheme-child folder and you will see the fruits of your labor.

 

Questions? Comments? Compliments? Leave a comment (I heart them).

Thoughts

  1. I love your new blog dev page/posts. You rock! Thanks for sharing your wisdom :).

Leave a Reply

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