Creating user editable shortcodes with Advanced Custom Fields (ACF)

A fairly technical client asked me if he could add WordPress ‘shortcodes‘ for various statistics around his website. This means the statistic only needs updating in one place and will then display properly around the site, a big time saver. We often set global options but they are not easy to insert to the page editor around the site, and aren’t as flexible as they are part of the theme.

As I use Advanced Custom Fields (ACF) to make a lightweight page builder, I looked into whether that could be a solution. ACF has recently added the ability to add custom post types & taxonomies to WordPress which is fantastic.

The Custom Post Type

Custom post types can be very useful in WordPress – the stock blog is a post type, WooCommerce products are a post type and adding new ones can make manipulating and listing posts easy. They can be added via PHP in the functions.php or with plugins that offer a nicer interface for the many, many settings.

I added a new custom post type called ‘shortcodes’ and gave it a nice icon.

acf custom post type shortcode

The Custom Field

There is only one custom field required for the shortcode, and that’s what will be entered into the WordPress editor like [[test_shortcode]]. That was created and linked to the ‘shortcodes’ custom post type.

acf custom field for shortcode

The Shortcode Posts

Now I added two test posts to see if it was working OK. The stock WordPress editor is used to hold the output of the shortcode, and as it’s a WYSIWYG, can include emojis, headings, images etc.

The first iteration of my code worked with one shortcode but then failed with a horrible PHP error about a class already being defined, so it took a bit more coding to support multiple shortcodes.

acf shortcode posts

Code

Shortcodes have to be ‘registered’ with WordPress so they can be used by content editors. This goes in functions.php file in your theme (or a ‘child’ theme if you’re using a ready made theme);

// Register shortcodes from custom post type that holds them
function register_shortcodes() {
  $args = array(
    'post_type' => 'shortcode',
    'posts_per_page' => '99'
  );

  $shortcode_query = new WP_Query($args);

  if ( $shortcode_query -> have_posts() ) { 
    while ( $shortcode_query -> have_posts() ) {
      $shortcode_query -> the_post(); 
      $contents = get_the_content();

      $shortcodeContent = function() use ($contents) {
        return $contents;
      };

      add_shortcode( get_field('shortcode'), $shortcodeContent );
    }
  }
}
add_action( 'init', 'register_shortcodes');

There was one gotcha with this – using the_content(); resulted in the shortcodes all getting output at the top of the page in admin and on the front end. WordPress does some kind of filter on the_content(); that get_the_content(); sidesteps.

Testing

As mentioned the initial code only worked with one shortcode so more work was needed using a ‘closure’, then the_content(); was causing unwanted output. The above code is the current version and works well for the client.

shortcodes on front end of wordpress

Summary

Adding user editable shortcodes to WordPress site was surprisingly easy using Advanced Custom Fields and a snippet of code in functions.php, and gives the client a lot of flexibility with his website as well as saving him a lot of editing time in the future.

Technical November 5th, 2024

Close