How to build a landing page with WordPress
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.
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:
- Start by going to this roundup by LeadPagesand picking a template you like.
- Browse through what’s available and download the template that looks the most promising. (Note. Opt-in required for that.)
- Extract the archive and rename the index.htmlfile to, say, page-landing-template.php
- Edit the file and do the following:
- Right at the very top, place this line:
- Change the path to every external file, adding the path to your current theme. For example, a line like , becomes
- Right before the closing tag add:
- 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 previous default WordPress 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:
- I took the default page.php file, made a copy and called it page-lp-example.php.
- 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).
- 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’);.
- Also in page-lp-example.php, I removed the call to get_sidebar();.
- Finally, I removed all HTML blocks that I didn’t need on the landing page from all three files.
- I named the template “LP Example.”
Hope now you have better idea how you can build a landing page on WordPress.