The Tips

Tips Child Theme ACF Pro Repeater in a Shortcode

ACF Pro Repeater in a Shortcode

Roy AngerUpdated:

Tags:

The addition of ACF Pro offered up a ton of new power for websites built with X. This tip is a tutorial on setting up a ACF Pro Field Group and an associated shortcode, which you can then drop into Cornerstone.

A Note on Aesthetics
Please note that I will not touch on styling in this tutorial. The end product looks ugly – stylizing is another topic.

Step 1: Setup X, Child Theme and Templates

As covered in the next video, you don’t have use a page template. There are many ways to setup your Location Rule. The key is that you only have your Field Group appear for the pages or posts you want it to appear for.

I’ve created a copy of the Container – Header, Footer page template and just changed the name. There were no changes to the actual template.

/x-child/template-profiles.php

Copy this and place it in the /x-child/ directory and call it template-profiles.php





/x-child/framework/views/<stack>/template-profiles.php

Copy this and place it in the /x-child/framework/views/<stack> directory where <stack> equals the stack you’re using, and call it template-profiles.php






  
>

Step 2: Setting Up Your Field Group

There isn’t much to add to the video. You will need to map out your data and set up the Field Group. This gets displayed at the bottom of posts or pages that match the Location Rule.

Commitment is Key
If you setup a Field Group, enter data, and then edit the field group you can loose the data. If you doing something a little more complex, take some time to map out the data and plan so once you start you don’t need to restart.

Step 3: Creating the Shortcode

For the sake of the tutorial, I kept the HTML code lean. You can flesh out your content as needed, to create the look you want. Mix it in with some CSS.

/X-CHILD/FUNCTIONS.PHP

Add the following to your functions.php file, which you can find in the /wp-content/themes/x-child.


// Shortcode to create our ACF Pro content
 
function ra_acf_shortcode (  ) {
  if ( have_rows( 'profile' ) ):
    while ( have_rows( 'profile' ) ): the_row();
      $content .= sprintf( '

%s

', get_sub_field( 'name' ) ); $content .= sprintf( '

%s

', get_sub_field( 'title' ) ); $content .= sprintf( '
%s
', get_sub_field( 'info' ) ); $content .= sprintf( '
Profile for %1$s
', get_sub_field( 'name' ), get_sub_field( 'image' ) ); endwhile; endif; return $content; } add_shortcode( 'acf1', 'ra_acf_shortcode' );
Have a question or a comment about this article? Click here!
About the Author

Roy Anger

Hey everyone. I made my first website way back in about 95, before PHP, Wordpress, CSS and even tables. I love the flexibility and framework available in X, and love working with X on client sites. Aside from Wordpress, I love spending time with my two girls (girlfriend and chocolate Lab), trying to be a decent photographer and generally relaxing.

Share this Tip!