[ryanschaefer41Participant]

Hi — I’m trying to sticky three blog posts on the home page news display. I don’t want the widget to display only the most recent articles. Whenever I set three posts to sticky, it stills display the three most recent plus whatever I’ve selected, increasing the number of posts displayed to four across two rows.

I set the number of posts to display to a maximum of three but it seems to be giving preference chronologically versus the “Make this post sticky” function.

Is there a way to be able to choose which post to display on the front page while limiting the front page display to three? Thanks in advance for the help!

[Rue NelModerator]

Hello There,

Thanks for writing in! To resolve your issue and make sure that the sticky post will display properly with only the same number you have set to display, assuming you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

// Custom Recent Post
// =============================================================================
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=\"mao ni {$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
    ) );

    $i = 0;

    if ( $q->have_posts() ) : while ( $q->have_posts() && $count > $i  ) : $q->the_post();
      $i++;
      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>'
                       // . $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' );
}

Because what we are trying to accomplish requires a template customization, we would like to suggest that you use 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.

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

[ryanschaefer41Participant]

Is there any way to do this without creating a child theme? This is a little above my skill level, after looking at the guides you provided.

[JoaoModerator]

Hi There,

Child theme is the way to go.

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 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.

So we can try to implement it for you.

Thanks

[ryanschaefer41Participant]

This reply has been marked as private.

[Paul RModerator]

This reply has been marked as private.

[ryanschaefer41Participant]

Working great — thanks so much! My only question: will this prevent the chronological order on the Posts page? It looks like the three stickied always appear at the top of the page. I changed them around to the same result. Is this editable? Thanks!

[Paul RModerator]

Yes, by setting your post to sticky, it will appear on top of your blog page.

To exclude sticky posts in your blog page, you can add the code below in your child theme’s functions.php file.

add_action('pre_get_posts', 'my_ignore_sticky');
function my_ignore_sticky($query) {
    if (is_home() && $query->is_main_query()) {
        $query->set('ignore_sticky_posts', true);
    }
}

Hope that helps

[ryanschaefer41Participant]

So, it actually looks like the child theme is overwriting some of the CSS i added (font size in the top grid, orange background on the arrows, hiding images under certain viewport widths). Is there a fix for this? Thanks.

[Paul RModerator]

Hi,

The child theme shouldn’t overwrite any of your css.

If you check wp-content/themes/x-child/style.css it’s basically empty.

Can you provide us the url of the page where we can see the issue.

Thanks

[ryanschaefer41Participant]

It’s the home page: fabriziolee.com.

If you edit that page in Cornerstone, under settings -> custom CSS, you can see the media queries and the “display: none” I added to the chart image.

The orange boxes behind the arrows and the smaller font sizes in The Grid seem to have reverted back to default, as well.

Thanks for the help.

[Paul RModerator]

Hi,

There are syntax errors in your code.

Please remove this code in the style field of your image element.

@media (max-width: 768px) {.charts {display:none;}}

https://www.screencast.com/t/j2qvNXxElpOq

Then in your Custom css

Change this

@media (max-width: 768px) {
  img["http://fabriziolee.com/wp-content/uploads/2016/12/charts.png"] {
    display: none;
  }
}

to this

@media (max-width: 768px) {
  .x-img.charts {
    display: none;
  }
}

Hope that helps.

[ryanschaefer41Participant]

That works; thanks! Do you know what happened to the orange arrow backgrounds and the font size in the Grid? It used to look like the attached screenshot, and there were media queries for the titles inside the cards.

Thanks!

[ChristopherModerator]

Hi there,

Please add this code as well :

.tg-right-arrow.tg-nav-color.tg-nav-font.tg-disabled, .tg-left-arrow.tg-nav-color.tg-nav-font.tg-disabled {
    background-color: rgba(255, 104, 99, 0.48);
}

Thanks.

[ryanschaefer41Participant]

That works!

I’m having trouble finding the child theme. I don’t see it under public_html/fla/wp-content/themes/x. Am I looking in the right place?

Thanks again for all your help!

[Author]

Posts