Feature 6 most recent posts

[123JH]

Hi there,

I need help with my blog styling on http://stg.westsidecg.com/:

1. How do i feature 6 recent posts in 2 rows of 3 posts per a row?
2. How do I add the category to my post currently it has date only
3. how do I add a hover effect to the image that when a user hovers over the image a read more sign appears like i have on this page: http://stg.westsidecg.com/media/

Thank you soooo much!!!

[thai]

@123JH

1. How do i feature 6 recent posts in 2 rows of 3 posts per a row?

Hi @123JH,

You can use 2 recent posts shortcodes like this:

[x_recent_posts count="3" orientation="horizontal"] [x_recent_posts count="3" orientation="horizontal" offset="3"]

http://demo.theme.co/integrity-1/shortcodes/recent-posts/

@123JH

2. How do I add the category to my post currently it has date only

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

// Add category name to recent posts shortcode
// =============================================================================
function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'type'        => '',
    'count'       => '',
    'category'    => '',
    'enable_excerpt' => '',
    'offset'      => '',
    'orientation' => '',
    'no_image'    => '',
    'fade'        => '',
    'show_excerpt'  => 'true'
  ), $atts ) );

  $id            = ( $id          != ''          ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class       != ''          ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style       != ''          ) ? 'style="' . $style . '"' : '';
  $type          = ( $type        == 'portfolio' ) ? 'x-portfolio' : 'post';
  $count         = ( $count       != ''          ) ? $count : 3;
  $category      = ( $category    != ''          ) ? $category : '';
  $category_type = ( $type        == 'post'      ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset      != ''          ) ? $offset : 0;
  $orientation   = ( $orientation != ''          ) ? ' ' . $orientation : ' horizontal';
  $no_image      = ( $no_image    == 'true'      ) ? $no_image : '';
  $fade          = ( $fade        == 'true'      ) ? $fade : 'false';
  $enable_excerpt = ( $enable_excerpt == 'true'      ) ? true : false;

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

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

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

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image_output       = '<div class="x-recent-posts-img">' . get_the_post_thumbnail( get_the_ID(), 'entry-' . get_theme_mod( 'x_stack' ) . '-cropped', NULL ) . '</div>';
        $image_output_class = 'with-image';
      }
    
    $cat_name = get_the_category();

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

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), 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">'
                       . '<div class="latest-post-cat">' . $cat_name[0]->name . '</div>'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                       . '<span class="x-recent-posts-excerpt">' . $excerpt . '</span>'
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();
  
  $output .= '</div>';

  return $output;
}

add_action('wp_head', 'change_recent_posts_to_v2');

function change_recent_posts_to_v2() {
    remove_shortcode( 'x_recent_posts' );
    add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}

@123JH

. how do I add a hover effect to the image that when a user hovers over the image a read more sign appears like i have on this page: http://stg.westsidecg.com/media/

Please add this custom CSS under Theme Options > CSS:

.x-recent-posts a {
    position: relative;
}

.x-recent-posts .format-standard .x-recent-posts-img:before {
    content: 'Read More';
    width: 145px;
    margin-left: -72.5px;
    font-size: 20px;
}
.x-recent-posts a:hover .x-recent-posts-img:before,
.x-recent-posts a:hover .x-recent-posts-img:after {
    opacity: 1;
}

Hope it helps