Docs

[Fotkyzadarmo]

Greetings,

I would like to know if it is possible to somehow create a masonry style category, archive and search results page. Digging through the knowladge base and forum topics I couldn’t find a fitting solution.

Here is a thing.
1. Create archive, category, and search results in style of masonry.
2. Change the masonry to like 5 columns and make the content them even.
3. Show search results in columns instead of one column. (I know connected with the first one)

My solutions so far were:
– Using The Grid. The Grid is nice and that but it is hard to implement to X and so far I failed to code it into files.
– Using Essential Grid. I found a topic here on forum using this grid and even though it was implemented it did not work properly and only showed like 5 posts instead of all.
– Using basic Masonry style for archive through the Customize option and setting 3 columns. Well I need at least 5 or 6 columns and make posts even.

Possible workarounds:
– create page for each category and use Visual Composer and then show posts in masonry style provided with VC
– create page for each category and put shortcode of each category grid from either The Grid or Essential Grid into it.

Problem?
All the solution above does not provide for search results. They are very manual and require more work than it would be needed if codes in files were edited.

I found these issues very troubling and negative experience with X. Theme is really nice and it gets some time to get used to it. I hope that documentation gets improved or videos will be provided in the future, plus this mostly asked issue will be considered in the development in the future versions. However, I really like the support on the forum.

I would be very pleased if you help me with the search results. How can I change the code to show the results in masonry style and more than 3 columns?
Thank you

[Nabeel A]

Hi there,

Thanks for writing in! Can you please share the URL of your site so we can take a look at your current setup and suggest you the solution accordingly?

Thanks!

[Fotkyzadarmo]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials.
Please copy the file _index.php from this folder: \wordpress\wp-content\themes\x\framework\views\global to this folder \wordpress\wp-content\themes\x-child\framework\views\global on your child theme. Open the copied file and replace the entire code with the following:

<?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';
elseif ( is_search() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = 4;
  $condition = true;

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(); ?>

Please note that by default maximum number of columns is 4. Adjusting to more than that will need more customization which is outside the scope of our support. Thank you for understanding.

[Fotkyzadarmo]

Thank you, that worked.

I would like to know why is it that only two and three columns are supported or allowed as option in customization area while four columns are possible?

Also how can I change search to include tags and exclude pages in search results? Thank you

[Nico]

Hi There,

I would like to know why is it that only two and three columns are supported or allowed as option in customization area while four columns are possible?

We limit it to two or three columns only because of responsive issues. Some site shows incorrect in mobile devices screensize and some worked well.

In regards to search results page, you could follow the link below.

https://community.theme.co/forums/topic/search-page-results-2/#post-807608

Hope it helps.

Thanks.

[Author]

Posts