Every business website needs landing page to introduce its products and services. This is where users find the most important information about your company and what you offer. You need to present the advantages of your products or services to encourage users to register or purchase. If you have multiple products or run multiple ad campaigns, you may need to create multiple landing pages for each product or campaign.

Creating landing pages is a time-consuming work from conceptual design to coding. The question that developers often have when creating a landing page is: if you have a design ready then how to turn it into a landing page in WordPress?

There are quite a few ways to do this. You can use a page builder plugin to create the page layout via a drag-n-drop UI. It is also possible to manually code a “static” page with hard-coded content. In this article, we’ll let you know how to create a landing page in WordPress that is customizable.

Using custom fields to create landing pages

The idea of this method is as follows:

  • You design your landing page and convert it into HTML/CSS format.
  • You create custom fields for the content elements in the design, such as headings, text, images, …

Every time you need to edit the content of the landing page, you simply edit the content in the custom fields in the WordPress admin area without touching the code directly.

Compared to the method of building landing page by page builders, this method requires you to code yourself the template in HTML, CSS. And there is no drag-n-drop UI. However, it allows you to build a landing page exactly as the design, and the entire code will be optimized for better speed and performance.

Compared to the static page creation method, custom fields help you customize text, images, and more … without the need for direct code editing.

To clarify this method, let’s look at an example.

Using custom fields to create a landing page

Step 1: Pick a design

Let’s build a home page (also a landing page) with custom fields. To save time designing PSD and transforming it into HTML/CSS, let’s take a great free design from HTML5UP - Spectral.

Here is a screenshot with some descriptions for the sections:

create home page with custom fields

And here is the HTML code of the page. Because the code is so long, I do not embed directly in the article.

Step 2: Analyze the content elements in the design

Now, let’s see the elements inside each section. We need to clarify which ones are editable and which ones are not. Below is the list of editable elements, which we need for the next step.

  • Hero
    • Title
    • Description
    • Button link and text
  • Intro
    • Title
    • Description
    • 3 Font-Awesome icons
  • Services: there are 3 services, each includes:
    • Image
    • Title
    • Description
  • Features:
    • Title
    • Description
    • 6 features, each includes
  • Font-Awesome icon
  • Title
  • Description
  • Call to action (CTA):
    • Title
    • Description
    • Button 1 link and text
    • Button 2 link and text

Please note that we don’t need to analyze header and footer. They’re always fixed on the website. We only analyze the content part of the landing page that we want to build.

Step 3: Create a page template for the landing page

Before creating the custom fields for the landing page elements that we have analyzed above, let’s create a page template for this landing page.

Just create a file named template-home.php in the theme folder with the following content:

 * Template Name: Homepage Template
get_header(); ?>
<div id="primary" class="content-area"></div>
<?php get_footer(); ?>

It’s pretty simple, just like any page template you see in WordPress. Here we keep the main content of the page template empty (inside div) to make the logic clear.

The next step is adding the HTML from the index.html into the div tag. And here is the result.

After that, we have a working page template with static content. If you don’t want to change the content later, you’re done here. Just upload this file to your theme and create a page with this template and you have your landing page ready.

Step 4: Create custom fields for the landing page sections

To create custom fields for landing page sections, we use the Meta Box plugin. Meta Box is a plugin that helps you create custom fields quickly with many options. You can refer to what Meta Box is and how it works here.

To create custom fields for sections, add the following code to the functions.php file of the current theme:

add_filter( 'rwmb_meta_boxes', function( $meta_boxes ) {
// Code for sections go here (see below)

return $meta_boxes;
} );

Each meta box is an array with its settings and a list of fields. Each field is also an array of settings. For a detailed understanding of how to use the Meta Box, please see documentation.

For each section, let’s create a meta box with the title is the same as the section title. Each field of that meta box will be an element of the section.

We will go through some typical sections as the codes are very similar. You can see full code of all sections here.

Section Hero

$meta_boxes[] = array(
    'title' => 'Section Hero',
    'post_types' => 'page',
    'fields' => array(
            'id' => 'hero_title',
            'name' => 'Title',
            'type' => 'text',
            'id' => 'hero_desc',
            'name' => 'Description',
            'type' => 'wysiwyg',
            'options' => array(
                'teeny' => true,
                'media_buttons' => false,
                'quicktags' => false,
            'id' => 'hero_button_link',
            'name' => 'Button Link',
            'type' => 'text',
            'id' => 'hero_button_text',
            'name' => 'Button Text',
            'type' => 'text',

Section Services

$meta_boxes[] = array(
    'title' => 'Section Services',
    'post_types' => 'page',
    'fields' => array(
            'type' => 'group',
            'id' => 'services',
            'clone' => true,
            'fields' => array(
                    'id' => 'image',
                    'name' => 'Image',
                    'type' => 'image_advanced',
                    'max_file_uploads' => 1,
                    'id' => 'title',
                    'name' => 'Title',
                    'type' => 'text',
                    'id' => 'desc',
                    'name' => 'Description',
                    'type' => 'text',
                    'id' => 'image_style',
                    'name' => 'Image Style',
                    'type' => 'radio',
                    'options' => array(
                        'left' => 'Left',
                        'right' => 'Right',

In this section, we use Meta Box Group extension to group related fields for a service into 1 field (group). That helps us to organize the data better. We also use the clone feature to add as many services as we want.

After adding the code to the functions.php file, when we edit or add a new page, we will see the custom fields as below:

custom fields for landing page

Step 5: Get the data and display it on the landing page template

The last step is to get the custom fields’ data and display them in the front end.

To do that, just replace the hard-coded text or image display in the template-home.php file with helper functions rwmb_the_value () or rwmb_meta ().

Let’s see how to get custom fields data for the hero section. The code for remaining sections is just the same.

<section id="banner">
    <div class="inner">
        <h2><?php rwmb_the_value( 'hero_title' ); ?></h2>
        <?php rwmb_the_value( 'hero_desc' ); ?>
        <ul class="actions">
            <li><a href="<?php rwmb_the_value( 'hero_button_link' ); ?>" class="button special"><?php rwmb_the_value( 'hero_button_text' ); ?></a></li>
    <a href="#one" class="more scrolly">Learn More</a>

The full code for the whole template is here.

Finally, just create a page, assign it the page template “Homepage Template” and fill in the necessary content in the custom fields and you’ll have a perfect landing page.


Briefly, these are the steps to create a landing page using custom fields:

  1. Pick a design and convert it to HTML / CSS
  2. Analyze the elements in the design, select the elements that are editable
  3. Create a page template based on the HTML file
  4. Create custom fields for the editable elements
  5. Get the custom fields’ data and display it on the landing page template

With these steps, you have complete control over your page template from design to content, even the small details of CSS, HTML. Your landing page will be optimized for speed, performance and definitely faster than the landing page built by the page builders.

Together with a landing page, you may need a product page for selling things better. Here is our tutorial to help you with that.

Finally, because you may need to create too many custom fields, they may not be saved properly. Learn how to fix it by increasing max_input_vars!

If you're looking to improve your front-end development skills, you might find these courses from Udemy to be a useful starting point.

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. How to Add Custom Fields to Display Banners using Meta Box Plugin
  12. How to Add Guest Author in WordPress using Meta Box (Part 1)
  13. How to Add Guest Author in WordPress using Meta Box (Part 2)
  14. How to Add Related Posts to WordPress Using Meta Box
  15. How to Build a Hotel Booking Website Using Meta Box - P1
  16. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  17. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  18. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  19. How to Create a Classified Ads Website using Meta Box
  20. How to Create a Product Page using Meta Box Plugin
  21. How to Create a Recipe with Meta Box Plugin
  22. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  23. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  24. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  25. How to Create ACF Flexible Content Field with Meta Box
  26. How to Create an Auto-Updated Cheat Sheet in WordPress
  27. How to Create an FAQs Page Using Meta Box
  28. How to Create Buttons with Dynamic Link using Custom Fields
  29. How to Create Category Thumbnails & Featured Images Using Custom Fields
  30. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  31. How to Create Online Admission Form for School or University
  32. How to Create Online Reservation Form for Restaurants using Meta Box
  33. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  34. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  35. How to Display Images from Cloneable Fields - P2 - with Oxygen
  36. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  37. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  38. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  39. How to Manually Reorder Posts with Meta Box
  40. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

5 thoughts on “Create A Dynamic Landing Page in WordPress Using Custom Field

  1. I also do similar thing when building custom layout. Instead of custom fields, i create shortcodes for the various sections/parts and then use do_shortcode() where I want them displayed.

    The custom field route you describe is best since it's easy to edit any part of the layout.

    Great read!

  2. I have just taken over a project where as the entire website is using custom fields, and I don't truly code. I need to optimize the website for usability and search. Are the custom fields SEO friendly?

    1. The SEO is affected on how you output the custom fields in the frontend. For example, if we have a text custom field with a content of your keywords, the SEO score will be different if you output those content in a heading (h1-h6) and paragraph (p tag). To make sure your custom fields are SEO friendly, you need to check the output HTML of the field.

  3. Hi, How are you? Is possible this tutorial or other Using Beaver Builder Page Builder? Please, is very important for me, to create landing pages with there tools:
    Beaver Builder Page Builder (Is Multisite Compatible). Guttember or Elementor(No-Only Licence per site)???.
    Metabox and Landing Pages for Multiples User with your own Subdomain of my principal domain: ex. Johndoe.mydomain.tld. here is landing pages Template or Page of each user and yours Metabox data, example: Whatsapp-Number, API Key of Autoresponder service, Personal Link of social Networks(Facebook, Instagram, Youtube, etc, etc) and more data personal. Can you help me with this Tutorial or Posts similar or equal to This? https://metabox.io/create-landing-pages-in-wordpress/

    1. HI, is possible to configure or setup multiples landing pages each one with differents field, for each one? like is this possible? please, explaine me!!!

Leave a Reply

Your email address will not be published.