Hello,
Yes, I think there is a misundrstanding.
When displaying the Flexible Content on your front-end page template, for example on page-my-page.php, instead of using the classic ACF Flexible Content markup, described in the ACF documentation:
<?php get_header(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php
if(have_rows('my_flexible_content')):
while(have_rows('my_flexible_content')): the_row();
// Layout: Hero
if(get_row_layout() === 'hero'):
$text = get_sub_field('text');
// ...
// layout: Slider
elseif(get_row_layout() === 'slider'):
$text2 = get_sub_field('text2');
// ...
endif;
endwhile;
endif;
?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>
You can should use the following code instead:
<?php get_header(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php
if(has_flexible('my_flexible_content')):
the_flexible('my_flexible_content');
endif;
?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>
The code has_flexible(): the_flexible() is a drop-in replacement for the have_rows(): the_row() logic, which automatically includes your layout PHP templates files, layout stylesheets/scripts…
Here is a visual representation of what has_flexible(): the_flexible() is doing to help you understand:
<?php get_header(); ?>
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php
/**
* visual representation of:
*
* if(has_flexible('my_flexible_content')):
* the_flexible('my_flexible_content');
* endif;
*
*/
if(have_rows('my_flexible_content')):
while(have_rows('my_flexible_content')): the_row();
// Layout: Hero
if(get_row_layout() === 'hero'):
// include('themes/my-theme/flexible-content/hero.php');
// <script src="themes/my-theme/flexible-content/hero.js" />
// <link href="themes/my-theme/flexible-content/hero.css" />
// Layout: Slider
elseif(get_row_layout() === 'slider'):
// include('themes/my-theme/flexible-content/slider.php');
// <script src="themes/my-theme/flexible-content/slider.js" />
// <link href="themes/my-theme/flexible-content/slider.css" />
// Layout: Cards
elseif(get_row_layout() === 'cards'):
// include('themes/my-theme/flexible-content/cards.php');
// <script src="themes/my-theme/flexible-content/cards.js" />
// <link href="themes/my-theme/flexible-content/cards.css" />
endif;
endwhile;
endif;
?>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>
As you can see, when you use has_flexible(): the_flexible() you don’t have to bother with multiple if/elseif, include layout files manually etc… as everything is automatically handled.
In this example, a typical code for the hero.php layout would be:
<div class="layout-hero">
<h1>Hero</h1>
<h3><?php the_sub_field('text'); ?></h3>
</div>
This is why has_flexible(): the_flexible() should not be included in your layout layout.php PHP files, unless you want to display a “Sub Flexible Content” (when using a “Flexible Content > Sub Flexible Content” setup), but this is an advanced usage I doubt you need it.
Hope it helps!
Regards.
