Docs

[Pablo F]

Hi,

I have the Agency demo installed. I would like to remove the date below the title and show there the categories the post belongs to, on the recent portfolio items shown at the home page. I have a child theme already installed.

Thank you in advance.

[Prasant Rai]

Hello Pablo,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Pablo F]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed information. Since the child theme is set up, please add the following code in your child theme’s functions.php file

// Add Categories to the recent post element and remove the date
// =============================================================================
function custom_shortcode_recent_posts( $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' ) );
  $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';
  $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 );

  $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
    ) );

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

      //
      // Getting the Categories.
      //

      if ( get_post_type() == 'x-portfolio' ) {
        if ( has_term( '', 'portfolio-category', NULL ) ) {
          $categories        = get_the_terms( get_the_ID(), 'portfolio-category' );
          $separator         = ', ';
          $categories_output = '';
          foreach ( $categories as $category ) {
            $categories_output .= $category->name . $separator;
          }

          $categories_list = sprintf( '<span>%s</span>',
            trim( $categories_output, $separator )
          );
        } else {
          $categories_list = '';
        }
      } else {
        $categories        = get_the_category();
        $separator         = ', ';
        $categories_output = '';
        foreach ( $categories as $category ) {
          $categories_output .= $category->name . $separator;
        }

        $categories_list = sprintf( '<span>%s</span>',
          trim( $categories_output, $separator )
        );
      }

      //
      // Getting the tags
      // 
      if ( get_the_tag_list() ) {
        $tags = '';
        $posttags = get_the_tags();

        if ( $posttags ) {
          foreach( $posttags as $tag ) {
            $tags .= '<span>' . $tag->name . '</span> '; 
          }
        }
      } else {
        $tags = '';
      }

      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_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"', 'cornerstone' ), 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>'
                       //. '<span class="tag-list">' . $tags . '</span>'
                       . '<span class="category-list">' . $categories_list . '</span>'
                       // . $excerpt
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;
}

// =============================================================================

add_action('wp_head', 'apply_custom_shortcode_recent_posts');
function apply_custom_shortcode_recent_posts() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'custom_shortcode_recent_posts' );
}
// =============================================================================

We would loved to know if this has work for you. Thank you.

[Pablo F]

Hi Rue,

Amazing! It´s working perfectly.

Just one las question, what CSS class could I use to fit the text size like the dates did?

As you can see in the attached capture, now the categories titles are shown too big below the portfolio items titles.

Thank you once again.

[Rue Nel]

Hello There,

Thanks for the updates!

To change the the text size like the dates, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-recent-posts .category-list{
    margin: 0;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(0,0,0,0.65);
}

We would loved to know if this has work for you. Thank you.

[Pablo F]

Hello Rue,

The text size is ok but there´s too much vertical space between the portfolio post title and the categories text.

I´ve tried to fix it modifying the margin to -10px 0px 0px 0px; but it makes no effect.

Do you know how to change it?

Thank you.

[Nabeel A]

Hi again,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.home #x-section-3 .x-column {
    margin-right: 10px;
}

Let us know how this goes!

[Pablo F]

Hi Nabeel,

Thank you for your suggestion but it doesn´t work. I´ve tried also changing margin-right to top and bottom (the gap is the vertical space between the title and the category text lines, the name of the artist and the brand/s).

Maybe it´s due to I´ve rearranged sections and it´s not the section-3 actually.

Best regards.

[Thai]

Hi There,

Please find this CSS:

.x-recent-posts .category-list{
    margin: 0;
    font-size: 10px;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(0,0,0,0.65);
}

And change to this:

.x-recent-posts .category-list {
    margin: 0;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    color: rgba(0,0,0,0.65);
    display: block;
}

Hope it helps 🙂

[Pablo F]

Thank you Thai,

It has worked!

[Thai]

Glad it worked 🙂

If you need anything else please let us know.

[Author]

Posts