Hi everyone,
I’m in the process of redesigning and building the homepage for a magazine like website. Right now the Homepage is rather static and boring, you can change the featured articles above the fold and a couple of other things, but we want something more flexible.
My idea was to build it out using ACF’s Flexible Content Fields, where I have a featured article and the 4 latests posts above the fold, and underneath that, the editors will have access to modules that they can drag&drop that display the latest 4 items of a certain category, tag, or 4 specific posts, as well as some newsletter forms etc.
The problem is: the ACF Flexible content field combined with separating all the logic is kicking my butt.
I’ve searched this forum far and wide, and can’t quite seem to figure out how to implement it the sage way. I took this topic: and figured I could do the same for my homepage, but all the queries i have to do make it rather difficult. Also, I don’t want any duplicate content on the page, so I store that in an array called do_not_duplicate.
Right now, I have the basics working, but not in the sage way:
front-page.blade.php:
@extends('layouts.app')
@section('content')
@while (have_posts()) @php the_post() @endphp
<div class="above-the-fold">
<div class="featured-item">
@while ($featured_items->have_posts())
@php($featured_items->the_post())
@include('partials.feat-item-display')
@endwhile
@php($do_not_duplicate = wp_list_pluck($featured_items->posts, 'ID'))
</div>
<div class="latest-post">
<h4 class="cat-header">{{ _e('Latest', 'IO3') }}</h4>
@while ($latest_posts_top->have_posts())
@php($latest_posts_top->the_post())
@include ('partials.title-display')
@endwhile
@php($do_not_duplicate = array_merge($do_not_duplicate, wp_list_pluck($latest_posts_top->posts, 'ID')))
</div>
</div>
<div class="under-the-fold">
@php($get_home_page_content = get_field('homepage_content', 'option'))
@if ($get_home_page_content)
@foreach ($get_home_page_content as $block)
@if ($block['acf_fc_layout'] == 'category')
<div class="category">
@php($home_category = get_term($block['fp_category']))
<h4 class="category-header"><a
href="{{ get_term_link($block['fp_category']) }}">{{ $home_category->name }}</a>
</h4>
@php(
$homepage_cat_query = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 4,
'ignore_sticky_posts' => true,
// 'no_found_rows' => true,
'cat' => $block['fp_category'],
'post__not_in' => $do_not_duplicate,
]),
)
<div class="home-page-category">
@while ($homepage_cat_query->have_posts())
@php($homepage_cat_query->the_post())
@include ('partials.title-display')
@endwhile
@php($do_not_duplicate = array_merge($do_not_duplicate, wp_list_pluck($homepage_cat_query->posts, 'ID')))
{{-- @php(print_r(wp_list_pluck($homepage_cat_query->posts, 'ID'))) --}}
</div>
</div>
@elseif ($block['acf_fc_layout'] == 'tag')
<div class="tag">
@php($home_tag = get_term($block['fp_tag']))
<h4 class="tag-header"><a
href="{{ get_term_link($block['fp_tag']) }}">{{ $home_tag->name }}</a></h4>
@php(
$homepage_tag_query = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 4,
'ignore_sticky_posts' => true,
'no_found_rows' => true,
'tag_id' => $block['fp_tag'],
'post__not_in' => [$do_not_duplicate],
]),
)
<div class="home-page-tag">
@while ($homepage_tag_query->have_posts())
@php($homepage_tag_query->the_post())
@include ('partials.title-display')
@endwhile
@php($do_not_duplicate = array_merge($do_not_duplicate, wp_list_pluck($homepage_tag_query->posts, 'ID')))
</div>
</div>
@elseif ($block['acf_fc_layout'] == 'dossier')
<div class="dossier">
@php($home_dossier = get_term($block['fp_dossier']))
<h4 class="dossier-header"><a
href="{{ get_term_link($block['fp_dossier']) }}">{{ $home_dossier->name }}</a></h4>
@php(
$homepage_dossier_query = new WP_Query([
'post_type' => 'post',
'posts_per_page' => 4,
'ignore_sticky_posts' => true,
'no_found_rows' => true,
'tax_query' => [
[
'taxonomy' => 'dossier',
'terms' => $block['fp_dossier'],
],
],
'post__not_in' => $do_not_duplicate,
]),
)
<div class="home-page-dossier">
@while ($homepage_dossier_query->have_posts())
@php($homepage_dossier_query->the_post())
@include ('partials.title-display')
@endwhile
@php($do_not_duplicate = array_merge($do_not_duplicate, wp_list_pluck($homepage_dossier_query->posts, 'ID')))
</div>
</div>
@endif
@endforeach
@endif
</div>
@endwhile
@endsection
FrontPage.php has this function that takes care of the Flexible Content:
public function getHomePageContent()
{
$get_home_page_content = get_field('homepage_content', "option");
$data = [];
if ($get_home_page_content) {
foreach ($get_home_page_content as $block) {
if ($block['acf_fc_layout'] == 'category') {
$this_block = (object) [
'block_type' => $block['acf_fc_layout'],
'category' => $block['fp_category'],
];
array_push($data, $this_block);
} elseif ($block['acf_fc_layout'] == 'tag') {
$this_block = (object) [
'block_type' => $block['acf_fc_layout'],
'tag' => $block['fp_tag'],
];
array_push($data, $this_block);
}
elseif ($block['acf_fc_layout'] == 'dossier') {
$this_block = (object) [
'block_type' => $block['acf_fc_layout'],
'dossier' => $block['fp_dossier'],
];
array_push($data, $this_block);
}
$data = (object) $data;
return $data;
}
}
}
The rest of the code are just some functions that return a new WP_Query, and some partials that display the posts.
The acf fields used are just taxonomy fields and some text.
Obviously, this is not how I want the code to look, I want to have a partial for each of the different layout types, but that is where a couple of problems arise:
- My do_not_duplicate array isn’t updating correctly (it will only add the post id’s inside the partial, so every partial has its own version of that array)
- If I put the WP_Query in the .php file where it belongs, it always returns the same category/tag/customtax for every new layout.
I felt quite comfortable in sage until now, but I’m far from an expert in blade. This seemed like a simple thing to do when I was planning it, but I am beginning to think it might be out of my reach. If anyone could help me going in the right direction, that would be awesome!