Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress
Webdesign

How to Create a Landing Page in WordPress

by
Difficulty:IntermediateLength:MediumLanguages:
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's 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’ll 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 four 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 that I’m not editing a third-party theme.

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.

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:

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:

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:

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:

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:

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

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 has a site title instead of a logo image in the header, use this instead:

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 the site title or logo is still there, but they don’t act as links.

Remove the Navigation Menu

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:

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:

Remove those, making sure you don’t remove the site title and description which are 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:

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

Edit it so it calls the new header file:

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:

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

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

Edit it to call the new footer file:

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

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.

landing page in front end

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 landing page more effective and get more sales or subscriptions.

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.