Howdy! I’m Matt, and today we’re going to make an landing page template for Inbound Now’s Landing Pages framework.

What we’ll need is:

• A WP blog with the Inboundnow plugin installed
• Access to Advanced Custom Fields
• An existing HTML template. This will provide the material for the landing page.
• And a text editor.

Secure Access to Advanced Custom Fields UI

If you are using Inbound Now all-in-one plugin at the subscriber level then you are in luck because we include a copy of ACF Pro that will help you build your landing page settings. If you are not a subscriber using Inbound Pro then you will need to secure a copy of Advanced Custom Fields else where and activate it as a plugin in your WordPress instance.

Disable ACF Lite Mode (subscribers only)

Make your way into the Inbound Now settings area:

wp-admin->inboundnow->settings

Scroll down to ‘ACF options’ and disable ‘ACF lite mode’. This will enable the Custom Fields section in the wp-admin menu.

Working with the HTML to create your plan

The HTML template we’ll be using is called ‘Coming Soon’ and was made by ScoopThemes.

Grab a pencil and paper to make a list of the elements we’re going to make dynamic. Notepad works too, either way It’s a lot easier to implement the custom fields if you mark out where you’re going to put them ahead of time.

The first element is the logo at the top.  On inspection with the browser tools to find something to identify it with we see:

<img src="assets/img/logo.png" alt="Scoop Themes Logo">

Good enough, now lets write down <img alt=”Scoop Themes Logo”>. Since it’s going to be a simple logo, let’s mark down on our paper that this element will require an image upload field. After <img alt=”Scoop Themes Logo”> write: ” = image field“. //Without the quotes.

Next down is the announcement(“We’re working hard to…”). Since this is a content area let’s chose a WYSIWYG editor. The element is an “<h2>” with a class of “subtitle“,  so write: ‘<h2 class=”subtitle”> = WYSIWYG editor‘.

And let’s continue that way down the page:

For the email message body,  another WYSIWYG editor.

The social buttons should be a repeater since they are a list of repeating items. For subfields, we’ll use an image field for the icon and a URL field for the link.

To replicate the copyright setup we’ll need a text field, a URL field and a text field for the URL’s display text. //The text that goes between the <a></a> tags.

 

• At this point, your notes should look something like this:
• <img alt=”Scoop Themes Logo”> = image field
• <h2 class=”subtitle”> = WYSIWYG editor
• <form class=”form-inline”> = WYSIWYG editor
• <ul class=”social-circle”> = repeater with image and url subfields
• <p class=”copyright”> = text field + URL field & text field

Register the new custom template

Ok, that’s the list. The next step is to create the files needed. First is the template folder. Inside of /wordpress-content/uploads/landing-pages/templates, create a folder called ‘coming-soon-template‘. Inside of that folder, paste the HTML template page and its assets. Then create two files: config.php and index.php

config.php does two things: it tells WordPress that the template exists, and it holds the custom field values.
index.php is the display file. It will contain the HTML code from the template, plus the dynamic php code generated by ACF.

Inside of config.php, paste this code:

 
<?php
/**
 * header for custom landing page template's config.php
 */

/* gets template directory name to use as identifier - do not edit - include in all template files */
$key = basename(dirname(__FILE__));

$lp_data[$key]['info'] =
array(
    'data_type' => 'acf5', // Template Data Type accepts 'acf' or 'acf5'
    'version' => "1.0.4", // Version Number
    'label' => 'Acacia', // Nice Name
    'category' => '1 column layout, Responsive, Premium, Pro Series, Acf', // Template Category
    'demo' => 'http://demo.inboundnow.com/acacia/', // Demo Link
    'description'  => 'A beautiful modern landing page with image on top'
);

/* add notice that acf5 is required for this template - this applies to any template using repeater fields  */
add_action('admin_notices', array( 'Landing_Pages_Admin_Notices' , 'acf5_required' ) );

This is stock template code from the docs, what it does is tell WordPress that the template exists.

Change the details for this project,

<?php
/**
 * header for custom landing page template's config.php
 */

/* gets template directory name to use as identifier - do not edit - include in all template files */
$key = basename(dirname(__FILE__));

$lp_data[$key]['info'] =
array(
    'data_type' => 'acf5', // Template Data Type accepts 'acf' or 'acf5'
    'version' => "1.0.0", // Version Number
    'label' => 'Coming Soon', // Nice Name
    'category' => '1 column layout, Responsive, Premium, Pro Series, Acf, Animated, Coming Soon', // Template Category
    'demo' => '', // Demo Link
    'description'  => 'A light-hearted coming soon page with animated clouds'
);

/* add notice that acf5 is required for this template - this applies to any template using repeater fields  */
add_action('admin_notices', array( 'Landing_Pages_Admin_Notices' , 'acf5_required' ) );

and we’re good.

That’s all for config.php at the moment, let’s save the changes and head back to the admin area and create the custom fields.

Create fields definitions inside of ACF’s UI

Inside of Admin->Custom Fields->Add New,  add a new field group called “Coming Soon Fields“.
Take this moment to refer back to the element list you created. At the top of our list is the logo (<img alt=”Scoop Themes Logo”>), and the field is “image”.

So lets add a new field to our field group and set the field type to ‘image’ while giving it a reasonably descriptive label, such as “Website Logo”.

Now write up some basic instructions, like what this field is for and what should be put in it

Set the ‘Return Value‘ for ‘Image URL‘,  and this field is all setup.

Next is the announcement (<h2 class=”subtitle”>):

• Add a new field,
• Set the field type for a WYSIWYG editor,
• Label it Announcement Area,
• Give brief instructions about what it is and what it’s for,
• And set an announcement-like default value.

 

Note: If you change the defaults later, the changes only apply to new pages. So to test new defaults, you have to make new pages. Not a big deal, but knowing it saves a lot of frustration.

For the email form, we’re using another WYSIWYG editor so we’ll have more freedom in implementing email signup the shortcode. Let’s label it “Form Field” and give it some instructions.

 

For the social buttons,  add a repeater and label it Social Buttons.

For subfields we’ll use:

• An image field labeled ‘Social Icon’ with the return value set for ‘Image URL‘,
• And a URL field labeled ‘Social Link’.

And while we could allow unlimited social buttons, I think if it gets past 8 it’s a bit excessive. So let’s set the max rows for 8 and change the button label to ‘Add Social Network’.

Since the copyright section is a collection of individual fields, let’s first create a tab labeled “Copyright” to keep things neat. Now all the fields we create below the tab will be grouped in the “Copyright” tab. So after the tab create:

• A text field, and label it Copyright Text
• A URL field, and label it Copyright Link
• And the text field for the URL field, label it Copyright Link Text

 

Set the field usage rules to control where the fields are used

Ok, now that the fields are setup, we’ve got to set the rules for which edit screen these fields are used in. Set the drop-downs for:

“Post Type”  ‘is equal to‘  “Landing Page”     ‘and‘

“Template ID”  ‘is equal to‘  “coming-soon-template“

Hit the publish button and it’s all saved. To check that everything is working, let’s create a new landing page and select the template we’re building. The landing page doesn’t have a thumbnail, so in the menu the listing will say “No Image”, but the template name will be ‘Coming Soon’.

And it works…

Yup, there’s the email form field, social button repeater and the copyright tab.

 

Create the initial markup for index.php

Ok the next stop is: Admin->Landing Pages->Developer Tools.

From the dropdown that says “Choose Template” select the ‘Coming Soon Fields‘.

After selecting it, the tools will generate the appropriate markup for the fields and for making this a working template.

Copy and paste the entire index.php section into the blank index.php we made earlier. Just leave the config section for now. If you paste that markup into the config.php page, you’ll have to update that every time you make an ACF field change.

In index.php with the newly pasted code, let’s make a few edits. First in the commented area at the top, change the template name (__TEMPLATE_NAME__) to “Coming Soon” and the author to your name.

 

Add the HTML template code to index.php

 

The next step is to cut and paste the HTML from the HTML template page, into the markup in index.php .

Working down from the top of the HTML template page, cut out sections and paste them into the equivalent HTML section in index.php . The <head> is the most complicated, so we’ll have to cut that in smaller pieces.

To add the style sheets, paste in the links from the HTML page. But for them to work we’ll need the whole file path. Handily the path to the template folder was grabbed higher up the page in the variable $urlpath, so all we need to do is include <?php echo $urlpath; ?> in the href.

Like this:

This is also how to add scripts.

The <body> area is simpler, so we can cut and paste the whole thing. Cut everything between the <body> tags in the HTML template page, and paste it in the high-lit area in index.php

We’re almost set, all that’s left is to update the image sources.

It’s the same procedure as for style sheets: paste <?php echo $urlpath; ?>  into the src path and the images will work.

To make sure everything’s working, we’ll head back to our test page and publish it. But before we go, the repeater code will give the page an error if we leave it where it is. Since we’re going to move it anyway,  cut it and its associated php tags out, and paste them on a blank text document for safe keeping. Save the changes and let’s go test it.

Hey! There’s our page in the preview!

 

Integrating the dynamic fields in index.php

The logo

Now that everything’s working, it’s time to integrate the dynamic elements. The first one up is the logo.

Remember that we set the “Website Logo” return value to “Image URL”? That means $website_logo will contain the URL of the image the user puts in the field on the backend. So what we do is replace the src URL with <?php echo $website_logo; ?>

The announcement

Next down the line is the announcement area (<h2 class=”subtitle”>). Since we picked a WYSIWYG editor for this, let’s change the <h2> to a <div> so the output isn’t styled for an <h2> and change the class to “announcement”.

And between the <div></div> tags put <?php echo $announcement_area; ?>

The email form

And about the same thing for the email form:

Remove the form section and replace it with a <div> </div>.

Give the div a class like “form-area”.

And between the <div> tags, insert <?php echo $form_field; ?>. That will echo out what we put in the WYSIWYG editor for the form area.

 

The social buttons

Now for the social buttons. Cut the repeater code from the safekeeping doc, and paste it directly beneath the <ul> that holds the social buttons.

Cut and paste one of those list items into the section of the loop directly beneath <!–your markup here–>.

Then replace the link inside of href=”” with <?php echo $social_link; ?>,

And put <img src=”<?php echo $social_icon; ?>”> between the the <a></a> tags.  So when all’s finished it should look like this:

Delete the remaining list items, and we can move onto the Copyright section.

 

The copyright

For the copyright section:

• Replace the existing “copyright” text with<?php echo $copyright_text; ?>, but leave the hyphen separator for the moment.
• Replace the link in href in the copyright link with<?php echo $copyright_link;?>
• And replace the text between the <a></a> tags with<?php echo $copyright_link_text;?>

For a better user experience, let’s add two if statements:

The first one is so that if the user puts in a link but no display text, the URL is displayed.

In simple wording it means: if( $copyright_link is not empty, [it has a value, the user put in a link] and $copyright_link_text is empty [it has no value, the user didn’t put in any text]) then…{ set the value of $copyright_link_text to the value of $copyright_link.}[the url will be displayed]

The second one displays the hyphen separator only if there’s text and a link to separate.

Again in simple wording: if ($copyright_text is not empty [the user put in some text] and $copyright_link is not empty [the user put in a link]) then…{ $hyphen = ‘ – ‘; } but if that’s not true (else) then…{ $hyphen = ”;  }[ An empty string, nothing gets displayed.]

 

To install the hyphen, delete the existing hyphen and place “echo $hyphen;” right after “echo $copyright_text;”. So the finished section will look like:

<?php echo $copyright_text; echo $hyphen; ?>

 

Ok, let’s save the changes and go see if it works. Head back to the test landing page(where we checked to see if the fields were applied) and put in some content.

• A small image
• some text
• a test email shortcode
• two social buttons with placeholder URLs
• and copyright info.

Hit update and we see…

It works! It needs some polishing and fine tuning, but the basic structure is complete.

Now it’s just about adding options, details and features. (And removing unneeded code, like the email validation jQuery)

How to do dynamic styling

The most common detail/feature is dynamic styling. It’s very simple, all we have to do is echo an appropriate field variable inside of an inline style section.

Let’s do a quick one: Say we want to be able to easily change the copyright link color, the way to do this is to head back to Coming Soon Fields and add a colorpicker field.

Ok, update the fields and let’s head back to Admin->Landing Pages->Developer Tools.

Regenerate the markup,(If you left the tab open from earlier, select some different rules first then select the Coming Soon Fields), and copy the code for the field we just made.

Back in index.php, paste the code right under $copyright_link_text;

Now we’ll just scroll down to the copyright link’s section and add an inline style for “color”. Only instead of a hard coded value for the color, we’re going to echo the colorpicker’s variable.

And that’s all there is to it. Now we can change the the copyright link’s color from the edit screen.

To recap:

• We set up a new colorpicker field
• Copied the markup for it
• Pasted it into index.php
• Gave the copyright link an inline color style rule (style=”color:  ;”)
• And for a value echoed the colorpicker’s variable ($copyright_link_color)

So the finished style rule was:

 style="color: <?php echo $copyright_link_color; ?> ;"

Pretty simple huh? We can do this for item positioning, image changing, hover colors, size changes… We can do most any CSS change this way, it just has to be an inline style.// style=”top: <?php echo $y_position; ?> ; “

Ok, that’s just about it, When you’ve got the page working the way you want, there’s two more things to do:

How to make a thumbnail

One is to add a thumbnail. Remember in Admin->Landing Pages->Add New the  menu listing for our template said “No Image”? That’s because there was no thumbnail in the template folder.

To make a thumbnail:

• First get the landing page setup the way you want it to look
• Take a screenshot of it
• Crop the image so it’s only a picture of the landing page
• Save it as ‘thumbnail.png’
• And paste it into the coming-soon-folder

Now when you head to Admin->Landing Pages-> Add New, the template will have a thumbnail.

How to export the fields

The other thing is the config.php markup.
When all the major changes are done:

• Head back to Admin->Landing Pages -> Developer Tools and regenerate the markup
• Copy the config.php section
• Paste it into config.php below the code we pasted earlier and save

What this does is save the field group to config.php. Now the template can be moved to a different installation or backed up, and the fields will go with it.

That’s it, there’s everything you need to know to make a landing page.  I hope you enjoyed the tutorial, and that it helps you make some awesome landing pages.

The finished product

If you would like to see the final product please view the demo and refresh a couple of times so we can see the different variations we were able to make with this template. It is also being sold on the marketplace and is made available complimentary to subscribers.

Also for more help please see the official documentation on using advanced custom fields to build a landing page template.