Search Results Customisation

[strobley]

Hi Themeco,

Wordpress 4.9.8
Pro 2.2.5
WooCommerce 3.4.4

I’m following this thread

Search result page customization

Later updated with:

Search result page customization

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?

[ruenel]

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.

[strobley]

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.

[ruenel]

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.

[strobley]

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

Please go ahead and check it out

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

[rad]

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!

[strobley]

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.

[ruenel]

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.

[strobley]

Many thank RueNel - truly appreciated 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.

[ruenel]

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.

[strobley]

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

[rad]

You’re most welcome!

[strobley]

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”

[rad]

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

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

Thanks!