Category:Web Design Blocks

PSD to HTML Converted Home Page with HTML and WordPress Template

What will We Get:

  1. Using a psd file and will convert it to a simple html home page
  2. We are going to convert html template to WordPress page template.
  3. Live Demos of HTML and WordPress Templates
  4. Downloadable Source code of html template including PSD file
  5. Downloadable Source code of WordPress Page Template

What will We Use

WordPress, CSS, HTML, PHP

HTML home page Converted from PSD file

first of all we have a look on image of psd file given below.

home page psd image

Create html file named home1.html with your web editor and save following html structure to implement above psd design.

Now create a css file named home1.css and paste the below code in it. I have explained some important things in the comments among css code.


148.54 KB File Size
17 Downloads

WordPress Implementation via short Code

To implement above html template on wordpress home page. We will implement it with the use of short code on home page. Our shortcode will get input for title_link and categories names and show latest three posts against each category keeping the above html format. We have to do following steps.

    1. The above css with little modification is give below for implementing in WordPress. You have to write this style code into your theme css file. Most often, it is located in main theme folder with namestyle.css Also correct the image path in css according to your theme image folder
  1. Add following code into your themes’s functions file named function.php

Now you can use following shortcode on your home / front page to show the title link and 3 most recent posts from the category for which you have given the category slug.

In the above example the shortcode is use twice in two variation. One contain the title text and title link while second use only category slug. the code will produce following result as give below:

homepage-psd-converted

Leave a Reply

Your email address will not be published. Required fields are marked *