What is a child theme?

A Child theme is simply an addition to the theme that you choose a your favorite WordPress theme that you want to use but you also want to change and personalise.

A child theme is a safe way to alter a theme as you never need to change the original files you simply override or add to these files.

Creating your first child theme is easy here are the first steps based on the Twenty Twelve theme this will not be any different for all WordPress themes.

In your folder structure for wherever you have installed WordPress you will need to navigate to wp-content/themes/twentytwelve you will see a file called styles.css

You will need to download this file and open it with a text editor I use notepad++ you can download it from here.

Once you have opened it you will see in the top of the file.

This is my edited version for Klick Design child theme.

The only part of this that matters to WordPress is the first line ‘Theme Name: Klick Design’ this is what will be picked up by WordPress.

What you need to do now is add the child theme, you start by creating a new folder in /wp-content/themes which will be called ‘your theme name’, my folder is called klick-design the name of your folder does not have exactly the same as the theme name but for obvious reasons should be similar, it should be lower case and if it is two words or more then add a hyphen.

Now there are two schools of thought some will tell you to add in the below just after the commented out */ and before you add any css styles, the way this works is any css added to the file will add to and or override the parent from Twenty Twelve.

For the second way you is to just copy the whole styles.css without the below rule and therfore creating a new style sheet of your own, for lots of changes this is the best way.

You can then add in a change to the style sheet for your child theme will look like below. so the whole styles.css will look like this.

Now inside this folder you can upload your styles.css file.

Inside your WordPress admin dashboard navigate to Appearance>Themes and there you should be able to select your new theme.Now you can safely alter any styling that you want….

Lets start styling to test.

Open your styles.css from the Twenty Twelve Theme go to line 184 you should see as below.

Copy it and paste it into your new styles.css.

Follow as below and remove as commented in your child theme.

Remove the .widget-title, just past the } closing bracket add the below css.

Add in the below changes.

 

If you then save and upload the altered styles.css file you will see the changes.

From    to 

If you want to alter other files then there is a great explanation of css and php child themes here.

 

Posts You Might Also Like...

• Moving Twenty Twelve Menu to below the Header Image
• Updating Geotheme
• SEO Content Seo Basics Part 4