Intro

When developing custom Wordpress websites I like to build customisable areas where the user can place specific content and functionality that Wordpress can not otherwise provide. To apply these customisable areas I like to use either CMB2 or the Advanced Custom Fields Plugin

When using ACF, or CMB2 you can setup customisable sections within the Wordpress theme that will assist the client with future changes to these areas, such as image sliders, custom sidebars, headers and footers.

Recently, I built a customisable hero section using the Advanced Custom Fields Plugin and using the Bulma CSS framework to quickly setup the style and layout for the hero section and the Wordpress theme. Below are the development steps that I took.

Step One

Install and activate the Advanced Custom Fields Plugin.

Advanced Custom Fields plugin install

Step Two

Go to the Custom Field Groups and click ‘Add New’. From there set up the new fields.

Edit Fields screenshot

When it comes to setting up a call to action button in ACF make a new field, and make it a ‘Field Group’. Then add as many ’Sub Fields’ as you need. In my example, I have one for the button title and another for the button link.

Edit call to action button fields

You can download the AFC Jason file that I made in order to build the same Hero unit that I have, to use it just import the file through ACF tools.

Step Three

Call the following code in your functions file. If you’re not using the Bulma CSS framework then your code will look different.

In this case I’m using Bulma to give me a basic layout, colours, button styles etc. I have also added some custom CSS to allow for a background image to be positioned absolutely in the hero unit.

Of course there are many ways to set this up and you could use ACF with Wordpress (Gutenberg) Blocks as well. I chose not to do this as I’d rather the end user stayed as far away from making design decisions as possible. Using ACF in this way you can give the client an uncluttered interface that allows you the designer/developer to set the different aspects such as image width, button type, heading type and so forth. At the same time it still allows the end user can make the desired changes without affecting the overall design vision.