Home My Plugins Latest Post Shortcode 11.0.0, the easy way to display posts

Latest Post Shortcode 11.0.0, the easy way to display posts

The “Latest Post Shortcode” helps you display a custom selection of articles as a list/grid (or slider), using your posts, pages, your custom post types, products and variations, and attachments, without having to code or know PHP. Version 11.0.0 introduces extensive changes and additional features. NOTE: POTENTIAL BREAKING CHANGES for older versions – PLEASE BACKUP BEFORE UPGRADING.

Latest Post Shortcode Banner

Summary

You can download the free plugin from the WordPress repository. If you would like to support my work, please leave a 5 stars rating, or share this plugin on your feed.
A huge thanks in advance!

  • Tested up to 6.1.1
  • Compatibility updates for Elementor 3.8.1
  • Compatibility updates for PHP 8
  • Added the vertical card as the default card output
  • Added the horizontal card as an option in the plugin UI: image + info and info + image (no longer experimental)
  • Added the drop shadow option
  • Added the border radius option
  • Added the image spacing option
  • Added the card title color and title size options
  • Added the card text color and text size options
  • Added card background color option
  • Added overlay image opacity option
  • Added new display options for WooCommerce products: price, add to cart, price + add to cart
  • Added vertical alignment option
  • Added 3 insert variants for the LPS block: 2 horizontal cards, 4 column cards, and 4 overlay cards
  • Added new sort options: by text post meta and by numeric post meta
  • Changed the plugin UI for the styles helper
  • Changed the default values for cards (height, padding, spacing, and overlay padding) to use the rem unit (recommended)
  • Updated the dependencies for the LPS block
  • Decoupled the front-end grid script from jQuery (excerpt for the carousel, if that is used)
  • Delegated click events to the whole card (when URLs are used)
  • Spinners/pagination and markup nesting updates
  • Changes the output markup for improved SEO
  • Global styles updates
  • Where is the button?
  • NOTE: POTENTIAL BREAKING CHANGES for older versions – PLEASE BACKUP BEFORE UPGRADING

    Version 11.1.0 changes:
  • Added the space between options that applies to the pagination
  • Added search key option
  • Added archive option
  • Added trailing chars option for trimmed strings
  • Added the option to apply the chars limit to title and text together (the excerpt/content length will be computed by subtracting the title length from the chars limit)
  • Added the option to hide taxonomy names when listed as extra options
  • Added the option to display only one term for taxonomies listed as extra options
  • Updated link nesting for SEO improvement
  • Updated the admin styles
  • Fixed pagination first element in archive
  • Fixed Firefox full card cursor
  • Fixed the block styles not loading when used in the site editor

WooCommerce Products Options

Starting with version 11.0.0, the plugin enables the price and add to cart options for products and product variations.

Gutenberg Block Variants

Type /lps or /card or /grid in the editor to filter out the block, and you will see the 3 new options that will insert the type of block you can use as the starting point for your custom content output.

Horizontal Cards

The horizontal cards have two options:

  • image + info (image on the left and post details on the right)
  • info + image (post details on the left and image on the right)

This is an example of posts listed with pagination (two items per page). Each item is displayed as a horizontal card (image first, then the post details), stacked on mobile (the card is transformed into a vertical card on mobile), and the post details fill in the whole info space.

[latest-selected-content ver="2" perpage="2" showpages="more" loadtext="Load more ☝" pagespos="1" display="title,excerpt-small" titletag="h3" chrlimit="170" more="➞" url="yes" image="medium" elements="25" default_height="15rem" default_padding="2rem" tablet_height="15rem" mobile_height="15rem" color_title="#ffffff" color_bg="#3a2d49" css="h-image-info content-space-between has-stacked" type="post" status="publish" taxonomy="category" term="online-tools,tips-tricks" orderby="dateD" show_extra="dark_spinner,trim"]

Vertical Cards

The vertical cards (and also the horizontal cards) enable the option for applying some spacing around the image. This gives the card a polaroid aspect.

This is an example of posts listed with pagination (three items per page). Each item is displayed as a vertical card (image first, and the post details below), the card image has the zoom effect and some space around it, and the post details fill in the whole info space.

[latest-selected-content ver="2" perpage="3" showpages="more" loadtext="Load more ☝" pagespos="1" display="title,excerpt-small" titletag="h3" chrlimit="130" more="➞" url="yes" image="medium" elements="25" size_text="1rem" size_title="1.4rem"  color_title="#ffffff" color_bg="#3a2d49" css="three-columns as-column hover-zoom content-space-between has-radius has-img-spacing" type="post" status="publish" taxonomy="category" term="travels" orderby="dateD" show_extra="dark_spinner,trim"]

Overlay Cards

This is an example of posts listed with pagination (three items per page), but limited to a maximum of 6 items (only two pages). Each item is displayed as an overlay card (the image is used as the card background), the card image has the zoom effect and a 20% opacity, the card has rounded corners and shadows, and the post details fill in the whole info space.

[latest-selected-content ver="2" limit="6" perpage="3" showpages="more" loadtext="Load more ☝" pagespos="1" display="title,excerpt-small" titletag="h3" chrlimit="140" more="➞" url="yes" image="medium" elements="25" color_title="#ffffff" color_bg="#bc274b" image_opacity="0.15" css="three-columns as-overlay has-shadow has-radius hover-zoom content-space-between" type="post" status="publish" taxonomy="category" term="plugins" orderby="dateD" show_extra="light_spinner,trim"]

Styles Helper

Starting with version 11.0.0, the plugin enables new style options:

  • text, title, and background color
  • text and title size
  • content vertical alignment: start, center, end, and space between
  • drop shadow (the whole card)
  • title shadow
  • card border radius
  • image spacing (if enabled, this is inherited from the card padding, and defaults to 1rem, if nothing else is specified)
  • image opacity (this option is for the overlay card)
  • stacked on mobile (this option is for the horizontal card, and it transforms the card into a vertical card on mobile view)
  • pagination horizontal alignment (when the shortcode is configured to use pagination)
Latest Post Shortcode 11.0.0

The text, title, and background color options accept hex, RGB, and RGBA format, ex: #ffffff, rbga(255, 255, 255, 0.5), etc. Leave empty these options if you want to use the defaults. Also, if you want to apply the colors, you should remove the card’s generic aspect, as the light and dark options would override the color.

The text and title size options accept px, %, rem, em, vw, or vh as units, ex: 1rem, 24px, 2em, 2vw, etc. The option accepts the clamp() CSS function which creates a beautiful transition of the text size when the resolution changes, ex: clamp(1rem, 0.6rem + 1.25vw, 1.4rem), etc. Leave empty these options if you want to use the defaults.

Where is the button?

The button for configuring the shortcode is displayed as an icon or as the LPS button, depending on the mode you use when adding/updating content (the posts, pages, widgets, etc.):

  • in the Visual mode of the editor, the button appears in the toolbar as an icon
  • in the Text mode of the editor, the button appears in the toolbar as the LPS button

The button for the shortcode configurator can be used:

  • when adding/editing posts, pages, text widgets
  • in the LPS block for Gutenberg
  • in the Classic block for Gutenberg
  • for version >= 8.7 the button is also available in Elementor.

See the demo:

If you would like to support my work, please consider making a donation / buy me a coffee, leave a 5 stars rating, or share this plugin on your feed.
A huge thanks in advance!

11.1.0