Aleš Sýkora wrote

Use ACF Repeater as Shortcode in Gutenberg with custom code

22. 3. 2021 in

When Gutenberg editor came to the scene I was trully in love with Toolset Types and Views. Then everything changed. I start playing with Oxygen builder and found a toolset as “too much” for my sites. Especially with all the scripts and bloat which Toolset uses.

So I changed my mindset and now, I try to use only lightweight tools and for most of content editing – The Gutenberg editor.

With lot of small or medium sized websites I prepare these templates in Oxygen:

  • 01_MAIN
  • 02_PAGE_NORMAL
  • 03_PAGE_FULLWIDTH
  • 04_POST
  • 05_ARCHIVE_UNIVERSAL
  • 06_ARCHIVE_SEARCH
  • 07_404

And from these templates, my websites display menus, sidebars, and other ASIDE contents. The MAIN content is build in Gutenberg.

And sometimes, pages are special and you need to use ACF special fields in backend, to make it more user friendly. For example – you want a page with custom list of downloadable documents, or list of workers etc.

You don’t want user to mess with gutenberg columns – simply because they are not easily usable at all. So you create custom ACF repeater and use it for the page you need. And then you have 2 choices:

  1. Create another post template in oxygen and switch the post to it
  2. Create custom shortcode and use it in gutenberg editor, whenever you want to display you custom list

I will choice the second answer. So I will need to do some manual work with HTML and CSS, but I will be free with positioning the list in gutenberg content.

Example of ACF repeater shortcode without HTML tags

This one was a easy one, but gutenberg editor was sayin “JSON error” everytime I saved the page. So I found I need to use the ob_start and ob_get_clean, because you can not use HTML tags inside the shortcode without it. And I think, you would like to use them for output styling.

<?php
// ACF Shortcode repeater by toolset.wiki
function yourfunction_name() //change to your function name
{
    ob_start();
    if (have_rows('repeater_slug')) : ?> //change to your repeater slug
            <?php
            while (have_rows('repeater_slug')) : the_row(); ?> //repeater slug
                        <?php the_sub_field('custom_field'); ?> //acf fields
            <?php endwhile; ?>
    <?php endif; ?>
<?php return ob_get_clean();
}
add_shortcode('shortcode_name', 'yourfunction_name');

Put this code to your code snippets plugin (for example) and use your fields. Then use the shortcode in content to display the data.

ACF repeater shortcodes in Gutenberg editor

And it can look like this in the frontend:

Frontend styled output of ACF Repeater Shortcode

ACF Repeater shortcode with HTML tags (example)

<?php
// CENIK JESLE

function vypis_cenik_jesle() {
	ob_start();
				if( have_rows('cenik') ): ?>
					<div class="as-card">
					<?php 
					while( have_rows('cenik') ): the_row(); ?>
						<div>
							<h2><?php the_sub_field('nazev_skupiny'); ?></h2>
							<?php 
							if( have_rows('sluzby') ): ?>
								<div class="c-columns-2 c-columns-m-1 c-margin-bottom-xs">
								<?php 
								while( have_rows('sluzby') ): the_row();
									?>
                                  <div><strong class="c-margin-right-xs"><?php echo get_sub_field('nazev_sluzby'); ?></strong><?php echo get_sub_field('popis_sluzby'); ?></div>
                                  <div><?php echo get_sub_field('cena'); ?></div>
								<?php endwhile; ?>
								</div>
							<?php endif; ?>
						</div>	

					<?php endwhile; ?>
					</div>
				<?php endif; ?>
<?php return ob_get_clean();}
add_shortcode('cenik_jesle', 'vypis_cenik_jesle');

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Speeding up WordPress & Toolset
7. 11. 2019 in
Tips for speeding up WP + Toolset.
Read More
Aleš Sýkora wrote
Get WordPress title for page, post, category, archive in Oxygen
26. 1. 2021 in ,
Want to create only one template for Header and Footer – the main template – in Oxygen sometimes? So You need to display the title of current page, post, archive, category in one place. It cannot be done with Oxygen conditionals :(. So you have to make it done with code block and custom PHP. […]
Read More
Aleš Sýkora wrote
Featured products query WooCommerce
11. 4. 2021 in
If you are using your own queries for WooCommerce stores, for example in Oxygen builder’s custom code block then you may need query for featured products. You can use the query I am using inside my product sliders :-).
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram