[thenaturesfarmacy@gmail.comParticipant]

My website is http://www.thenaturesfarmacy.com
I want to add a search bar on the homepage to make it easily for users to search for articles with the right keyword

[RupokMember]

Hi there,

Thanks for writing in! It seems you already have a search icon on your menu. If you need to use another search bar within content; you can place Widget Area element in Cornerstone. Then assign a widget area and place search widget to that.

Hope this makes sense.

[thenaturesfarmacy@gmail.comParticipant]

It doesn’t. Beside how do I make the one on my homepage prominent..

[Rue NelModerator]

Hello There,

Thanks for the updates! 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.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Navbar Searchform Popup
// =============================================================================

if ( ! function_exists( 'x_navbar_searchform_overlay' ) ) :
  function x_navbar_searchform_overlay() {

    if ( is_home() && x_get_option( 'x_header_search_enable' ) == '1' ) :

      ?>

      <div class="x-searchform-overlay">
        <div class="x-searchform-overlay-inner">
          <div class="x-container max width">
            <form method="get" id="searchform" class="form-search center-text" action="<?php echo esc_url( home_url( '/' ) ); ?>">
              <label for="s" class="cfc-h-tx tt-upper"><?php _e( 'Type and Press &ldquo;enter&rdquo; to Search', '__x__' ); ?></label>
              <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s">
            </form>
          </div>
        </div>
      </div>

      <?php

    endif;

  }
  add_action( 'x_before_site_end', 'x_navbar_searchform_overlay' );
endif;

// Navbar Search Navigation Item
// =============================================================================

if ( ! function_exists( 'x_navbar_search_navigation_item' ) ) :
  function x_navbar_search_navigation_item( $items, $args ) {

    if ( is_home() && x_get_option( 'x_header_search_enable' ) == '1' ) {
      if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="menu-item x-menu-item x-menu-item-search">'
                  . '<a href="#" class="x-btn-navbar-search">'
                    . '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span></span>'
                  . '</a>'
                . '</li>';
      }
    }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9998, 2 );
endif;

This code will make sure that the search function will only be visible in your homepage.
Please let us know if this works out for you.

[thenaturesfarmacy@gmail.comParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the information. Sorry I have given the wrong condition. You can make use of this code instead:

// Navbar Searchform Popup
// =============================================================================

if ( ! function_exists( 'x_navbar_searchform_overlay' ) ) :
  function x_navbar_searchform_overlay() {

    if ( is_front_page() && x_get_option( 'x_header_search_enable' ) == '1' ) :

      ?>

      <div class="x-searchform-overlay">
        <div class="x-searchform-overlay-inner">
          <div class="x-container max width">
            <form method="get" id="searchform" class="form-search center-text" action="<?php echo esc_url( home_url( '/' ) ); ?>">
              <label for="s" class="cfc-h-tx tt-upper"><?php _e( 'Type and Press &ldquo;enter&rdquo; to Search', '__x__' ); ?></label>
              <input type="text" id="s" class="search-query cfc-h-tx center-text tt-upper" name="s">
            </form>
          </div>
        </div>
      </div>

      <?php

    endif;

  }
  add_action( 'x_before_site_end', 'x_navbar_searchform_overlay' );
endif;

// Navbar Search Navigation Item
// =============================================================================

if ( ! function_exists( 'x_navbar_search_navigation_item' ) ) :
  function x_navbar_search_navigation_item( $items, $args ) {

    if ( is_front_page() && x_get_option( 'x_header_search_enable' ) == '1' ) {
      if ( $args->theme_location == 'primary' ) {
        $items .= '<li class="menu-item x-menu-item x-menu-item-search">'
                  . '<a href="#" class="x-btn-navbar-search">'
                    . '<span><i class="x-icon-search" data-x-icon="" aria-hidden="true"></i><span class="x-hidden-desktop"> ' . __( 'Search', '__x__' ) . '</span></span>'
                  . '</a>'
                . '</li>';
      }
    }

    return $items;

  }
  add_filter( 'wp_nav_menu_items', 'x_navbar_search_navigation_item', 9998, 2 );
endif;

And since you have installed a caching plugin like W3 Total Cache and WP Super Cache? Please keep in mind that after doing every updates or making any site changes, always remember to clear all caches when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

And by the way, the child theme must be installed and active. All the codes wouldn’t work if you have not yet activated the child theme. I would highly suggest that you do the following steps first before activating the child theme.
1] Please go to X Addons > Customizer manager.
2] Download or Export the XCS file to your local computer.
3] Activate the child theme.
4] Please import again the XCS to make sure that you will have all the customizer settings including the set of menus for your site.

Hope this helps.

[thenaturesfarmacy@gmail.comParticipant]

NO result.. It didn’t work

[Rue NelModerator]

Hello Again,

Off course the code will not take effect because your child theme is not being activated at the moment.
http://prntscr.com/c2wflu

To properly install a child theme, please check out our knowledge base here: https://community.theme.co/kb/how-to-setup-child-themes/

Once you have uploaded the child theme properly, please review my previous reply.
Hope this helps. Kindly let us know.

[thenaturesfarmacy@gmail.comParticipant]

NOt working

[thenaturesfarmacy@gmail.comParticipant]

It just messed up my footer area. Im tired of trying

[Rue NelModerator]

Hello There,

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

For more assistance or if you are looking for a partner to help with your customization needs, you may wish to check out XThemeUsers.com. This user run site is not managed by Themeco, however there are several X professionals listed there. Alternatively you can search on one of the many freelance websites or the X Theme User Group on Facebook.

Thank you for your understanding.

[Author]

Posts