What will We Get:
- Using a psd file and will convert it to a simple html home page
- We are going to convert html template to WordPress page template.
- Live Demos of HTML and WordPress Templates
- Downloadable Source code of html template including PSD file
- 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.
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.
-
- 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 name
style.css
Also correct the image path in css according to your theme image folder
- 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 name
/*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); }
- 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' => '#', 'cat_slug' => 'default', 'title_text'=>'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'){ ?> <!-- 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->name;<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); ?> <!-- 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' => $h_cat,<br ?--> 'posts_per_page' => 3 )); if ( $the_query->have_posts() ) { //check query is not empty ?> <!--?php // The Loop while ( $the_query->have_posts() ) {<br ?--> $the_query->the_post(); ?> <!--posts place holder --> <div class="ul_post_wrapper"> <div class="ul_pic_container"><!--?php <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.'">'; ?></div> <div class="Rectangle_3_png"></div> <div class="Rectangle_3"> <div class="post_title"></div> </div> </div> </div> <pre><!--end category posts container --> <!--?php } //end if&lt;br ?--> //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: