WordPress coding example

In the summer of 2017 I launched a client website that heavily uses the Advanced Custom Fields plugin to make it easy for editors to create new pages. These are the sections that show on certain pages:

screenshot of custom fields
This flexible content area has 2 types of sections editors can use: a colored heading strip or a text area.

Editors can focus on the content without worrying about what color to use (the brand colors are locked in), what tag to use for headings, or how to style callouts.

The page template is this:

<!--?php /** * The template for displaying all pages * @package starter */ get_header(); ?-->
<!--?php while ( have_posts() ) : the_post(); // check if the flexible content field has rows of data if( have_rows('page_content') ): get_template_part( 'template-parts/content', 'customfields' ); else : get_template_part( 'template-parts/content', 'page' ); endif; endwhile; // End of the loop ?-->
<!--?php <br ?--> get_footer();

Which just tells WordPress that if a page uses the custom fields called “page content”, then use the layout for custom fields. If not, use the plain layout. Here is the layout for custom fields:

<!--?php /** * The template for custom field pages * * @package starter */ ?-->
<!--?php // check if the flexible content field has rows of data if( have_rows('page_content') ): // loop through the rows of data while ( have_rows('page_content') ) : the_row(); { ?-->
<!--?php if( get_row_layout() == 'colored_strip' ): ?-->

<header class="content-header" style="background-color: <?php the_sub_field('background_color'); ?>; background-image: url(<?php the_sub_field('background_image');">
<div class="container"><section class="six columns"><!--?php if(get_sub_field('title')) {<br ?--> echo ‘
<h2>‘ . get_sub_field(‘section_name’) . ‘</h2>
‘;
} ?>
<!--?php if(get_sub_field('title')) {<br ?--> echo ‘
<h1>‘ . get_sub_field(‘title’) . ‘</h1>
‘;
} ?>

</section> 

<section class="six columns"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></section> 

</div>
</header><!--?php endif; ?--><!--end colored strip-->
<!--?php } endwhile; endif; ?--><!--end page content fields-->
<!-- for some reason have to close out the custom fields before listing child pages. opens back up after the children are listed -->
<!--?php $args = array( 'post_type' => 'page',<br ?--> ‘posts_per_page’ => -1,
‘post_parent’ => $post->ID,
‘order’ => ‘ASC’,
‘orderby’ => ‘menu_order’
);
$parent = new WP_Query( $args );
if ( $parent->have_posts() ) : ?>
<div class="subpages container">
<div class="three columns">
<p class="meta">in this section:</p>

</div>
<article class="eight columns"><!--?php while ( $parent->have_posts() ) : $parent->the_post(); ?-->
<h4><img style="height: 1rem; width: auto; padding-right: .75rem;" src="<?php bloginfo('stylesheet_directory'); ?>/images/arrow_f04e23.png" /><!--?php the_title(); ?--></h4>
<!--?php endwhile; ?-->

</article></div>
<!--?php endif; wp_reset_query(); ?-->
<!--?php $ancestors = get_ancestors( $post->ID, 'page' );<br ?--> if ( 1 == count( $ancestors ) ) { ?>
<!--?php //GET CHILD PAGES IF THERE ARE ANY $children = get_pages('child_of='.$post->ID);<br ?--> //GET PARENT PAGE IF THERE IS ONE
$parent = $post->post_parent;
//DO WE HAVE SIBLINGS?
$siblings = get_pages(‘child_of=’.$parent);
if( count($children) != 0) {
$args = array(
‘depth’ => 1,
‘title_li’ => ”,
‘child_of’ => $post->ID
);
} elseif($parent != 0) {
$args = array(
‘depth’ => 1,
‘title_li’ => ”,
‘exclude’ => $post->ID,
‘child_of’ => $parent
);
}
//Show pages if this page has more than one sibling
// and if it has children
if(count($siblings) > 1 && !is_null($args))
{?>
<!--?php $our_pages = get_pages($args); ?-->
<!--?php if (!empty($our_pages)): ?-->
<div class="subpages container">
<div class="three columns">
<p class="meta">in this section:</p>

</div>
<article class="eight columns"><!--?php foreach ($our_pages as $key => $page_item): ?-->
<h4><a href="<?php echo esc_url(get_permalink($page_item->ID)); ?>"><img style="height: 1rem; width: auto; padding-right: .75rem;" src="<?php bloginfo('stylesheet_directory'); ?>/images/arrow_f04e23.png" /><!--?php echo $page_item->post_title ; ?--></a></h4>
<!--?php endforeach ?-->

</article></div>
<!--?php endif ?-->
<!--?php } ?-->
<!--?php } ?-->
<!--?php // check if the flexible content field has rows of data if( have_rows('page_content') ): // loop through the rows of data while ( have_rows('page_content') ) : the_row(); { ?-->
<!--?php if( get_row_layout() == 'text_area' ): ?-->
<!--?php if(get_sub_field('section_topic_text')) {<br ?--> echo ‘
<div class="site-main container line" role="main">
<div class="section-topic three columns">
<h2 class="heading">‘ . get_sub_field(‘section_topic_text’) . ‘</h2>
</div>
‘;
} else {
echo ‘
<div class="site-main container" role="main">‘;
}
?><article class="eight columns right"><!--?php $image = get_sub_field('icon'); if( !empty($image) ): ?-->
<div class="icon"><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></div>
<!--?php endif; ?-->
<!--?php if(get_sub_field('section_heading')) {<br ?--> echo ‘
<h2>‘ . get_sub_field(‘section_heading’) . ‘</h2>
‘;
} ?>
<!--?php the_sub_field('text'); ?-->
<!--?php if(get_sub_field('video')) {<br ?--> echo ‘
<div class="embed-container">‘ . get_sub_field(‘video’) . ‘</div>
‘;
} ?>
<!--?php if(get_sub_field('callout')) {<br ?--> echo ‘
<div class="callout">
<h5>‘ . get_sub_field(‘callout’) . ‘</h5>
</div>
‘;
} ?>

</article><!--?php endif; ?--><!--end text area-->

</div>
<!-- end main -->
<!--?php } endwhile; endif; ?--><!--end page content fields-->

<article class="resource container"><!--?php // check if the repeater field has rows of data if( have_rows('resource_columns') ): // loop through the rows of data while ( have_rows('resource_columns') ) : the_row(); { ?-->
<!--?php $post_object = get_sub_field('post_link'); if( $post_object ): // override $post $post = $post_object; setup_postdata( $post ); ?-->
<div class="one-third column equal" style="background-color: <?php the_sub_field('background_color');">
<p class="meta"><!--?php the_date('Y'); ?--> | <!--?php the_category(', '); ?--></p>

<h2></h2>
 

</div>
<!--?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?-->
<!--?php endif; ?-->
<!--?php } endwhile; endif; ?-->

</article><!--end resources-->

The code can probably be cleaned up but sometimes it’s best to not mess with what’s working!

Basically, this code says if the custom field has content, show it. But if the field is empty, tags without content won’t render on the page. For flexible content, each new flexible content section is called a row and they will all be styled the exact same way.

There is another flexible content field area for related resources. Normally, I’d add tags and have 3 resources automatically pull in that use the same tag, but this client wanted to be able to manually specify each related resource.