How To Create WordPress Landing Pages (w/ Free Tools)

One page, one goal...

That's the rule of thumb you want to keep in mind if you want your visitors to do something... like subscribe to your email list.

To create these "one goal" -type of pages (ie. landing pages), you need to have a page with no distractions... That means NO sidebar, NO comments, NO navigation menu etc.

Unfortunately, WordPress doesn't have an "easy button" that would create pages like this for us...

But that's why you came to this guide - to find alternative solutions. Fortunately, I have some options for you. ​And some of them are REAL easy. 😉

I'm going to show you how to create landing pages with WordPress using free plugins or simple tech tricks​... and maybe a few advanced methods.

More...

But First... (click for introduction)

Method #1 - How to remove the sidebar (and other distractions) from a WordPress page

PROS AND CONS

+ The landing page will fit to your site's overall design (except without all the distractions)

- The landing page design won't be easy to customize

- ​Requires some messing around with code

If you want your landing page to look like the rest of your site (except without all the distractions), this is the method for you.

A lot of themes nowadays come with a Custom Template that doesn't have the sidebar and other stuff like that... If your theme has a template like that, great ("how do I know if I have a template like that?")! But if not, you can follow the steps below to create one yourself:

First of all, this is the starting point:​

A vanilla WordPress site rocking the Twenty Twelve theme.

A vanilla WordPress installation rocking the Twenty Twelve theme

​As I said in the introduction, we're going to use the Twenty Twelve -theme that comes free with every WP installation. The thing with this theme is that it already has a "no sidebar" -template... But we're still using it as an example because it's a good theme to demonstrate this process.

There are 3 phases to this "operation":

1. Create a custom template

2. Remove the sidebar and the comments from the template

3. Remove the whitespace and other distractions with CSS

Let's go over them:

1.1 Create a custom template

To remove the distractions from specific pages, we need to create a new Custom Template.

For this, you need to have FTP access to your site. You can use a free FTP browser like FileZilla or Cyberduck, or your favorite FTP program.​

​Log in to your FTP account ("where to find my FTP account details?") and go to the folder wp-content/themes/your-theme:

FTP path image

This is what the inside of the folder should look like when you find it

Create a new PHP-file inside that folder. This will be your Custom Template file. You can name it whatever you want, but in this example, we'll call it "landingpage1.php":

PHP file image

Your new .php file

Edit the file with a text editor and add this line of code at the beginning of the file:

<?php
/*
Template Name: Custom Landing Page 1
*/

The "Custom Landing Page 1" will be your Custom Template's name - you can use whatever name you want.

The template file is not yet ready...  We have to visit our WordPress dashboard first (well, you can do this with your FTP program too, if you feel comfortable). Go to Appearance -> Editor and choose the regular page template, called Page Template (page.php) from the right-hand sidebar:

Step 1:

WP Editor image

Step 2:

Page template image

Copy all the text in the page.php below the PHP comments (the part with asterisks) (the content of the page.php file varies from theme to theme - that's why I can't give the code straight to you):

Page copy image

Copy these

Paste that chunk of code into your template file ("landingpage1.php" or whatever you named it). The file should now look something like this:

Custom template file image

Your Custom Template file

Now, if we were to save this file and use it on a page... it would look exactly the same as a normal page. Let's start modifying this template by removing the sidebar and the comments-section...

1.2 Remove the sidebar and the comments from the custom template

By the way, after you've saved that template file, we can edit it inside WordPress. Go to Appearance -> Editor and look for your template file on the right-hand sidebar:

Template file image

Click the file name on the right-hand sidebar to begin editing

There are two lines of code you need to remove from your template file:

<?php comments_template( '', true ); ?>​

and...

<?php get_sidebar(); ?>​

Here's where I found them (again, your template file may look different if you use a different theme):

Lines to remove image

Remove these two lines

After you've removed these lines from the file, go ahead and save the file by clicking the "Update File" button.

Next, let's go create a page to see what this template looks like.

When creating the page, make sure to choose the correct template file:​

Page with template image

Click to enlarge

And this is what the page looks like now:

Landing page 1 image

The unfinished landing page...

Not too pretty... yet.

We need to remove the header, the navigation and the unnecessary white space from the template... That can all be done with CSS.​

1.3 Remove the whitespace and other distractions with CSS

First, install a plugin called "Custom Classes":

custom classes image

This allows us to assign our landing page a custom CSS class... Meaning that when we mess up with CSS code, it will only affect a specific group of pages and not the whole site.

Now go back to editing the landing page we created and assign it a custom CSS body class (like "landingpagestyle") in the right-hand sidebar:​

class image

Click to enlarge

Before we go to edit the CSS file, we need to find out how our theme's CSS is structured...

We need to find out which CSS rules make the header and navigation visible and which rules create that extra white space.

When we know what these rules are, it's possible to modify them... in other words, make the unnecessary elements disappear.​

There's a helpful tool in Firefox called "Inspect Element" (there's also a similar tool in Chrome and maybe in other browsers), which I'm going to be using... If you don't have a tool like this in your browser, you'll have to find the elements manually from the source files.​

Go to the landing page you created (not the WP editor but the actual page), hover your cursor over your page header, right click on your mouse and choose "Inspect Element":​

inspect element image

Something like this should pop up:

inspecting an element image

Click to enlarge

To find the elements we're looking for, we need to browse the lines of source code until the right element is highlighted...

For example, this is how I found the header-element:​

header element image

Click to enlarge

Now we need to find out what ID- or class-selectors the element has... In this case we can see from the source code that it has both of them: ID "masthead" and class "site-header".

Now we can edit the CSS file to make the header disappear...

Again, go to Appearance -> Editor and look for "style.css":

style css image

Scroll to the bottom of the file and paste this there.

.landingpagestyle #masthead {
display:none;
}

​You need to replace "#masthead" with your header's CSS selector - for example, if it has ID "header", use "#header" or if it had class "header", use ".header".

What this does is it hides elements with the ID "masthead" (the ID of the header area) from pages with the class "landingpagestyle" (the class of our landing page template).

And this is what the page will look like now:​

header gone image

The header is gone!

Now we just have to remove the extra whitespace...

Let's go take a look at the page with the Inspector again.

Now we have to find out the CSS rules that create ​those white spaces:

width rule image

Click to enlarge

This rule makes the content width about 65%, which explains the extra white space on the right. If we were to change that width to 100%, the content area would fill out the whole page horizontally (we'll get to see that in a moment).

Next up is the white space below the content...​

bottom white space image

Click to enlarge

The "margin-bottom" and "padding-bottom" -rules are what are creating the white space below the content. Those need to be "0px" to make the white space disappear.

Now we've found the CSS rules, let's go to edit the CSS file again. Insert a code like this at the bottom of the style.css file (again, you may not be able to use this code as-is):

.landingpagestyle .site-content {
width: 100%;
}

.landingpagestyle .site-content article {
border-bottom: 0px;
margin-bottom: 0px;
padding-bottom: 0px;
}

This makes the content area fill the whole white box by modifying the rules we found earlier. We also got rid of those extra grey lines by using the "border-bottom: 0px;" rule.

And this is what the page looks like now (I took the liberty to add some more content to showcase how it would look):​

landing page image

Now it's starting to look pretty good... We could still center the headline and make the content area narrower...

The headline is usually defined by the "h1" selector. Also, the inspector says the class "site" contains the width rule for the white box:​

site width image

Click to enlarge

With that in mind, this is the CSS code we can use in this case:

.landingpagestyle .site {
max-width: 600px;
}

.landingpagestyle h1 {
text-align: center;
}​

And this is the final product:

final landing page image

Tada!

And now we have a landing page template we can use for specific pages... No need to mess up with code every time - all you need to do is choose the landing page template from the Custom Template drop-down menu when you need it.

Recommendation: Make a killing with simple landing pages

Why you shouldn't care if your landing page doesn't look like one of those fancy "guru landing pages"... or if it doesn't have the best copy.

Stop wasting time and start making good-enough landing pages:

Method #2: The best free WordPress landing page plugin

PROS AND CONS

+ Good support

+ Easy-to-use interface​

+ A decent selection of decent templates​

+ The ability to split test​

+ Good documentation​

+ Designs are customizable with HTML/CSS​

- Might have issues working with other plugins

- Minor functionality glitches​

- Possible technical problems​

Wow, that's a lot of plus-signs...

This is a pretty good plugin after all.​

I tested a lot of free W​P landing page plugins and there were some common issues with them:

  • A poor variety of templates (some only had one)
  • Awful interface
  • They were pushing their "PRO-versions" (that you can't live without!) maybe a bit too hard...

If you want a free landing page plugin, you don't have much choice and a large majority of those choices are... just bad.

This is the best one I found:

landing page plugin image

It's called WordPress Landing Pages by Inbound Now.

The interface and usability are pretty good:​

landing page list image

Split testing is an unexpected but a very welcome feature in a free plugin!

templates image

As you can see, the selection of templates is pretty decent. You can demo these templates here.

You can also customize the templates with CSS or JS, or make your own templates.​

editor image

Click to enlarge

The editor is functional and pretty straight-forward.

There's also good documentation on how to use the plugin and a lot of users have complimented the speed and responsiveness of the support staff.​

Another good thing about this plugin... They're not pushing their "PRO-version" all the time!​ There are some additional extensions and templates you can purchase but they are selling them quite softly.

On the other hand, a lot of people have also had issues with the plugin... Check out some of these reviews and the support forum.​ But does WordPress Landing Pages have an unusual amount of issues when compared to other software? Probably not.

As WordPress Landing Pages doesn't use "regular" Posts or Pages to create Landing Pages, it might not work with some plugins that modify posts or pages (such as social media plugins which insert social buttons to posts and pages or some shortcode plugins).

Also, I bumped into some minor technical glitches when using the plugin such as the preview image not loading or loading a wrong image. Not a deal-breaker.​

Overall, it's a very usable plugin if you need to create landing pages on a budget. Try it out!​

Method #3: How to use any HTML template as a WordPress landing page​

PROS AND CONS

+ There's a good variety of free HTML landing page templates out there to choose from

+ Unlimited custimization options if you know HTML/CSS​

- Requires messing around with code

If you have a good HTML landing page template you'd like to use and you also want to add WordPress functionality to it (the ability to use plugins, shortcodes etc.), this is the option for you.

It's a very lucrative option, indeed, since there are a lot of really good free HTML templates out there...

There are 5 steps to this:

1. Find an HTML landing page template

2. Create a custom page template

3. Move the template files to your server

4. Edit the custom page template and link it to the template files

5. Make the custom page template editable with the WordPress editor

3.1 Find an HTML landing page template

My favorite resource is the free LeadPages​ template directory. You need to sign up to their list to download their templates but I think it's well worth it.

You could use these HTML templates as-is and just upload them to your site... that's the easy option, but you won't be able to benefit from WordPress functions that way.

Why don't we pick a template from the LeadPages directory and turn it into a WordPress page template (this won't affect the rest of your site!):

leadpages template image

I've used a template similar to this one before and it converts really well.

Let's download the template and see what it looks like "inside":

template folder image

The "index.html" is the core of the template. The CSS, images and JS are the design- and functionality- elements.

3.2 Create a custom page template

First we need to open the "index.html" with a text editor and copy all the code:

Copy everything inside index.html

Next, we need to create a new Custom Template in WordPress. For that, we need to use FTP.​ You can use a free FTP browser like FileZilla or Cyberduck, or your favorite FTP program.​

Log in to your FTP account ("where to find my FTP account details?") and go to the folder wp-content/themes/your-theme:​

FTP path image

This is what the inside of the folder should look like when you find it

Create a new PHP-file inside that folder. This will be your Custom Template file. You can name it whatever you want, but in this example, we'll call it "landingpage1.php":

PHP file image

Your new .php file

Edit the file with a text editor and add this line of code at the beginning of the file:

<?php
/*
Template Name: Custom Landing Page 1
*/
?>​

The "Custom Landing Page 1" will be your Custom Template's name - you can use whatever name you want.

Next, paste the code you copied from "index.html" to this PHP-file.

If you're using a different template, your code will also look different, but this is how mine looks like right now:​

code image

landingpage1.php after you've pasted the Template Name -part and the contents of index.html

Now we have a Custom Template. Let's check it out (even though it's not yet ready).

Go to your WP dashboard and create a new page. Choose the correct template for this page:​

page creation image

Click to enlarge

And this is what the page looks like:

page image

The contents are there but it's not pretty (yet)! Also, we can't edit it with the WordPress text editor yet...

Let's go back to the FTP editor to upload the design-elements.

3.3 Move the template files to your server

Create a new folder inside the theme-folder (wp-content/themes/your-theme) and move the css-, image- and js- folders there:​

moving folders image

Click to enlarge

Then we need to edit the template-file so it will be able to "find" these design folders.

Now we can edit the template within WordPress. Go to Appearance -> Editor and ​click the template-file from the right-hand sidebar:

Step 1:

WP Editor image

Step 2:

sidebar image

We need to find all instances in the template-file where it's linked to the design-files.

In this case, the design files were (all the files inside the template-folder except index.html):​

  • print.css
  • style.css
  • bg.jpg
  • bg-content.png
  • book.png
  • lock.png
  • app.js
  • jquery.js

And we need to replace those links with correct URL paths. Let me show you a couple of examples.

Here are links to the CSS files inside the template-file:​

css files image

Click to enlarge

And here is where we uploaded them:

  • http://example.com/wp-content/themes/twentytwelve/landingpagedesign/css/style.css
  • http://example.com/wp-content/themes/twentytwelve/landingpagedesign/css/print.css

So let's replace the links with those:

replaced image

Click to enlarge

Like that...

Do the same with all the other files such as "bg.jpg", "app.js" and so on. If you don't find links to some of those files, you don't need to do anything with those particular files.

After we've replaced the links, this is what the page looks like now:​

page image

Why, it looks exactly the same as the HTML template! 😮

There is just one thing missing... We want to be able to edit the page with the WP text editor.

3.5 Make the custom page template editable with the WordPress editor

Let's go back to edit the template-file.​

We need to find all the stuff inside the content area (in this case, from "READ THIS FREE REPORT" to "Legal information") from the template-file:​

the content area image
the content area in code image

Click to enlarge

We need to remove that part of the code but before you do so, copy it somewhere because we'll still need it.

To the place where you just removed the code from, paste this to replace it:​

<p class="read-this"><?php single_post_title(); ?></p>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php the_content( ); ?>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>​

Like this:

replaced image

Click to enlarge

After you've saved the template, we can edit it with the WP editor!

Let's go to edit the landing page and paste in the content code we removed (paste it into the Text-editor, not the visual editor):​

page editor image

Click to enlarge

Now save the page and behold:

finished page

Now we can edit the contents of this page with the WP editor, add shortcodes, use plugins and so on!

The downside is that you need to edit the HTML template-file​ if you want to change the picture on the left or the background image...

But otherwise it's like a regular page on your WordPress site!​

EXTRA Method: The not-so-free option

If you'd like to create awesome-looking, high-converting landing pages even more easily... you'll have to pay for it.

This is the landing page tool I recommend and use myself:

Thrive Landing Pages

If you've been drooling over LeadPages or ClickFunnels or OptimizePress... this is kind of like those.

But compared to some of its competitors, you don't have to pay monthly for it.

What I like about it is its flexibility... It has a WYSIWYG editor that actually works..! So you can edit your pages the way you want and they won't all look the same (I'm looking at you, LeadPages!)

But it's fine if you don't like editing layouts and stuff - it comes with a good bunch of ready-made templates.

What I don't like about it is that it's sometimes a little buggy and causes me little headaches... But their support team is very responsive, thankfully.

That's the gist of Thrive Landing Pages.

If that sounds good to you, check it out here.


Conclusion

First of all, thank you for checking out this guide!

My goal was to include enough methods so that everyone would find something that would fit their skill-level (and budget!)

I would love to hear your feedback on if I met that goal. 🙂

Another goal of mine is to keep this guide up-to-date and implement your suggestions.

Mitro
 

Mitro is a marketing nerd who has ideas about email marketing. He tests these ideas by himself and with his clients, and writes about them for others to enjoy too.

Got A Question?

Send us an email: