How to convert PSD to Wordpress Theme

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.

What You Need

·         Wampserver for localhost

·         Dreamweaver (Editor)

We already know how to slice images from PSD if you don’t have the knowledge how to slice image from PSD then firstly you learn my first article Convert PSD to HTML.

My wordpress theme look:

We already learn how to convert PSD to HTML so we are using those file for converting into wordpress theme.. 

Template folder:

 

Copy the all files and folders and  paste in to the your wordpress theme folder.

Have a look….

   

We have already index.html  file see html code have a look

 

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.

Basic structure of WordPress Theme 

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. 

Basic files of wordpress theme
index.php (The main template file: It is the parent file of the template.) header.php (header.php file contain the header part of the file) sidebar.php (sidebar.php file contain widget area) footer.php (footer.php file contain footer data) function.php(include all wordpress functions) style.css(The main stylesheet: This file must be attached with the Theme, and it will contain the header information of the theme.)
Now we need to group these files for wordpress. Header.php Sidebar.php Footer.php Remaining code is Index.php file. Separate the all files.. see picture below:-

Open style.css file in a dreamweaver and include define information about theme on the top look like this

/*  Theme Name: Computer Maintenance Theme Theme URI: http://codegyaan.com Description: A Computer Maintenance Theme is a Responsive Design Template and website for wordpress Version: 1.0 Author: Vaibhav Parashar Author URI: http://www.codegyaan.com/ */

Code Snippet

Note the list of Tags used to describe the theme. These allow user to find your theme using the tag filter. Here is the full list of the tags allowed.

If your are not define these

/* 

Theme Name: Computer Maintenance Theme

Theme URI: http://codegyaan.com

Description: A Computer Maintenance Theme is a Responsive Design Template and website for wordpress

Version: 1.0

Author: Vaibhav Parashar

Author URI: http://www.codegyaan.com/

*/

Content then your wordpress theme is not display in themes check your theme in themes option.

Login your wordpress account and go to Appearance -> themes.

Your theme show in theme option

Active your wordpress theme..

Now open header.php file in dreamweaver and include wordpress function tag for dynamic theme.

What means of these wordpress function:-

language_attributes();

Display the language attributes for the tag.
Builds up a set of html attributes containing the text direction and language information for the page.
 

bloginfo('charset');
bloginfo('name');
bloginfo('description');
bloginfo('stylesheet_url');
bloginfo('template_directory');


Displays information about your site, mostly gathered from the information you supply in your User Profile and General Settings WordPress Administration Screens. It can be used anywhere within a template file. This always prints a result to the browser. If you need the values for use in PHP, use get_bloginfo().



'charset' - Displays the "Encoding for pages and feeds" set in Settings > Reading. This data is retrieved from the "blog_charset" record in the wp_options table. Note: In Version 3.5.0 and later, character encoding is no longer configurable from the Administration Panel. Therefore, this parameter always echoes "UTF-8", which is the default encoding of WordPress. 

·  'name' - Displays the "Site Title" set in Settings > General. This data is retrieved from the "blogname" record in the wp_options table.

·  'description' - Displays the "Tagline" set in Settings > General. This data is retrieved from the "blogdescription" record in the wp_options table.

·  'stylesheet_url' - Displays the primary CSS (usually style.css) file URL of the active theme. Consider echoing get_stylesheet_uri() instead.

·  'template_url' / 'template_directory' - URL of the active theme's directory ('template_directory' was a local path before 2.6; see get_theme_root() and get_template() for hackish alternatives.) Within child themes, both get_bloginfo('template_url') and get_template() will return the parent theme directory. Consider echoing get_template_directory_uri() instead (for the parent template directory) or get_stylesheet_directory_uri() (for the child template directory).

wp_title();

The wp_title filter is used to filter the title of the page (called with wp_title()). This filters the text appearing in the HTML <title> tag (sometimes called the "title tag" or "meta title"), not the post, page, or category title.

 

get_template_directory_uri();

Using get_template_directory_uri() to enqueue a script with the correct path.

Wp_head()

The wp_head action hook is triggered within the <head></head> section of the user's template by the wp_head() function. Although this is theme-dependent, it is one of the most essential theme hooks, so it is widely supported.

 Body_class();
The "body_class" filter is used to filter the classes that are assigned to the body HTML element on the current page.

wp_nav_menu
Displays a navigation menu created in the Appearance → Menus panel.

Given a theme_location parameter, the function displays the menu assigned to that location. If no such location exists or no menu is assigned to it, the parameter fallback_cb will determine what is displayed.

If not given a theme_location parameter, the function displays
• the menu matching the ID, slug, or name given by the menu parameter, if that menu has at least 1 item;
• otherwise, the first non-empty menu;
• otherwise, output of the function given by the fallback_cb parameter (wp_page_menu(), by default);
• otherwise nothing.

Note: As of 3.5, if there are no menu items, no HTML markup will be output.

<?php wp_nav_menu( array( 'theme_location' => 'header_menu' ) ); ?>

For display menu into your theme firstly register navigation menu in function.php have a look..

// Register Navigation Menus

function custom_navigation_menus() {

$locations = array(

'header_menu' => __( 'Custom Header Menu', 'computer' ),

'footer_menu' => __( 'Custom Footer Menu', 'computer' ),

'mobile_footer' => __( 'Footer Menu on mobile devices', 'computer' ),

);

register_nav_menus( $locations );

}

// Hook into the 'init' action

add_action( 'init', 'custom_navigation_menus' );

now go to the Apprearance->Menus

and create the new menu type menu name my menu name is header menu

see below

Make pages for menus about us , services, news , quick contact.

// Register Theme Features(Register them setup)

// Register Custom Feed Links, Post Formats, Editor Style, Semantic Markup and Translation

function custom_theme_features()  {

global $wp_version;

// Add theme support for Automatic Feed Links

if ( version_compare( $wp_version, '3.0', '>=' ) ) :

add_theme_support( 'automatic-feed-links' );

else :

automatic_feed_links();

endif;

// Add theme support for Post Formats

$formats = array( 'status', 'quote', 'gallery', 'image', 'video', 'audio', 'link', 'aside', 'chat', );

add_theme_support( 'post-formats', $formats );

// Add theme support for custom CSS in the TinyMCE visual editor

add_editor_style( 'editor-style.css' );

// Add theme support for Semantic Markup

$markup = array( 'search-form', 'comment-form', 'comment-list', );

add_theme_support( 'html5', $markup );

// Add theme support for Translation

load_theme_textdomain( 'computer', get_template_directory() . '/language' );

}

Now open footer.php file in dreamweaver and add wordpress function.

Wp_footer();

The wp_footer action is triggered near the </body> tag of the user's template by the wp_footer() function. Although this is theme-dependent, it is one of the most essential theme hooks, so it is fairly widely supported. 

This hook provides no parameters. You use this hook by having your function echo output to the browser, or by having it perform background tasks. Your functions shouldn't return, and shouldn't take any parameters. 

Now open sidebar.php file in dreamweaver and add wordpress function.

Firstly register the sidebar in function.php cause without register dynamic sidebar is not working so we are going to register dynamic sidebar.. open function.php and register sidebar.

// Register Sidebar

function custom_sidebar()  {

$args = array(

'id'            => 'unique_id',

'name'          => __( 'right-sidebar', 'computer' ),

'description'   => __( 'This is the right hand sidebar ', 'computer' ),

'before_title'  => '<div class="widgettitle">',

'after_title'   => '</div>',

'before_widget' => '<li id="%1$s" class="widget %2$s">',

'after_widget'  => '</li>',

);

register_sidebar( $args );

}

// Hook into the 'widgets_init' action

add_action( 'widgets_init', 'custom_sidebar' );

}

After register sidebar open sidebar.php and add dynamic sidebar function into sidebar.php..

<?php 

            if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('right-sidebar' )): 

?>

 <?php endif; ?>

This function dynamically added the sidebar..

Now we are going to add wordpress function into index.php file and include header, footer, and sidebar into index.php file. What is means of get_header(); , get_sidebar(); and get_footer(); function see below..

Get_header();
Includes the header.php template file from your current theme's directory. If a name is specified then a specialised header header-{name}.php will be included. 

If the theme contains no header.php file then the header from the default theme wp-includes/theme-compat/header.php will be included. 

Get_sidebar();

Includes the sidebar.php template file from your current theme's directory. 

If a name ($name) is specified then a specialized sidebar sidebar-{name}.php will be included. If sidebar-{name}.php does not exist, then it will fallback to loading sidebar.php. 

If the theme contains no sidebar.php file then the sidebar from the default theme wp-includes/theme-compat/sidebar.php will be included. 

Get_footer();

Includes the footer.php template file from your current theme's directory. if a name is specified then a specialised footer footer-{name}.php will be included. 

If the theme contains no footer.php file then the footer from the default theme wp-includes/theme-compat/footer.php will be included. 

After completing this part go to wordpress and open your wordpress account

Now go to Posts tab see below..

Click on Add New

Now Post your content

And make new category if you don’t make category then post will be add default in uncategorized category see it below:-

And publish post.. our original wordpress theme design given below so we adjust content and function for design same as theme..

So some post are remaining welcome, schedule and contact so goto post tab and create remaining post and make new category name like content select content category for all three posts.

After creating the Posts goto index.php file make function for fetching the post into theme template look…

This function fetching the all post into theme template see theme hows look

That time our post is not show as a orginal theme cause 

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

           

                <?php the_content(); ?>

           

<?php endwhile; ?>           

            <?php endif; ?>

Function fetch all post into theme but latest news and content category post like welcome, schedule, and contact is design is different so change in this function define category in this function and set the content in theme how see below:-

See we define condition in top post give the condition if post under category 44 then show only latestnews post and in the bottom post define if the post under category 45 then show only category 45 posts.. how to check category id number simple goto Posts -> categories and mouseover on the category then link is shown below show the category and tag id.. 

After completing the post part then check your wordpress theme.. theme look like this..

We’re done, Finally!

Now save your file and open this file in your browser..

So please tell me How was the tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below.

If you liked this tutorial kindly share it with your friends. Thanks! :)