Hello friends, I am back with the second installment of WordPress theming series. So the last article gave you a basic idea about WordPress, its theming and I gave you the name of Child Theme. Today I’ll try to explain what a child theme is and also I will help you create a child theme of default twentyeleven theme.

What is a Child Theme?

A Child Theme is a small theme which is dependent on its parent theme for all the basic functionality and adds a special functionality or some kind of modification to itself. As the WordPress Codex [1] says “A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme”. To create a custom child theme (or a custom theme) you will need a few tools and also need to have basic knowledge of HTML [2] & CSS [3]. If you want to customize or create a different functionality, you will need basic knowledge to PHP [4] .

Which tools so you need?

You will need some special tools to create or modify a theme or to create a child theme.

  1. Basic text editor or An IDE(Notepad++|PDT)
  2. Image editor

How to create a Child Theme?

First you have to select a theme. For this tutorial/article let’s use the twentyeleven theme. Let’s create a directory called “techild”, this will be the home of your theme files. Now we need to declare this is a child theme. It’s simple just create a file called “style.css” and add the following content.

/* Theme Name: twentyeleven Child 
Theme URI: http: //aiblogs.com/ 
Description: Child theme for the twentyeleven theme 
Author: Asif Chowdhury 
Author URI: http: //aiblogs.com/about/ 
Template: twentyeleven 
Version: 0.1.0 */ 

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

So what does this code means?

With “/**/” this symbols we write a comment in CSS & PHP and WordPress uses it to get information of any theme or plugin.

Theme Name: twentyeleven Child

This declares the name of the theme.

Theme URI: http://aiblogs.com/

This is the url to the theme help or support pages.

Description: Child theme for the twentyeleven theme 

This is the description of the theme.

Author: Asif Chowdhury

This is the author’s name.

Author URI: http: //aiblogs.com/about/

This is the author’s url.

Template: twentyeleven

This is the one of the most important information of here. It is declaring which is the parent theme directory. It must be exactly same as the parent theme directory which we are creating the child theme for.

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

This is the second most important line of these codes. It is actually the only line of code we are writing. It is importing the default styles of the theme.

Now we are going to write some style information to override the default style.

#access { 
background: #083856; 
background: -moz-linear-gradient(#061016, #0A5C90); 
background: -o-linear-gradient(#061016, #0A5C90); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#061016), to(#0A5C90)); 
background: -webkit-linear-gradient(#061016, #0A5C90); 
float:none; 
text-align:center; 
line-height:0; } 

#access ul { 
display:inline-block; } 

#access li:hover > a, #access a:focus { 
background: #0c517c; 
background: -moz-linear-gradient(#0f2838, #0d71b1); 
background: -o-linear-gradient(#0f2838, #0d71b1); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0f2838), to(#0d71b1)); 
background: -webkit-linear-gradient(#0f2838, #0d71b1); 
color: #EEEEEE; } 

#branding .only-search + #access div { padding-right: 0; }

Now I’ll explain what I did in with this CSS codes. We got the CSS selectors from the parent theme and added our customization. I have center aligned the navigation and changed its background color a bit and that’s it. I did not change any core element of the theme. But if you want to change any of those just get a copy of the file which you want from the parent theme directory and put it on your child theme’s directory. Now you can change it according to your need.

Let me show you the footer as an example. I have changed the footer to show the following “© 2012 Twenty Eleven. All Rights Reserved.” Instead of “Proudly powered by WordPress”. Here is how I did it. Find the following codes.

<?php do_action( 'twentyeleven_credits' ); ?> <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>

And replace it with the following.

<div>&copy; <?php echo(date("Y")); ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a>. All Rights Reserved.</div>

And it’s done. It’s that simple. Here is the explanation of what the replacement code is doing.

<?php echo(date("Y")); ?>

This is displaying the current year.

<?php echo esc_url( home_url( '/' ) ); ?>

This is providing the home url of the WordPress installation.

<?php bloginfo('name'); ?>

And finally this is showing the name of the site.

That’s it. This wraps up the second installment of the WordPress Theming series. My next post will be about Basic Theme development. If you have any questions don’t hesitate to ask. Don’t forget come back later to read my next article, you can also subscribe to AI Blogs to get notified as soon as I write a new article. Finally comment and suggestions are always welcome. So until next time adios!


References:

  1. WordPress Child Theme Documentation
  2. WordPress Download(.zip|.tar.gz)
  3. Download the child theme we just created(.zip|demo)
  4. For the basic knowledge of html, css, php go to w3schools

{ 0 comments }

What is WordPress and how to develop themes for WordPress

September 12, 2012

Developing themes with WordPress is a quite easy task, if you know the whole procedure. This is the first installment of a few articles which will contain all the basic processes of building a working theme for WordPress. First of all we have to understand what WordPress is and why in the face of earth […]

Read the full article →

My First Hello to The World!

July 19, 2012

Before starting a blog of my own, I asked myself,” What really is a blog?” First thing came in to my mind is, “It is a log, which contains biographical contents of the writer”. In plain and simple terms, the writer writes a biographical log, which is said in short term as blog (Bio + […]

Read the full article →