Creating A Landing Page In WordPress III — Coding And Implementation

This is the last post in the series Creating a landing page in WordPress Let’s see where we are.

  1. Creating a landing page in WordPress I — Introduction
  2. Creating a landing page in WordPress II — Architecture and Design
  3. Creating a landing page in WordPress III — Coding and Implementation

WordPress doesn’t allow inline php in the page content. Thus our landing page is going to be based on a custom wordpress template. There’s an extension called Exec-PHP but it gave me scary warnings and had conflicts with certain things. The foolproof and clean way is to hardcode the landing page into a template. So we will create our basic template first. Navigate to the the directory of the theme that WordPress is set to use. Create a php file (possibly named landing.php) containing the following

<?php
/*
Template Name: Landing Page
*/
?>

Now when you create a new page in WordPress, down at the bottom under the “Page Template” drop-down you will see the “Landing Page” option. Select that and create a blank page with a suitable title for the landing page. Use the “Preview this Page” option to preview the page and see the changes if you do not want to publish it. We will come back to this page to see the changes as we implement the code in the landing page template.

You now have the blank landing page. All we need to do now is to pull content we want to showcase. Open up landing.php template you created earlier for editing. We will do all our changes here and will preview the landing page to see the changes taking effect. The heart of the WordPress system is the loop. Since we are not going to be posts like usual our loop is going to be different. The first function we will put to use is get_posts() which is meant specifically to create multiple loops. We will use this and pass it our criteria as the arguments for the posts we want to display. For specific syntax and usage please refer to the template tag get_posts() at the codex.

Posts by category

<ul>
<?php
rewind_posts();
global $post;
$myposts = get_posts('numberposts=5&orderby=date&order=DESC&category=1');
foreach($myposts as $post) :
?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>

The line get_posts(‘numberposts=5&orderby=date&order=DESC&category=1’) will pull 5 posts (numberposts=5) and sort them by date (orderby=date) in the descending order (order=DESC) from category number 1. You can find the ID for a particular category by going to WordPress dashboard > manage > categories  and hovering over the category name. The ID is a part of the URL and will appear in the status bar. You can replace category=1 with category_name=<yourcategoryname> if you want to pull the posts by the category name. But this may break if you rename the category later. The rewind_posts() I find ismore of a security measure here because it worked for me even without it. But this is recommended when you have multiple loops on the same page as in our case. So I left it there for the sake of stability.

Time to get creative and modify get_posts('numberposts=5&orderby=date&order=DESC&category=1');to pull content from other categories.

Recent Posts

If you omit &category=1 it will pull the latest posts. If you like you can have a block displaying a list of 5-10 latest posts.

Popular Posts

This is a tricky thing. If you refer back to part 2 of this series and review the section briefing about aidaRSS you should be able to compile a list of 5-10 best posts you want to highlight. There are plugins to pull out popular posts but none as customized and tailored for this purpose. You can create a list of these posts and show them in an ordered list with a markup similar to the above.

Featured post

For this one we are going to use the query_posts() function. We will use this to display a particular post with excerpt or the content as per your requirement. The post will stay there as long as you like and may be later change it to another post which you want to feature.

Arranging content into tabs

For this I use the DOMTab script. Download the DOMTab script and upload to a suitable directory on the server. In the theme file header.php include the css link and the javascript link. This will make sure that you can call and use this tabbed interface from any page. I use this on my 404 error pages as well to display the tabbed widget to let visitors comb through links of their interest. I’ve installed domtabs within a subdirectory of my theme and call the scripts in the header as follows.

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/lib/domtab/domtab.css" type="text/css" media="screen" />
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/domtab/domtab.js"></script>

Now you must place these loops in one of the tabs and have a tabbed widget like the Showcase on the homepage here at Convertica. To make this your homepage create a blank page named “Blog” (Your blog page will show up here instead of homepage). Go to WordPress dashboard > Reading and set the front page to display the landing page you created and the blog to be shown at the blank blog page you created.

In this last post in the series we learnt how to implement our custom landing page in WordPress. Also we saw how we can make this landing page the main page. The entire series introduced you to the concept and value of a custom landing page to engage your visitors, how to design it and lastly how to implement it to a working showcase of your best content.

If you need help drop a comment. If you have a suggestion or a better way to do this please share your expertise.

Posted In:

UX & Frontend Design, Code Snippets

7 Comments

  1. Great tips on creating a landing page. Once you do it once, it becomes very easy.

    Reply
  2. Hi there. Great article!
    Question: I”m not quite clear how to make one post with content show up on my main page. I tried to put in the query post function above but nothing happened. Any advice would be great, as Im’ a newbie,
    thanks,
    Pablo

    Reply
  3. Here’s what I have which works for me. Just replace 803 with the post id you want to fetch
    <h6>Featured Post &raquo;&raquo; </h6>
    <?php
    rewind_posts();
    $lastposts = query_posts('p=803');
    foreach($lastposts as $post) :
    setup_postdata($post);
    ?>
    <h3 class="home-title">
    <a href="<?php the_permalink(); ?>" id="post-<?php the_ID(); ?>"><?php the_title();
    ?></a>
    </h3>
    <a href="<?php the_permalink(); ?>#comments"><?php comments_number('Leave a
    comment &raquo;','One comment so far &raquo;','% comments so far &raquo;');
    ?></a>
    <?php the_excerpt(); ?>
    <a href="<?php the_permalink();?>">Read More &raquo;</a>
    <?php endforeach; ?>
    </div>

    Reply
  4. “Directory of theme WordPress is set to use”?
    If you mean the directory on the server where the WordPress theme files are installed, you should say that directory (and note that placing that new file haphazardly in the WordPress folder is insufficient). “Directory of the theme” is unclear for novices.

    While this series is very good, assume the user/reader knows nothing about anything when writing. Clarity of thought with words sets the great authors apart from the din. You are down that road… continue. 🙂

    Reply
  5. This was a super helpful article! Stumbled it since I feel others can benefit from it as well.
    I did have one question. Any idea why the landing page created omits the blog’s title meta tag and displays the web address in the browser bar instead of the blog’s name? I am trying to find a fix for this now. You can see what I mean at: http://www.marybiever.com/

    Reply

Comment on Creating A Landing Page In WordPress III — Coding And Implementation

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