Everything about WordPress Child Themes

/in , /by

As more and more WordPress users now customize their themes and only few users like the themes in default mode we will learn in this article how to create a Child Theme from a WordPress Theme.

Why use a Child Theme?

You will save yourself from a lot of headache by creating a child theme. Child theme allows you to make changes without affecting the original theme, which will in turn make it easier to update your parent theme to latest versions without loosing all the changes you made. In the child theme you create a completely separate set of files that you can use to customize the theme without affecting the original theme. This way you will make sure that your original theme is intact as you are not making any changes to it.

Getting Started

  1. Create a new folder/directory in your themes folder. This new folder will contain you child theme. For our reference we will create a child theme of WordPress Twenty Fourteen Theme.
  2. In the child theme folder create a stylesheet file named style.css. This is the only required file for a Child Theme. Open the newly creates file and put the following code at the top.

    You can make changes to the above code according to your suitability. Only Theme Name and Template are required, all the rest are optional. The Template value is the name of the directory of the parent theme.

  3. Go to your website’s dashboard, and go to Administrator Panel -> Appearance -> Themes. Here you will now see your newly create theme among the list of other themes. Activate the Child Theme.

Editing the functions.php File

The functions.php of a child theme does not override its counterpart in the parent them unlike style.css. It is loaded in addition to the parents function.php not in place of it. Your child theme’s functions.php file should start with a php opening tag and end with a php closing tag. In between, you can add your desired php code.

 For example, you want to add a new function to you theme, the fastest way is that you open your theme’s function.php and add the new function. But now if you update your theme the new function added by you will be removed. The better way is that you add the new function toy your child theme’s function.php. 

Editing Other Templates

If you want to make structural changes to your theme by changing PHP template files, this can be done by replacing the file entirely with a new one  in your child theme. Your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.

How-To: Create a WordPress Theme in 5 minutes

/in , /by

It is fairly easy to create a WordPress Theme. A few things before you need a template are:

  1. Create a layout of your blog by figuring out what is to be placed where.
  2. Create a HTML layout based on the above layout.

A sample layout which we are using in this tutorial can be seen in the image here.theme-layout

Right Then !!! We are ready to proceed

The files necessary for a theme to function properly in WordPress are:

  1. header.php -> Header
  2. index.php -> Content glued with header, sidebar and footer.
  3. sidebar.php -> Sidebar
  4. footer.php -> Footer
  5. style.css -> CSS

Now we will write some sample code for all the default files

The header.php

   

Basically, this is simple HTML code with a single line containing a php code and a standard WordPress function. In this file you can specify your meta tags such as the title of your website, meta description and the keywords for your page.

Right after the title the line we add

. This tells WordPress to load the style.css file for the theme. It will handle the styling of your website. The part of the line is a WordPress function that loads the stylesheet file.

Next, we have added the beginning of a “div” with class wrapper which will be the main container of the website. We have set class for it so we can modify it via the style.css file.

After that we have added a simple label HEADER wrapped in a “div” with class “header” which will be later specified in the stylesheet file.

The index.php file

Main Area

 

Posted on

 

 

The code in this file begins with  which will include the header.php file and the code in it in the main page. It uses an WordPress function to do this. Then we have placed a Main Area text to indicate which section of your theme is displayed in this area.

The code next to the  function checks whether your WordPress installation has posts to publish or not. If it has posts, they are displayed.

After this we will include the sidebar.php file with this line –. In this file you can display your post categories, archives etc.

After this line, we insert an empty “div” that will separate the Main Area and the Sidebar from the footer.

Finally, we add one last line – which will include the footer.php file in your page.

The sidebar.php file

In the sidebar.php we will add the following code:

In the sidebar.php file we use internal WordPress functions to display the Categories and Archives of posts. The WordPress function returns them as list items, therefore we have wrapped the actual functions in unsorted lists (the tags).

The footer.php file

We have added these lines to the footer.php file:

With this code we add a simple FOOTER label. You can also add additional links in the footer.

The style.css file

The style.css will handle the styling of the theme. Add the following lines to the style.css file to create some styling for the theme:

This simple css file sets the basic looks of your theme. The theme will look something like the image here:

theme-sample1
So after doing all this we have basic theme functional.