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:
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
You are going to have 6 fields
- Ebook Image
- Ebook Image Alt Text
- Ebook Header Text
- Ebook Body Text
- Ebook Button Text
- 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
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.
* 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.
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.
Now when I go to edit any of my inner pages I can add in the information necessary for the CTA, see below.
After styling the CTA your final result will look like the following:
The client now has the ability to add and edit the dynamic call to action without any coding knowledge.