With more than 4.54 billion Internet users worldwide as of January 2020 and 640,000 new users online each day, every day for the past five years, 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.

Grow Your Business With HubSpot's Tools for WordPress Websites

The shortest path to success is a great WordPress landing page. 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 landing page process.

Let’s get started.

Landing Page Basics

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

Landing pages, meanwhile, are purpose-built pages that capture visitor contact details in exchange for special offers, regular newsletters or resources such as eBooks and whitepapers. 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.

The format, layout, and design of landing pages differ depending on your business type and the resource being offered, but 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 newsletter copy or eBook links, while others want more detailed information such as name and phone number in exchange for special promotions or sales.

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). If users click through to your landing page but leave without providing contact details, for example, you may not be 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 aimsIt’s critical to align marketing ad campaigns with landing page CTAs. If your site ads and pages discuss how to achieve a specific goal or get a great price on certain products, make sure your landing page directly relates to this outcome.
  • Keep it simpleThe 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, testYou 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 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 socialUser 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.

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.

how to create a landing page in wordpress remove unneeded content


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.

how to create a landing page in wordpress set a static homepage


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.

how to create a landing page in wordpress customize your page


5. Go live.

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

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



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:



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




Template Name: Landing Page



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

how to create a landing page in wordpress add new page


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:




* Template Name: Landing Page




<!DOCTYPE html>

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


<meta charset="<?php bloginfo( 'charset' ); ?>">

<meta name="viewport" content="width=device-width, initial-scale=1">

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

<?php wp_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 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 your 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 -->


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;




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

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:

WordPress Landing Pages

This is a free landing page plugin that offers building tools, basic metrics, and third-party add-on support. Reviews are mixed, but this open-source software is a cost-friendly option to help build landing pages. WordPress Landing Pages also includes a visual editor to view changes as they happen and tools to easily clone current landing pages for other sites.


With more than 4,000,000 downloads, 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.

Beaver Builder

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

Thrive Architect

Thrive offers a visually-driven WordPress building experience with 325 landing page templates.Thrive includes instant drag-and-drop editing and pre-built conversion elements to help capture visitor interest and streamline landing page creation. Prices start at $25/month.

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.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

 Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.

Originally published Feb 19, 2020 12:22:33 PM, updated April 03 2020


WordPress Website