This is a simple example of how to create a variety of content types, and display them in a WordPress php template.
The content can be displayed in any order using drag and drop from the WP administration.
- This uses plugin Advanced custom fields PRO, and this example is based on the documentation demo. They have good documentation for displaying other content types on http://www.advancedcustomfields.com/.
- Create a custom field group and create a field of type flexible content.
- From there you can create layouts for each type of content you’ll want displayed.
- I’ve created four layouts – text (includes option to create 1, 3 or 3 columns of text), text with image on the right, image with caption, and gallery slider image.
- This example uses the flickity touch responsive slider to display the image slider. You’ll need to reference flickity js and css in your theme.
- We’re not showing all the css needed, and we’re using bootstrap for the layout.
- I’m new to flexbox and am still learning about it, but I’m using it to center the content vertically in each container.
The following code will loop through all rows of our flexible content, and display based on the layout of each content type.
I’m using a template file for each content type, and each file is in a partials folder.
if (have_posts()) : while (have_posts()) : the_post();
// are there any rows within within our flexible content?
if( have_rows('home_page_content') ):
// loop through all the rows of flexible content
while ( have_rows('home_page_content') ) : the_row();
// HERO
if( get_row_layout() == 'hero' ) {
get_template_part('partials/stripe', 'hero');
}
// SERVICES
if( get_row_layout() == 'services' ) {
get_template_part('partials/stripe', 'services');
}
// Content/Image
if( get_row_layout() == 'content_image' ) {
get_template_part('partials/stripe', 'content-image');
}
// IMAGE
if( get_row_layout() == 'image_content' ) {
get_template_part('partials/stripe', 'image');
}
// GALLERY
if( get_row_layout() == 'gallery_content' ) {
get_template_part('partials/stripe', 'gallery');
}
endwhile; // close the loop of flexible content
endif; // close flexible content conditional
endwhile; endif; // close the WordPress loop ?>
<?php
/** Template to display Hero - stripe-hero.php */
?>
<?php
$hero_image = get_sub_field('hero_image');
if ($hero_image) {
$hero_bg = 'style="background-image: url(' . $hero_image['url'] . '); background-size:cover;"';
}
$hero_text = get_sub_field('hero_text');
?>
<div class="hero-stripe" <?php echo $hero_bg; ?>>
<div class="row">
<div class="col-sm-12">
<div class="hero-stripe-item">
<?php
if ($hero_text) {
echo $hero_text;
}
$display_cta_button = get_sub_field('display_cta_button');
if ($display_cta_button) {
$hero_button_url = get_sub_field('hero_button_url');
$hero_button_text = get_sub_field('hero_button_text');
echo '<p class="cta"><a class="button" href="' . $hero_button_url . '">' . $hero_button_text . '</a></p>';
}
?>
</div>
</div>
</div>
</div>
For this section, I’ll display one, two or three columns, depending on how many columns were selected.
<?php
$background_color = get_sub_field('background_color');
if ($background_color) {
$bg_color = 'style="background-color:' . $background_color . ';"';
}
?>
<div class="services-stripe" <?php echo $bg_color; ?>>
<div class="row">
<?php
//Using ACF code functions
if (get_sub_field('columns') == 1)
{
// display 1 column
?>
<div class="col-sm-12">
<div class="services-stripe-item">
<?php the_sub_field('content_1'); ?>
</div>
</div>
<?php
}
if (get_sub_field('columns') == 2)
{
// display 2 columns
?>
<section class="row text-image ">
<div class="left-half">
<?php the_sub_field('content_1'); ?>
</div>
<div class="right-half">
<?php the_sub_field('content_2'); ?>
</div>
</section>
<?php
}
if (get_sub_field('columns') == 3)
{
// display 3 columns
?>
<section class="row three-col-row">
<div class="third">
<?php the_sub_field('content_1'); ?>
</div>
<div class="third">
<?php the_sub_field('content_2'); ?>
</div>
<div class="third">
<?php the_sub_field('content_3'); ?>
</div>
</section>
<?php
}
?>
</div>
</div>
<?php
$content = get_sub_field('content');
$image = get_sub_field('image');
?>
<?php
?>
<div class="services-stripe">
<div class="row">
<section class="row text-image ">
<div class="left-half">
<?php echo $content; ?>
</div>
<div class="right-half">
<?php echo '<img src="' . $image['url'] . '" alt="">'; ?>
</div>
</section>
</div>
</div>
<?php
?>
<?php
$image = get_sub_field('image');
$caption = get_sub_field('caption');
?>
<?php
if ($image) {
?>
<div class="image-stripe">
<div class="row">
<div class="col-sm-12">
<div class="image-stripe-item">
<?php
echo '<img src="' . $image['url'] . '" alt="' . $caption . '">';
?>
<?php
if ($caption) {
echo '<p class="caption">' . $caption . '</p>';
}
?>
</div>
</div>
</div>
</div>
<?php
}
?>
For the gallery section, initialize flickity slider using jQuery.
jQuery(document).ready(function($) {
$('.main-gallery').flickity({
// options
cellAlign: 'left',
autoPlay: false,
wrapAround: true,
contain: true,
pageDots: true
});
})(jQuery)
I’m wrapping the gallery with a class=”main-gallery”, and each image in a class=”gallery-cell”. The flickity code will display this as a gallery.
<div class="gallery-stripe">
<div class="row">
<div class="col-sm-12">
<div class="gallery-stripe-item">
<?php
$images = get_sub_field('gallery');
?>
<div class="main-gallery">
<?php
foreach( $images as $image ):
?>
<div class="gallery-cell">
<img src="<?php echo $image['url']; ?>">
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
The result looks something like this.
by Norm Euker