Docs

[bedingfield]

Hi there,

I’m currently redesigning my frontage and would like to have several recent posts displayed.

I am using code based on shortcodes: http://theme.co/x/demo/renew/1/shortcodes/recent-posts/

Ideally, I would like to display date and the category in the recent posts displayed. Is this possible? Currently you have the title of posy with the date directly under it. I would like date/category.

Also, what CSS controls type on those recent posts?

Thank you for your time.

Karl

[Christopher]

Hi there,

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Please add following code in child theme’s functions.php file :

// =============================================================================
function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'type'        => '',
    'count'       => '',
    'category'    => '',
    'enable_excerpt' => '',
    'offset'      => '',
    'orientation' => '',
    'no_image'    => '',
    'fade'        => ''
  ), $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();

      $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">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                       . '<div class="latest-post-cat">' . $cat_name[0]->name . '</div>'
                    //   . '<span class="x-recent-posts-excerpt">' . excerpt(25) . ''
                     . '</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' );
}

Hope it helps.

[bedingfield]

Many thanks for that. Unfortunately, it doesn’t appear to make any changes.

See here http://elyrunners.club – the 5 recent posts still show just the date. This is recent posts in the body.

Thank you.

[Thai]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[bedingfield]

This reply has been marked as private.

[Paul R]

Hi,

Thank you for providing your login credentials.

The code given above is for x_recent_posts. Please use [x_recent_posts] instead of [recent_posts]

I go ahead and change it in your homepage.

Thanks

[bedingfield]

Great, thank you. I just need to tweak it a little if possible…

Can I have date and category side-by-side like so…

Date . Category

Also, ideally, I would like font size to be same size for date and category. how would I change size, colour, hover?

Thank you for your time.

Karl

[Darshana]

Hi there,

First locate the following line in the code you have added above:
. '<div class="latest-post-cat">' . $cat_name[0]->name . '</div>'
Then change it as follows:
. '<span class="latest-post-cat">' . $cat_name[0]->name . '</span>'

Then you can add the following CSS rules under Custom > CSS in the Customizer.

.x-recent-posts-date {
    float: left;
    line-height: 2.6 !important;
    margin-right: 5px !important;
}

.latest-post-cat {
    color: #0000ff;
    font-size: 11px;
}

.latest-post-cat:hover {
    color: #ff0000;
}

Hope that helps.

[bedingfield]

This reply has been marked as private.

[bedingfield]

This reply has been marked as private.

[bedingfield]

also, one more question.

On the content band boxes. How do I change the ‘red’ colour to something else for the hover and boxes that do not have an image attached?

Thanks

[Rue Nel]

Hello There,

To change the red background color to something else including the boxes with no featured image, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-recent-posts .has-post-thumbnail .x-recent-posts-img:after,
.x-recent-posts .no-post-thumbnail .x-recent-posts-img:after {
    background-color: green;
}

Feel free to change the color that will match with your site.

[bedingfield]

Hi, there was no reply to my questions regarding the upgrade. Can you help as this is quite important.

It’s my question that starts with… Hi there,

Just an additional problem.

I just updated to the latest build and its broken parts of my site layout. I’m using child theme renew.

Thank you

[bedingfield]

Hi,

I have now fixed the majority of issues myself, but I cannot see why, since I updated, why [x_recent_posts count=”1″ category=”race-report”] is showing so much white space below the image.

http://www.elyrunners.club

Any suggestions? My child theme has very few styles.

Also, the text file icon that appears in those x_recent_posts boxes. How do I change their colour?

Thank you

[bedingfield]

Fixed! It appears that using [ x_recent_posts has a bug that created a lot of white space below the featured image. When I used [recent_posts, that white space disappeared.

All that is left is the changing of colour for txt file icon in centre of [recent_posts. What CSS changed this?

[Author]

Posts