WordPress Development on a laptop

Creating a dynamic call to action in WordPress

The Client Request

In one of my most recent WordPress development projects, the client requested to have a dynamic call to action in the footer. Within that CTA would be an image, header text, body text and a button that takes them to a different webpage.

Something similar to this:

Example of WordPress dynamic call to action made with Advanced Custom Fields

They wanted the ability to have different content when they added new pages and only for their inner pages. Since the client would handle creating new pages I wanted to make this as easy as possible for them.

Advanced Custom Fields

Since updating and changing the dynamic call to action would be in the hands of the client, I decided to use Advanced Custom Fields.

ACF (Advanced Custom Fields) allows you to take full control of your edit screens and custom field data.

ACF is great when it comes to templating and expanding upon what a user can do within the editor screen.

The Solution: Creating The Dynamic Call To Action

Setup Your Field Group

Once you have ACF installed on your website it’s time to create a new field group.

I’m going to name my field group: Footer CTA and then start adding my fields

Advanced Custom Fields Editor Section

You are going to have 6 fields

  1. Ebook Image
  2. Ebook Image Alt Text
  3. Ebook Header Text
  4. Ebook Body Text
  5. Ebook Button Text
  6. Ebook Button Link

Not all of these are necessary as the button text or header text could always be the same. If the button text is always going to be “download now” you can leave the field off and hard code that text into your template. For the sake of letting the customer have full control I decided to add all of them.

Start by naming the field label and take note of the field name, we will use this in the template.

When using images you will want to have the return value as an Image URL, you will see why when we get to the template section.

Below is what the Image field should look like

Advanced Custom Fields Editor Section

The rest of the fields can be left default, just name them and take note of the field name as we will be using these in the template.

Below is what it will look like when you are done. You can see I chose ‘Page Template’ is Equal To ‘Inner Pages’. This means it will only show up on the template I have for inner pages. If I were to set it to ‘Home Page’ it would only be available while editing the home page.

Advanced Custom Fields Finalized Editor Section

* If you want it to look nicer you can select: Style: Standard near the bottom.

Add The Code To Your Template

Now we go to our footer template.

Below is an example of how you add in the code for your field group.

Writing the code in sublime text

This is what my final code looks like, take note that I am using Foundation so your structuring might look different. My inner template is also in a subfolder so your if statement might differ from mine.

Finalized Code In Sublime Text

Now when I go to edit any of my inner pages I can add in the information necessary for the CTA, see below.

Gif of using ACF in the editor page

After styling the CTA your final result will look like the following:

Example of WordPress dynamic call to action made with Advanced Custom Fields

The client now has the ability to add and edit the dynamic call to action without any coding knowledge.