Navigation
This is archived content. Visit our new forum.
  • Author
    Posts
  • #1091512

    Rue Nel
    Moderator

    Hello There,

    Thanks for updating this thread! Yes you can add tags in the recent post element. We just need to custom the recent post element code. To do that, please add the following code in your child theme’s functions.php file

    // Add Tags to the recent post element
    // =============================================================================
    function x_shortcode_recent_posts_v2code( $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();
    
          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';
          }
    
          //
          // 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 = '';
          }
    
          // $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>'
                           // . $excerpt
                         . '</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 this helps.

    #1091579

    cre-aid
    Participant

    Hi,

    When I add this code to my childs theme function php the website doesn’t work anymore. I would like the tag on the place of the red line.

    #1091715

    Paul R
    Moderator

    Hi,

    It’s because you already have the recent posts code modified in your child theme’s functions.php

    Re-declaring the function will give you a php error. I can also see a syntax error in your functions.php file

    Kindly replace the entire code in your child theme’s functions.php file with this

    
    <?php
    
    // =============================================================================
    // FUNCTIONS.PHP
    // -----------------------------------------------------------------------------
    // Overwrite or add your own custom functions to X in this file.
    // =============================================================================
    
    // =============================================================================
    // TABLE OF CONTENTS
    // -----------------------------------------------------------------------------
    //   01. Enqueue Parent Stylesheet
    //   02. Additional Functions
    // =============================================================================
    
    // Enqueue Parent Stylesheet
    // =============================================================================
    
    add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );
    
    // Additional Functions
    // =============================================================================
    
    // =============================================================================
    // Custom Excerpt Length - Call: echo excerpt($length);
    // =============================================================================
    
    function excerpt($limit) {
       $excerpt = explode(' ', get_the_excerpt(), $limit);
       if (count($excerpt)>=$limit) {
          array_pop($excerpt);
          $excerpt = implode(" ",$excerpt).'.';
       } else {
          $excerpt = implode(" ",$excerpt);
       } 
       // $excerpt = preg_replace('<code>\[[^\]]*\]</code>','',$excerpt);
       return $excerpt;
    }
    
    // =============================================================================
    // Add Excerpt to Recent Posts
    // =============================================================================
    
    function x_shortcode_recent_posts_v2code( $atts ) {
      extract( shortcode_atts( array(
        'id'          => '',
        'class'       => '',
        'style'       => '',
        'type'        => 'post',
        'count'       => '',
        'category'    => '',
        'offset'      => '',
        'orientation' => '',
        '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';
      $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' => true
        ) );
    
        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';
          }
           //
          // 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 = '';
          }
          $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', csl18n() ), 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="x-recent-posts-excerpt">' .  strip_tags( excerpt(20) )  . '</span>'
                              . '<span class="tag-list">' . $tags . '</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' );
    }
    
    add_filter( 'snax_is_post_open_for_voting', '__return_false', 99 );
    
    ////////////////////////////////////////////////////////////////////////
    // Ultimate Member Profile Display Name Integration ////////////////////
    ////////////////////////////////////////////////////////////////////////
    add_filter('wpdiscuz_comment_author', 'wpdiscuz_um_author', 10, 2);
    function wpdiscuz_um_author($author_name, $comment) {
        if ($comment->user_id) {
            $column = 'display_name'; // Other options: 'user_login', 'user_nicename', 'nickname', 'first_name', 'last_name'
            if (class_exists('UM_API')) {
                um_fetch_user($comment->user_id); $author_name = um_user($column); um_reset_user();
            } else {
                $author_name = get_the_author_meta($column, $comment->user_id);
            }
        }
        return $author_name;
    }
    ////////////////////////////////////////////////////////////////////////
    // Ultimate Member Profile URL Integration /////////////////////////////
    ////////////////////////////////////////////////////////////////////////
    add_filter('wpdiscuz_profile_url', 'wpdiscuz_um_profile_url', 10, 2);
    function wpdiscuz_um_profile_url($profile_url, $user) {
        if ($user && class_exists('UM_API')) {
            um_fetch_user($user->ID); $profile_url = um_user_profile_url();
        }
        return $profile_url;
    }
    
     add_filter( 'snax_is_post_open_for_voting', '__return_false', 99 );
    

    Hope that helps.

    #1093175

    cre-aid
    Participant

    Awesome! It works. Thank you for your help.

    #1093259

    Paul R
    Moderator

    You’re welcome! 🙂

    #1093268

    cre-aid
    Participant

    Hi support,

    Is their an option to also add the categorie to the post element?

    #1093377

    Paul R
    Moderator

    Hi

    Yes, please replace the code that reads

    
    // =============================================================================
    // Add Excerpt to Recent Posts
    // =============================================================================
    
    function x_shortcode_recent_posts_v2code( $atts ) {
      extract( shortcode_atts( array(
        'id'          => '',
        'class'       => '',
        'style'       => '',
        'type'        => 'post',
        'count'       => '',
        'category'    => '',
        'offset'      => '',
        'orientation' => '',
        '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';
      $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' => true
        ) );
    
        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';
          }
           //
          // 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 = '';
          }
          $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', csl18n() ), 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="x-recent-posts-excerpt">' .  strip_tags( excerpt(20) )  . '</span>'
                              . '<span class="tag-list">' . $tags . '</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' );
    }
    
    

    with this

    
     // =============================================================================
    // Add Excerpt to Recent Posts
    // =============================================================================
    
    function x_shortcode_recent_posts_v2code( $atts ) {
      extract( shortcode_atts( array(
        'id'          => '',
        'class'       => '',
        'style'       => '',
        'type'        => 'post',
        'count'       => '',
        'category'    => '',
        'offset'      => '',
        'orientation' => '',
        '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';
      $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' => true
        ) );
    
        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';
          }
           //
          // 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 = '';
          }
          
              //
        // 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 .= '<i class="x-icon-bookmark" data-x-icon=""></i> '
                                  . $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 .= '<i class="x-icon-bookmark" data-x-icon=""></i> '
                                . $category->name                          
                                . $separator;
          }
    
          $categories_list = sprintf( '<span>%s</span>',
            trim( $categories_output, $separator )
          );
        }
        
          $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', csl18n() ), 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="x-recent-posts-excerpt">' .  strip_tags( excerpt(20) )  . '</span>'
                              . '<span class="tag-list">' . $tags . '</span>'
                              . '<span class="categories-list">' . $categories_list . '</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' );
    }
    
    

    Hope that helps

    #1093496

    cre-aid
    Participant

    Thank you. Works great.

    #1093506

    Joao
    Moderator

    Glad to hear it.

    Let us know if we can help with anything else.

    Joao

    #1095084

    cre-aid
    Participant

    Hi support,

    I have another question. When I go to a category archive (http://cre-aiddesign.nl/inclusive/category/share/) all the styling is gone away. Also you don’t see the subcategory. Is it possible to let it look similar to this page? http://cre-aiddesign.nl/inclusive/share/

    #1095157

    Christopher
    Moderator

    Hi there,

    Please add this code:

    .archive .entry-featured {
        height: 150px;
        overflow: hidden;
    }
    .archive .entry-wrap {
        padding: 1.75% 7.25% !important;
    }
    .archive .entry-title h2 a {
        font-size: 17px;
        line-height: 1.2;
        font-weight: normal;
        font-family: "Montserrat",sans-serif;
        font-style: normal;
        font-weight: 700;
        letter-spacing: -0.035em;
    }
    
    

    Please enable ‘Post Meta’ under Customize -> Blog.

    Hope it helps.

    #1095192

    cre-aid
    Participant

    Hi,

    When I add that code the website is broken.

    #1095286

    Christopher
    Moderator

    Hi there,

    Please provide us with screen shots. Please check the screen shot to see how it looks on my end.

    Thanks.

    #1095304

    cre-aid
    Participant

    I addes a screenshot. I want to give that page the same look as (http://cre-aiddesign.nl/inclusive/share/)
    That means al the post sizes the same and only a title and category.

    #1095365

    Paul R
    Moderator

    Hi,

    You can try adding this under Custom > CSS in the Customizer.

    
    .archive.category .x-iso-container>.hentry {
        min-height: 380px;
    }
    

    Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.