[Support request] create custom search

[Shami]

I want to create a custom search page like this website.

[David]

Hi there,

are you wanting to add the filters at the top of the page?

If so you need a plugin like:

https://en-gb.wordpress.org/plugins/search-filter/

[Shami]

No. (That’s a cool plugin by the way)

Did you check the website I shared?

I want to open a simple full-screen popup when someone clicks on the Search icon.

And show my some pre-selected category names there.

No fancy feature. Just simple search that looks similar to the website I shared.

[David]

Ah ok… not sure about that being “simple” 🙂
Theres one topic here where i provide the method for making the GP Nav Search as an overlay like your example:

https://generatepress.com/forums/topic/moving-search-field-and-icon/#post-1540468

Not sure about the Category list…. how would those be defined ?

[Shami]

Hey, that code you suggested in the article isn’t working at all. It’s breaking everything in the navigation.

I found an article on GP forum: https://generatepress.com/forums/topic/search-in-full-screen/

That person also wanted something similar like this website: https://www.helpscout.net/blog

I want the same thing 😅

But Leo said that it’ll require lots of custom coding, and you guys are planning to bring that soon.

I want this as an overlay:

—————————-
search
—————————
-> sub category 1
-> sub category 2
->

—————–

I want to show only 4-5 categories there.

[David]

That code works fine on a standard GP install, i just tested it again and it worked as it did for the other user.

You won’t need this CSS rule:

@media(min-width: 769px) {
    .main-navigation .inside-navigation {
        flex-direction: column;
    }
}

[Shami]

It worked.

How do I change the color and transparency of the area around the search box? I mean the overlay color.

[David]

In the CSS you will see this rule:

.navigation-search.nav-search-active {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
}

Change the background-color: rgba(0, 0, 0, 0.75); property.

[Shami]

I want to move the search box to the center top.

Also, it’d be best if the close button is separate and locate at top right. And instead there is a search icon.

Or

The search icon appears to the left of the close button so that the user doesn’t have to press enter during search.

[David]

OK, remove the PHP and CSS you added.
Use this PHP:

add_filter('generate_navigation_search_menu_item_output', function(){
    return sprintf(
        '<span class="menu-bar-item search-item"><a aria-label="%1$s" role="button" href="#">%2$s</a></span>',
        esc_attr__( 'Open Search Bar', 'generatepress' ),
        generate_get_svg_icon( 'search', true ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in function.
    );
});

add_action( 'after_setup_theme', function() {
    remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
    remove_action( 'generate_inside_mobile_header', 'generate_navigation_search' , 1 );
    add_action( 'generate_before_header', 'generate_navigation_search' );
});

add_filter( 'generate_navigation_search_output', function() {
	printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <div class="search-input-wrapper grid-container">
		<label for="nav-search" class="search-title">Search:</label> 
                <input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" id="nav-search" />
                <button type="submit" class="search-submit" aria-label="%4$s" value="%4$s"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg></button>
                <span class="search-item menu-item-align-right"><a aria-label="%5$s" href="#">%6$s</a></span>
            </div>
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ),
        esc_attr_x( 'Search', 'submit button' ),
        esc_attr__( 'Close Search Bar', 'generatepress' ),
        generate_get_svg_icon( 'search', true ),
    ); 
} );

And this CSS:

.navigation-search.nav-search-active {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 10000;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: flex-start;
	padding-top: 80px;
}

.search-input-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 800px;
    padding: 20px;
}

.navigation-search.nav-search-active .gp-icon.icon-search {
    display: block;
    padding: 22px;
    background-color: #000;
    color: #fff;
}

.search-title {
    flex: 1 0 100%;
    color: #fff;
}

.navigation-search input[type="search"] {
    width: auto;
    flex: 1;
}
.navigation-search button {
    padding: 20px;
    line-height: 1;
}
.navigation-search button svg {
    fill: currentcolor;
}

[Shami]

Almost perfect.

I want to place the close button in circle shape at the same place where the initial search button is located in the navigation.

Just to make sure that the user doesn’t have to search for the close button.

Please keep the current colors if possible so that I don’t have to change them again and again. Thanks.

[David]

Unfortunately thats out of my reach , that last option i provided is the closest thing i had to your request in my snippets library.

[Shami]

Thanks. Really appreciate your support.

What about the category names or links that I want to show below the search?

I would like to show links with anchor with some CSS so that it looks clean.

[David]

Change the PHP to this:

'add_filter('generate_navigation_search_menu_item_output', function(){
    return sprintf(
        '<span class="menu-bar-item search-item"><a aria-label="%1$s" role="button" href="#">%2$s</a></span>',
        esc_attr__( 'Open Search Bar', 'generatepress' ),
        generate_get_svg_icon( 'search', true ) // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in function.
    );
});

add_action( 'after_setup_theme', function() {
    remove_action( 'generate_inside_navigation', 'generate_navigation_search' );
    remove_action( 'generate_inside_mobile_header', 'generate_navigation_search' , 1 );
    add_action( 'generate_before_header', 'generate_navigation_search' );
});

add_filter( 'generate_navigation_search_output', function() {
	printf(
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <div class="search-input-wrapper grid-container">
		<label for="nav-search" class="search-title">Search:</label> 
                <input type="search" placeholder="Enter your search" class="search-field" value="%2$s" name="s" title="%3$s" id="nav-search" />
                <button type="submit" class="search-submit" aria-label="%4$s" value="%4$s"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path></svg></button>
                <span class="search-item menu-item-align-right"><a aria-label="%5$s" href="#">%6$s</a></span>
		<div class="search-link-wrapper">
			<div class="search-links-title">Popular links</div>
			<a href="#" class="search-link">Link one</a>
			<a href="#" class="search-link">Link two</a>
			<a href="#" class="search-link">Link three</a>					
		</div>
            </div>
        </form>',
        esc_url( home_url( '/' ) ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' ),
        esc_attr_x( 'Search', 'submit button' ),
        esc_attr__( 'Close Search Bar', 'generatepress' ),
        generate_get_svg_icon( 'search', true ),
    ); 
} );

You will see i added:

<div class="search-link-wrapper">
	<div class="search-links-title">Popular links</div>
	<a href="#" class="search-link">Link one</a>
	<a href="#" class="search-link">Link two</a>
	<a href="#" class="search-link">Link three</a>					
</div>

Edit that for your Title and Links.

Now keep the existing CSS and add this to style those links:

.search-link-wrapper {
    flex-basis: 100%;
}
/* Style the links titlte */
.search-links-title {
    margin: 10px 0;
    font-size: 1.5em;
    font-weight: 700;
    color: #fff;
}
/* Style the links */
.search-link-wrapper .search-link {
    display: block;
    padding: 10px;
    margin-bottom: 5px;
    text-decoration: none;
    border-bottom: 1px solid #fff;
    color: #fff;
}
/* link hover colors */
.search-link-wrapper .search-link:hover {
    background-color: #fff;
    color: #000;
}
/* Link HTML Symbol */
.search-link-wrapper .search-link:after {
    content: '\27A4';
    float: right;
}

[Shami]

Awesome.

Perfect.

Just one thing: The close button is coming at the bottom in mobile, which is looking weird. Any idea how to fix that?

I’d prefer a round close button if you can do that…with some space to the right of “search icon.”

[Author]

Posts