How to Create a Child Theme for WordPress

WordPress themes are great and very versatile. However there are times when the themes are just not enough and you want to put your own style on it. To do this the right way, don’t edit the theme’s style.css files, but create a child theme w/ a css file that imports styling from the parent theme.

In this example, I’ll show you how to create a Child theme from the Twenty Twelve WordPress theme.

First thing you need to do is create a directory/new folder where your themes are located. Usually, it will be in your WordPress’s blog directory/wp-content/themes… Name your folder with a “-child” suffix; as you can see, I named mine twentytwelve-child.

Child theme directory

Next, create a css file named “style.css” and save it into the child theme folder. You can copy and paste the code below and save as “style.css” if you like:

/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Twelve Child Theme
Author: Author Name
Author URI: http://example.com
Template: twentytwelve
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-twelve-child
*/

@import url("../twentytwelve/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

The important aspects to note are “Theme Name”, “Template”, and “@import” section. Theme Name describes your theme; Template defines the parent theme template, and @import line imports the script from the parent’s style.css file.

Twentytwelve Worpress Child Theme

Now upload this file into the child theme directory you created earlier.

You can find and edit the Child’s theme style.css file in your WordPress admin, under “Appearance >> Editor”

Any code you input after the “theme customization starts here —- */” line should override your Parent Theme’s style. This is good practice since theme’s constantly gets updated and this protects all your style overrides from reverting back to the theme’s default.

For official codex, please visit http://codex.wordpress.org/Child_Themes

Create A Funkadelic Background

Final Result

Not sure when you’ll need this but this was something I learned a long time ago when first starting out with Graphic Design and Photoshop. Either way, it’s a cool and easy way to create a colorful background.

Step 1: Create a new Photoshop document. In this example I chose the web 640×480 template. Make sure you are in RGB color mode.

Create new document

Step 2: Select the Gradient Tool and choose the “Spectrum” preset. The one that looks like a rainbow.

Select the Spectrum Preset

Step 3: Go ahead and fill your first layer or background layer with that gradient.

Step 4: Create a new layer, using the same Gradient tool. This time use the “Difference” mode and start filling your new layer.

Keep Gradationing!!

Step 5: Repeat step 4 until your desired background is achieved. The crazier you get, the Funkier the result! Go Nuts!

Create A Soft Studio-Like Photo

Before & After

You ever wanted to turn a regular photo into one that looks like it just stepped out of a photo studio? Well I’ll show you how in this Photoshop Tutorial.

For this example, let’s use a nice display of fruit. Here’s the original photo:

Original Photo

Step 1: Open photo in Photoshop and create a duplicate layer of your photo

Step 2: Apply a “gaussian blur” on the copied photo or whichever photo is on the top layer.

Apply Gaussian Blur

Blur amount dependent on size of photo

Step 3: Apply an “overlay” on that same layer. You can fine tune your look by adjusting the opacity.

Apply Overlay

… and whoala! Now you have a soft looking version of the original photo:

Finished Photo