How to create a landing page template that integrates with your current WordPress theme

Summary

This tutorial shows wordpress theme developers how to integrate WordPress landing pages into their existing themes, so users of their theme can enjoy added marketing benefits.

Why do this?

  1. Add A/B testing and Landing page functionality to your WordPress theme
  2. Create a unique template for pages powered by landing pages.
  3. Keep the current feel of the site but remove elements that might distract from a conversion.

Step 1. Create a landing page for testing

Create a landing page with template set to ‘Default’

This will tell Landing Pages to either use your theme’s single.php template for rendering content or it will use single-landing-page.php as the template if the file exists.

The main content area

Just like when editing a post or page there should be a main content area WYSIWYG. When we create our single-landing-page.php template we can use the get_the_content() function to retrieve and display this content.

Landing Page Form or Conversion Button area.

This is the next area you will see when the ‘default’ landing page template is selected. This section is optional, but if you do fill it out then we have a  PHP function called lp_conversion_area() we can use inside the template to retrieve and display the content. Additionally we can use a shortcode [lp_conversion_area] to display the content.

conversion ares

 

An added benefit of using the Conversion Area WYSIWYG is that Landing Pages provides auto-output options that will automatically add it above, below, or in a special sidebar widget if it is available. If you do not want to use automatic placement then you can always use the PHP function lp_conversion_area() to manually print the contents wherever you like.

default_settings

Step 2. Creating the file called single-landing-page.php

To create a landing page template that is integrated with your WordPress Theme, create a single-landing-page.php file in your theme directory and that will take place as the default landing page template file if the user has wordpress landing pages installed. See, normally when we have the ‘Default’ template selected it will automatically use the single.php template file included in your theme’s directory, which is the default template for most posts and pages. Creating single-landing-page.php will tell WordPress to use it instead of single.php. This happens automatically.

To start your single-landing-page.php file you are most likely going to want to copy the contents from your single.php file and add them into your new single-landing-page.php file as a foundation to begin work.

From here you can edit single-landing-page.php’s HTML and CSS and add or take away elements. You can do a lot with raw HTML and CSS and get the template exactly how you want it.

If you are looking to power template elements through the landing page edit screen then it gets a little more complicated. Let’s continue to read.

Creating programmable UI fields that power your template…

You might want to have the UI elements of your single-landing-page.php template programmable on the page edit screen. Some people want to do this. It makes sense if you are creating the landing page template for the client and want them to be able to change aspects of the template from the UI.

If this is something you would like to do then the Advanced Custom Fields plugin can help you quickly add programmable fields that your single-landing-page.php template can make use of. For additional information on how to work with Advanced Custom Fields plugin please see: https://github.com/inboundnow/landing-pages/blob/develop/shared/docs/how.to.create.landing.page.templates.using.ACF.md#intro

There are many good resources listed in that article that will introduce you to how to use ACF.

When developing your custom ACF fields be sure to set the field placement to template-id default so the custom fields show when the default template is selected. This document will not go over how to retrieve saved data from these fields when setting up your single-landing-page.php file, but the resource link mentioned above should contain plenty of examples.

Testing your work

As you make edits single-landing-page.php you can preview the landing page we published at the beginning of this tutorial. Changes should reflect in real time.

Related Support Documents