WordPress Pop-up Modal with Advanced Custom Fields

 In All, Functions, Themes

WordPress Pop-up Modal with Advanced Custom Fields

I recently worked on a project where the client requested a basic pop-up advertising solution for their home page that they could easily edit and turn on and off as required. I was really keen to keep the solution as lightweight and simple as possible, so I was reluctant to use a plugin. Also, as a huge fan of Elliot Condon’s magnificent Advanced Custom Fields plugin I thought I’d use it as an opportunity(excuse) to create a custom solution using ACF.

Creating the ACF field group

Firstly the custom field group was created containing all the information fields the client was looking to include. One of the goals of the pop-up was to develop a solution where the fields could be left populated in the admin area at all times, but the active state of the pop-up could be controlled. To enable this I included a simple checkbox option that would control the active state of the pop-up in the theme template.




Creating the Template

As mentioned the visibility of the modal was controlled by a checkbox field, so to have this control the active state of the pop-up the following was added to the front-page.php template.


Next the modal.php template was created to display the ACF fields and Zurb’s Reveal was integrated, which provided an extremely lightweight  jQuery solution for the modal.



Firing the modal

I really wanted the modal to fire  on-click option.


The end result was a simple but effective solution, that served the purpose for the project. The great thing about developing it using ACF is the total control it gives me to take this as a basis for creating a comprehensive and true customised solution that could include multiple images or integrate with Gravity Forms etc.


WordPress Pop-up Modal


For reference I’ve included the CSS below. It includes the media query updates I made to make it responsive.

Recent Posts

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Start typing and press Enter to search

Fx Eliminate render-blocking JavaScript and CSS in above-the-fold Google PageSpeed