How to Create a Landing Page in WordPress

The name landing page is basically meant to represent a scenario in which the visitor comes to your WordPress website and lands on that specific page – effectively making it the entry point to your website.

Now, what landing pages in WordPress are about is grabbing that visitor and convincing them to take care of a given predefined action. In most cases, this is about getting them to subscribe to an email list, click a specific link/button, buy a product, or perform some kind of social-media-related activity (like clicking the re-tweet button).

In other words, the goal here is to take that new visitor and immediately put them through some marketing process on your WordPress site, as opposed to letting them wander around, looking for something to do.

So what makes landing pages on WordPress special?

Of course, you don’t actually need something like a landing page to try convincing your visitors to take some specific action. You can do so from any kind of page that can be built inside the WordPress platform or even from the homepage of the site itself.

However, the difference here is that a landing page (when executed properly) will always bring better results, due to its single-purpose nature, as opposed to a standard homepage which is usually built in a way that tries to present a load of different things and information.

The most interesting thing about landing pages is their design, or more accurately, lack thereof. Most landing pages in WordPress, at least in a way that they’re implemented these days, are very minimalistic. They are usually built entirely separately from the rest of the site and retain very little of the site’s original design.

In short, every element that appears on a landing page should reinforce the main goal of the page (getting the visitor to take a specific action), and everything else should be erased.

So in summary, the elements that make a good landing page in WordPress, and also the elements that we’ll focus on in this post are:

  • Simple structure with minimal design.
  • No sidebars. Sidebars make the design distracting.
  • No footer.
  • Minimal header. So the visitor can get straight to the copy.
  • If you’re going to use a logo, make it un-clickable.

Method #1: The obvious one – plugins

There’s a plugin for everything these days and landing pages in WordPress are no exception here. If you want a quick way of building landing pages in WordPress, and you don’t care that much about optimizing code at the moment, then plugins are where you should go.

That being said, there’s not much free stuff available out there. I mean, sure there are some plugins in the official directory, but you will quickly find out that they are either very limited in terms of features or even that there’s almost nothing available for free and that you have to do some kind of an in-plugin purchase (I guess that’s a thing now) in order to get the actual features.

Anyway, the only free and functional plugin I could find is WordPress Landing Pages. It’s quite easy to use and has all the basic features you’d need to start building landing pages in WordPress.

Method #2: Drag and drop theme builders

The whole idea of constructing a landing page on a WordPress site is to make it different from all the other pages. But the problem with most WordPress themes is that they are quite limited in terms of what you can and cannot do with the design.

For instance, every theme will allow you to place whatever you want inside the main content block of a page template. However, if you want to do something outside of this area, well, bad luck.

So what’s different about drag and drop builders that are integrated into some of the more developed themes out there is that you can basically do whatever you wish with any page’s design, and this sort of customization is available through a very easy to use interface.

We talked about drag and drop theme builders a while ago, listing 15 of the most popular ones.

In a nutshell, the advice is this, if you’re working on a site that you know is going to require a handful of landing page templates for WordPress to be created along with the main design, consider switching to a drag and drop builder altogether. It will likely make your work a lot faster.

Method #3: LeadPages

(Note. This is a paid solution.)

LeadPages has taken the online marketing landscape by storm! It’s a great tool for building quality landing pages, integrating them with opt-in forms, and dozens of other things to make your WordPress site landing page friendly.

The plans start at $37 per month.

I’m listing it here because it’s a remarkably easy-to-use tool. So if you’d rather invest your money instead of your time, LeadPages is the solution for you.

Method #4: LeadPages hacking

Hold on for a moment. What I’m about to describe is nothing bad, nor illegal. It’s completely okay to do, and as far as I know, the guys over at LeadPages have nothing against this method. That being said, it’s not the most WordPress-optimized solution, and for that reason I’m mostly mentioning it here as a quick fix that you should only use as a placeholder until you integrate a more manageable and functional solution.

Here’s the deal. Every once in a while, LeadPages releases a new template as an HTML download. Everyone can get those templates from the official website and then use them in their projects.

The only difficulty is that those landing pages are pure HTML, so they are not WordPress-compatible right off the bat. What we need to do, then, is to make them WordPress-compatible.

To handle this. Do the following:

1. Start by performing this search on Google:

download site:blog.leadpages.net

Almost everything you’ll find is a downloadable template.

2. Browse through what’s available and download the template that looks the most promising. (Note. Opt-in required for that.)

3. Extract the archive and rename the index.html file to, say, page-landing-template.php

4. Edit the file and do the following:

  • Right at the very top, place this line: <?php /* Template Name: Landing Page */ ?>
  • Change the path to every external file, adding the path to your current theme. For example, a line like <link rel=”stylesheet” href=”css/style.css”>, becomes <link rel=”stylesheet” href=”<?php bloginfo( ‘template_url’ ); ?>/css/style.css”>

code1

  • Right before the closing </body> tag add: <?php wp_footer(); ?>

5. Upload the template files to your FTP server right into your current theme’s folder.

(Note. You may have noticed that in the example above, both the styles and the JS files are hard-coded into the header. This isn’t the best solution for WordPress and should be avoided whenever you’re building your own theme. However, here, we’re working with what we have from the LeadPages template and trying to enable this landing page in WordPress as quickly as possible, so we’re just going to leave it like it is.)

At this point, you have yourself a LeadPages template that works with WordPress. However, it’s still not editable from within WordPress, which means that to change any of the copy, you have to do so by editing the actual .php file.

Method #5: Manually built custom page template

This is the most old-school approach out there when we’re talking WordPress.

Basically, no matter what theme you’re working with, you can always create a custom page template for it and do whatever you wish inside of this template.

Note. Method #4 on this list is basically about creating a custom page template and then placing a standard LeadPages’ template inside of it. 

The best way of building a landing page in WordPress manually through a custom page template is to simply take the default page.php template and play around with its CSS/HTML structure.

For example, working with the default WP theme – Twenty Fourteen, you can easily get rid of the default left-side sidebar, the header, the footer, and everything else. What I did here, is:

  1. I took the default page.php file, made a copy and called it page-lp-example.php.
  2. Then I took the default header.php and footer.php files and made copies of them as well (header-lp-example.php and footer-lp-example.php).
  3. In page-lp-example.php, I changed the default get_header and get_footer calls to the ones using my new templates: get_header(‘lp-example’); and get_footer(‘lp-example’);.
  4. Also in page-lp-example.php, I removed the call to get_sidebar();.
  5. Finally, I removed all HTML blocks that I didn’t need on the landing page from all three files.
  6. I named the template “LP Example.”

Here’s the effect:

lp-example

And here’s the code of the final files. header-lp-example.php:

<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) & !(IE 8)]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
      <meta charset="<?php bloginfo( 'charset' ); ?>">
      <meta name="viewport" content="width=device-width">
      <title><?php wp_title( '|', true, 'right' ); ?></title>
      <link rel="profile" href="http://gmpg.org/xfn/11">
      <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
      <!--[if lt IE 9]>
      <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
      <![endif]-->
      <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
      <div id="main" class="site-main">

page-lp-example.php:

<?php /* Template Name: LP Example */
get_header('lp-example'); ?>
            <div id="main-content" class="main-content">
                   <div id="primary" class="content-area">
                   <div id="content" class="site-content" role="main">
                   <?php
                   // Start the Loop.
                   while ( have_posts() ) : the_post();
                         // Include the page content template.
                         get_template_part( 'content', 'page' );
                   endwhile;
                   ?>
                   </div><!-- #content -->
                   </div><!-- #primary -->
             </div><!-- #main-content -->
<?php get_footer('lp-example');

footer-lp-example.php:

       </div><!-- #main -->
       <footer id="colophon" class="site-footer" role="contentinfo">
             <div class="site-info">
             </div><!-- .site-info -->
       </footer><!-- #colophon -->
 </div><!-- #page -->
 <?php wp_footer(); ?>
 </body>
 </html>

Now all that’s left is taking this landing page and using it to showcase an offer.

Bonus: How to pimp your landing page on WordPress

Even though landing pages require a simplistic and minimal design, there are elements that need to stand out and present the visitor with an obvious action point – things like buttons, links, testimonials.

You can create these elements manually, either in Photoshop or through CSS/HTML, but there’s a faster solution, and it’s called Shortcodes Ultimate.

It’s a plugin that gives you access to stuff like buttons (flat, 3D, different colors, etc.), animations, accordions and a lot of other site elements. Everything is done through, you guessed it, shortcodes. Plus there’s a lot of customization features and the docs are very good (examples and stuff).

Conclusion

Landing pages are clearly not something that WordPress was meant to support natively, but this doesn’t turn out to be such a problem after all. At the end of the day, various plugins, theme builders, custom page templates, even external services like LeadPages make working with landing pages something that every developer can handle.

What’s your take here? What’s your preferred way of building a landing page in WordPress?

  • bucur

    Interestingly, this plugin helps a lot. Thanks for the recommendation.

  • Good tutorial man, simply but very usefull. Everyone should know those techniques.

  • H Max

    IN: Nice article. Clear, clean and helpful. Thank you.

  • I call this the in-dept guide to building landing pages in WordPress. I really like the way you have explained building landing page manually.
    Thanks for sending it via tweet. I will be following your future articles 🙂

  • Wow..Finally I found step by step how to do that…:) I have two questions in a method 2 should I copy all the files and catalogue into my main catalogue in theme which I exactly use?

    And second one in the last method 5th one, is there a difference in your way when u change page, footer and header or when u will change template and remove inside footer or header or change them?
    Once again thanks for instruction

  • Hey Karol, how about Thrive Content Builder, Beaver Builder or Visual Composer? 🙂

  • This is a very useful guide, thanks.

    I think it is really important that a landing page redirects to a thank you page. How would you recommend implementing that?

    • Hello?

      Is there anybody there…?

      • Hi, I’d say this all depends on what sort of action you’re promoting on the landing page. For instance, if it’s an email subscription, then you should get an option to redirect to a success page in your email tool’s interface. Same thing goes for all kinds of shopping carts.

        In short, I wouldn’t try hard-coding any redirections in the structure of the page itself, but rather rely on what’s available through third-party tools that you’re using on the landing page.

        • Hi Karol,

          Thanks for replying.

          Yes, that can be fine for email signups but many times I want to do email or lead gen campaigns and need the LP to re-direct to a thank you page on site.

          Any suggestions would be great, thanks.

          • So if I understand this correctly, you need to have the redirection set-up regardless of the form on the LP? In other words, when the user clicks “submit” in the form (no matter what this form is doing), you need the page to both send the data through the form and also redirect to a thank-you page automatically?

          • Hi Karol,

            Yes, that’s right. The form might add someone to an email list hosted on sites like Aweber or Mailchimp but more commonly for me it sends an email to a company (lead gen) and I need it to re-direct to a thank you page on submission.

          • I hope you are enjoying the festive season and look forward to your response.

            Meanwhile, Happy New Year!

  • Tom Murphy

    I very much like the idea of Method 4 and have worked through all of your steps… but am stumped by exactly what I should put in where you say this:

    Change the path to every external file, adding the path to your current theme. For example, a line like , becomes <link rel=”stylesheet” href=”/css/style.css”>

    I assume I do NOT put in exactly ‘template_url’ … but I don’t know exactly what I should be putting in there. Is it the url of my normal homepage or ?? Could you explain one step deeper please…

    Thanks very much

    Tom

    • The funny thing is that you do actually input this like that. 🙂

      This thing:

      <?php bloginfo( ‘template_url’ ); >

      triggers WordPress to replace it with the actual address. You don’t need to put it there yourself.

      Long story short, indeed use the “template_url’”

  • Robin Vanderbilt

    Very cool! Thanks for this 😀 Saved me hours of sorting out a solution myself

  • Thanks for sharing

  • John Fuller

    I’m confused about what I need. I’m only looking for a one page landing page, to direct traffic to an amazon purchase button.
    This article seems to suggest that the Landing Page is to be created to move people to your website.
    However, this Landing Page is going to be my Website – it’s all I need….

    So, am I building a Website or a Landing Page…?

    • Alex Evans

      Hi John,
      A landing page is generally used to promote a specific product or service, where as a website will include all products and services, and generally several other pages (contact, about, etc). If all you want is a single page with a button to buy on Amazon, a landing page will work fine for that. I prefer using Unbounce. Hope this helps!

  • Belinda Nono

    Hi Alex, please I have a website with articles on it running live…and my website is a wordpress site…and I have like 8 articles or so published on my site presently…now, I want to use my wordpress wesbsite to market affiliate product in my site’s niche, and I don’t want my visitors or target customers distracted by the other articles on my site already….so I want them to go straight to my landing page that will channel them to click on my affiliate product link.

    Please how do I achieve this without loosing my site’s current design and already published articles?

    Help me out please…I am not good in coding…just a new blogger. Thanks in anticipation

  • LaQuita Simone

    Hi Alex.

    I specifically recall previously being able to “send” categories to a specific page. For example, if I wanted all of my posts that were categorized “Fashion” to go to my Fashion page, I could do that simply by editing the page settings. But, I can’t seem to find that option anymore. Did WordPress remove it?

  • reliableopinion

    Hello.
    I have a site with Articles,about me etc.
    I had someone create a landing page for me.
    I do not want the LP to be visible on the site but send traffic there for Marketing.
    Where do I put that file?
    Thanks.