Snippet: Insert Content Between Post Cards Entries

  • Updated:

In Total 5.19 we introduced two new hooks you can use to insert content before or after specific entries in the Post Cards element. You can use this code to insert a banner for example after "x" entry. Here are 4 different examples for inserting content into the Post Cards element.

Note, in the first two examples I'm adding the $entry_class which will add the same classes added to all post card entries. This will keep your card within the layout. In the 3rd example I'm adding my own classes so that the entry can be displayed on it's own line. This will ONLY work with the Modern Grid grid style.

And in the last example I show how you can check for the Unique ID added to the Post Cards element to target specific grids only.

/**
 * Example 1: Insert a new entry before the 3rd post card.
 */
add_action( 'wpex_hook_post_cards_entry_before', function( $which_entry, $entry_class, $shortcode_atts, $query ) {
	if ( 3 === $which_entry ) {
		echo '<div class="' . esc_attr( $entry_class ) . '">Custom entry added before the 3rd Item</div>';
	}
}, 10, 4 );


/**
 * Example 2: Insert a new entry after the 3rd post card.
 */
add_action( 'wpex_hook_post_cards_entry_after', function( $which_entry, $entry_class, $shortcode_atts, $query ) {
	if ( 3 === $which_entry ) {
		echo '<div class="' . esc_attr( $entry_class ) . '">Custom entry added after the 3rd Item</div>';
	}
}, 10, 4 );


/**
 * Example 3: Insert a full-width item after the 3rd post card.
 * 
 * This is intended to be used with the Grid layout and Grid Style set to "Modern CSS Grid".
 */
add_action( 'wpex_hook_post_cards_entry_before', function( $which_entry, $entry_class, $shortcode_atts, $query ) {
	if ( 3 === $which_entry ) {
		echo '<div class="wpex-col-span-full">Custom entry added before the 3rd Item</div>';
	}
}, 10, 4 );


/**
 * Example 4: Target specific post card elements.
 */
add_action( 'wpex_hook_post_cards_entry_before', function( $which_entry, $entry_class, $shortcode_atts, $query ) {
	if ( empty( $shortcode_atts['unique_id'] ) || 'YOUR_POST_CARDS_UNIQUE_ID' !== $shortcode_atts['unique_id'] ) {
		return;
	}
	if ( 3 === $which_entry ) {
		echo '<div class="wpex-col-span-full">Custom entry added before the 3rd Item</div>';
	}
}, 10, 4 );
All PHP snippets should be added via child theme's functions.php file or via a plugin.
We recommend Code Snippets (100% Free) or WPCode (sponsored)
Back To Top