1. erstelle ein Facet mit dem gewünschten Typ. Merke dir die ID dieses Facets.
Erstelle dann die Queries nach und füge in den wp_grid_builder mit einer individuellen Klasse als Argument ein. Die Klasse muss beim Loop Wrapper hinzugefügt werden.
Die Facets kannst du dir dann vor und nach dem Loop wie folgt ausgeben:
PHP
wpgb_render_facet( [ 'id' => 1, 'grid' => 'wpgb-content-2' ] ); // Button Facet
// Hier kommt Main Loop
wpgb_render_facet( [ 'id' => 2, 'grid' => 'wpgb-content-2' ] ); // Load More FacetHier ein Beispielcode.
PHP
<?php
// Define the query arguments
$the_query_2 = new WP_Query(
[
'post_type' => 'insight', // Custom post type "insight"
'posts_per_page' => 2, // Retrieve 5 posts per page
'post_status' => 'publish', // Only get published posts
'wp_grid_builder' => 'wpgb-content-2' // Query identifier for WP Grid Builder
]
);
// Button Filter anzeigen
wpgb_render_facet( [ 'id' => 13, 'grid' => 'wpgb-content-2' ] );
// Start the Loop
if ( $the_query_2->have_posts() ) {
echo '<div class="insights-main-query wpgb-content-2">'; // Wrapper with the required CSS class
echo '<ul class="insights-list">'; // UL with class "insights-list"
while ( $the_query_2->have_posts() ) {
$the_query_2->the_post(); ?>
<!-- Post Item -->
<li class="insight-item">
<!-- Link wrapping the entire content -->
<a href="<?php the_permalink(); ?>" class="insight-link">
<!-- Featured Image -->
<?php if ( has_post_thumbnail() ) { ?>
<figure class="insight-image">
<?php the_post_thumbnail( 'medium' ); ?>
</figure>
<?php } ?>
<!-- Post Date -->
<time class="insight-date" datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>
<!-- Post Title -->
<h3 class="insight-title"><?php the_title(); ?></h3>
<!-- Excerpt -->
<p class="insight-excerpt">
<?php echo wp_trim_words( get_the_excerpt(), 35, '...' ); ?>
</p>
</a>
</li>
<?php }
echo '</ul>'; // End UL
echo '</div>'; // End wrapper
// Reset post data after the custom query
wp_reset_postdata();
} else {
echo '<p>No insights found.</p>';
}
// Mehr laden anzeigen
wpgb_render_facet( [ 'id' => 14, 'grid' => 'wpgb-content-2' ] );
?>