CMB2 Options page to generate a list of services

Another example of using CMB2 repeater fields to replace ACF Pro repeater feature.

When I added the AM Foran PR site to my portfolio I mentioned using an options page to create a structured page. I used Advanced Custom Fields Pro to allow for multiple blocks. As I no longer use ACF Pro, I’ve decided to rewrite the code with CMB2 Repeater fields.

With ACF Pro the structure of the input fields is set up with a GUI within the WordPress Dashboard. It’s very quick to get going. You then write code to retrieve (and display) the data. The downside of the GUI is that the input fields could be accidentally modified by the client or site admin. When the input fields are defined in code, as it is done with CMB2, this cannot happen. Furthermore, I had previously found that ACF slows down the front end, so removing it can only be a good thing.

Copying ACF fields to CMB2

I looked at the screenshot of the PR Services admin page and created CMB2 fields.

The layout of the ACF fields is much more compact than those generated by CMB2 but that’s a small price to pay for the integrity of the input fields configuration and the reduced database queries on the front end.

Like I did for the ACF Pro version, I used a shortcode to render the markup. The CMB2 version produces the exact same markup.

Query Monitor reports 32 queries for the CMB2 page and 87 queries for the page using ACF Pro functions. The database query time in the CMB2 version is less than half of the ACF Pro version.

Full Code