WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to take advantage of in order to instantly change their website look.
In this tutorial we will explain the basic steps of how a WordPress theme works and also show you how to convert a PSD template into a WordPress theme. And for this tutorial, we’ll use Grunge blog layout we’ve created in the previous tutorial.
The completed Grunge WordPress Theme can be downloaded below.
First we’ll have a look at the PSD design as we have to check which part is necessary for the design. Main part of the template should be the following: background, header, menu, Left bar, footer, bullets arrow and others necessary.
At first open the design psd file and disable all the layers except the background one. Now save as a bg.jpg and save for web.
Now let’s move to our header area and select 343px using our “crop tool” and save this as header.jpg. Within the header the menu separation is require. From the main PSD file just crop the separator using 12×90 px dimension and save the new file as menu_line.jpg.
Now we’ll repeat the same process and select our footer “marquee tool”. Now select the strip bar to the bottom and above the copyright text and crop the section. Dimension should be 1200×228 px and save this as footerbg.jpg
Now let’s slice the Sidebar. First slice the search option background with a transparent sheet and save as searchbg.png, menu_bg.jpg, arrow.jpg, circle.png and others as well.
From the PSD design you have to create a static HTML+CSS template. Open your Dreamweaver and create an index.html and style.css file and save into a folder. Folder should be structured as shown below.
• Images (Folder)• Style.css• Index.css
Now let’s start writing the code for div/CSS based design. Put the html/xhtml and CSS are shown below.
This template is not ready yet to be converted into a wordpress theme. Before we start this conversion; we have to know some things about wordpress.
The wordpress default theme folder is (wp-content/themes/default), you will see many PHP and CSS files (That is called template file). Here is a one style.css file that defines the main structure and the style of the template.
index.php
header.php
sidebar.php
footer.php
The main stylesheet: This file must be attached with the Theme, and it will contain the header information of the theme.
The rtl stylesheet. This CSS file will be included automatically.
The main template file: It is the parent file of the template.
This file defines the comments template.
The front page template: it is only used for a static front page.
The home page is the front page by default.
This file is used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.
This one is used for individual page templates.
This page is required to show the categories.
This page is required when tag is needed.
To display the date/ and time we need this template page.
Used when a category, author, or date is queried. Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.
To perform a search we need this file inside the template.
To viewing a single attachment we require this file.
Image attachment template is used when viewing a single image attachment.
The 404 Not Found template is to display the error message, when the post is not found.
Now we need to group these files for wordpress.
Here is the index.php. This file holds all the files together. There are some wordpress keywords and syntax that are shown below.• get_header() / To call the header.php file• template_part( ‘loop’, ‘index’ ) /for the main content of the site• get_sidebar() / to call the side bar of the theme like sidebar.php• get_footer() / to call the footer.php file
All together the index.php file looks like this:-
Now in your index.html. Insert the line:get_header, get_sidebar, and get_footer in the same order as your layout structure.
Now as we know header.php is the file contains all the header information like meta style sheet, tag site title, the banner and the top menu.
Open the index.html file and cut from the top to <!–header end–> ends, paste it in a new PHP file, and save the file as header.php. Now place the following php code into the header.php file.
The orange color code is the dynamic menu portion for the theme. The main menu function for the wordpress is below.
<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’ ) ); ?> from this code the the menu is visible into the header and we can control this menu item with the css for any style.
After placing the code into the header.php and adding some style for the menu will bring you the following screen shot.
Now go to the index.html file and cut the site bar portion. Now paste this code inside the sidebar.php file same way as we have done in the header.php. After that place the following code for the side bar.
Now let’s start our footer. Again go to the index.html file, cut from the footer start <div id=footer> to the end of the </body></html> and paste it into a new footer.php.
And for the recent posts just use the query_post to display the 5 latest posts.
Everything is done. Now you need to check the index.php again to form the proper order.
Congratulations, you have just created an awesome wordpress theme. Now, login to your admin panel, go to the “Appearance tab> theme” you should be able to see the theme, activate and go to the front page to preview the theme.
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.
