Creating a SmartHub Results Page in WordPress

Preparing SmartHub for WordPress Integration

Before creating and configuring your WordPress page, prepare your SmartHub instance using the following steps:

Create a Custom Results Page and Settings

  1. If you do not yet have one, create your own custom folder which includes a custom Results page and the custom settings in your SmartHub installation directory, create one.
    See How to Customize Your SmartHub User Interface.

  2. These custom files enable you to customize your search pages without your customizations being overwritten by future SmartHub application upgrades.

Set Security

  1. Open the Admin user interface by launching your SmartHub site from its host: https://<localhost>:port/_admin.

  2. Security Settings: Set SmartHub Security Settings to "None" since your end-users will not log into it to see the results - "public mode."

    Security

    Ensure that your SmartHub _ADMIN folder is secured so that end-users cannot reach it.

    This can be done one of two ways:

    1. Separate the Admin and search UI from each other as 2 different IIS sites
    2. Deep the Admin and search UI in the same IIS site but enable Windows Authentication for the _ADMIN folder via the Authentication feature from IIS Management application.

Enable CORS

  1. Navigate to your SmartHub installation root directory.

  2. Open the file web.config for editing.
    1. Enable CORS by uncommenting the section for cross-domain requests, around line 312, currently.
    2. Change the value of the parameter Access-Control-Allow-Original, currently around line 314 to the value of your WordPress instance.
      1. For example, https://myWordPressinstance.com

How to Create a SmartHub Search Page in WordPress

  1. Navigate to "All Pages" under the Pages section from the WordPress admin site.

  2. You must have a page on which to display your search results.
    Either:
    1. Create a new page
      or
    2. Edit an existing page

  3. Edit the search page that you want to use.

  4. Add a "Custom HTML" block to the page and copy in the code below.

    1. Make sure to change the path 'smarthub.contoso.com/Results.html' to the path of your SmartHub Results (or custom Results) HTML page that you want to embed in your WordPress instance into.
      Custom HTML component for search results

      Copy
      <iframe style="width:100%;min-height:800px;border:none;" onload="if(!this.src) this.src='https://smarthub.contoso.com/Results.html'+window.location.search + window.location.hash">
      </iframe>

    Because some WordPress themes have built-in search forms that are displayed on different sections of the pages, we recommend you either:
    - Customize your SmartHub page to hide the searchbox that is displayed on the Results page
    or
    - Remove the theme search form for the WordPress search page only, and instead use the native SmartHub search page

How to Configure the Search Functionality from WordPress

  • Out-of-the-box WordPress redirects all searches to the root page of your instance.
  • To avoid this and redirect searches to your new search page:
    • Add a code snippet in the functions.php file.
  • If you use a theme on your page, we recommend that you leverage the Child-theme functionality built into WordPress instead of editing the theme file functions.php.
  • Read more about child themes here: https://developer.WordPress.org/themes/advanced-topics/child-themes/

How to Create a Child-Theme

These steps are optional and can be skipped

  1. Navigate to your WordPress Theme folder on disk.

  2. Create a new folder.

  3. Name the folder.
    1. Best practice is to name it [theme]-child, where [theme] is the name of the WordPress theme you are adding this functionality.
    2. For example: "twentytwenty-child".

  4. Inside this new theme folder create a "style.css" file.

  5. Append the code snippet below in the CSS file. Include the comment symbols.

  6. Change [theme] to the name of the theme that you are adding this functionality to.

    • For example: "twentytwenty".

    Style.css content
    Copy 
    /*
     Theme Name:   [theme] with SmartHub Search
     Theme URI:    https://bainsight.com/
     Description:  Customization for adding SmartHub integration on top of the current theme
     Author:       BA Insight
     Author URI:   https://bainsight.com
     Template:     [theme]
     Version:      1.0.0
     License:      GNU General Public License v2 or later
     License URI:  http://www.gnu.org/licenses/gpl-2.0.html
     Tags:         bainsight, smarthub
     Text Domain:  baicustomtheme
    */

  7. Inside this new theme folder create a "functions.php" file.

  8. Open the file for editing.

  9. Append the code snippet below into the functions.php file.

    1. The snippet redirects searches to your new search page.

    2. Replace [pagename] with the relative path to your search page, such as "/search":

      Search redirect snippet
      Copy 
      <?php
      function change_search_url_rewrite() {
          if ( is_search() && ! empty( $_GET['s'] ) ) {
              wp_redirect( home_url( "[pagename]" ) . "?k=" . urlencode( get_query_var( 's' ) ) );
              exit();
          }   
      }
      add_action( 'template_redirect', 'change_search_url_rewrite' );
      ?>

  10. Navigate to the Themes page under the "Appearance" section on your WordPress site, under Admin view.

  11. Activate the new theme that you have created.
    The theme name, according to recommendations, is called "[theme] with SmartHub Search".

How to Validate Your New Search Page

  1. Navigate to your WordPress instance.

  2.  Use the built-in search box to run a search.

  3. If everything is set up correctly, you are redirected to the new search page you created where SmartHub results are displayed.

Note: Some custom CSS styling might be required depending on where you placed the "Custom HTML" block and how the theme is implemented.