How To: Multi-Purpose WordPress Landing Site

Customizing WordPress Series

Welcome to the ongoing adventure of adding/removing WordPress plug-ins for VibeTalk.

This series consists of quick product reviews and useful web links for building a better website. Many of the tips and tools presented here are specifically for the WordPress publishing platform, but some can also be used on any system.

This tutorial is about adding a multi-function Landing Site to your WordPress blog.

VibeTalk Landing Pad Serves Several Functions

It’s been there for a while, but you may not have noticed its full capability. The shaded box on the right side of this page actually has three functions: Featured Articles, Possibly Related Posts and Landing Pad.

• Featured Articles
  The first mode is only visible on the home page of VibeTalk. You can decide what works best for your site, but I find the natural (dis)organization of blogs makes it necessary to focus readers on what you want them to see.

  The idea for building thumbnail summaries into the VibeTalk Landing Pad came from Samsarin’s handy guide on creating a WordPress home page. You can also download a plug-in on the same site that apparently simplifies the thumbnail process, but I haven’t tested it and I’m not sure if it will work with the sample code below.

To implement a Featured Articles, you will need:

the_excerpt Reloaded R1 from Kaf Oseo
Used to provide clean versions of the article summary – converting and stripping embedded HTML as well as a host of other useful options. [download]

Get Custom Field Values 2.1 from Scott Reilly
Used to retrieve the URL for a thumbnail. I recommend you scale the thumbnail down to target size when you do this – saves download time and looks much better than letting the browser do it. [download]

• Possibly Related Posts
  The second mode appears when viewing a single post or page and shows posts related to the words of the current post’s title. The listing is streamlined on VibeTalk to show only the titles, but you can set plug-in options to show summaries too.
To implement a Possibly Related Posts, you will need:

Related Posts 2.03 from Alexander Malov & Mike Lu
Includes an admin menu that simplifies configuration – just call a single function. [download]

• Landing Pad
  And of course, there’s the third mode called Landing Pad. Also known as a landing site, the Landing Pad welcomes visitors who have arrived through a search engine. In addition to a list of related articles based on their search terms, the Landing Pad also highlights the search terms throughout the body of the page.

  To see it in action, run this search on Google and follow a VibeTalk link back here!

To implement a Landing Pad, you will need:

Landing Sites 1.3 from The Undersigned
Built on code from the Related Posts plug-in, at some point one can probably merge the two for efficiency. [download]

se-hilite.js from Scott Yang
An excellent bit of javascript that wraps search terms in color highlights. The code uses <div> tags with CSS classes so you easily set colors. [download]

VibeTalk Source Code

Here is the actual PHP and JavaScript code currently used on the site. Some of the lines are a bit long, so you will need to copy/paste the code to an editor to see everything.

	

You came here from
		searching for '.' These posts might also be of interest:

', ' ', ' ', false, false); ?>






              ID, 'thumbnail', true); ?>" />
">