Recent Posts element + The Events Calendar

Support
#1

Hi. I’m not sure if this is possible but how can one use the Recent Posts element in Cornerstone and limit the display to a category from The Events Calendar?

For example, if I have two categories in Events:

Athletic
Arts

and I only want Athletic to display, is there a way to do that? Currently, when I try to add the category name, nothing shows.

Here is an example: If you go to the staging site created below and edit the homepage and find the Recent Posts element, try filtering the category by using the slug “events” which is a category that exists only in The Events Calendar

#2

Hi There,

Please add the following code under functions.php file locates in your child theme:

function x_shortcode_recent_posts_v3( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    // 'show_excerpt' => 'true',
    'no_sticky'    => '',
    'no_image'     => '',
    'fade'         => ''
  ), $atts, 'x_recent_posts' ) );

  $allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post', 'tribe_events' => 'tribe_events' ) );
  $type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';

  $id            = ( $id           != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class        != ''     ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style        != ''     ) ? 'style="' . $style . '"' : '';
  $count         = ( $count        != ''     ) ? $count : 3;
  $category      = ( $category     != ''     ) ? $category : '';
  //$category_type = ( $type         == 'post' ) ? 'category_name' : 'portfolio-category';

  if($type == 'post'){
  	$category_type = 'category_name';
  } else if($type == 'tribe_events'){
  	$category_type = 'tribe_events_cat';
  } else {
  	$category_type = 'portfolio-category';
  }

  $offset        = ( $offset       != ''     ) ? $offset : 0;
  $orientation   = ( $orientation  != ''     ) ? ' ' . $orientation : ' horizontal';
  // $show_excerpt  = ( $show_excerpt == 'true' );
  $no_sticky     = ( $no_sticky    == 'true' );
  $no_image      = ( $no_image     == 'true' ) ? $no_image : '';
  $fade          = ( $fade         == 'true' ) ? $fade : 'false';

  $js_params = array(
    'fade' => ( $fade == 'true' )
  );

  $data = cs_generate_data_attributes( 'recent_posts', $js_params );

  global $post;

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";

    $q = new WP_Query( array(
		'orderby'             => 'date',
		'post_type'           => "{$type}",
		'posts_per_page'      => "{$count}",
		'offset'              => "{$offset}",
		"{$category_type}"    => "{$category}",
		'ignore_sticky_posts' => $no_sticky,
		'post__not_in'        => array($post->ID)
    ) );

    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image              = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );
        $bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
        $image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
        $image_output_class = 'with-image';
      }

      // $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_excerpt_for_social() ) . '</p></div>' : '';

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( 'echo=0' ) ) ) . '">'
                 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                       // . $excerpt
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;
}

add_action('wp_head', 'change_recent_posts_to_v3');
function change_recent_posts_to_v3() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v3' );
}

The shortcode should look like this:

[x_recent_posts type="tribe_events" category="Athletic" ]

March 2021 Update: The above code example has been adjusted to account for a change to a function name.

#3

Wow thank you! This worked perfectly!

I do have a quick follow up question, however. You can see that in the homepage, I created a Raw Content element with:

[x_recent_posts type=“tribe_events” category=“Events” count=“1” offset=“2” fade=“true”]

under the HAPPENING AT NEWPORT CHRISTIAN. If you hover over the Recent Posts module in column 1 and column 2, you’ll find that there is some hover text that says + Read The Full Story. This is a standard function of Recent Posts, however, and what I did was use CSS to alter that text. Is there a way to get that text back on to the section 3 raw content when one hovers? I can use CSS to style it of course but I’m just wondering if there is a way to get the text on it again.

#4

Hi,

Please update your css code to this

.x-recent-posts .tribe_events  .x-recent-posts-img:before,
.x-recent-posts .format-standard .x-recent-posts-img:before {
    content: "+ Read The Full Story";
    font-size: 1.75em;
    line-height: 1em;
    display: block;
    width: auto;
    font-family: 'Montserrat',sans-serif;
    margin: 0 auto;
    left: 27.5%;
}

I added .x-recent-posts .tribe_events .x-recent-posts-img:before to accommodate your events post

Hope that helps

#5

Hey Paul and Thai,

You guys were incredibly helpful, as I thought that I would have to create an entire template and redo the pages to support this. Thanks for your help earlier.

I have another follow up question about the code in functions.php after having implemented all of the changes you recommended. If you look here: http://fluent.group/teams-and-schedules/ you’ll notice that the 3 events on the right hand side display events from The Events Calendar. In addition, you’ll find that the dates are the dates that the event was created (Aug 17), not the day of the event. Is there a way to ensure that for The Events Calendar, that the day of the event displays when using the shortcode provided instead of the date the event was created?

#6

Hi there,

I am sure you will understand that we did suggest a complete customization of our shortcode to make it work for the 3rd party plugin you’ve mentioned and it is outside of our support scope. We are unable to implement the latest request for you as it is related to retrieve information from a 3rd party plugin regarding the date of the event and inject it to the Recent Post Shortcode. But we can direct you on how to do that yourself:

In the suggested code you will see a line like this:

. '<span class="x-recent-posts-date">' . get_the_date() . '</span>'

There is a function on that line called get_the_date() which retrieves the current date. You need to use another function instead to retrieve the event date.

I did search a little bit and found out this function suitable for your goal:

https://theeventscalendar.com/function/tribe_get_start_date/

Try to start the change using that function. If you have any problems regarding this kindly contact the plugin developers and they will be more qualified to help you around retrieve their event system date. Then you can put their solution instead of the get_the_date() function.

Thank you for your understanding.