Extending Layout Control in WordPress by Combining Shortcodes and ACFs

A lot of my clients want the ultimate control when it comes to the layout of their website. While this isn’t usually affordable or feasible in normal websites, the Advanced Custom Fields plugin has been a godsend in allowing developers to go beyond basic WordPress functionality and into more advanced ways of content control and layouts. This became even more noticeable when I added on the Repeater field extension, which meant I no longer needed custom post types for small repeating items like sliders. Instead, I could house it on the homepage (or wherever the slider laid).

And yes, I’ll often spend an hour or more redoing the layout of my ACF, just to make sure it’s as simple and easy as possible for the client to do what they need to do. I’m not a fan of doing tiny updates and revisions, so the more control I can hand over them, the less I have to do.

A common issue I ran across the other day, was allowing for custom callout sections in the middle of content. Usually, I’d have just had the callout at the very bottom, or the very center, or in some static form that the client was stuck with. They could update the content itself with ACF, but they couldn’t control just where the callout would land in the content. Knowing these clients were not very technically versed, I wanted to stay away from having to write any code or tags, or even overly complicated shortcodes. But what if I combined the power of ACF with the versatility of the shortcode?

The Problem

The client wanted to have these content slideshows (with thumbs) that would open up a lightbox and show a video. Something like the below.

And although they didn’t specifically ask for the functionality, I had a feeling they wanted to control where this slider showed up, and if it showed at all. Some of the sections just needed plan images. Some of the content areas weren’t even sectioned off at all.

The ACF Setup

So how do we do this with ACF and shortcodes? First, we’ll need to create our ACF section and set up all the repeater fields. Then, we’ll create a simple one word shortcode that allows the user to place anywhere on the page, and the slider will show there. Note, that the way I have this set up means you can only have one slider per page, but this is an easy thing to modify should you need more.

You can see there’s nothing too fancy here – basically one Repeater that houses field for the image, caption and video URL.

The Shortcode

Now for the tricky part – the code. I thought it was going to be a bit tricky to set up custom fields in shortcodes, especially since they’re dependent on post IDs, but since they’re in the middle of the content loop anyways, it’s not something we have to worry about. Stick the below in your functions.php

function videoSlider($atts, $content = null) {
	extract(shortcode_atts(array(

    ), $atts));

	$out1 = '
		

			

			  
';

			  	if( have_rows('slideshow_add_slide') ): while ( have_rows('slideshow_add_slide') ) : the_row();
			  		$image = wp_get_attachment_image_src( get_sub_field('slideshow_slide_image'), 'slideshow_big' );
			  		$imageurl = $image[0];
			  		$output .='
'.get_sub_field('slideshow_slide_caption').'
';
			  	endwhile; endif;

		$out3 ='
			

			

			  
';

			  	if( have_rows('slideshow_add_slide') ): while ( have_rows('slideshow_add_slide') ) : the_row();
			  		$image2 = wp_get_attachment_image_src( get_sub_field('slideshow_slide_image'), 'slideshow_small' );
			  		$image2url = $image2[0];
			  		$output2 .='
';
			  	endwhile; endif;

		$out4 = '
			
		
';

    return $out1 . $output . $out3 . $output2 . $out4;
}

add_shortcode('slideshow', 'VideoSlider');

In case you’re wondering about the actual slider code, I’m using the ever wonderful Flexslider here, with the option to have a secondary carousel (with thumbnails) to control the top carousel, as seen in the first photo. When you break down the code, you’ll see that there’s actually nothing too difficult here, if you’re already used to both ACF and shortcodes.

The hardest part is the repeating field, and making sure it shows all of them instead of the first one, which is why the whole thing is broken up into multiple outputs.

Usage

Now all the user has to do, is to full out the ACF section on the corresponding page, and insert the [slideshow] shortcode tag, anywhere they wish it to appear. Score!