This is the last post in the series Creating a landing page in WordPress Let’s see where we are.
- Creating a landing page in WordPress I — Introduction
- Creating a landing page in WordPress II — Architecture and Design
- 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
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
$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; ?>
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.
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.
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.
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
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/lib/domtab/domtab.css" type="text/css" media="screen" />
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.
UX & Frontend Design, Code Snippets