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');
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us