How to Create a WordPress Landing Page Template

One of the purposes of a website is to generate leads. This can happen in a number of ways: you might have a form for people to contact you for a specific quote, you might encourage people to create an account when buying goods on your site, or you might have a lead magnet that you give people in return for their email address.

If you’re using a lead magnet or you have a page on your site specifically designed to sell one item—whether that be a subscription, a service or a product—then you want to discourage people from clicking away from that page without buying or giving you their email address.

This kind of page is called a landing page. It’s a page designed to be part of your marketing funnel, to generate leads, or to sell something. The purpose of the page is very simple, and you don’t want people doing anything else once they’ve landed on it.

To minimize the chances of people navigating away before they’ve bought or signed up, you want to reduce the number of links on your landing page. It should have no widgets and no navigation menus. You don’t want people leaving it to browse your site. Even the link to the home page in the header needs to go, along with any links in your colophon at the very bottom of the page.

In this tutorial, I’ll show you how to create a page template for your WordPress theme that achieves that. It’ll contain no links to anything outside the page content. Visitors to the page will have no choice but to hit the Buy or Sign Up button.

To do this, we’ll be working with a few files in our theme:

• We’ll create a new custom page template for landing pages.
• We’ll edit the header file so when that template is being displayed, the links aren’t present.
• We’ll edit the footer file to remove widgets and any links in the colophon.

So let’s get started!

What You’ll Need

To follow along with this tutorial, you’ll need:

• A development installation of WordPress—don’t add the landing page to your live site until you’ve tested it.
• A theme that you can edit. If it’s a third-party theme, create a child theme and edit that.
• A code editor.

The Starting Page

I’ve created a dummy page on my site for use as a landing page. Here’s what it looks like using the normal page template:

During the course of this tutorial, I’ll remove the navigation menu, the sidebar, and the widget areas in the footer, and I’ll make sure nothing outside the content is a clickable link.

Creating the WordPress Landing Page Template

First you need to create a landing page template. Do this in one of two ways:

If you’re working with your own theme, make a duplicate of page.php and rename it.

If you’re working with a third party theme, create a child theme. Create a duplicate of page.php from the parent theme in the child theme and rename it.

Don’t give it a filename that begins with page- as this will confuse WordPress if you later create a page with the slug you use after page-. I’m calling mine landing-page-template.php.

Now open your template file. Add this line of code at the top:

*/
Template Name: Landing Page Template
/*

Save this, and you’ll now see that you can select the new template when you create a new page on your site:

Now remove the sidebar call from the file. Find this line:

<?php get_sidebar(); ?>

… and delete it. Save your file. Your new page template is ready. But you’re not done yet.

Editing the Header File

The next step is to edit the header.php file, to remove any links when that page template is in use. For this we’ll use the is_page_template() conditional tag.

Open your header.php file and find the code for your site title. 

Note: If you’re using a third-party theme, create a header.php file in your child theme that’s a duplicate of the one from the parent theme, and edit that.

In my theme, it looks like this:

<a href="<?php echo site_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
    <?php bloginfo( 'name' ); ?>
</a>

Edit it so it reads something like this, making adjustments for your own theme:

<h1 id="site-title">
    
	<?php if ( is_page_template( 'landing-page-template.php' ) ) {
		bloginfo( 'name' );
	}
	else { ?>
		<a href="<?php echo site_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
			<?php bloginfo( 'name' ); ?>
		</a>
	<?php } ?>
	
</h1>

If the landing page template is being used, the site name will still be displayed, but it won’t be rendered as a link.

You also need to remove the navigation. Find the code for your main menu. In my theme, it looks like this:

<nav class="menu main">

    <div class="skip-link screen-reader-text">
		<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>"><?php _e( 'Skip to content', 'tutsplus' ); ?></a>
	</div>
	
	<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
		
</nav><!-- .main -->

Edit it so that all the code for the menu is placed inside a conditional tag which checks that we’re not using the landing page template:

<?php if ( ! is_page_template( 'landing-page-template.php' ) ) { ?>
    
	<nav class="menu main">
	
		<div class="skip-link screen-reader-text">
			<a href="#content" title="<?php esc_attr_e( 'Skip to content', 'tutsplus' ); ?>"><?php _e( 'Skip to content', 'tutsplus' ); ?></a>
		</div>
		
		<?php wp_nav_menu( array( 'container_class' => 'main-nav', 'theme_location' => 'primary' ) ); ?>
			
	</nav><!-- .main -->
	
<?php } ?>

If there are any other menus or links in your header file, surround those with the same conditional tag—the same goes for any widget areas.

Now save the header.php file and close it.

Editing the Footer File

The final stage is to ensure that any widget areas don’t display in the footer.

We’ll use the same conditional tag to only output widget areas if not using the landing page template.

Open your footer.php template (or create a duplicate on your child theme if relevant).

Find the code to output your widgets. Here’s mine:

<div class="fatfooter">

    <?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?>
		<div class="one-third left widget-area first">
			<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
		</div><!-- .first .widget-area -->
	<?php } ?>

	<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?>
		<div class="one-third left widget-area second">
			<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
		</div><!-- .first .widget-area -->
	<?php } ?>

	<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?>
		<div class="one-third left widget-area third">
			<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
		</div><!-- .first .widget-area -->
	<?php } ?>

</div>

Now wrap that in a conditional tag in the same way you did in the header file.

<?php if ( ! is_page_template( 'landing-page-template.php' ) ) { ?>    

	<div class="fatfooter">
	
		<?php if ( is_active_sidebar( 'first-footer-widget-area' ) ) { ?>
			<div class="one-third left widget-area first">
				<?php dynamic_sidebar( 'first-footer-widget-area' ); ?>
			</div><!-- .first .widget-area -->
		<?php } ?>
	
		<?php if ( is_active_sidebar( 'second-footer-widget-area' ) ) { ?>
			<div class="one-third left widget-area second">
				<?php dynamic_sidebar( 'second-footer-widget-area' ); ?>
			</div><!-- .first .widget-area -->
		<?php } ?>
	
		<?php if ( is_active_sidebar( 'third-footer-widget-area' ) ) { ?>
			<div class="one-third left widget-area third">
				<?php dynamic_sidebar( 'third-footer-widget-area' ); ?>
			</div><!-- .first .widget-area -->
		<?php } ?>
	
	</div>
	
<?php } ?>

Next, we’ll need to amend the colophon. This may include a link to your home page and/or to the WordPress site.

Here’s mine:

<section class="colophon" role="contentinfo">
    	<small class="copyright left">
			Copyright <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
			<?php bloginfo( 'name' ); ?>
			</a>
		</small><!-- #copyright -->

		<small class="credits right">
			Proudly powered by <a href="http://wordpress.org/">WordPress</a>.
		</small><!-- #credits -->
	</section><!--#colophon-->

Now use a conditional tag to output the colophon without links on the landing page:

<?php if ( is_page_template( 'landing-page-template.php' ) ) { ?>
    
	<section class="colophon" role="contentinfo">
		<small class="copyright left">
			Copyright <?php bloginfo( 'name' ); ?>
		</small><!-- #copyright -->

		<small class="credits right">
			Proudly powered by WordPress.
		</small><!-- #credits -->
	</section><!--#colophon-->
	
<?php }

else { ?>
		
	<section class="colophon" role="contentinfo">
		<small class="copyright left">
			Copyright <a href="<?php echo home_url( '/' ) ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
			<?php bloginfo( 'name' ); ?>
			</a>
		</small><!-- #copyright -->

		<small class="credits right">
			Proudly powered by <a href="http://wordpress.org/">WordPress</a>.
		</small><!-- #credits -->
	</section><!--#colophon-->
	
<?php } ?>

Double check your footer file for any other links and, if there are any, wrap them in a conditional tag too.

Adjusting the Styling

You may find that having removed the sidebar from your landing page template, you need to adjust the styling for the content. If the content area is still only taking up two-thirds of the screen, you can use the body class generated by WordPress for the page template to fix it.

So let’s say you have the following styling for your content and sidebar:

.content {
    float: left;
    width: 65%;
}
.sidebar {
    float: right;
    width: 32%;
}

You’ll need to add some extra styling below that to target the content class in your WordPress landing page template:

.page-template-landing-page-template .content {
    width: 100%;
}

You’ll need to adjust this to take into account any margins or padding you’re using, but this gives you the general idea.

The Final Page

Here’s my landing page without any links:

It looks a bit bare right now, but you’ll be filling it with lots of juicy content aimed at encouraging people to buy or sign up—images, big red buttons, that kind of thing! And you can see that there’s nothing to distract the visitor from the content of the page.

I hope your landing page lands you plenty of business. Good luck!