How To Create a Custom Landing Page in WordPress

default page template

The question is often asked, especially in internet marketing forums, how do I create a custom landing page in WordPress?

Most answers revolve around buying a plugin or a service such as LeadPages. But, if you are using WordPress, there is no reason to invest your hard-earned money in yet another plugin or service.

Simply create a custom template within your theme and you can design any type of landing page you want. Before we start, you will need to have access to your WordPress folders and files. In addition, as with any changes you make to your WordPress site, make a backup of the files you are modifying.

It is simple, just follow the steps below and start capturing your leads!

You need to locate your theme folder.

Usually it is /wp-content/themes/your-child-theme.

Create a Custom Landing Page in WordPress

If you are not using child themes, now is the perfect time to start. It is very important to use child themes so you don’t lose any work you have done to your theme.

For this tutorial, we will be using the default page template as a starting point. The default page template may or may not have a sidebar but we can remove it later.

Locate the “page.php” file within your main theme folder and copy it over to your child theme folder. Once you have a copy of the page file in your child theme folder let’s rename it to “page-landing.php”, this way we can make changes and not affect the default “page.php” file.

Now that we have the file in the child theme folder, we can put the line of code at the top that will identify it in the template choice drop down field when creating a page.

how do I create a custom landing page

Open the “page-landing.php” file in a text editor (NotePad ++, Dreamweaver or Notepad).

At the top of the file add the following lines of code above the <?php get_header(); ?> tag:

Save the file, now you have a custom landing page template.

The template may have a side bar but for a landing page you will want to remove this as well as the comments tag. Remove the code at line 23 (your line numbers will be different) and line 19 to get rid of comments and the sidebar.

LeadPages

Now if we go to the admin area, and create a new page we can start using our landing page template. You can add content just as you would with any other page.

child theme folder

Now, with most landing pages or squeeze pages we don’t want the navigation to show so we need to add some code to hide them. Further, we don’t need the footer widgets if there are any in your theme.

By adding a few lines of CSS we can hide things on the page we don’t need.

<style>
.secondary-navigation {
display: none;
}
#footer-widget-wrapper {
display: none;
}
</style>

The code above hides the main navigation on my page as well as the footer widgets. You will need to locate the ID and CLASS that relates to your navigation in your style.css file.

You can show or hide just about anything with this method.

Place the above code just after the “title” tag as below:

WordPress folders and files

When everything that is not necessary is removed, what you have left is a customizable page that you can add your sales copy to build your list.

default page template

You can change the look and feel of the text with a little bit of CSS but that is another tutorial.

And that is it! If you really want to get down and dirty there are several free templates out there, just do a Google search. To that end, for further details on creating custom templates in WordPress visit the WordPress Codex.

If you have any questions or tips to add, please let us know in the form below.

Leave a Comment

Your email address will not be published. Required fields are marked *