[Support request] create custom search

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/

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 ?

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;
    }
}

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.

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;
}

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

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;
}