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.

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.

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.

 

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.

 

 

Spread the love

Leave a Reply

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