Sridhar Katakam

Genesis and WordPress Tutorials

Header Search in Genesis Sample 2.8.0

by 2 Comments

This tutorial provides the steps to implement Monochrome Pro's header search feature in Genesis Sample 2.8.0.

The idea is to show a search box covering the entire site header when a magnifying search icon at the right of nav menu is clicked.

As with the earlier tutorial for Showcase Pro, we shall use the WooCommerce’s default product search instead of WordPress’s if WooCommerce is active.

If WooCommerce is not active, we shall fall back to the default WordPress search.

Step 1

Edit functions.php.

a) Let us load Ion Icons' CSS since we will be using the search and close icon from this library.

Below

wp_enqueue_style( 'dashicons' );

add

wp_enqueue_style( 'ionicons', '//unpkg.com/[email protected]/dist/css/ionicons.min.css', array(), CHILD_THEME_VERSION );

b) At the end, add

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • I have been trying to get this implemented on a dev site (locally) using WP 5.2.2, Genesis 3.1.0 and Genesis Sample 3.0.1 and it keeps opening below the header/nav. with the search button below that. I have tried customizing the CSS but I can’t get it to function properly. Can you do an update for the new block based 3.x sample theme?

    Reply
    • >