How to Create a Landing Page in WordPress

The first thing a user typically sees on your website is the landing page, this is also true for WordPress sites too. With more than 4.66 billion Internet users worldwide as of January 2021 and over 600,000 new users online each day in the past 12 months, there’s a massive potential audience for your WordPress website.

But making the most of this Internet traffic trend demands more than just a great-looking WordPress site — you need a way to capture user attention, convince them to share their contact information, then create and deliver content they want to see.

Here’s a look at why landing pages matter, what they offer, how to create a landing page in WordPress, and what tools are available to help streamline the process of creating.

Let’s get started.

Free Landing Page Builder

Create and test beautiful landing pages that generate leads and look great on any device.

• Build landing pages.
• Turn visitors into leads.
• Optimize for SEO.
• And more!

Get started free

What is a Landing Page in WordPress?

A WordPress landing page is a purpose-built page that captures visitor contact details in exchange for special offers, regular newsletters, or resources such as eBooks and whitepapers.

Landing Page Basics

Many people confuse a website’s homepage with a landing page.

The homepage is the first page users see when they visit your WordPress site. This page typically contains information about your company or business, including your company name (if any), relevant images, and links to other product pages or content on your site.

While your homepage may attract visitor attention and encourage them to spend more time on your WordPress site, landing pages are designed to generate business leads by capturing visitors’ information.

Here’s what a standard homepage might look like:

Compared to what a landing page looks like:

The format, layout, and design of landing pages differ depending on your business type and offered resources. Still, they share a common feature set: form fields to capture visitor data.

The information requested is up to you — some sites simply ask for email addresses to send newsletters or eBook links. In contrast, others want more detailed information such as name and phone number in exchange for special promotions or sales.

How to Create a Landing Page in WordPress

1. Select a theme.
2. Remove unneeded content.
3. Set your homepage.
4. Customize your page.
5. Go live.

You know why landing pages matter — and what landing pages need to effectively reach customers. But how do you build one in WordPress?

You’ve got a few options here: Modify an existing theme to act as your landing page by changing and replacing key elements, or use a plugin to streamline the page-building process.

If you’ve got the time and technical know-how, here’s a quick rundown of how to create a landing page in WordPress.

1. Select a theme.

Pick a theme from My Site > Design > Themes in your WordPress dashboard, or download and install a new theme. Then, click on the three dots next to the theme’s name and click Activate.

2. Remove unneeded content

Simple is the goal for your landing page, so the next step is removing extra posts and pages. Go to My Site > Site > Pages, then click on the three dots next to any page you don’t need and click Trash. It doesn’t matter which page you keep.

3. Set a static homepage.

Using the three dots next to the page you choose to keep, set it as your static homepage. This isn’t the same as your regular homepage — instead, it ensures that your customized landing page is where visitors land when they click through from your main WordPress site.

4. Customize your page.

Click on the three dots and then click Edit. In the editor, you’ll be able to add text, images, contact forms, and call-to-action content.

5. Go live.

Click update to publish your page, and then link to it from your main WordPress site.

How to Launch a WordPress Website

Learn how to launch a website on WordPress with this step-by-step guide and checklist. Learn how to...

• Set up your domain name.
• Install an SSL certificate.
• Analyze your content.
• Back up your site.

Get Your Free Checklist Learn more Get Your Free Checklist

Download Free

All fields are required.

You're all set!

Click this link to access this resource at any time.

Download Now

How to Build a Custom Landing Page in WordPress

1. Create a child theme.
2. Create a style.css file.
3. Build a functions.php file.
4. Install and activate your child theme.
5. Create a custom page.
6. Add images.
7. Create a custom header.
8. Show off your content.
9. Add extra style with CSS.

If you prefer a more customized look for your landing page, it’s possible to dig deeper into code and do it yourself. Fair warning? You’ll need some HTML and CSS skill to make this work. Here’s a step-by-step guide:

1. Create a child theme.

The current theme of your WordPress site is often called the “parent theme.” To ensure any landing pages you create don’t adversely affect this theme, start by creating a child theme.

2. Create a style.css file.

Once you’ve got your child theme up and running, you need to modify your style.css file with the following code:

 

/*
Theme Name: Landing Page Theme
Description: Twenty Sixteen Child Theme With custom landing page
Author: Tahir Taous
Author URI: https://pagely.com
 
/blog
Template: twentysixteen
Version: 1.0
Text Domain: twentysixteen-child
*/

3. Build a functions.php file.

Next, you need to build out your PHP functions. Add the following code into your child theme folder:

 

<?php
// Parent Theme Styles //
// https://codex.wordpress.org/Child_Themes //
 
function theme_enqueue_styles() {
 
$parent_style = 'parent-style';
 
 
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
 
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

4. Install and activate your child theme.

Now it’s time to install your child theme on your WordPress page and activate it. Make sure it’s working by testing some CSS styles. Drop this code into your style.css file:

 

body, #page {
background: #ECE8C1;
}

Then, reload your font page. If there’s a new background color, everything is working as intended.

5. Create a custom page.

Now that your child theme is up and running, it’s time to build a custom page. Start by creating a new file in your child theme and save it as page-landing.php. Then, add this code:

 

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

On the Add New Page tab in WordPress, select the dropdown Template menu and select Landing Page. Then, click Publish.

If you preview the page, it will be blank — you’ll still need to add some PHP markup.

6. Add images.

To start adding images, use this code in your page-landing.php file:

 

<?php
/**
* Template Name: Landing Page
*/
?>
 
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" rel="noopener" target="_blank" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
 
<body <?php body_class(); ?> style="background: #6FBB72 url(<?php echo $src = the_post_thumbnail_url( '' ); ?> ) repeat 50% 0 fixed !important;">

Using this code should display a large background image — reload your site to make sure it’s working.

7. Create a custom header.

Now you need a custom header for your landing page. Put this code in your page-landing.php file after the <body> tag.

 

<div id="landing-page" class="hfeed site">
 
<div class="site-branding">
<p class="site-title aligncenter"><a rel="noopener" target="_blank" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
</div><!-- .site-branding -->

When you preview your landing page, you should see a title, white background, and background image. Remove any background color with this code:

 

.site {
background-color: transparent;
}

8. Add more content.

Add the rest of your landing page content with this markup in your page-landing.php file, just below the <!-- .site-branding --> line:

 

<div class="sidebar sidebar-bribe">
 
<?php if (have_posts()) : ?>
 
<?php while (have_posts()) : the_post(); ?>
 
<h1 class="landing-title"><?php the_title(''); ?></h1>
 
<?php the_content(); ?>
 
<!-- https://codex.wordpress.org/Function_Reference/wp_link_pages -->
<?php endwhile; ?>
 
<?php endif; ?> <!-- mdl-cell-8 //#primary -->
</div>

If you reload your landing page, you should see your featured background image, site title, and your call-to-action.

9. Add extra style with CSS.

Finally, give your landing page some flair with CSS. Put this code in your style.css file:

 

.site {
background-color: transparent;
}
 
div#landing-page {
max-width: 900px;
margin: 0 auto;
}
div#landing-page .site-branding .site-title a {
color: #4CAF50;
background-color: #FFFFFF;
background-color: rgba(255, 255, 255, 0.79);
padding: 5px;
border-radius: 5px;
}
 
label, input {
margin-bottom: 14px;
}
 
#landing-page .sidebar, #landing-page .sidebar-bribe {
background: #67CA6B;
background: rgba(103, 202, 107, 0.87);
border-radius: 10px;
box-shadow: 5px 3px 9px #5B6766;
padding: 0;
 
}
 
h1.landing-title, .landing-content {
padding: 1em;
color: #fff;
}
 
h1.landing-title{
padding-bottom: 0;
line-height: normal;
}
 
h1.landing-title small {
color: #650801;
font-size: 75%;
display: block;
}
 
#landing-page button, input[type="submit"]
{
background: #E91E63;
display: block;
width: 100%;
}
 
@media screen and (min-width: 56.875em){
 
#landing-page .sidebar {
float: left;
margin-left: 50%;
padding: 0;
width: 50%;
}
}

While there’s a reasonably steep learning curve here, once you’ve created your first landing page from scratch in WordPress, you’re better equipped to customize new pages and add new styles anytime you want.

Making the Most of Landing Pages

Landing pages provide a way to generate measurable leads on your WordPress site. By tracking how many visitors fill out landing page fields, you can evaluate the impact of your current marketing strategy and call-to-action (CTA).

Suppose users consistently leave your landing page without providing their contact details. In that case, it might be that you’re not offering the right resource or clearly articulating the value proposition of your business.

Implement these best practices to make the most of your landing page:

• Align your aims — It’s critical to align marketing ad campaigns with landing page CTAs. If your site ads and pages discuss achieving a specific goal or getting a great price on certain products, make sure your landing page directly relates to this outcome.
• Keep it simple — The goal of your landing page is to drive user action — and that means keeping things simple. Use the fewest number of form fields possible and make every step of the process clear to visitors to maximize conversions.
• Test, test, test — You won’t know what works until you test it. And test it again. Test your CTAs, and test your landing page copy by making it live and seeing what happens. Record the number of leads generated, then tweak your page and try again to find exactly what works.
• Design for impact — Images speak louder than words. Use backgrounds that pop and related imagery to get your point across without cluttering the page.
• Get social — User reviews on your landing page are a great way to encourage organic interest — just make sure they’re regularly updated.

To see these best practices in action, check out 19 of the Best Landing Page Design Examples You Need to See in 2020.

Plugins to Build a Landing Page in WordPress

If you’d like help setting up your landing page, consider a WordPress plugin. Some options include:

1. Elementor

Price: $49/year

With more than 5,000,000 active installations, Elementor is one of the most popular landing page plugins available, offering both easy-to-use functions for companies just getting started and more advanced tools for established organizations.

Elementor is an all-in-one solution that lets you control every aspect of your website workflow and easily scales from supporting individual blogs and pages to multiple branded sites.

Since it’s a drag-and-drop builder, you don’t necessarily need to have technical skills before you can use Elementor to build your WordPress landing page.

2. Beaver Builder

Price: $99/year

This plugin offers everything from landing page creation to full-site designs. Beaver Builder includes multiple pre-build templates and gives you the ability to position images and text exactly where you want with a simple drag-and-drop format.

Beaver Builder is also great for building landing pages because it’s compatible with other WordPress themes and plugins. And you can use it to build any kind of landing page you want.

3. Thrive Architect

Price: $30/month

Thrive offers a visually-driven WordPress building experience with 325 landing page templates. In addition, thrive includes instant drag-and-drop editing and pre-built conversion elements to help capture visitor interest and streamline landing page creation.

Thrive Architect is different from the other landing page plugins on this list because it was created specifically for building business websites.

4. Slider Revolution

Price: $35/year

Slider Revolution is an incredibly versatile plugin that can enhance the functionality of your website beyond just a slider. This plugin can create stunning product carousels that can showcase your products in a unique and visually appealing way. Additionally, Slider Revolution can be used to create animations that will add a pop to your website and make it more engaging for your visitors. It is a must-have plugin for anyone who wants to take their website to the next level.

If you are beginning your WordPress journey, Slider Revolution can be a great starting point due to its natural user-friendliness. On the other hand, if you are an experienced user, you will find Slider Revolution to be a tool with a lot of depth that you can appreciate.

5. Divi

Price: $89/month

Divi is an advanced visual builder for WordPress websites. The plugin comes with many elements you can use to optimize your landing page for conversions.

This plugin offers a complete “what you see is what you get” (WYSIWYG) experience that lets you see what you’re building in real-time. Divi also allows you to go through your entire design history to undo mistakes or recover previous design templates.

Additional features that make Divi great for building landing pages include 800+ premade designs, 100+ full website packs, and 40+ website elements.

Start Creating Your WordPress Landing Page Today

The right landing page can help capture visitor interest and drive customer conversion. Make the most of your WordPress site with clean, contextual, and content-rich landing pages.

Editor's note: This post was originally published in February 2020 and has been updated for comprehensiveness.