ACF and the Top Banner #MaratonWP # 10AniversarioAyudaWP • WordPress Help

Here you have another great article from #MaratonWP that we will be doing all day today to celebrate 10th Anniversary of WordPress Help . Keep an eye on every hour there will be surprises, with gifts and more WordPress tricks, and do not miss the Twitter hashtag # 10AniversarioAyudaWP .

Advanced Custom Fields ACF as of now, is one of those plugins that I use the most in my projects with WordPress. With ACF we can create and manage our own custom fields and thus be able to introduce additional information to our content.

In this article I will explain how you can create a banner on your website and manage it completely from the administration panel of WordPress. For this, we will use the ACF plugin that will facilitate the creation of the settings page in the administration panel along with the custom fields that we want to use.

Important: in this example we will use ACF PRO, since that allows us to easily manage the settings page in our administration panel.

Step 1 – Download / Buy and install

The first thing we have to do is get the plugin ACF PRO from the page official . As you can see, the price is very affordable and, in addition, it is a single payment and not annual.

If you dedicate yourselves to making web pages for clients, the ideal would be that you do with the developer version. This will allow you to update the plugin easily in each and every one of the web pages where you install it.

Once we have the plugin, we upload it to our WordPress and activate it.

Step 2 – Create the fields that we will need to manage

In this case we will create a banner for the top part of the web and, for this example, we will add the following to this banner:

  • One text
  • One call button to the action

We will use the ACF fields to manage the information of the text and the button, that is why we will need the following fields:

  • Text Field 1: here will go the text of the banner
  • Field of Text 2: here will go the text of the button (buy now, see, etc.)
  • URL field: here we will put the url to which the button points

Step 2.1

To create the fields we have to go to "Custom Fields -> Field Groups -> Add New" [1 9659033] Step 2.2

We start adding the first field, in this case it will be text type so we can add the text of the banner.

Important: in this trick we will not go into detail in each of the types of fields and options.

The parameters are the following:

  • Field label: this is the name that we will see in the administration panel to know which field it refers to
  • Field name: this is the name / id of the field in particular, it is what we will use to obtain the information in the Front-End. It is always advisable to give them "logical" and uniform names with respect to the other fields.
  • Field type: in this case is text type (in another, for example, it will be URL type)

Step 2.3

We create the rest of the fields that we will need, as you can see in the image, the "Name of the field" is uniform in all and will help us when doing the programming part.

Step 3 – Create the settings page in the administration panel

We already have the fields created, it's time to add them to a settings page within our WordPress administration panel so we can add that information we need.

To perform this, ACF offers us a function that we have to paste in our functions.php file:

And that's how would be:

Advice: you do not have to Create a page of settings for each functionality you want to add to your web page. You can create a settings page and integrate all the functionalities there using Groups and Tabs that ACF offers you.

Step 4 – Insert the fields that we have created in this settings page

We go to our "Group of Fields" "And in" Location "we assign you our settings page.

If we now go to our settings page we will see that our fields already appear there, so we can enter our information:

Step 5 – Show information on our website

We already have the fields, the settings page and our content entered in our WordPress. It's time to make that information appear on the web.

Step 5.1

Here is the code we're going to use in this example:

Step 5.2

In this example we are going to show the banner at the top of the page, that is why we have to introduce our code in the header.php

Important: always make all the changes in a Son Theme and not in the parent theme directly. You have more information here about the themes son .

Important: in this case we are using the Twenty Sixteen theme. Maybe in your subject things have to be done differently or even through hooks (if for example you use Genesis Framework).

Step 5.3

We already have the content in the database and the code to show it in the header.php. If everything went well, we should see this:

Congratulations! We have already made the Top Banner work and appear where we want. But we're not going to leave it there, we're going to introduce more things to make our banner more useful.

Step 6 – Add "Activate / Deactivate" to our banner

It's likely that we do not want to always have our banner put there (or maybe yes) that is why we are going to add the functionality of activating / deactivating the banner.

This may be ideal for those times we want to report something important to our visitors / users and we want to do it in a timely manner.

Step 6.1

We went to our Group of Fields "Top Banner" and added a field called True / False:

Trick 1: we can drag this field to the top above the rest of the fields to be the first thing we see

Trick 2 : this field has the option of having an improved UI, that is, instead of seeing a "Checkbox" what we will see is a button. The text of the button can be edited, but as in this case the question we ask is "Activated?" The answers will be Yes / No

Trick 3: if we decide that Top Banner is not activated … Why should we see the text and button fields? Is not it better to not see each other so as not to confuse?

ACF allows us to add "Conditional Logic" to the fields, so we can say that the Text and URL fields are not shown if the banner is not activated. [19659222] Step 6.2

We have added the option to activate or deactivate our banner, but now we have to add the necessary code to manage if it shows or does not show the banner on our website.

To do this, we will use the following code:

If the "top_banner_activated" field is checked (checkbox) or is Yes (button), then shows the following code (the banner code)

Step 7 – More options

We have done the most important thing, add the fields to manage our banner and make it show. But now you could do more things, here is a list with some examples:

  • Add CSS styles to make it look like we want
  • Add more editable fields, for example some images, icons etc.
  • Add the option that the link opens in a new tab with target = "_ blank", also, this option can be put with a checkbox.
  • Add a title = "" to the link and that is editable from the administration panel [19659023] To make the button appear before or after the text
  • And a lot of options thanks to the types of fields offered by ACF


In this trick we have seen what ACF can offer us when adding personalized content to our website. I invite you to install the free plugin and to try on your own all the types of fields and options that we have.

What do you think of the trick? Do not hesitate to leave a comment with your opinion and ideas.

Ibon Azkoitia

Ibon Azkoitia from Bilbao and currently living in Madrid. I studied and trained to be a racing mechanic, in race tracks specifically, until I discovered WordPress and started working with it.

I started as a Freelance under the name of Kreatidos and right now I work in SiteGround as Event Coordinator. 19659343] I participate a lot in the WordPress Community. I love everything related to the community and events, that is why I am involved in the Meta section, Meetups, WordCamps and as a "deputy" of the WordPress international community.

I started organizing the WordPress Community Bilbao and I have organized the two WordCamp Bilbao, 2016 and 2017.

Loading …

That may also help you: