Docs

[Shuugo]

Hello again dear Themeco team. I am currently on WordPress 4.5.2, running X The Theme 4.4.2, using the Integrity stack with a Child theme installed.

I am trying to achieve a structure in my homepage with the most recent full blog post in it, but also with navigation links to the previous post, similar to what can be seen here: http://bit.ly/1UYjToN (check the part that has “May 11, 2016, Issue 90” for further reference).

Playing around a bit with the theme, I thought I could get to something close to that by using the “Recent Posts” element. After realizing the element does not provide me with a native option to do that, I did some research and tried every single solution suggested in this, this, this and this topic, but to no avail.

Having spent a lot of time with no results, I must say that I am very disappointed with this theme now, to say the least. Everything is incredibly difficult to do for someone with little to no coding / WordPress knowledge, which sort of goes against the “intuitive” part of how the theme is advertised. There are some extremely basic functionalities lacking (why can’t I set the gap between two Text elements in exact pixels or percentages using Cornerstone?), but the worst part in my opinion is that the “display post excerpts in the Latest Posts element” functionality has been requested a lot of times already in the past couple years, as you can see in the links above, but apparently nothing has been done about it.

While I understand this is a huge theme and adding things to it is probably a tricky task, I would truly appreciate it if you guys could help me achieve the same result observed in the reference website I pasted above. This is the only reason why I made the purchase, and not being able to easily get to the expected results has turned this endeavor into an extremely frustrating experience so far. Is it possible to do what I am trying with the “Recent posts” element?

Thank you very much in advance!

[Paul R]

Hi,

Thanks for writing in!

To achieve that you can add this in your child theme’s functions.php file.

  function x_shortcode_recent_posts_v2( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'false',
    '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';
      }

      $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_filter('wp_head', 'custom_recent_posts');

function custom_recent_posts() {
  remove_shortcode( 'x_recent_posts' );

  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
}

Please add it after this line

// Additional Functions
// =============================================================================

Then to display your recents posts, you can add this code in a text element in cornerstone

[x_recent_posts count="4" show_excerpt="true"] 

Hope that helps.

[Shuugo]

Thank you for your reply.

The solution did not work. However, with the help of a friend, we created a new shortcode using your function and then it worked. Why isn’t the x_recent_posts shortcode being replaced? Does this mean that add_filter is not working?

Also, your reply only covers part of what I need to do. Please check the reference again – how do I include a link to previous posts in the end of excerpt? How do I customize how the excerpt looks? Can it be done with regular HTML + CSS? Is there a tutorial on how to do this anywhere?

Thank you very much again.

[Rue Nel]

Hello There,

If you are building the page in Cornerstone, you might want to modify your code so that the code above will also affect Recent Post element in Cornerstone. Simply update the code:

function custom_recent_posts() {
  remove_shortcode( 'x_recent_posts' );
  remove_shortcode( 'cs_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
  add_shortcode( 'cs_recent_posts', 'x_shortcode_recent_posts_v2' );
}

You do not have to link the read more because each of the post items is already link to its respective single post item. 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.

[Shuugo]

Hello guys, thank you for your reply and sorry for the delay.

My website URL is http://looptimize.com.br/.

After playing around with the code some more, I tried to add some custom CSS to my website in the Child Theme’s style.css file. In the process, I found out that 1) properties that never appeared before in other CSS files work as intended when included in the Child Theme’s style.css and 2) properties that already appeared in other CSS files override similar properties that are present in Child Theme’s style.css, even though my style appears last in the headers in the resulting HTML file. The only workaround I found was to use !important on everything that is being overridden, but this is not optimal.

I tried finding a solution here in the forums and found a topic talking about the need to remove the @import part and add the add_filter in the PHP files when dealing with custom CSS. However, I have already done this on my end and it did not work. My X is also updated to the latest version – which was another potential solution to this issue.

How to make the Child Theme’s custom CSS have priority over other CSS files present in the theme?

Thanks!

[Rupok]

Hi there,

Thanks for writing back. Some settings are already there in Customizer and they will generate internal CSS. So if you place CSS for the same settings/classes then it will be overridden by the Customizer generated CSS since Child Theme’s CSS is external. So you need to use !important tag to override them. But I’d suggest you to use the Customizer settings for available settings and also for custom CSS you should use Customizer > Custom > CSS and it’s okay for few tweaks. So now you need to decide what fit best for you.

Hope this makes sense.

[Shuugo]

Hi, thanks a lot for the swift reply!

The code I insert on Customizer > Custom > Edit Global CSS also doesn’t work, unfortunately. Placing !important tags all over the code is a bad practice and might cause me problems in the future, convoluting the specificity / hierarchy of the code. I really wouldn’t like to move forward with this solution.

Do you guys have any other suggestions about how to deal with this scenario?

Thanks!

[Jade]

Hi there,

Kindly point out one element on the page showing the scenario that you are describing. This way, we would be able to check if we could possibly change the CSS selector of the element so that its CSS values will be given the higher priority without using the !important declaration.

[Shuugo]

Hi,

The post title for example doesn’t change if I use font-size, but font-align works. The font-size attribute on integrity-light.css overrides the one I’m trying to use for my title.

Let me know if you need anything else, and thanks again!

[Rad]

Hi there,

You can always implement the !important to override other CSS. For example, font-size: 20px !important;.

Hope that helps 🙂

[Author]

Posts