Custom style your WordPress theme’s Landing Page template

Summary

This tutorial shows WordPress theme developers how to use the WordPress Landing Pages with their existing themes with complete control.

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 Test Landing Page

Select ‘Current Theme Template’

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.

Setup Body Content

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.

Setup Conversion Area Content

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 single-landing-page.php

Create a single-landing-page.php file in your theme directory and that will take place as the default landing page template file. When the ‘Default’ template selected we automatically load the single.php template file included in your theme’s directory. Creating single-landing-page.php will tell WordPress to magically load your custom file first instead of the theme’s single.php.

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.

In this file you can edit  HTML and CSS to make modifications as you like.

It’s recommended to replace the sidebar PHP function with our lp_conversion_area() function that will output the contents of the Conversion Area metabox.

Using Advanced Custom Fields to power template elements

You might want to have the UI elements of your single-landing-page.php template programmable on the page edit screen.

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/inbound-pro/blob/develop/core/shared/docs/how.to.create.landing.page.templates.using.ACF.md#introo

 

 

Related Support Documents