Docs

[ramyasriram1]

Hello!

My website is at thetap.in. Here, I’ve sorted the blog posts according to categories – mainly ‘Comics’ and ‘Writing’, which appear on the menu. I’d like to show all the ‘Comics’ post using the layout as it is here:
http://thetap.in/category/comics/.

However, I’d like to have a masonry layout for the ‘Writings’ section – such that each post just shows the featured image and an excerpt on the category page. Is this possible? And if yes, how do I change the settings for that category only?

Thanks so much in advance.

Cheers,
Ramya

[Rue Nel]

Hello There,

Thanks for writing in!

Because what you 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.

Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';

  if ( is_category('writing') ) {
    $style  = 'masonry';
    $cols   = 3;
    $condition = is_archive() && $style == 'masonry';
  }

elseif ( is_search() ) :
  $condition = false;
endif;

?>

<?php if ( $condition ) : ?>

  <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( $stack != 'ethos' ) : ?>
          <?php x_get_view( $stack, 'content', get_post_format() ); ?>
        <?php else : ?>
          <?php x_ethos_entry_cover( 'main-content' ); ?>
        <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>

  </div>

<?php else : ?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( $stack, 'content', get_post_format() ); ?>
    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

3] Save the file named as _index.php
4] Upload this file to your server in the child theme’s folder
wp-content/themes/x-child/framework/views/global/

Hope this helps. Kindly let us know.

[ramyasriram1]

Hello, thanks for the quick reply!

Yes, I’ve been using a child theme. I copy-pasted the code into a Notepad file and uploaded it to my child theme’s folder on the server, but I get a blank screen (attached screenshot). Could you tell me what may be wrong, please? I’ve reverted to the older layout for now.

Thanks so much.

Ramya

[Lely]

Hello Ramya,

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

*Please note that we might need to test above code suggestion to see the error.

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[ramyasriram1]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thank you for the very detailed information. There was an invalid condition in the given code. I have updated it and use this instead:

<?php

// =============================================================================
// VIEWS/GLOBAL/_INDEX.PHP
// -----------------------------------------------------------------------------
// Includes the index output.
// =============================================================================

$stack = x_get_stack();

if ( is_home() ) :
  $style     = x_get_option( 'x_blog_style' );
  $cols      = x_get_option( 'x_blog_masonry_columns' );
  $condition = is_home() && $style == 'masonry';
elseif ( is_archive() && ! is_category('writing') ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = x_get_option( 'x_archive_masonry_columns' );
  $condition = is_archive() && $style == 'masonry';

elseif ( is_archive() && is_category('writing') ) :
  $style  = 'masonry';
  $cols   = 3;
  $condition = is_archive() && $style == 'masonry';

elseif ( is_search() ) :
  $condition = false;
endif;

?>

<?php if ( $condition ) : ?>

  <?php x_get_view( 'global', '_script', 'isotope-index' ); ?>

  <div id="x-iso-container" class="x-iso-container this-is-it x-iso-container-posts cols-<?php echo $cols; ?>">

    <?php if ( have_posts() ) : ?>
      <?php while ( have_posts() ) : the_post(); ?>
        <?php if ( $stack != 'ethos' ) : ?>
          <?php x_get_view( $stack, 'content', get_post_format() ); ?>
        <?php else : ?>
          <?php x_ethos_entry_cover( 'main-content' ); ?>
        <?php endif; ?>
      <?php endwhile; ?>
    <?php else : ?>
      <?php x_get_view( 'global', '_content-none' ); ?>
    <?php endif; ?>

  </div>

<?php else : ?>

  <?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( $stack, 'content', get_post_format() ); ?>
    <?php endwhile; ?>
  <?php else : ?>
    <?php x_get_view( 'global', '_content-none' ); ?>
  <?php endif; ?>

<?php endif; ?>

<?php pagenavi(); ?>

At the moment, masonry grid layout is now displaying on this page: http://thetap.in/category/writing/

If you need anything else we can help you with, don’t hesitate to open another thread.

[ramyasriram1]

Thank you so much! I have a couple more queries:

-How do I get the posts to display only an excerpt, not the full post?
-How do I get each post to open in a new window?
-I’d like only two columns to be displayed, for this I can change the code $cols = 3 to 2 I presume.

Thanks again.

[Rue Nel]

Hello Again,

Thanks for the updates!

1] To get to display the excerpt, you need to edit the code of the _content.php which I already did.

<?php

// =============================================================================
// VIEWS/GLOBAL/_CONTENT.PHP
// -----------------------------------------------------------------------------
// Display of the_excerpt() or the_content() for various entries.
// =============================================================================

$stack                     = x_get_stack();
$is_full_post_content_blog = is_home() && x_get_option( 'x_blog_enable_full_post_content', '' ) == '1';

?>

<?php

// =============================================================================
// VIEWS/GLOBAL/_CONTENT.PHP
// -----------------------------------------------------------------------------
// Display of the_excerpt() or the_content() for various entries.
// =============================================================================

$stack                     = x_get_stack();
$is_full_post_content_blog = is_home() && x_get_option( 'x_blog_enable_full_post_content', '' ) == '1';

?>

<?php

if ( is_singular() || $is_full_post_content_blog || is_category() || is_search() ) :
  
  if ( is_category('writing') ) {
  	x_get_view( 'global', '_content', 'the-excerpt' );
  } else {
  	x_get_view( 'global', '_content', 'the-content' );
  }

  if ( $stack == 'renew' ) :
    x_get_view( 'renew', '_content', 'post-footer' );
  endif;
else :
  x_get_view( 'global', '_content', 'the-excerpt' );
endif;

?>

2] To open the post in new window, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.category-writing .x-iso-container-posts .entry-title a').attr('target', '_blank');
})(jQuery);

3] Yes definitely. You just have to change $cols = 3; and make it to $cols = 2; in the code provided in my previous reply.

Hope this helps.

[ramyasriram1]

Thank you! I have a couple more queries, if you don’t mind.

1. How do I get the featured image to show in the excerpt?
2. I’d ideally like the ‘read more’ link to open in a new window as well. Could you help me do that, please?

Sorry for the bother!

[Paul R]

Hi,

1. To add a featured image, I went ahead and change the code in /wp-content/themes/x-child/framework/views/renew/_content.php to this

<?php

// =============================================================================
// VIEWS/RENEW/CONTENT.PHP
// -----------------------------------------------------------------------------
// Standard post output for Renew.
// =============================================================================

?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <div class="entry-wrap">
    <?php x_get_view( 'renew', '_content', 'post-header' ); ?>
      <?php if ( has_post_thumbnail() ) : ?>
      <div class="entry-featured">
        <?php x_featured_image(); ?>
      </div>
    <?php endif; ?>
       <?php x_get_view( 'global', '_content' ); ?>
  </div>
</article>

2. To make it open in new window, I added this in your child theme’s functions.php file

function x_excerpt_string( $more ) {
    
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link"  target="_blank">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link" target="_blank">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return ' ...';
    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

  }
  add_filter( 'excerpt_more', 'x_excerpt_string' );

[ramyasriram1]

This is absolutely fantastic – thank you so much! It’s perfect 🙂

[Joao]

Great to hear it.

Let us know if we can help you with anything else.

Joao

[ramyasriram1]

Hi hi,

Sorry – last question – how do I get the link on hover on the featured image also to open in the new window?

Thanks so much.

Ramya

[Thai]

Hey There,

Please find this code:

(function($){
  $('.category-writing .x-iso-container-posts .entry-title a').attr('target', '_blank');
})(jQuery);

And change to this:

(function($){
  $('.category-writing .x-iso-container-posts .entry-title a, .category-writing .entry-featured a').attr('target', '_blank');
})(jQuery);

Hope it helps 🙂

[ramyasriram1]

Thank you! Absolutely delighted! 🙂

[Author]

Posts