How to Make Attractive Landing Page for WordPress Home Page

In this tutorial I am going to make landing page for your WordPress blog. In general landing page is where visitor can arrive or land through a link. Beautiful designed landing page always attracts the visitor as well as give a clear navigation about telling that what your site have, in one glance. This landing page will show the various categories of your sites on home page.  And show the thumbnails and titles for more recent posts of the concerned category. There are many methods can be used to show such functionality. Here I am using the more practiced method in WordPress  i.e. short code implementation for designing and making landing page for site home page. I shall try to make code as simple as possible. However, if you are a programmer you can use this code to make a more beautiful landing pages.

What our Landing page will going to show

We are making a landing page for our WordPress home page.  Basically this page will show the Different categories and in each category it will show the 4 most recent posts.  In first row it will show the one post and in another row it will show the remaining  three most recent post except first one.

How We Make Landing Page

We will perform following steps to make landing page for our worpress website home page.

i)    Writing a function in functions.php file

ii)    Writing some CSS code in style .css file

iii)    Implementing the function with short code. We also register this function for text widget for the case if someone has a special widget area in theme header or Footer to show some categories or posts (if required, otherwise ignore it). So here is our function. Add this function at end of your functions.php file which lies normally in your theme root directory.

//my fuction to get latest 3 posts for a category

function wpb_postsbycategory($params2 = array()) {

extract(shortcode_atts(array('cat_name' => 'default'), $params2));	//set parameters for shortcode category input

//	first query to retrive first most recent post 
                             $the_first_query = new WP_Query( array( 
                                'category_name' => $cat_name,
								'posts_per_page' => 1,
								)); 

                   if ( $the_first_query->have_posts() ) {  //check query is not empty  ?>
				   
                   
                   <div class="related_first_wrapper">
				   
     
	<?php // The Loop
	while ( $the_first_query->have_posts() ) {
		     $the_first_query->the_post();
			//check if post has thumbnail image (feature image)
			if ( has_post_thumbnail() ) { ?>
			
			
			<div class="relatedthumb_h_first">
			<a href="<?php echo get_the_permalink();?>"rel="bookmark"> <?php echo get_the_post_thumbnail($post_id, array(250, 200));?></a></div>
			<div class="cat_title"><h2><?php echo $cat_name; ?></h2> </div>
			
			<div class="relatedcontent_h_first">
			<a href="<?php echo get_the_permalink();?>" rel="bookmark"> <?php echo get_the_title(); ?></a>
			</div>
			
			
			
		    <?php	} else { 
			// if no featured image is found then show only titles  ?>
			
			<div class="relatedcontent_h">
			<a href="<?php echo get_the_permalink();?> rel="bookmark"> <?php echo get_the_title();?> </a>
			</div>
			
			<?php
			}
			}
			wp_reset_postdata(); ?>
			</div>
           </br>
	      <?php   }  ?>
              
            
			

   <?php /* Restore original Post Data */

    // wp_reset_postdata();
	 
 //***** Second wp query for 3 recent posts excluding first post
 
                           $the_query = new WP_Query( array( 
                                'category_name' => $cat_name,
								'posts_per_page' => 3,
								'offset'         => 1 
								)); 

                   if ( $the_query->have_posts() ) {  //check query is not empty  ?>
				   
                   <div class="relatedposts_h">
				   <ul>
     
	<?php // The Loop
	while ( $the_query->have_posts() ) {
		     $the_query->the_post();
			//check if post has thumbnail image (feature image)
			if ( has_post_thumbnail() ) { ?>
			
			<li>
			<div class="relatedthumb_h">
			<a href="<?php echo get_the_permalink();?>"rel="bookmark"> <?php echo get_the_post_thumbnail($post_id, array(100,70));?></a></div>
			
			<div class="relatedcontent_h">
			<a href="<?php echo get_the_permalink();?>" rel="bookmark"> <?php echo get_the_title(); ?></a>
			</div>
			</li>
			
			
		    <?php	} else { 
			// if no featured image is found then show only titles  ?>
			<li>
			<div class="relatedcontent_h">
			<a href="<?php echo get_the_permalink();?> rel="bookmark"> <?php echo get_the_title();?> </a>
			</div>
			</li>
			<?php
			}
			}
			wp_reset_postdata(); ?>
			
			</ul>
			</div>
	       <?php  } ?>
              
            


   <?php /* Restore original Post Data */

     //wp_reset_postdata();

      }
   // Add a shortcode
   add_shortcode('categoryposts', 'wpb_postsbycategory');

     // Enable shortcodes in text widgets
     add_filter('widget_text', 'do_shortcode');

    //end function

Explanation of the code

The code is pretty simple. In the start of function we set array variable to get category name as  input from shortcode. We are going to make two queries to retrieve the posts. 1st query will retrieve first recent post of that category and the second query will retrieve the three recent posts excluding first from that category. At the end of that function we register the function to use  via short code and if required through text widget also.

Now put following CSS Code at the end of your theme style .css file. Normally this file lies in your theme directory named  “style.css”. This code will add style and formatting for your new function.

/*style for first top portion*/
.related_first_wrapper {
width:95%;
height:auto;
position:relative;
margin-top:70px;
border-bottom:1px solid #CCCCCC;
overflow:hidden;}

.relatedthumb_h_first {
margin-left:2%;
height:200px;
width:250px;  }

.cat_title {
height:45px;
width:50%;
background-color: #6699FF;
border:2px  outset   #0066FF;
position: absolute;
top:0px;
left:250px;
border-radius:15px;
color:#FFFFFF; }

.cat_title h2{
padding-right:10px;
margin:10px;
font-size:1.25em;
margin-top:3px;
}

.relatedcontent_h_first { 
height:70px;
width:50%;
position: absolute;
top:70px;
left:250px;
border-radius:15px; }

.relatedcontent_h_first a { 
color:#3399FF;
text-decoration: none;
display:block; 
margin-left:2px;
font-size:0.85em;
font-style:italic;  
}

/*style for 2nd portion (bottom)*/

.relatedposts_h {
width: 100%; 
display: block; 
height:132px; 
font-size: 12px; 
margin-bottom:-16px; 
margin-top:-5px;
border-bottom:4px solid #0099CC;  
}

.relatedposts_h ul { 
width:620px; 
height:128px;}

.relatedposts_h ul li { 
width:145px;  
height:128px; 
float:left; 
display:block;  
line-height:14px;  }

.relatedthumb_h {
margin:0 auto;
height:70px; 
width:100px;  }

.relatedthumb_h a {
color :#333;
text-decoration: none;
display:block; 
margin-left:2px;  }

.relatedcontent_h { 
width:145px; 
height:25px; 
position:relative; 
left:0px; 
top:0px; }

.relatedcontent_h a {
font-size:1.1em;
margin: 0 0 0px 3px; 
color:#3399FF; 
padding-right:2px; 
text-decoration: none;     }

Implement Landing Page as Home Page.

Login to your WordPress site. Go to pages on dashboard and click the Add New. Give the title to your page suppose Home Page.  Write following lines in the page window. And publish the page.

[categoryposts cat_name="Blogging"]

 

Now go to the “Appearance” tab on dashboard and click “Customize”. Then click “static front page”. And click the radio button showing “A static page” now choose your page form dropdown under front page. And that’s it. Your new landing page will look like as given below:

landing page example tipsmoon

Conclusion:

We learn through an example that how to make landing page for our WordPress website’s home. We implement it with short code. This is a basic example. You can make changes to code to make your home page more beautiful and attractive.

 

 

Leave a Reply

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