Latest Post Shortcode 7.0

Starting with version 7.0, the plugin has a new UI and implements new hooks.

The embed button and the shortcode preview are more accessible now, and, since the plugin has so many options to offer, these are now grouped in tabs, for a better navigation.

New Hooks

The plugin implements new hooks that allow for defining and managing your own custom output, through your theme or your plugins. The new hooks are:

• lps_filter_tile_patterns and lps_filter_display_posts_list – allows you to add your custom patterns

• lps_filter_use_custom_tile_markup – allows you to define your custom tile markup

• lps_filter_use_custom_section_markup_start and lps_filter_use_custom_section_markup_end – allows you to control the shortcode markup that is shown before and after the tiles block.

Code Samples

Here is the sample code you can copy/paste into your theme function and continue from there.

<?php
add_filter( 'lps_filter_tile_patterns', 'my_theme_lps_filter_tile_patterns', 1 );
add_filter( 'lps_filter_display_posts_list', 'my_theme_lps_filter_display_posts_list', 1 );
add_filter( 'lps_filter_use_custom_tile_markup', 'my_theme_lps_filter_use_custom_tile_markup', 1, 2 );
add_filter( 'lps_filter_use_custom_section_markup_start', 'my_theme_lps_filter_use_custom_section_markup_start', 10, 3 );
add_filter( 'lps_filter_use_custom_section_markup_end', 'my_theme_lps_filter_use_custom_section_markup_end', 10, 3 );

if ( ! function_exists( 'my_theme_lps_filter_tile_patterns' ) ) {
	/**
	 * Add the theme custom tile patterns into the 3rd-party plugin.
	 * The rules for defining your custom tile pattern are:
	 * - the key must be numeric (put the keys >= 30, so that you will
	 *not override the plugin default patterns)
	 * - the value must be [_custom_HOW_YOU_CALL_THE_PATTERN]
	 * (please note the _custom_ string)
	 *
	 * @param  array $tile_pattern The list of defined tile patterns.
	 * @return array
	 */
	function my_theme_lps_filter_tile_patterns( $tile_pattern ) {
		/*
		Uncomment the line below if you want to restrict the patterns
		to only these you define here.
		*/
		// $tile_pattern = array();

		$tile_pattern[30] = '[_custom_my_tile_1]';
		$tile_pattern[31] = '[_custom_my_tile_2]';
		$tile_pattern[32] = '[_custom_my_tile_3]';

		return $tile_pattern;
	}
}

if ( ! function_exists( 'my_theme_lps_filter_display_posts_list' ) ) {
	/**
	 * Add the theme custom tile patterns descriptions into
	 * the 3rd-party plugin.
	 * The rules for defining your custom display list are:
	 * - the key must be one of the tile patterns you already
	 * defined (without the brackets)
	 * - the value must be a meaningful description of the output.
	 *
	 * @param  array $display_list  The list of defined tile patterns, with their descriptions.
	 * @return array
	 */
	function my_theme_lps_filter_display_posts_list( $display_list ) {
		/*
		Uncomment the line below if you want to restrict the list
		to only these you define here.
		*/
		// $display_list = array();

		$display_list['_custom_my_tile_1'] = __( 'My Theme Tile 1', 'text-domain' );
		$display_list['_custom_my_tile_2'] = __( 'My Theme Tile 2', 'text-domain' );
		$display_list['_custom_my_tile_3'] = __( 'My Theme Tile 3', 'text-domain' );

		return $display_list;
	}
}

if ( ! function_exists( 'my_theme_lps_filter_use_custom_tile_markup' ) ) {
	/**
	 * Create the custom output of tiles into the 3rd-party
	 * plugin (the markup and logic of the tiles).
	 * @param  string $tile_pattern The tile pattern slug.
	 * @param  object $post         The WP Post object to be rendered.
	 * @return string
	 */
	function my_theme_lps_filter_use_custom_tile_markup( $tile_pattern, $post ) {
		switch ( $tile_pattern ) {
			case '[_custom_my_tile_2]':
				setup_postdata( $post );
				ob_start();
				get_template_part( 'template-parts/content', 'custom-tile-2' );
				$tile_pattern = ob_get_clean();
				break;

			case '[_custom_my_tile_3]':
				setup_postdata( $post );
				ob_start();
				get_template_part( 'template-parts/content', 'custom-tile-3' );
				$tile_pattern = ob_get_clean();
				break;

			case '[_custom_my_tile_1]':
			default :
				setup_postdata( $post );
				ob_start();
				get_template_part( 'template-parts/content', 'custom-tile-1' );
				$tile_pattern = ob_get_clean();
				break;
		}

		return $tile_pattern;
	}
}

if ( ! function_exists( 'my_theme_lps_filter_use_custom_section_markup_start' ) ) {
	/**
	 * Alter the output of section start into the 3rd-party
	 * plugin (the markup before the tiles).
	 * @param  string $tile_pattern The tile pattern slug.
	 * @param  string $shortcode_id The section element id.
	 * @param  string $class        Custom class.
	 * @return string
	 */
	function my_theme_lps_filter_use_custom_section_markup_start( $tile_pattern, $shortcode_id = '', $class = '' ) {
		switch ( $tile_pattern ) {
			case '[_custom_my_tile_3]':
				$start = '';
				break;

			case '[_custom_my_tile_1]':
			case '[_custom_my_tile_2]':
			default :
				$start  = '<div id="' . esc_attr( $shortcode_id ) . '" class="related ' . esc_attr( $class ) . '">';
				$start .= esc_html__( 'Some cool articles', 'text-domain' );
				break;
			}
		return $start;
	}
}

if ( ! function_exists( 'my_theme_lps_filter_use_custom_section_markup_end' ) ) {
	/**
	 * Alter the output of section end into the 3rd-party plugin (the markup after the tiles).
	 * @param string $tile_pattern The tile pattern slug.
	 * @param string $shortcode_id The section element id.
	 * @param string $class Custom class.
	 * @return string
	 */
	function my_theme_lps_filter_use_custom_section_markup_end( $tile_pattern, $shortcode_id = '', $class = '' ) {
		switch ( $tile_pattern ) {
			case '[_custom_my_tile_3]':
				$end = '';
				break;
			case '[_custom_my_tile_1]':
			case '[_custom_my_tile_2]':
			default:
				$end = '</div>';
				break;
		}
		return $end;
	}
}
?>

Here is a sample of the template part (in my theme I have /template-parts/content-custom-tile-1.php)

<?php
/**
* Template part for displaying my custom tile.
*
* @package my_theme
*/

?>

<a href="<?php the_permalink(); ?>" class="my-custom-class">
	<div class="photo-wrapper">
		<?php the_thumbnail(); ?>
	</div>
	<div class="text">
		<h2><?php the_title(); ?></h2>
		<h5><?php the_author(); ?> – <?php the_date(); ?></h5>
	</div>
</a>

Get the example file with one custom template defined from here: