How to create custom call to action templates

Creating a custom, user programmable, call to action is easy! This documentation assumes you know how to work with FTP or some other file manager for working with your WordPress files.

Here are the steps!

Create a folder for your template files

Create a subfolder with a unique name in /wp-content/uploads/calls-to-action/templates/. I created one with the folder name ‘my-custom-template’. Try to avoid capitalization and spaces in your folder name and make it unique from any other call to action templates.

cta-custom-templates-path

 

 

Add a configuration file: config.php

Add a new file to your ‘my-custom-template’ directory and name it config.php. This file will tell Calls to Action information about the template, define any dynamic settings that might power the call to action, and also tells calls to action what the dynamic html markup will be. We’ll break down the config.php into three parts:

  1. Template meta data.
  2. Dynamic settings setup
  3. Markup

Before we get into each section, here’s a link to the example config.php we use in our ‘Demo’ call to action template which is meant to serve as an example on how to setup a Call to Action template. Now we will break it down.

Setting up template meta data

The first thing we want to do in this PHP document is setup some internal documentation that describes the template. This information is not parsed or used by our software, but it does help us understand what our intention is and will help others. in the future, understand it as well:

Next we will want to setup a couple of PHP variables that we can use later: 

Then we will setup the template’s meta data which IS read by Calls to Action:

Notice above that we are setting information into a $wp_cta_data variable. This is a global variable that contains all of the plugin’s template data. Change the above to suit your purpose. Each setting item is commented to help you know it’s purpose.

Creating dynamic settings

One of the great parts about the Calls to Action plugin is that it allows you to create dynamic content, easier, using fields and settings. Unlike our Landing Pages component and our Email component, Call to Action templates use a custom field definition structure, whereas the others make use of fields generated by the Advanced Custom Fields plugin. Once these fields are defined they will be included in the Call to Action setup area for users to fill out. In the code below we create one setting field of each type we support, meaning we create a programmable text field, a textarea field, a WYSIWYG field, a dropdown, a file/media upload field, checkbox, radio, and colorpicker. These can be used in creating the Call to Action itself.

Building the markup

Lastly we want to tell our configuration where to source the HTML markup of the call to action. Here we can source the markup from an additional index.php or craft it directly into config.php. For our example we are going to create an index.php file and import it’s contents:

Add a markup file: index.php

The calls to action markup accepts special tokens that are replaced by field values inputted by the user (see the section above on creating dynamic settings). We use this token structure to handle the dynamic content of a call to action. Study the index.php file below to see how we’ve handled setting values and how we used conditional values to affect the markup of the call to action HTML:

Add a thumbnail: thumbnail.php

Now that you’ve built your template it should show up as selectable when creating new call to action templates (or switching templates within an already established call to action). Now we need to create a thumbnail.png file for it so it looks pretty inside the template selection screen. Make sure it is at least 300px wide. If you don’t want to make one yourself, why not use a picture of a cat?

Save this and rename it thumbnail.php and store it in your new template's folder.
Save this and rename it thumbnail.php and store it in your new template’s folder.

Special Notes

  • You never want to develop a new template inside /wp-content/plugins/calls-to-action/templates. If you do the next time you upgrade Calls to Action it will be automatically deleted. Always develop custom templates in the designated calls to action upload folder: /wp-content/uploads/calls-to-action/templates.
  • If you are a WordPress theme developer you can include custom ready call to action templates and ship them with your theme. To do this place your template assets in /wp-content/themes/your-theme/calls-to-action/  (note that in this path we do not have a /templates/ subfolder. Place your cta template folders directly in the /calls-to-action/ folder.