Creating custom Landing Page templates.

This tutorial will guide you through step by step the process of taking a web page design and implementing it as a wordpress landing page template for the WordPress Landing Page Plugin.

  1. Choose Your Options
  2. Build your templates config file
  3. Build the index.php from existing HTML/CSS

Template file structure:

Your landing page template should be uploaded to the /wp-content/uploads/landing-pages/templates directory

1. Choose Landing Page Options

  1. Main Title (aka the the_title(); )
  2. Main Content (aka the the_content(); )
  3. Main Conversion Area ( lp_conversion_area(); )
  4. Top headline (defined in config.php file and called in index.php loop)
  5. Top Image (defined in config.php and called in index.php loop)

To see the demo template for a full reference see: https://github.com/inboundnow/landing-pages/tree/master/templates/demo

2. Create Your Config.php file

The config.php controls the landing page template options and the main settings of the template

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171
<?php
/**
* WordPress Landing Page Config File
* Template Name: Demo Template
* @package WordPress Landing Pages
* @author InboundNow
*
* This is a demo template for developers and designers to use as a reference for building landing page templates
* For a boilerplate without all the markup visit: XYZ
*
*/
 
do_action('lp_global_config'); // The lp_global_config function is for global code added by 3rd party extensions
 
//gets template directory name to use as identifier - do not edit - include in all template files
$key = lp_get_parent_directory(dirname(__FILE__));
 
/**
* $lp_data[$key]['info']
* Configures Template Information
*/
 
/* $lp_data[$key]['settings'] Parameters
 
'version' => (string) (required)
- Version Number. default = "1.0"
 
'label' => (string) (required)
- Custom Nice Name for templates. default = template file folder name
 
'description' => (string) (required)
- Landing page description.
 
'category' => (string) (required)
- Category for template. default = "all"
 
'demo' => (string) (required)
- Link to demo url.
*/
 
$lp_data[$key]['info'] =
array(
'data_type' => "template", // Template
'version' => "2.0.0", // Version Number
'label' => "Demo", // Nice Name
'category' => 'Demo', // Template Category
'demo' => 'http://demo.inboundnow.com/go/demo-template-preview/', // Demo Link
'description' => 'The Demo theme is here to help developers and designs implment thier own designs into the landing page plugin. Study this template to learn about Landing Page Plugin's templating system and to assist in building new templates.' // template description
);
 
 
/**
* $lp_data[$key]['settings']
* Adds metabox options to landing page template
* http://plugins.inboundnow.com/docs/dev/creating-templates/template-config/
*/
 
/* Parameters
'label' => (string) (required)
- Label for Meta Fields.
 
'description' => (string) (required)
- Description for meta Field
 
'id' => (string) (required)
- unprefixed-meta-key. The $key (template file path name) is appended in the loop this array is used in.
 
'type' => (string) (required)
- Meta box type. default = 'text'
 
'default' => (string) (optional)
- Default Field Value. default = ''
 
'options' => (array) (required for metaboxes with multiple options)
- example: 'options' => array('value' => 'label','value_2'=>'label 2')
- For dropdowns, checkboxes, etc.
 
'context' => (string) (optional)
- where this box will go, will be used for advanced placement/styling. default = normal
 
*/
 
// Define Meta Options for template
// These values are returned in the template's index.php file with lp_get_value($post, $key, 'text-box-id') function
$lp_data[$key]['settings'] =
array(
/* Text field Example */
array(
'label' => 'Text Field Label', // Label of field
'description' => "Text field Description", // field description
'id' => 'text-box-id', // metakey. The $key Prefix is appended making the meta value demo-text-box-id
'type' => 'text', // text metafield type
'default' => '2013-1-31 13:00', // default content
'context' => 'normal' // Context in screen for organizing options
),
/* Textarea Example */
array(
'label' => 'Textarea Label',
'description' => "Textarea description to the user",
'id' => 'textarea-id', // called in template's index.php file with lp_get_value($post, $key, 'textarea-id');
'type' => 'textarea',
'default' => 'Default text in textarea',
'context' => 'normal'
),
/* Colorpicker Example */
array(
'label' => 'ColorPicker Label',
'description' => "Colorpicker field description",
'id' => 'color-picker-id', // called in template's index.php file with lp_get_value($post, $key, 'color-picker-id');
'type' => 'colorpicker',
'default' => 'ffffff',
'context' => 'normal'
),
/* Radio Button Example */
array(
'label' => 'Radio Label',
'description' => "Radio field description",
'id' => 'radio-id-here', // called in template's index.php file with lp_get_value($post, $key, 'radio-id-here');
'type' => 'radio',
'default' => '1',
'options' => array('1' => 'on','0'=>'off'),
'context' => 'normal'
),
/* Checkbox Example */
array(
'label' => 'Checkbox Label',
'description' => "Example Checkbox Description",
'id' => 'checkbox-id-here', // called in template's index.php file with lp_get_value($post, $key, 'checkbox-id-here');
'type' => 'checkbox',
'default' => 'on',
'options' => array('option_on' => 'on','option_off'=>'off'),
'context' => 'normal'
),
/* Dropdown Example */
array(
'label' => 'Dropdown Label',
'description' => "Dropdown option description",
'id' => 'dropdown-id-here', // called in template's index.php file with lp_get_value($post, $key, 'dropdown-id-here');
'type' => 'dropdown',
'default' => 'default',
'options' => array('right'=>'Float right','left'=>'Float left', 'default'=>'Default option'),
'context' => 'normal'
),
/* Date Picker Example */
array(
'label' => 'Date Picker Label',
'description' => "Date Picker Description",
'id' => 'date-picker', // called in template's index.php file with lp_get_value($post, $key, 'date-picker');
'type' => 'datepicker',
'default' => '2013-12-27',
'context' => 'normal'
),
/* WYSIWYG Example */
array(
'label' => 'Main Content Box 2',
'description' => "wysiwyg description",
'id' => 'wysiwyg-id', // called in template's index.php file with lp_get_value($post, $key, 'wysiwyg-id');
'type' => 'wysiwyg',
'default' => 'Default WYSIWYG content',
'context' => 'normal'
),
/* Media Uploaded Example */
array(
'label' => 'File/Image Upload Label',
'description' => "File/Image Upload Description",
'id' => 'media-id', // called in template's index.php file with lp_get_value($post, $key, 'media-id');
'type' => 'media',
'default' => '/wp-content/plugins/landing-pages/templates/path-to-image-place-holder.png',
'context' => 'normal'
)
);

3. Create Your Index.php file

The index.php file manages the rendering of your landing page.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144
<?php
/**
* Template Name: Demo Template
*
* @package WordPress Landing Pages
* @author David Wells
* @link http://www.inboundnow.com
* @version 1.0
*/
 
/* Step 1: Declare Template Key. This will be automatically detected for you */
$key = lp_get_parent_directory(dirname(__FILE__));
$path = (preg_match("/uploads/", dirname(__FILE__))) ? LANDINGPAGES_UPLOADS_URLPATH . $key .'/' : LANDINGPAGES_URLPATH.'templates/'.$key.'/'; // This defines the path to your template folder. /wp-content/uploads/landing-pages/templates by default
 
/* Define Landing Pages's custom pre-load hook for 3rd party plugin integration */
do_action('lp_init');
 
/* Load Regular WordPress $post data and start the loop */
if (have_posts()) : while (have_posts()) : the_post();
 
/**
* Step 2: Pre-load meta data into variables.
* - These are defined in this templates config.php file
* - The config.php values create the metaboxes visible to the user.
* - We define those meta-keys here to use them in the template.
*/
 
// Text Field Label: Text field Description. Defined in config.php on line 44
$text_box_id = lp_get_value($post, $key, 'text-box-id');
// Textarea Label: Text field Description. Defined in config.php on line 50
$textarea_id = lp_get_value($post, $key, 'textarea-id');
// Template body color: Text field Description. Defined in config.php on line 56
$color_picker_id = lp_get_value($post, $key, 'color-picker-id');
// Radio Label: Text field Description. Defined in config.php on line 62
$radio_id_here = lp_get_value($post, $key, 'radio-id-here');
// Example Checkbox Label: Text field Description. Defined in config.php on line 70
$checkbox_id_here = lp_get_value($post, $key, 'checkbox-id-here');
// Dropdown Label: Text field Description. Defined in config.php on line 78
$dropdown_id_here = lp_get_value($post, $key, 'dropdown-id-here');
// Date Picker Label: Text field Description. Defined in config.php on line 85
$date_picker = lp_get_value($post, $key, 'date-picker');
// Main Content Box 2: Text field Description. Defined in config.php on line 91
$wysiwyg_id = lp_get_value($post, $key, 'wysiwyg-id');
// File/Image Upload Label: Text field Description. Defined in config.php on line 97
$media_id = lp_get_value($post, $key, 'media-id');
// The wordpress content if you want to show default placeholders. See line 107
$content = get_the_content();
 
 
// alternatively you can use default wordpress get_post_meta.
// You will need to add your template $key to the meta id. Example "text-box-id" becomes "demo-text-box-id"
// example: $text_box_id = get_post_meta($post->ID, 'demo-text-box-id', true);
?>
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<!-- Define page title -->
<title><?php wp_title(); ?></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
 
<!-- Included CSS Files -->
<link rel="stylesheet" href="<?php echo $path; ?>assets/css/style.css">
 
<!-- Included JS Files -->
<script src="<?php echo $path; ?>assets/js/modernizr.js"></script>
 
<!-- Inline Style Block for implementing css changes based off user settings -->
<style type="text/css">
<?php
// If color changed, apply new hex color
if ($color_picker_id != "") {
echo "body { background-color: #$color_picker_id;} ";
}
?>
</style>
 
<!-- Load Normal WordPress wp_head() function -->
<?php wp_head(); ?>
<!-- Load Landing Pages's custom pre-load hook for 3rd party plugin integration -->
<?php do_action('lp_head'); ?>
 
</head>
 
<!-- lp_body_class(); Defines Custom Body Classes for Advanced User CSS Customization -->
<body <?php body_class(); ?>>
 
<div id="wrapper">
 
<!-- example of conditional statment -->
<?php if ( $checkbox_id_here === "on" ) {
// do something for Example Checkbox Label option
}
?>
 
<div id="content-wrapper">
<div id="content">
<!-- Use the_title(); to print out the main headline -->
<h1><?php the_title(); ?></h1>
 
<?php the_content(); ?>
 
<div id="demo-hide">
<!-- Echoed out values from the metaboxes from config.php -->
<?php echo "Here is the Text Box content:" . $text_box_id . "<br>";
echo "Here is the Textarea content:" . $textarea_id . "<br>";
echo "Here is the Color Picker Hex:" . $color_picker_id . "<br>";
echo "Here is the Radio Value:" . $radio_id_here . "<br>";
echo "Here is the Checkbox Value:" . $checkbox_id_here . "<br>";
echo "Here is the Dropdown Value:" . $dropdown_id_here . "<br>";
echo "Here is the Date Picker Value:" . $date_picker . "<br>";
echo "Here is the WYSIWYG editor content:" . $wysiwyg_id . "<br>";
echo "Here is the Media upload path:" . $media_id; ?>
 
</div>
</div>
 
 
<div id="sidebar">
 
<div id="form-area">
 
<?php lp_conversion_area(); // Print out conversion area metabox content ?>
 
</div>
 
</div>
 
 
</div>
 
 
<?php
break;
endwhile; endif;
do_action('lp_footer'); // Load custom landing footer hook for 3rd party extensions
wp_footer(); // Load normal wordpress footer
?>
</body>
</html>

See the full demo template and its documentation here: https://github.com/inboundnow/landing-pages/tree/master/templates/demo