Search Results Customisation

Hi Themeco,

Wordpress 4.9.8
Pro 2.2.5
WooCommerce 3.4.4

I’m following this thread

Later updated with:

I’ve created _index.php in website-root/wp-content/themes/pro-child/framework/views/global/ _index.php

<?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      = 3;
  $condition = is_search();
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(); ?>

The search results do not seem to appear to screen, though I can see the generated HTML and isoptope scriipt code. Using Developer Tools it looks like none of required x-iso- CSS classes are being generated as per the blog example which includes lots of x-iso- classes

http://demo.theme.co/integrity-1/blog/

I have site and content set to Fullwidth, I’ve tried with both the Ingritiy and Ethos stacks, does it work with Ethos?

As I understand the child theme _index.php is a copy of website-root/wp-content/themes/pro/framework/views/global/_index.php with

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

REPLACED with:

elseif ( is_search() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = 3;
  $condition = is_search();
endif;

Is there something I’ve missed?

Hello There,

Thanks for the very detailed post information. Please have your code updated especially the condition part. You will have to use this instead:

elseif ( is_search() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = 3;
  $condition = is_search() && $style == 'masonry';
endif;

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

Thanks RueNel, unfortunately this did not work. Do you spend a couple of minutes test yourself before suggesting?

Using the below seems to go into the <?php else : ?> block of the first <?php if ( $condition ) : ?> which is effectively standard single fullwidth row-by-row list layout without any isotope styling.

elseif ( is_search() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = 3;
  $condition = is_search() && $style == 'masonry';
endif;

Using the below does enter the first <?php if ( $condition ) : ?> block and loads the <div id=“x-iso-container” block however none of the x-iso- classes are generated on the page and therefore the search result content does not display to the page.

elseif ( is_search() ) :
  $style     = x_get_option( 'x_archive_style' );
  $cols      = 3;
  $condition = is_search();
endif;

To confirm though initial thread shows index.php I am using the _index.php in my child theme, posting on here seems to remove the _ underscore if after a backslash /

Given there is a working version https://julielohre.com/?s=test I would welcome understanding what I’ve missed.

Hello There,

Did you added the file in this location, wp-content/themes/pro-child/framework/views/global/ ?
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look and resolve this issue for you?

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

Thank you.

Yes _index.php added to wp-content/themes/pro-child/framework/views/global/

Please go ahead and check it out :slight_smile:

Test searches you can try are ‘hoodie’ and ‘page’ - hope that helps.

Hi @strobley,

May I know what’s the current issue? It seems the masonry is working well even in hoodie and page search keywords.

Thanks!

This is an example of the working site from thread https://theme.co/apex/forum/t/search-result-page-customization/21966/11 which I provide for reference.

The site I’m working with is in my secure note.

Hello There,

All the codes were correct and in place. So that the search results page will display masonry grid, you will need to go to X > Theme Options > Blog > Archives first and make sure that the “Style” is set to masonry or else the search results page will just display the standard layout just like your archives page.

I went ahead and set the correct theme option. Your search results page is in masonry layout now.

Many thank RueNel - truly appreciated :slight_smile: Apologies I missed this in the original thread.

I notice this works for for search results pages and post however not for products.

Is it possible to display product search results - I believe this is where the correct <div id=“x-iso-container” block loads however none of the x-iso- classes are generated for the product search results on the page. Therefore the search results HTML content is present but does not display without the x-iso- classes

Using my test site if you search ‘hoodie’ no products are displayed however the HTML content is there; and if you search ‘page’ it displays the results as required x-iso classes are generated.

Hello There,

The product search will not display in masonry layout because products does not have hentry and isotope-item class.
To resolve your issue, I ended up adding a custom code in your child theme’s functions.php file.

// Custom Product Post Class
// =============================================================================
function custom_product_class( $output ) {

  if ( is_search() && 'product' == get_post_type()  ) {
      $output[] = 'hentry isotope-item';
  }

  return $output;

}
add_filter( 'post_class', 'custom_product_class' );
// =============================================================================

Please check your site now.

Thank you so much RueNel, it works perfectly. This has been driving me crazy - really appreciate your kind and amazing effort :slight_smile:

You’re most welcome!

Hopefully a quick question - does X/Pro have a Search Results search.php which can be customised to add helpful user experience elements like.

  • You search for “search-word”
  • Total number of search results found “nn”

Hi @strobley,

It only has searchform.php, the search result uses the same template as archive pages (eg. index.php). Hence, you’ll need to create a separate template if you wish to customize it. Default Wordpress theme contains the complete templates as a sample, but it doesn’t need to be present on other themes especially if it has no other use or customization. You’ll have to add it :slight_smile:

I recommend contacting a developer if you’ll need to customize the templates.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.