Ubuntu
# How to Create Landing Page Templates Using ACF
Author: Giulio Daprela
Version: 0.0.1
[in]: http://www.inboundnow.com/
Support:
[docs.inboundnow.com](http://docs.inboundnow.com/)
##Intro
In the latest versions of the InboundNow suite of plugins we changed our templating system, and switched from a proprietary engine to the Advanced Custom Fields plugin. There are several advantages coming from this switch:
* possibility of using advanced fields such as repeater fields and flexible fields
* use of a well kown, reputable and stable technology
* lower learning curve for developers that want to build their own templates.
Thanks to the new templating engine it's possible for the end user to create complex, beautiful and professional landing pages, call to actions and emails without writing a single line of code.
This guide has been created for developers, and assumes that you know how to use ACF as a developer. Therefore a lot of information of how to get the fields has been omitted. If you are new to the ACF plugin, the ACF website has extensive documentation about the API, and guides and tutorials for developers. Please go to the [resources](http://www.advancedcustomfields.com/resources/) page on the ACF website to get access to all the documentation. You can also find guides and tutorials everywhere on the web. Here we list a few
* https://code.tutsplus.com/tutorials/getting-started-with-advanced-custom-fields--cms-22126
* http://thestizmedia.com/front-end-posting-with-acf-pro/
* http://thestizmedia.com/acf-pro-simple-local-avatars/
* http://eastbaywp.com/2015/04/april-2015-acf-pro-links/ (a collection of resources)
* http://www.sitepoint.com/getting-started-with-advanced-custom-fields/
* https://www.stormconsultancy.co.uk/blog/development/dev-tutorials/creating-flexible-content-with-advanced-custom-fields/
* http://www.elegantthemes.com/blog/tips-tricks/how-to-create-wordpress-custom-fields
* https://code.tutsplus.com/tutorials/create-a-simple-crm-in-wordpress-advanced-custom-fields--cms-20049 (multi part guide)
##Planning the Template
In order to build a dynamic template for InboundNow you need to have first the static html template already developed. You can do it yourself with one of the many free and paid editors available, or buy it. At this point you need to decide what you want to be able to configure in your template. Tha main things that can be customized in a template are all the text and titles, any colors from text colors to background, borders etc., images and videos. Developing a dynamic template can take anything from one day to a few days, depending on the complexity of the template and your experience.
If you plan to develop a lot of templates we suggest to create a skeleton folder with all the files and the basic code inside, so that every time that you start a new template you can just paste the folder and change its name to have the basic structure already in place.
**Disclaimer**: The following guide assumes that you have your copy ACF Pro installed on your website or that you use InboundNow Pro that comes with ACF Pro included. Making powerful dynamic templates require the use of repeater fields and flexible fields which are available only with ACF Pro.
##Template Config
The must-have files in a dynamic template are `config.php` which holds all the ACF fields, `index.php` that holds all the html and dynamic styling and `thumbnail.png` that is, as the name say, the thumbnail that shows up in the admin page.
You must create all your custom templates under the directory `wp-content -> uploads`. For example, for landing pages the basic structure of the template will be the following:
```
wp-content
|_uploads
|_landing-pages
|_my-template
|_config.php
|_index.php
|_thumbnail.png
```
###config.php
The file config.php contains all the fields that you create with the ACF Pro plugin. For the sake of this explanation, suppose that you have already created a group of fields with ACF Pro that you want to use for your dynamic template. At this point in the WP Dashboard you must go to `Custom Fields -> Tools`, select the group of fields that you've saved and click on 'generate export code'. The resulting code must be pasted in the config.php file after the comment that says `/* Load ACF definitions */`. For the template to work, the last part of the array must be replaced with the following code for the case of landing pages
```
'location' => array (
array (
array (
'param' => 'post_type',
'operator' => '==',
'value' => 'landing-page',
),
array (
'param' => 'template_id',
'operator' => '==',
'value' => $key,
)
),
),
'menu_order' => 0,
'position' => 'normal',
'style' => 'default',
'label_placement' => 'top',
'instruction_placement' => 'label',
'hide_on_screen' => '',
'active' => 1,
'description' => '',
'options' => array(),
));
endif;
```
Please look at one of the existing templates included with the plugins to see how to configure the file config.php for the other plugins.
###index.php
In order to build a dynamic template you need to have a static html template already built and tested. It will be a lot easier adding dynamic blocks and styling to an already tested codebase. Most of the dynamic css must be inline or enclosed in a `