How to Code a Landing Page in Your WordPress Theme

If you've bought anything on the internet, you've probably come across a landing page. They're a highly effective way of maximizing conversions from a website.

But just what is a landing page, and how do you create one for your WordPress site? 

In this tutorial, I’ll demonstrate what makes a landing page different from a normal page on your site, and show you how to create a landing page template file so you can have your own landing pages.

• 
  WordPress
  
  
  How to Create a WordPress Child Theme
  
  
  Rachel McCollin


• 
  WordPress Themes
  
  
  Twenty Nineteen Teardown: Using the New WordPress Default Theme
  
  
  David Gwyer


• 
  WordPress
  
  
  Create a Responsive Landing Page With WPBakery (Visual Composer)
  
  
  Ashraff Hathibelagal


• 
  WordPress
  
  
  Create a Home Page With the Elements Plugin for WordPress
  
  
  Ashraff Hathibelagal

What is a Landing Page?

A landing page is a page on your site which is designed to sell something. 

You might direct people to it using SEO or via paid ads, or maybe from a call to action or widget on the other pages in your site. It’s a destination: somewhere you want people to do something.

Your landing page has just one job. That job will vary depending on the nature of your business, but it will normally be one of two things: to sell something, or to get a visitor’s email address.

So if you’re selling a subscription, a service or a product, your landing page will be designed to encourage people to buy that thing. The content will be designed to overcome objections, demonstrate how the product, service or subscription will meet the buyer’s needs, and get them to buy.

If your landing page is designed to get email addresses, it’ll normally offer something in return. That may be a sample, a coupon, or a freebie people can download.

Either way, when someone lands on that page (which is why it’s called a landing page), you don’t want them to go anywhere else until they’ve either bought from you or given you their contact details.

Which is why the most effective landing pages have no links apart from those directly related to the goal of the page. Your landing page should have no navigation menu to tempt people to other parts of the site, no clickable logo to take them to your homepage, and no sidebars or footer widgets to distract people.

This is why you need a dedicated page template that strips out all of these things.

Here’s the landing page on one of my sites:

It’s really simple. It has no links, no navigation menu and just one button, which takes you through to a signup form. 

You don’t want to give people the option to do anything else on your landing page, which is why you need a dedicated template file for it. The page will have no links taking the visitor away from the sales or subscription process. The only links on that page (and they should be big obvious buttons) will represent the top of your sales funnel.

If you use a standard page template to create a landing page, you’ll increase the chances of a visitor getting distracted and moving away from the sales process. 

So let’s start creating a custom page template instead.

What You’ll Need

To do this, you’ll need the following:

• a development installation of your site


• your own theme, or a child theme of a third-party theme (don’t edit third-party themes directly)


• a code editor

I’ll show you the code from my own site’s landing page template as we go along.

• 
  WordPress
  
  
  How to Create a WordPress Child Theme
  
  
  Rachel McCollin

Creating the Page Template

In your theme (or your child theme), create a new page template. You can either do this by duplicating the page.php template or by creating a blank file and copying the contents of page.php into it. I’m calling mine landing-page.php.

Here’s my existing page.php file:

<?php
/**
 * The template for displaying all pages.
 */
get_header(); ?>

    <?php
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if ( has_post_thumbnail() ) { ?>

<h2 class="entry-title desktop"><?php the_title(); ?></h2>

<div class="quarter right"> 
<?php the_post_thumbnail( 'large' ); ?>
</div>

<section class="entry-content three-quarters left">
<h2 class="entry-title mobile"><?php the_title(); ?></h2>
<?php the_content(); ?>
</section><!-- .entry-content -->

<?php }

else { ?>

<h2 class="entry-title desktop"><?php the_title(); ?></h2>

<section class="entry-content">
<?php the_content(); ?>
</section><!-- .entry-content -->

<?php } ?>

</article><!-- #post-## -->

<?php endwhile; ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Let’s run through the contents of that file:

• First, a call to the header.php file.


• Next, a conditional check to see if there’s a featured image. If so, this is displayed right aligned. This is specific to my theme–yours may or may not have something similar.


• The loop to display the page title and content.


• A call to the sidebar.


• A call to the footer.

To create a landing page template, we'll need to do a few things to this file:

• add commented text at the beginning so WordPress knows this is a page template


• remove that conditional statement


• remove the call to the sidebar

I’m not going to remove the footer, because it’s needed for the closing of the body element and the wp_footer hook. Instead, we’ll create a version of the footer file which will be used by this page template.

Adding Commented Text to Create a Page Template

In your new landing-page.php file, add a line of commented out text to tell WordPress this is a page template. Here’s mine:

/**
 * Template Name: Landing page
 * The template for displaying the landing page.
 *
 */

Now when you edit or create a page in your page editing screen, you’ll be able to select this template in the Page Attributes section of the Document tab on the right of the page editing screen:

Removing the Conditional Code

Now let’s edit the conditional check. You'll only need to do this if your page.php file has one.

My landing page will always have a featured image–I don’t need to check for one. This is because I’ll have an image of the free download that people receive when they sign up to my mailing list. I also want to change the layout. Here’s the new version of my code in my page template:

<?php
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<h2 class="entry-title"><?php the_title(); ?></h2>

<section class="featured-image one-third left">
<?php if ( has_post_thumbnail() ) { 
the_post_thumbnail( 'medium' );
} ?>
</section>
            
        <section class="entry-content right two-thirds">
<?php the_content(); ?>
</section><!-- .entry-content -->
</article><!-- #post-## -->

<?php endwhile: endif; ?>

The CSS styles for layout in this page are already in my theme’s stylesheet–if you want the same layout, or you want to style your landing page differently from other pages, add the CSS to your theme’s stylesheet.

Removing the Sidebar Call

Now let’s remove that sidebar call. 

Delete the get_sidebar() tag. Leave the footer call there–we’ll edit the footer to remove any links shortly.

Editing the Header and Footer

Not all of the content and links in each page on your site are in the template file. The header contains your navigation menu plus a link to your home page via your logo or site name. It may also contain other links in your banner.

Your footer will probably contain a colophon with links to your homepage, plus widgets which may include internal or external links.

You want to get rid of all of those, so people can’t leave the landing page without buying or signing up.

Removing Navigation From the Header

Now let’s start with the header. There are two things to get rid of: the link in your logo or site title, and the navigation menu.

Start by creating a copy of your header file. Call it header-landing.php.

Now in your landing-page.php file, edit the call to the header so it reads like this:

get_header( 'landing' ); ?>

Once you’ve done that, you can edit the header-landing.php file.

Here’s my code for the site name:

<hgroup class="site-name one-third left">
    <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
    <h1 id="site-title" class="one-half-left">
        <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <?php bloginfo( 'name' ); ?>
        </a>
    </h1>
  
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
  
</hgroup>

We still want to show the site name, so we edit the code to output that without the link:

<hgroup class="site-name one-third left">
    <!-- site name and description - site name is inside a div element on all pages execpt the front page and/or main blog page, where it is in a h1 element -->
    <h1 id="site-title" class="one-half-left">
        <?php bloginfo( 'name' ); ?>
    </h1>
  
    <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
  
</hgroup>

Now let’s remove the navigation menu. You simply delete all of the code for the navigation menu in your header-landing.php file.

Here’s the code:

<nav class="menu main right">

  <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 -->

Just delete all of that. Simple!

Removing Links From the Footer

Now let’s move on to the footer. 

As with the header file, you need to create another version of the footer file. Duplicate footer.php and call it footer-landing.php.

In your landing-page.php file, edit the footer call so it reads like this:

<?php get_footer( 'landing' ); ?>

Now let’s edit the footer-landing.php file. 

In my footer file I have a widget area:

if ( is_active_sidebar( 'footer-widget-area' ) ) { ?>
    <aside class="footer-widget-area full-width" role="complementary">
<?php dynamic_sidebar( 'footer-widget-area' ); ?>
</aside>
<?php }

Just delete that from footer-landing.php. Remove any element it’s wrapped in if you want: experiment to get it looking how you want.

In my file I also have code for a colophon that includes links:

<section class="colophon" role="contentinfo">
    <small class="copyright left">
        &copy; <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="https://wordpress.org/">WordPress</a>.
    </small><!-- #credits -->
</section><!--#colophon-->

I need to edit that to remove the link to the home page and the WordPress link, as follows:

<section class="colophon" role="contentinfo">
    <small class="copyright left">
        &copy; <?php bloginfo( 'name'); ?>
    </small><!-- #copyright -->

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

There will now be no links in the landing page footer or header.

Editing the Stylesheet

The final step is to edit styling for the page template so that the content is displayed at full width.

I have the following layout styling for my content and sidebar by default:

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

I need to add some styling to target the content just on this page template:

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

You don’t need to add any extra styling for the sidebar–it won’t be displayed on your custom page template as it isn’t called from the template file.

Creating Your Pages

The last step is to create your landing page. Create a new page in your WordPress admin, using your new landing page template. It will include text enticing people to buy or sign up, plus a form or a buy button.

In my site I actually have two landing pages: the first is the page people will arrive at, and the second is the page where people provide their email address. I’ve done it this way because there is research showing that people are more likely to complete a process if they’ve first had to click a link. I haven’t tested whether it makes a difference on my site yet: maybe I should!

If you click on the button in the first landing page on my site, you get this simple signup page:

That page uses the same template as my landing page. In both cases I’ve added the same featured image. Doing this reinforces the message that people will get that freebie if they sign up–and including visuals makes your page more attractive and increases conversions.

A Landing Page Template Reduces Distractions and Increases Conversions

Creating a template file for your landing pages will make them much more effective. Anyone arriving at your site on this page, or clicking a button in your site to get to it, will have nowhere else to go.

Follow the steps in this tutorial to create a landing page for your site. If it’s larger than mine (landing pages selling an expensive product can need a lot of text to make the sale), you might want to add additional styling to break the content up and help people read it.

Once you have this template, its easy to add extra landing pages to your site in the future, to support future campaigns or sell new products. Good luck!

• 
  WordPress
  
  
  How to Create a WordPress Child Theme
  
  
  Rachel McCollin


• 
  WordPress Themes
  
  
  Twenty Nineteen Teardown: Using the New WordPress Default Theme
  
  
  David Gwyer


• 
  WordPress
  
  
  Create a Responsive Landing Page With WPBakery (Visual Composer)
  
  
  Ashraff Hathibelagal


• 
  WordPress
  
  
  Create a Home Page With the Elements Plugin for WordPress
  
  
  Ashraff Hathibelagal