Wordpress - Create a landing page template within your theme that has no navigation

I thought this will be a nice little guide on how you can create a page template inside your theme to assign to pages that you want to use as a landing page.

Landing pages have become an extremely powerful tool in the world of marketing to test different ideas about products and engagement. A landing page is simply

A page that has no menu or sidebar, i.e. any distractions that would lead the user away from the page. It goes from top to bottom and each part of the page gives more information about the subject the page is designed for. Normally a landing page has a call to action at the bottom which can be a button, a subscription form or a “buy now” link.

Now that we know why you would want a landing page, lets find out how to create a new page template for your existing theme.

Creating the template

Before we get the template, I want to stress that you really should be doing this in your child theme folder and not in your main theme folder. If you don’t know what the difference is then please check this page.

Now, in your main theme folder you will have a /main-theme/page.php file. Copy it across to /child-theme/page.php. Then rename the file to /child-theme/page_landing.php. If you are not sure about the naming of files and why it is using a “_” instead of “-” please read this article. In my example the page_landing.php looks like this:

/child-theme/page_landing.php

<?php
/**
 * Template Name: 
 */

get_header(); ?>

    <main id="main" class="site-main" role="main">

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

            <?php get_template_part( 'content', 'page' ); ?>

            <?php if (option::get('comments_page') == 'on') { ?>
                <?php comments_template(); ?>
            <?php } ?>

        <?php endwhile; // end of the loop. ?>

    </main><!-- #main -->

<?php get_footer(); ?>

<?php

/**

* Template Name:

get_header(); ?>

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

<?php get_template_part( 'content', 'page' ); ?>

<?php if (option::get('comments_page') == 'on') { ?>

<?php comments_template(); ?>

<?php } ?>

<?php endwhile; // end of the loop. ?>

</main>

<?php get_footer(); ?>

Notice at the top we have a template name. This name will be shown in the WordPress page admin, so it should make sense. I’ve named mine:

<?php
/**
 * Template Name: Landing page
 */

<?php

/**

* Template Name: Landing page

If you go to the page admin on the page that you want to become your landing page on the side you would most likely see:

If you click the “Template” drop-down the “Landing page” should be there. Select it.

The header

Now, if you refresh the page it should look no different to what it was before (a lot of work for nothing??). Please bare with me. What just happened is that now we have our own page template and we have absolute control over that page and how it looks.

Most of the page should be as it is, we can edit the content from the admin, but what we want now is to remove the navigation from the header. For this go to /main-theme/header.php and copy it over to /child-theme/header.php. Now rename the file to /child-theme/header-landing.php. Edit the file and remove the code for the navigation, this is how it looked for me before and after:

/child-theme/header-landing.php BEFORE:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php get_sidebar(); ?>

<div class="site">

<header class="site-header">
    <nav class="navbar <?php if (inspiro_maybeWithCover()) echo 'page-with-cover'; ?> " role="navigation">
        <div class="wrap">
             <div class="navbar-header">

                <div class="navbar-brand">
                    <?php if ( ! option::get( 'misc_logo_path' ) ) echo '<h1>'; ?>

                    <a href="<?php echo home_url(); ?>" title="<?php bloginfo( 'description' ); ?>">
                        <?php if ( ! option::get( 'misc_logo_path' ) ) { bloginfo( 'name' ); } else { ?>
                            <img src="<?php echo ui::logo(); ?>" alt="<?php bloginfo( 'name' ); ?>" />
                        <?php } ?>
                    </a>

                    <?php if ( ! option::get( 'misc_logo_path' ) ) echo '</h1>'; ?>
                </div><!-- .navbar-brand -->
            </div>

            <?php if ( has_nav_menu( 'primary' ) || is_active_sidebar( 'sidebar' ) ) : ?>

                <button type="button" class="navbar-toggle">
                    <span class="sr-only"><?php _e( 'Toggle sidebar &amp; navigation', 'wpzoom' ); ?></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <div class="navbar-collapse collapse">

                    <?php
                    wp_nav_menu( array(
                        'menu_class'     => 'nav navbar-nav dropdown sf-menu',
                        'theme_location' => 'primary',
                        'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s' . diamond_wc_menu_cartitem() . '</ul>',
                        'container'      => false
                    ) );
                    ?>


                </div><!-- .navbar-collapse -->

            <?php endif; ?>

        </div>
    </nav><!-- .navbar -->
</header><!-- .site-header -->

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php get_sidebar(); ?>

<nav class="navbar <?php if (inspiro_maybeWithCover()) echo 'page-with-cover'; ?> " role="navigation">

<?php if ( ! option::get( 'misc_logo_path' ) ) echo '<h1>'; ?>

<a href="<?php echo home_url(); ?>" title="<?php bloginfo( 'description' ); ?>">

<?php if ( ! option::get( 'misc_logo_path' ) ) { bloginfo( 'name' ); } else { ?>

<?php } ?>

</a>

<?php if ( ! option::get( 'misc_logo_path' ) ) echo '</h1>'; ?>

</div>

</div>

<?php if ( has_nav_menu( 'primary' ) || is_active_sidebar( 'sidebar' ) ) : ?>

</button>

<?php

wp_nav_menu( array(

'menu_class' => 'nav navbar-nav dropdown sf-menu',

'theme_location' => 'primary',

'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s' . diamond_wc_menu_cartitem() . '</ul>',

'container' => false

) );

</div>

<?php endif; ?>

</div>

</nav>

</header>

/child-theme/header-landing.php AFTER:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="profile" href="http://gmpg.org/xfn/11">
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<?php get_sidebar(); ?>

<div class="site">

<header class="site-header">
    
</header><!-- .site-header -->

<!DOCTYPE html>

<head>

<?php wp_head(); ?>

</head>

<?php get_sidebar(); ?>

</header>

Nice, if you refresh the page now though you would still see the menu! Why? Because our page_landing.php doesn’t know about the existence of header-landing.php. Go back to the /child-theme/page_landing.php and change:

<?php
/**
 * Template Name: Landing page
 */

get_header(); ?>

<?php

/**

* Template Name: Landing page

get_header(); ?>

<?php
/**
 * Template Name: Landing page
 */

get_header( 'landing' ); ?>

<?php

/**

* Template Name: Landing page

get_header( 'landing' ); ?>

Notice we have the get_header( ‘landing’ ); ?>. This tells our new landing page to use the updated header. Save and do a refresh, now you should have no navigation in your header and you can continue working on the content of your landing page.

Moreover, editing those two templates you can adjust any other styling, add HTML and make any changes you wish to tailor the way your landing page looks. Also, you can re-use the template by assigning it to any new pages from the:

I hope that helps, if you have any questions, please write in the comments below.