1. Home
  2. Web Designing
  3. PSD to HTML Converted Home Page with HTML and WordPress Template
homepage-psd-converted

PSD to HTML Converted Home Page with HTML and WordPress Template

web-admin September 30, 2018

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.

<!-- title link -->

<div class="Rectangle_1">

<div class="top_title"><a href="#">Home Page Demo</a></div>

<div class="Rectangle_2"></div>

</div>

<!-- main posts area contianer for a category -->

<div class="posts_container">

<div class="Rectangle_6_png">

<h4 class="cat_title">Category-1</h4>

</div>

<!--1st place holder -->

<div class="ul_post_wrapper">

<div class="ul_pic_container"><img src="img/jacket.jpg" alt=""></div>

<div class="Rectangle_3_png"></div>

<div class="Rectangle_3">

<div class="post_title"><a href="#">This is the title of the post being displayed</a></div>

</div>

</div>

<!--2nd place holder -->

<div class="ul_post_wrapper">

<div class="ul_pic_container"><img src="img/jacket.jpg" alt=""></div>

<div class="Rectangle_3_png"></div>

<div class="Rectangle_3">

<div class="post_title"><a href="#">This is the title of the post being displayed</a></div>

</div>

</div>

<!--3rd place holder -->

<div class="ul_post_wrapper">

<div class="ul_pic_container"><img src="img/jacket.jpg" alt=""></div>

<div class="Rectangle_3_png"></div>

<div class="Rectangle_3">

<div class="post_title"><a href="#">This is the title of the post being displayed</a></div>

</div>

</div>

</div>

<!--end category posts container -->

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.

/*psd to html converted home page block */

/*top title link cover boxes */
.Rectangle_1 {
border-width: 4.167px;
border-color: rgb(181, 181, 181);
border-style: solid;
width: 96%;
margin:2% 2% 0 2%;
height: 101.666px;
position:relative;
}
.Rectangle_2 {
border-width: 4.167px;
border-color: rgb(181, 181, 181);
border-style: solid;
background-color: rgb(181, 181, 181);
width: 30%;
height: 101.666px;
margin-top:-4.167px;
}
/*text style for title link */
.top_title {
font-size: 2.3em;
font-family: "Arial";
font-weight: bold;
text-align: center;
-moz-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
-webkit-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
-ms-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
height: 46px;
position:absolute;
right:2%;
left:150px;
}
.top_title a {
color: rgb(25, 31, 153);
text-decoration:none;
}
/*image background of title*/
/*image path should be set according to your theme css and image folder */
.Rectangle_6_png {
background-color: rgba(201, 195, 195, 0.82);
width: 450px;
height: 102px;
margin:90px 0 0 -4.167px;
background-image: url("img/home-page-title_03.png");
}
/*Posts container area */
.posts_container{
width:96%;
margin:0 auto;
max-width:1024px;
}
.ul_post_wrapper{
margin:50px 5% 2% 0;
width:250px;
float:left;
}
/*image container area */
.ul_pic_container {
border-width: 4.167px;
border-color: rgb(199, 196, 191);
border-style: solid;
width: 100%;
height: 155.666px;
margin:0 0 20px 0;
/*box-sizing to draw border inside instead of outside of div */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*width is 100% for below 3 classes as they should change according to 'ul_post_wrapper' class*/
.ul_pic_container img {
width:100%;
height:100%;
}
/*post title box */
.Rectangle_3 {
background-color: rgb(176, 202, 233);
width: 100%;
height: 67.666px;
margin-top:-5px;
}
/*post title box top edge image design */
/*image path should be set according to your theme css and image folder */
.Rectangle_3_png {
background-image: url("img/Rectangle3.png");
width: 100%;
height: 74px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/*text style for category */
.cat_title {
font-size: 48px;
font-family: "Arial";
color: rgb(158, 109, 65);
font-weight: bold;
line-height: 2.2em;
text-align: center;
-moz-transform: scale(0.7, 1);
-webkit-transform: scale(0.7, 1);
-ms-transform: scale(0.7, 1);
height: 46px;
}
/*text style for post title */
.post_title {
font-size: 20px;
font-family: "Arial";
font-weight: bold;
line-height: 1.2;
text-align: center;
-moz-transform: scale(0.7, 1);
-webkit-transform: scale(0.7, 1);
-ms-transform: scale(0.7, 1);
height: 43px;
}
.post_title a {
text-decoration:none;
color: rgb(51, 102, 153);
}

[u_addbutton title1=’View HTML Demo’ link1=’http://preview.ulookwebdesign.com/home1/’]


[u_addbutton title1=’Download Sample HTML Code’ link1=’https://ulookwebdesign.com/product/sample-html-source-code-category-view-including-psd/’]

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
/*psd to html converted home page block */

/*top title link cover boxes */

.Rectangle_1 {
border-width: 4.167px;
border-color: rgb(181, 181, 181);
border-style: solid;
width: 96%;
margin:2% 2% 0 2%;
height: 101.666px;
clear:both;
position:relative;

}
.Rectangle_2 {
border-width: 4.167px;
border-color: rgb(181, 181, 181);
border-style: solid;
background-color: rgb(181, 181, 181);
width: 30%;
height: 101.666px;
margin-top:-4.167px;
}
/*text style for title link */
.top_title {
font-size: 2.3em;
font-family: "Arial";
font-weight: bold;
text-align: center;
-moz-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
-webkit-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
-ms-transform: matrix( 0.7,0,0,0.80229411095443,0,0);
height: 46px;
position:absolute;
right:2%;
left:150px;
}
.top_title a {
color: rgb(25, 31, 153);
text-decoration:none;
}
/*image background of title*/
/*image path should be set according to your theme css and image folder */
.Rectangle_6_png {
clear:both;
display:block;
background-color: rgba(201, 195, 195, 0.82);
width:450px;
height:102px;
margin:90px 0 0 -4.167px;
background:url("../images/home-page-title_03.png") no-repeat ;
}
/*Posts container area */
.posts_container{
width:96%;
max-width:1024px;
margin:0 2% 450px 2%;

}
.ul_post_wrapper{
margin:50px 5% 2% 0;
width:250px;
float:left;
}
/*image container area */
.ul_pic_container {
border-width: 4.167px;
border-color: rgb(199, 196, 191);
border-style: solid;
width: 100%;
height: 155.666px;
margin:0 0 20px 0;
/*box-sizing to draw border inside instead of outside of div */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
/*width is 100% for below 3 classes as they should change according to 'ul_post_wrapper' class*/
.ul_pic_container img {
width:100%;
height:100%;
}
/*post title box */
.Rectangle_3 {
background-color: rgb(176, 202, 233);
width: 100%;
height: 67.666px;
margin-top:-5px;
}
/*post title box top edge image design */
/*image path should be set according to your theme css and image folder */
.Rectangle_3_png {
background-image: url("../images/Rectangle3.png");
width: 100%;
height: 74px;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/*text style for category */
.uh_cat_title {
font-size: 48px;
font-family: "Arial";
font-weight: bold;
-moz-transform: scale(0.7, 1);
-webkit-transform: scale(0.7, 1);
-ms-transform: scale(0.7, 1);
height: 46px;
min-width:633px;

}
.uh_cat_title a {
color: rgb(158, 109, 65);
}

/*text style for post title */
.post_title {
font-size: 1.3em;
font-family: "Arial";
font-weight: bold;
line-height: 1.2;
text-align: center;
-moz-transform: scale(0.7, 1);
-webkit-transform: scale(0.7, 1);
-ms-transform: scale(0.7, 1);
height: 43px;
}
.post_title a {
text-decoration:none;
color: rgb(51, 102, 153);

}
  1. Add following code into your themes’s functions file named function.php
//function for Home Categories shortcode
function uhstar_home_categories($hvalues = array()) {

//set default values for input shortcode
$uh_args=(shortcode_atts(array(
'title_link' =&gt; '#',
'cat_slug' =&gt; 'default',
'title_text'=&gt;'default'
), $hvalues));

//assign values from shortcode input
$h_title_link = esc_attr( $uh_args['title_link'] );
$h_cat = esc_attr( $uh_args['cat_slug'] );
$h_title_text = esc_attr( $uh_args['title_text'] );

//start buffering
ob_start();

//check if title link is given value in shortcode
if($h_title_text!='default'){
?&gt;
<!-- title link --></pre>
<div class="Rectangle_1">
<div class="top_title"></div>
<div class="Rectangle_2"></div>
</div>
<pre><!--?php } if($h_cat!='default'){ //Get category name from slug $catObject = get_category_by_slug($h_cat); $categName = $catObject-&gt;name;&lt;br ?--> //Get Category ID from category name
$categ_id = get_cat_ID( $categName);
//Finally Get URL Link from cat ID
$categ_link = get_category_link($categ_id);
?&gt;

<!-- main posts area contianer for a category -->
<!-- Give title and link to category --></pre>
<div class="posts_container">
<div class="Rectangle_6_png">
<div class="uh_cat_title"></div>
</div>
<!-- set query for getting posts by category slug --> <!--?php $the_query = new WP_Query( array( 'category_name' =&gt; $h_cat,&lt;br ?--> 'posts_per_page' =&gt; 3 )); if ( $the_query->have_posts() ) { //check query is not empty ?&gt; <!--?php // The Loop while ( $the_query-&gt;have_posts() ) {&lt;br ?--> $the_query-&gt;the_post(); ?&gt; <!--posts place holder -->
<div class="ul_post_wrapper">
<div class="ul_pic_container"><!--?php &lt;br ?--> $image_feature1 = wp_get_attachment_image_src(get_post_thumbnail_id(), 'archive-500x300'); $image_alt1 = get_post_meta(get_post_thumbnail_id(), '_wp_attachment_image_alt', true); echo '<img src="'.$image_feature1[0].'" alt="'.$image_alt1.'">'; ?&gt;</div>
<div class="Rectangle_3_png"></div>
<div class="Rectangle_3">
<div class="post_title"></div>
</div>
</div>
</div>
&lt;pre&gt;&lt;!--end category posts container --&gt;
&lt;!--?php } //end if&amp;lt;br ?--&gt; //clear buffering and show result
return ob_get_clean();
wp_reset_postdata();
}
// register shortcode to use in posts and pages
add_shortcode('ushowcat', 'uhstar_home_categories');

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.

[ushowcat title_text='Title1' title_link='http://www.example.com' cat_slug='Blogging'][/ushowcat]

[ushowcat cat_slug="web-design-n-code"][/ushowcat]

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 *

Go to Top