Home

Home

Home

How to Create a Global Banner System in WordPress with ACF Pro – Complete Guide

In today’s article, I’ll show you how I created a global banner system in WordPress that allows for flexible management of marketing content across the entire site. The system uses Advanced Custom Fields Pro and enables not only the creation of different types of banners but also their intelligent placement within the content.

Preparing the Basic Structure

Creating a Flexible Container

The first step is creating a basic field group in ACF:

I created a new field group in the ACF panel called “Flexible Content” (flexible_content). I chose the Flexible Content field type, which gives us amazing flexibility – we can add, remove, and rearrange sections as needed. Then, I created 3 empty sections corresponding to our banners, giving them appropriate names.

💡 Pro tip: Flexible Content in ACF is a powerful tool that allows for dynamic management of page sections.

Display Configuration

A key element was properly configuring the display rules in ACF:

  • Set display for the “General” template
  • This ensures fields are only available where we actually need them
  • Prevents cluttering the admin panel with unnecessary options

Changing Page Template for Individual Subpages

At this point, we can change the template to general, to which additional ACF sections are assigned.

Creating the Main Template

In the child-theme root folder, I created main.php and implemented the handling of our flexible sections:

💡 Best practice: I use get_template_part() instead of directly including files. This provides not only cleaner structure but also better support for child themes.

Banner Implementation

Creating the “Repeatable Sections” Group

In the ACF panel, we create a new field group.

Adding Fields to WordPress Panel

We implement field visibility in the admin panel. This can be added in functions.php or another file linked in functions.php:

Whitepaper Banner (section_31)

In repeatable sections, we fill in the placeholders. This banner is used to promote educational materials. It consists of:

  • Background (image)
  • Text above heading (text)
  • Main heading (text)
  • Text field (WYSIWYG)
  • CTA button (link)

Adding Remaining Banners

Similarly, we create structures for other banner types:

  • Contact us Banner (section_32)
  • Catalog Banner (section_33)

Implementing Banner Templates

Component File Structure

We create a directory structure for our components:

Implementing Whitepaper Banner

In section_31.php, we implement the banner structure:

Styles and Appearance

For each banner, I defined appropriate CSS styles. I’m omitting the element styling here.

Global Placement System

The most advanced element is the intelligent banner placement system for different types of pages. Currently, we can use these banners on any subpage that has its page template set as “General”. However, I want to add them to every blog post, which is also divided into different post types, as well as to product pages.

Implementation in Single Posts

In the single-knowledge.php file (equivalent to single.php, different post type), I added the structure for banners:

Loading JavaScript on Appropriate Subpage Types

We load the script only on pages where banners are visible to avoid unnecessary page code loading:

JavaScript for Display Management

I created a script that analyzes the page structure and places banners in appropriate locations:

Key placement rules:

  • Contact Banner always at the end
  • Whitepaper before the third heading (or hidden if the article is shorter)
  • Catalog Banner before the second heading (or hidden if the article is shorter)

Why This Solution?

This system has several key advantages:

  1. Central management: All banners can be edited in one place
  2. Flexibility: Easy to change banner order and content
  3. Easy expansion: Modular structure allows for easy addition of new banner types

Summary

This banner system significantly improves marketing content management on the site. By combining ACF Pro, flexible PHP structure, and intelligent JavaScript logic, we get a tool that is:

  • Easy to manage for administrators
  • Flexible to expand for developers
  • Effective in presenting content to users

💡 Final tip: Always think about future expansion when designing such systems. Modular structure and clean code organization are key to easy maintenance and development.

Leave a Comment

Required fields are marked *