Web Development: How to Create a Landing Page in WordPress

How to Create a Landing Page in WordPress

Final product image — What You'll Be Creating

A landing page on your WordPress site is an invaluable tool if you want to sell something or get visitors to sign up. In this post you'll learn how to create a landing page in WordPress for free, and encourage people to buy or sign up to your service.

We'll be creating a landing page by customizing a third-party WordPress theme. That is the best way to create WordPress a landing page for free, and gives you the greatest flexibility, but it requires some coding know-how. If you want to create a landing page without coding, check out some of our other posts.

A landing page is a key page, designed to get users to take action. What that action is depends on your business, but it’s likely to be one of two things:

buy something, probably a big ticket item as you’d be using product pages for smaller products
register for something, which might be a subscription to a service or course, or a mailing list

You’ll need to get as much traffic to this page as you can, as it’ll be an important one for your site. You might do that via SEO, advertising or direct marketing. Or maybe a combination.

But once people have arrived at that landing page, you need to make sure they buy or sign up.

The content of the page will be part of how you do this—not only the content itself, but the way you lay it out. Generally, the more expensive the item, the more text and the more calls to action you’ll need.

But it’s not just about the content. You also need to make sure that when someone lands on that page, the only option available to them is to click the buy button. If there’s a navigation menu, or some widgets, or a clickable logo, there’s a chance they could click away to investigate the rest of your site, and never come back to the landing page.

Which is where creating a landing page in your theme comes in. A landing page will have no links outside the content. There’s be no menu, no widgets, and no clickable links in the header, footer, or anywhere else. It’ll normally be full width (as you won’t need your sidebar widgets) and it’ll have a clean layout designed to focus attention on the content.

In this tutorial, I’ll show you how to create a landing page template for your theme. This consists of three things:

creating a page template for your landing page
creating a header for the landing page with no links
creating a footer for the landing page with no links
using the template to create your landing page

So let’s get started. I’m going to create this landing page template for the twenty twenty theme, and that means creating a child theme so I’m not editing a third party theme.

WordPress

How to Create a WordPress Child Theme

Rachel McCollin

What You’ll Need

To follow this tutorial, you’ll need:

a testing or development installation of WordPress
a code editor
a theme installed

So let’s get started.

Create a Child Theme

If you’re working on your own theme, you can skip this section. But if you’re using a third-party theme you downloaded from the theme directory or that you bought from ThemeForest or another source, you’ll need a child theme.

Follow our guide to creating a child theme and save your new theme in the wp-content/themes directory in your site.

Create a Landing Page Template File

Now you need to create a page template which will be your landing page template. You’ll need to duplicate whatever template is being used for pages in your theme and rename the new file. For many themes, that’s page.php. For twenty twenty, that’s singular.php. You can use the WordPress template hierarchy to work out which template file is being used.

If your working with a child theme, you’ll copy your duplicate to the child theme. If you're working in the main theme, save the duplicate in the main theme. Note: don’t do this on your live site!

If your theme has a full width page template, use that instead of page.php, as the layout will be already set up for the page to have no sidebar, and the sidebar will have been removed.

I’ve named my file landing-page-template.php. Don’t give it a name that begins with page. If you then create a page with that name, WordPress will automatically assign the template to that page. Better to keep things manual so you have more control.

Here’s the full content of my new landing-page-template.php file. Yours will look different if you’re working with a different theme.

<?php
/**
 * The template for displaying single posts and pages.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */

get_header();
?>

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

    <?php

        if ( have_posts() ) {

                while ( have_posts() ) {
                        the_post();

                        get_template_part( 'template-parts/content', get_post_type() );
                }
        }

        ?>

</main><!-- #site-content -->

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>

Now it’s time to edit the file. Start with the commented out text at the top. Replace it with the text needed for page templates:

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

The next step is to remove any call for the sidebar or footer. How you do this will depend on your theme and on whether you used a full width template to start with.

In twenty twenty there’s no call to the sidebar, so I don’t need to remove that. If you have this line in your template, you’ll need to remove it:

<?php get_sidebar(); ?>

Note: You might find once you’ve finished editing this template file that the layout leaves a gap where the sidebar should be. Edit the CSS for the template or change the classes in the content section to make it full width.

Now for the footer. You don’t want to remove the footer altogether as you still need your colophon and your call to wp_footer, so instead of removing the get_footer() call, you’ll leave it there and create a new footer file for your landing page.

In twenty twenty, the footer doesn’t work in the standard way. There are two calls in my template file:

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

<?php get_footer(); ?>

The first one calls an include file that has nothing but widgets. The second one calls the footer which I need, but we’ll be editing it later. So I’ll just delete this line:

<?php get_template_part( 'template-parts/footer-menus-widgets' ); ?>

Now save your file. We’ll come back to it shortly.

Create a Header for Your Landing Page

Now it’s time to create a header for your landing page with no navigation, widgets, or links.

Make a duplicate of your theme’s header.php file (either in the main theme or the child theme) and call it header-landing.php.

Remove the Link in the Logo or Site Title

Find the site name or logo in your header file. Mine consists of a function:

twentytwenty_site_logo();

Instead of trying to edit that function, I’m going to replace it with a call to the logo:

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/xxx.jpg” >

Replace xxx.jpg in the code above with the name of your own logo, and make sure you use the correct path.

If your site doesn’t have a logo image in the header, but a site title, instead, use this:

<div class="site-title faux-heading">

    <?php bloginfo( 'name' ); ?>

</div>

Note: the classes I’ve used above are specific to twenty twenty. Edit them to reflect your theme.

If your theme works in a more standard way than twenty twenty, you’ll probably find that this code is already there. All you have to do is remove any <a> elements surrounding it, so that site title or log is still there, but they don’t act as links.

Remove the Navigation Menu h3

Now it’s time to remove the navigation menu. Find the code for it in your header filer. In twenty twenty it’s inside an element that looks like this:

<div class=“header-navigation-wrapper">

</div><!-- .header-navigation-wrapper —>

If you’re working with twenty twenty, remove that and everything in it. If not, you’ll need to find a div, aside or section with a similar name.

Twenty twenty also has two toggle navigation buttons for mobile, inside these elements:

<button class="toggle search-toggle mobile-search-toggle">

</button>

<button class="toggle nav-toggle mobile-nav-toggle">

</button>

Remove those, making sure you don’t remove the site title and description which is between them. If your theme has anything similar, remove that.

Remove Any Widget Areas or Other Code with Links

Twenty twenty also has code for search, which I’ll remove as well. Your theme may have this in a widget, in which case remove any widget areas in the header file.

And finally, in twenty twenty there’s a modal menu at the end of the file which I also want to remove. Again, your theme may not have this—twenty twenty is more complex than many!

My header-landing.php file now looks much simpler:

<?php
/**
 * Header file for the Twenty Twenty WordPress default theme.
 *
 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since Twenty Twenty 1.0
 */

?><!DOCTYPE html>

<html class="no-js" <?php language_attributes(); ?>>

    <head>

        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >

        <link rel="profile" href="https://gmpg.org/xfn/11">

        <?php wp_head(); ?>

    </head>

        <body <?php body_class(); ?>>

                <?php
                wp_body_open();
                ?>

                <header id="site-header" class="header-footer-group" role="banner">

                        <div class="header-inner section-inner">

                                <div class="header-titles-wrapper">

                                        <div class="header-titles">

                                                <?php
                                                        // Site title or logo.
                                                        bloginfo( 'name' );

                                                        // Site description.
                                                        twentytwenty_site_description();
                                                ?>

                                        </div><!-- .header-titles -->

                                </div><!-- .header-titles-wrapper -->
                        

                        </div><!-- .header-inner -->

                </header><!-- #site-header —>

Save the file and go back to your template file. Find the line that calls the header:

get_header();

Edit it so it calls the new header file:

get_header( ‘landing’ );

Now save your file.

Create a Footer for the Landing Page

Now it’s time to create a footer for your landing page.

Make a duplicate of footer.php and call it footer-landing.php. Open your new file.

Find any code for widget areas and remove that. Twenty twenty doesn’t have widget areas in the footer.php file, they’re in an include file which I already removed the call to.

You’ll also need to edit the colophon, to remove links. Here’s the colophon in twenty twenty:

<div class="footer-credits">

    <p class="footer-copyright">&copy;
                <?php
                echo date_i18n(
                        /* translators: Copyright date format, see https://www.php.net/date */
                        _x( 'Y', 'copyright date format', 'twentytwenty' )
                );
                ?>
                <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>
        </p><!-- .footer-copyright -->

        <p class="powered-by-wordpress">
                <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
                        <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
                </a>
        </p><!-- .powered-by-wordpress -->

</div><!-- .footer-credits -->

Remove any links in the code. Mine now reads like this:

<div class="footer-credits">

    <p class="footer-copyright">&copy;
                <?php
                echo date_i18n(
                        /* translators: Copyright date format, see https://www.php.net/date */
                        _x( 'Y', 'copyright date format', 'twentytwenty' )
                );
                ?>
                <?php bloginfo( 'name' ); ?>
        </p><!-- .footer-copyright -->

        <p class="powered-by-wordpress">
                        <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
        </p><!-- .powered-by-wordpress -->

</div><!-- .footer-credits -->

Now save the footer file and go back to your template file. Find the call to the footer:

<?php get_footer(); ?>

Edit it to call the new footer file:

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

My template file is now stripped down and reads like this:

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

get_header();
?>

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

    <?php

        if ( have_posts() ) {

                while ( have_posts() ) {
                        the_post();

                        get_template_part( 'template-parts/content', get_post_type() );
                }
        }

        ?>

</main><!-- #site-content -->

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

Save your template file and if you’re working with a child theme, activate it in the WordPress admin.

Use the Template to Create your Landing Page

Create a new static page for your landing page, giving it a title that’s appropriate to what you want it to do.

Create the content and then in the Page Attributes section of the Document pane on the right, select Landing Page in the Template dropdown.

creating a page using the landing page template

Publish the page.

Now when you visit it in the front end, you’ll find that it has no links or navigation and that the only thing people can click on the page is your call to action button.

Summary

A landing page is much more powerful if you make sure that the only action people can take when they arrive at it is to click your ‘buy’ button. By creating a landing page template in your WordPress theme, you’ll make your lading page more effective and get more sales or subscriptions.

Follow this guide and you’ll have a powerful landing page for your theme!

Web Development

Tuesday, June 9, 2020