Replacement Code: {posts}
The {posts}
replacement code can be used to add posts to your emails! With several different formatting options, you can find one that matches every use case.
Querying posts
The posts replacement code will find recently published posts based on some arguments that you give it. For example...
{posts.number=5 tag=learning orderby=date order=DESC}
The above will show a list of 5 posts with the learning tag, ordered by date descending.
The following query parameters are supported.
Argument | Expects | Description |
number |
integer | The number of posts to display |
offset |
integer | The number of posts to skip in the results |
tag |
string|integer | The slug or ID of a tag to filter posts |
category |
string|integer | The slug or ID of a category to filter posts |
orderby |
string | The field to order posts by |
order |
string | Either ASC or DESC for ascending and descending, respectively |
within |
integer | Limit the posts to those published within the last given number of days. |
Displaying Posts
The posts replacement code offers several different layout options for displaying posts in the email content.
Layouts
You can specify how posts are shown with the layout property. Using it like so...
{posts.layout=grid}
The following layout options are currently supported.
Layout | Purpose |
ul |
Shows a simple unordered list of posts with links to the post. |
ol |
Shows an ordered list of post titles with links to the post. |
grid |
Shows a 2 column grid of posts with featured images and post titles. |
cards |
Shows a 2 column grid of bordered cards with featured images and post titles. |
h1 ... h6 |
Shows a list of post titles with a respective heading tag. |
Extra formatting options
Columns
You can add the columns
flag when using the grid
or cards
, replacement code will show 1-3 columns.
{posts.layout=grid columns=1}
Featured
You can add the featured
flag when using the grid
or cards
layout to show the first post larger than the proceeding posts.
{posts.layout=grid featured}
Excerpt
The post excerpt is not shown by default. If you want to show the excerpt, add the excerpt
flag. The excerpt is only supported for the grid
, cards
, and h1
... h6
layouts.
{posts.layout=h1 excerpt}
Thumbnail
You can add the thumbnail
flag to show thumbnails for the h1
... h6
layouts.
{posts.layout=h2 thumbnail}
Advanced
Use your developer knowledge to extend and filter the posts replacement!
Different post types
You can target other post types by specifying post_type
in the query.
{posts.post_type=movies}
WooCommerce example
{posts.post_type=product layout=grid number=5 offset=1 excerpt featured}
Filtering the post query
You can filter the post query by defining a query id
and then adding a developer filter to add your query filters.
{posts.id=my-custom-query}
Then add your developer filter to hook into the posts query and specific your filters.
<?php add_filter( 'groundhogg/posts/query/my-custom-query', 'filter_groundhogg_posts_query', 10, 2 ); /** * Filter the Groundhogg replacements post query * * @param $query array * @param $contact \Groundhogg\Contact * * @return array */ function filter_groundhogg_posts_query( $query, $contact ){ $query['author__in'] = [ 1234 ]; // todo change author ID return $query; }
Add custom CSS
Using the inspector tool built into browsers you can locate elements and classes to use to change the look of posts in your emails. Place this code in either your themes functions.php file or in a code snippets plugin.
<?php /** * Function Name: add_custom_style_to_groundhogg_emails * Description: Adds custom CSS to the head section of Groundhogg emails. * @return void * Usage: Call this function to add custom CSS styles to the head section of Groundhogg emails. * Notes: This function targets the "h2" tags within the "card-content" class inside "div.grid" elements in Groundhogg emails. It changes the font size of the "h2" tags to 18px and removes underlines from links within "h2" tags. */ function add_custom_style_to_groundhogg_emails(){ // The custom CSS styles to be added to the head section of Groundhogg emails. ?> div.grid .card-content h2{ font-size: 18px; // Change the font size of h2 tags } div.grid .card-content h2 a{ text-decoration: none; // Remove the underline from links within h2 tags } <?php }
Shorten the excerpt
You can add this bit of code to either a code snippets plugin or the theme's functions.php file.
/** * Function Name: custom_excerpt_length * Description: Shorten the excerpt * * Usage: Call this function to shorten excerpt length by the number of words. */ function custom_excerpt_length($length) { return 10; // Set the desired number of words for the excerpt length } add_filter('excerpt_length', 'custom_excerpt_length');