Docs

[Julian B]

Hi guys,

I extended my recent posts section with this code provided in another thread.

<?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
// =============================================================================

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

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

      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';
      }

      $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>'
                       . ( $enable_excerpt ? '<span class="x-recent-posts-excerpt">' . strip_tags($content_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' );
}

// Excerpt Custom Length
// =============================================================================
function x_excerpt_length( $length ) {
    return 20;
}  
add_filter( 'excerpt_length', 'x_excerpt_length' );

Now it looks like this:

I need the “Read more” text on a new line and as a button, how can I achieve this?

Thank you!

[Thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thank you.

[Julian B]

This reply has been marked as private.

[Rupok]

Hi There,

Please add this under Custom > JavaScript in the Customizer.

jQuery(".x-recent-posts-excerpt").html(function(index, html) {
	return html.replace('Read More', '<span>Read More</span>');
});

And this one is for styling, add this to custom css. How do you want the read more to look like?

.x-recent-posts-excerpt span {
	color: red;
        border: 1px solid red;
        display: block;
}

Hope it helps.

Cheers!

[Julian B]

Thanks! Worked out perfect! I can style it by myself

There’s another question. How can I shorten the h-recent-posts h3 to a doublespaced layout?
Like this:

[Rupok]

Hi there,

Thanks for updating. It would be outside of our support scope to assist on such customization but you can try updating the following code on your functions.php

Replace :

'<h3 class="h-recent-posts">' . get_the_title() . '</h3>'

with :

'<h3 class="h-recent-posts">' . get_the_title('', '', FALSE), 0, 40) . '</h3>'

Hope this helps.

Cheers!

[Julian B]

And another problem is showing up: My blog page is now using the same excerpt length as the recent posts section on the frontpage. How can I use another excerpt length for my blog page?

[Rupok]

Hi there,

As you have implemented custom excerpt length by the following code so you will get this for all excerpt and it’s pretty expected :

// Excerpt Custom Length
// =============================================================================
function x_excerpt_length( $length ) {
    return 20;
}  
add_filter( 'excerpt_length', 'x_excerpt_length' );

The code is true for all excerpt there.

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.

[Author]

Posts