A beginners guide to convert PSD to WordPress using a Child theme
Most general all-purpose WordPress themes created today have many similar features, like a search box, comments, dropdown menus, etc., with the only difference being the way the final rendering looks and the way the content inside is presented. There are more than a million of such themes available freely on the web today, but most fall short when it comes to creating a specialized website. Specialized themes on the other hand have the desired functions but do not have the desired look. Thus it becomes very hard to find a good theme that has both- looks and functions. Other options that remain are to either have a create a custom WordPress theme from the scratch or modify an existing theme to match the desired design.
Creating custom WordPress themes from scratch is a hard and complicated process
Whereas modifying a theme directly may render the original theme unusable for future use. If you modify the theme, when the next time it’s updated, the modified functions disappear. Fortunately, WordPress has another feature that would come to your rescue in this situation- Child themes. Converting PSD to WordPress child themes would give you all the functionality of the parent theme along with allowing you to change the look and the design of the theme or add any additional functionality to it without actually affecting the parent theme.
Here, we give you a step by step process for creating a custom child theme for your WordPress site. For this tutorial we are using Twenty Eleven theme that comes by default with the WordPress software.
First Step: – Create the child directory
The first step in creating any custom theme or a child theme is by creating a new folder in the theme folder of WordPress. You can name the folder whatever you want. However, it’s advisable to give the same name to the folder you wish to give to your theme. For finding out more about the structure of a WordPress folder refer to this post.
Changing the look using Style.CSS
The next and the most important step in creating a child theme, is by creating the style.css file in your child theme folder. You can create a child theme only using a single additional folder (along with the parent theme folder obviously) with a style.css file in it. Just copy and paste the following code in a new text document and save it as style.css
/*
Theme Name: Twenty Eleven Child
Theme URI: http: //wordpressintegration.com/
Description: Child theme for the Twenty Eleven theme
Author: your name
Author URI: http: //wordpressintegration.com/
Template: twentyeleven
Version: 0.1.0
*/
@import url(“../twentyeleven/style.css”);
If you will go into your WordPress dashboard you will see that you now have a new theme that is named twenty eleven child in the theme page. You can activate it and it will work perfectly
So, what just happened here and how is it beneficial for us? The first section of style.css that is in comments declares the Theme name, author, a description about theme, version and related URL information. This section is from where the WordPress software takes the necessary values for displaying theme information on the dashboard so this section is important.
@import url(“../twentyeleven/style.css”) CSS rule imported the Twenty Eleven theme and its style.css in the child theme and is the anchor CSS rule that connects the parent and the child theme. It’s important that no rule comes before @import rule as anything declared above will become null and void.
Now paste the following after @import rule
a{ color: #0099FF; }
body
{
background: #727D82;
}
header#branding
{
border-top: 2px solid #E7DFD6;
background: #00297A;
color: #0099FF;
}
header#branding h1, header#branding h2, header#branding a
{
color: #E7DFD6;
}
Noticed the change?
This is possible because of a great CSS rule that says that the if two rule declarations having same weight, origin and specificity are declared in a same compiled document, then the one that is declared later takes precedence. Now since we have declared @import before any other rule, the compiler first loads the parent theme’s rules then reads the CSS rules in the child theme style.css. Since child theme’s rules are declared later, they take precedence over parent theme’s rules.
Same way you can change any aspect of the website you like by adding the desired rule to the child style.css and customize the look of your site as you like.
Adding a new function to your site
In addition to style.css, you can also create PHP template files. The difference being that the additional function in these PHP template files adds-on to the parent PHP function files not override it as in the case of CSS. Also unlike CSS files the child PHP files loads before the parent PHP.
After style.css, the most used template in a child theme is function.php that is used to create custom types, custom sidebars, menus, thumbnails, etc. it is basically a plugin file that can be used to manually create functionalities for which you may have to download and install plugins. Thus, it is mainly used by PHP coders to add additional features to their theme. For example, if you want to add a custom function in your child theme just create a file named functions.php and write the code in following syntax
<?php
function Function_name() {
// do something
}
?>
Now themes like twenty eleven through a clever use of if ( ! function_exists( ‘function name’ ) ) statement are made in such a way that you can override a prebuilt function through your custom function, but not every theme is built in such a way and thus special care must be taken when naming an additional function.
Conclusion
Using child theme has a number of advantages. The most important being that the use of child theme allows you to automatically update your parent theme without having to re perform all the required changes to the new theme to make it work like the previous version. It is also one of the best methods for creating custom themes from a scratch especially if you want your theme to regularly adapt to the latest changes in WordPress.
