Refactoring code for the ACF Custom Page Builder

In my last post, I walked through how to build a simple but powerful page builder field group in ACF Pro and provided PHP to check for the content type and then include the proper PHP file to output it.

I want to refactor that code now to make it more robust in far fewer lines. When looking at the original code:

// filename: template-parts/_repeater_content_blocks.php
<?php if( have_rows('repeater_content_block') ): ?>
<section class="repeater-content-blocks">
<?php while ( have_rows('repeater_content_block') ) : the_row(); ?>
<?php if(get_sub_field('content_type') === 'slider_carousel'): ?>
<?php $slider_background_image = get_sub_field('image'); ?>
<article class="content-block <?php the_sub_field('content_type'); ?><?php echo isset($slider_background_image) ? ' has-background-image' : ' no-background-image'; ?>"<?php echo isset($slider_background_image) ? ' style="background-image: url(\'' . $slider_background_image['sizes']['fp-xlarge'] . '\')"' : ''; ?>>
<?php elseif(get_sub_field('content_type') === 'tabbed_content'): ?>
<article class="content-block grid-x grid-container <?php the_sub_field('content_type'); ?>">
<?php else: ?>
<article class="content-block grid-x grid-padding-x <?php the_sub_field('content_type'); ?>">
<div class="cell">
<?php endif; ?>
<?php
if(get_sub_field('content_type') === 'accordion'):
get_template_part( 'template-parts/content-blocks/_content_block_accordion' );
elseif(get_sub_field('content_type') === 'banner_image'):
get_template_part( 'template-parts/content-blocks/_content_block_banner_image' );
elseif(get_sub_field('content_type') === 'code_block'):
get_template_part( 'template-parts/content-blocks/_content_block_code_block' );
elseif(get_sub_field('content_type') === 'side_by_side'):
get_template_part( 'template-parts/content-blocks/_content_side_by_side' );
elseif(get_sub_field('content_type') === 'slider_carousel'):
get_template_part( 'template-parts/content-blocks/_content_block_slider' );
elseif(get_sub_field('content_type') === 'stylized_title'):
get_template_part( 'template-parts/content-blocks/_content_block_stylized_title' );
elseif(get_sub_field('content_type') === 'tabbed_content'):
get_template_part( 'template-parts/content-blocks/_content_block_tabbed_content' );
elseif(get_sub_field('content_type') === 'teaser'):
get_template_part( 'template-parts/content-blocks/_content_block_teaser' );
elseif(get_sub_field('content_type') === 'wysiwyg'):
get_template_part( 'template-parts/content-blocks/_content_block_wysiwyg' );
endif;
?>
<?php if(get_sub_field('content_type') !== 'slider_carousel' && get_sub_field('content_type') !== 'tabbed_content'): ?>
</div>
<?php endif; ?>
</article>
<?php if(get_sub_field('include_divider')): ?>
<hr />
<?php endif; ?>
<?php endwhile; ?>
</section>
<?php endif;

It becomes pretty clear that this is overly verbose and rather amateurish in its approach. To be consistent, I used values in the Content Type select that match the partial PHP file names except for the Slider/Carousel component. By updating that partial’s file name to be template-parts/content-blocks/_content_block_slider_carousel.php, the code below will work. Instead of having this big bloated complex if statement, it could be simplified to the following:

// filename: template-parts/_repeater_content_blocks.php
<?php if( have_rows('repeater_content_block') ): ?>
<section class="repeater-content-blocks">
<?php while ( have_rows('repeater_content_block') ) : the_row(); ?>
<?php if(get_sub_field('content_type') === 'slider_carousel'): ?>
<?php $slider_background_image = get_sub_field('image'); ?>
<article class="content-block <?php the_sub_field('content_type'); ?><?php echo isset($slider_background_image) ? ' has-background-image' : ' no-background-image'; ?>"<?php echo isset($slider_background_image) ? ' style="background-image: url(\'' . $slider_background_image['sizes']['fp-xlarge'] . '\')"' : ''; ?>>
<?php elseif(get_sub_field('content_type') === 'tabbed_content'): ?>
<article class="content-block grid-x grid-container <?php the_sub_field('content_type'); ?>">
<?php else: ?>
<article class="content-block grid-x grid-padding-x <?php the_sub_field('content_type'); ?>">
<div class="cell">
<?php endif; ?>
<?php get_template_part( 'template-parts/content-blocks/_content_block_' . get_sub_field('content_type') ); ?>
<?php if(get_sub_field('content_type') !== 'slider_carousel' && get_sub_field('content_type') !== 'tabbed_content'): ?>
</div>
<?php endif; ?>
</article>
<?php if(get_sub_field('include_divider')): ?>
<hr />
<?php endif; ?>
<?php endwhile; ?>
</section>
<?php endif;

Now, it’s getting the correct partial file based on the corresponding value of the Content Type select field, reducing the amount of PHP and making the information we’ve already entered into the site do more work for us.

I’m all about using what we already have as efficiently as possible. Note that the checks for it being a slider are still necessary due to the modified code output required, but otherwise no checks for content type need to be done to output the correct HTML.

Leave a Reply

You must be logged in to post a comment.

Contact Me

Have a question for me? Get in touch with me here and I'll respond as quickly as I can!
  • This field is for validation purposes and should be left unchanged.
Loading...