Anyone following affiliate marketing knows that the days of using a quick & dirty landing page with the big PPC engines is long gone. For better or worse, Google’s stupid “Quality Score” fired the first shot and other PPC engines followed. QS has forced affiliates to throw up “mini sites” to boost quality score and get cheaper clicks.

It is also no secret that Google loves WordPress. Black hatters, SEO’s and Affiliate Marketers have all taken advantage of this love affair by building sites with WordPress. Google laps up the content and everyone is happy. On top of that, thanks to the thousands of free WP themes, its quick and easy to throw up good looking sites quickly.

However, there is one hiccup. Out of the box, WordPress isn’t really setup to allow you to make a traditional landing page site. Sure, you can throw up a new page and spend a bunch of time modding the theme, but that sucks and isn’t efficient. The quick alternative is to bypass WP altogether. In other words, just throw the WP blog in a sub-directory like http://yourdomain.com/blog This way you can build out the main site as needed and just link to it from the blog. Now this works, but it’s not ideal. The most obvious reason is now you actually have to MAKE something. You have to make your landing page! Not to mention you can’t easily use that sweet free theme you found. We all know doing extra work sucks ass. Don’t be a dumbass!

What we need is a quick way to bend WordPress to our will. A way to make it work better as a landing page. More specifically we want WP to behave the following way:

Goals

1. WordPress should allow for multiple landing pages so we can split test and/or use the same site to run multiple, related offers.

2. It should allow for multiple articles/related pages to be associated with each landing page.

3. It should automatically hide links we don’t want (like links to other landing pages, to avoid user confusion.)

4. None of the normal blog functionality should be impaired.

5. It should be easy to add new landing pages…. because I’m lazy and hate doing repetitive bullshit.

What you will need:

1. An installation of WordPress. As of this writing, I am using 2.8.6. But I believe anything later than 2.7 will work fine.

2. A good theme. For our purposes, a 2 column theme will work best. Visit the Free Themes Directory and pick one. For this guide, I picked “Mystique”

Let’s begin.

For our landing site, we are going to want 3 main types of pages:

1. landing pages (where we will be running offers)

2. related pages (pages that will contain content related to a specific landing page, to help with our quality score)

3. general pages (pages that contain general info, e.g. about, contact, privacy policy, etc.)

Clearly, we need a way to differentiate these pages from one another. To do this, we are going to take advantage of the “Custom Field” feature. The Custom Field feature provides a way to “tag” pages and posts with extra meta data.

So the first thing we need to do is create at least 1 page of each type. Login to the WordPress admin panel. Click Pages > Add New and make 3 pages using the following names:

(1) “Diet”, (2) “Diet Article #1”, (3) “About”,

Don’t worry about content for now, just make the pages and Publish them.

Now that the pages are done, let’s go back and edit two of them.

Edit the page named “Diet”. On the edit page screen, add a new custom field as shown:

You can copy & paste the html for the “Value” section from here:

<table border="1">
<tr>
<td>
<h2>Diet Landing Page</h2>
</td>
</tr>
</table>

Before you Update Page, look at the URL in your address bar. It should look something like this:

http://yourdomain.com/wp-admin/page.php?action=edit&post=4

The important part here is the “post=4”. That is the post id of our “Diet” landing page. Make note of that, we will need it later.

OK, so go ahead and Update Page. Next, edit the page named “Diet Article #1” so it has the following custom field:

The value in the above pic is “4” because that is the post id of my “Diet” landing page. If your post id is different, put in yours. The related_to field is going to tell us that this page is related to our “Diet” landing page. Go ahead and Update Page when your done.

Now go back and edit the About page. Change it’s “related_to” Value to “all”. This will let our script know to always display this page.

OK so our pages are done. Now we have to do a bit of coding so WordPress plays nice and only shows the links we want, when we want. As you may know, when a theme designer wants to display a navigation link, he simply calls a WordPress template tag to do this for him. Since we don’t want to show all the page links on every page we need to modify these calls in the theme files.

In our example theme, Mystique, we can see the navigation at the top of the page, shows all the pages in our blog. These are in the header.php file.

Open up the header.php file under /wp-content/themes/mystique

At the very top of the file, add this line:

1
2
3
4
5
6
7

<?php
session_start();
$lander_html = get_post_meta($post->ID, 'lander_html', true);
if ($lander_html != '') {
    $_SESSION['lander_id'] = $post->ID;
}
?>

Next, search the file for “wp_list_pages”. This is the template tag the displays the page links. You will find it around line 95. We are going to comment that line out, and replace it with our own code below. To make it easier to paste, I have included the “else:” and “endif;” statements. Just replace that entire block of code with this:

94
95
96
97
98
99
100
101

           else:
             //echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a class="fadeThis"$2><span class="title">$3</span><span class="pointer"></span></a>', wp_list_pages('echo=0&orderby=name&title_li=&exclude='.get_mystique_option('exclude_pages')));
             if (isset($_SESSION['lander_id'])) {
                wp_list_pages( 'include=' . $_SESSION['lander_id'] . '&title_li=&depth=-1&sort_column=menu_order' );
                wp_list_pages( 'title_li=&depth=-1&sort_column=menu_order&meta_key=related_to&meta_value=' . $_SESSION['lander_id'] );
             }
             wp_list_pages( 'title_li=&depth=-1&sort_column=menu_order&meta_key=related_to&meta_value=all' );
           endif;

Next, we need to edit the page.php file. Open it up, and at the top you will see this:

6
7
8
9

  <!-- main content: primary + sidebar(s) -->
<div id="main">
<div id="main-inside" class="clearfix">
    <!-- primary content -->

Change it to this:

6
7
8
9
10
11
12

  <!-- main content: primary + sidebar(s) -->
  <div id="main">
   <div id="main-inside" class="clearfix">
 
<?php if ($lander_html != '') print $lander_html; ?>
 
    <!-- primary content -->

The above bit of code we added checks to see if this is a landing page. If it is, it will include the landing page html just below the navigation.

Now, if you view your diet landing page http://yourdomain.com/diet/ (this url assumes you are using “pretty” permalinks), you will see something like this:

Notice the links at the top of the page. You see “Home, Diet, Diet Article #1, About”. These links are built dynamically. The home page link will always be shown, followed by the landing page link itself, any pages related to the lander, and any pages related to “all”.

Our use of a sessions cookie (the code we inserted at the top of header.php) will let our script keep track of what landing page the user was sent to. This way, they if they navigate around the blog, the navigation links will remain the same… they will always see the main landing page link directly after the “Home” link.

Using the System

To see how this works, let’s add another landing page and another related page.

1. Add a new page. Name it “Insurance”. Click Publish.
2. Add a new page, Name it “Insurance Article #1”. Click Publish.
3. Add a new page, Name it “Privacy Policy”. Click Publish.
4. Edit Page, “Insurance”. Add the custom field “lander_html” and for the Value, put a simple html table:

<table border="1">
<tr>
<td>
<h1>Insurance Landing Page</h1>
</td>
</tr>
</table>

Before you update, this page, check the URL in the address bar. My post variable shows “post=18”. If your post id is different, make a note of it. Click Update Page.

5. Edit Page, “Insurance Article #1”. Add custom field “related_to” and for the Value put “18”. (If the post id for your Insurance page is different, put yours here.) Click Update Page.

6. Edit Page “Privacy Policy”. Add custom field “related_to” and for the Value put “all”. Click Update Page.

You are now done. Point your browser to http://yourdomain.com/insurance/ and you will see the new page. Note: you may need to refresh this page twice to see the correct links.

Notice how the links are displayed: Home, Insurance, Insurance #1, Privacy, About. The “Diet” landing page link and it’s related pages are hidden. The general pages: Privacy and About are being shown because they have a custom field, related_to, with the value “all”.

Wrapping Up

Obviously, the demo pics don’t show a finished landing page. To create a finished landing page, just create your landing page in any html editor. Then, paste the body of the code in the “lander_html” Value for the landing page you are creating. I recommend you just construct a simple table based landing page in your html editor and use that for your pasted content.

Once you have a full sized landing page set up, you will see the “real” WordPress content get’s pushed way down below the fold. This is exactly what we want. You can, however, use the actual WordPress page content area to add more content to your page or you can leave it blank. That is up to you.

Now, you can run PPC campaigns and point them to any landing page you want on the same wordpress install. You can also use auto posting plugins to build organic traffic and links to get some nice bumps in quality score.

Rolling Your Own

The techniques I have outlined above will work on any WordPress theme. The only issue you may have is where to put the code in page.php You may need to experiment before you get your landing page content to be displayed in the right place.

Conclusion

And finally, here are links to both the original Mystique theme, and the final modified theme:

Mystique 1.46 Original

Mystique 1.46 Modded The modded version is ready to go. To use it for landing pages, just install it and follow the steps above under “Using the System”.

Feel free to post questions, comments or suggestions. Thanks for reading.

Tags: landing pages, php, themes, Wordpress