Tuesday, June 7, 2011

Convert PSD to Wordpress theme

It is the beginner tutorials for converting PSD or Photoshop Design to Wordpress themes or Wordpress template.

For writing a wordpress themes at first 2 PHP file need one is index.php and another is style.css.
For naming your themes write on top of your style.css file.
Such this way....


/*
Theme Name:Name of your theme
Theme URI: Url of current location of your theme
Description: Simple description here
Author: Your name here
Version: 1.0 (theme version number )
License: GNU General Public License
License URI: license.txt
Tags: list of tag separated by comma(,).
*/


Then you need to slice your psd by Photoshop slice tool as per your themes layout.

And Write your HTML code into index.php file as per your PSD design ..You can code html as Fully DIV based because It is more useful then table based html coding.
Also write your CSS code for html tag in your style.css file.

After completing the full html coding from PSD then make it wordpress code using wordpress loop,menu,widget,short code etc ..

Here you need to create function.php for functioning your widget,navigation,custom excerpt,short code,admin option for this themes.

After finishing index.php file then you can divide into header.php,footer.php,sidebar.php & index.php (content part) as par your layout in psd design.

Then copy index.php into page.php to display all wordpress page . you can code several page template if needed.

Then copy index.php into single.php for showing blog post ..

Then copy index.php into search.php,archive.php,category.php & customize those file as per your requirement.

You need to create one 404.php page for missing url of your site.

After your themes complete then copy it to wordpress themes directory. then activate your themes from wordpress admin panel.

It is just briefing to convert psd to wordpress themes ..In future I will create a complete tutorials with an example PSD file.

No comments:

Post a Comment