Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Modifying Search Form

  • Hello! Team GeneratePress,

    Please share snippet that can help me in changing the search box action path to /search/ and name to q replacing s.

    <div class=”gp-modal gp-search-modal gp-modal–open” id=”gp-search”>
    <div class=”gp-modal__overlay” tabindex=”-1″ data-gpmodal-close=””>
    <div class=”gp-modal__container”>
    <form role=”search” method=”get” class=”search-modal-form” action=””&gt;
    <label for=”search-modal-input” class=”screen-reader-text”>Search for:</label>
    <div class=”search-modal-fields”>
    <input id=”search-modal-input” type=”search” class=”search-field” placeholder=”Search …” value=”” name=”s”>
    <button aria-label=”Search”><span class=”gp-icon icon-search”><svg viewBox=”0 0 512 512″ aria-hidden=”true” xmlns=”; 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></span></button>

    Earlier, I was using below and it used to work but now it doesn’t reflect the changes.

    Note: My search open in modal form which is a new feature of GP.

    // Change Search Path in GeneratePress
    add_filter( 'generate_navigation_search_output', function() {
        '<form method="get" class="search-form navigation-search" action="%1$s">
        <input type="search" placeholder="%2$s" class="search-field" value="%3$s" name="q" title="%4$s" />
        esc_url( home_url( '/search/' ) ),
        esc_attr__(' Search articles','generatepress' ),
        esc_attr( get_search_query() ),
        esc_attr_x( 'Search', 'label', 'generatepress' )
    } );


  • changing the search box action path to /search/

    Do you mean you want the search result page URL to be term?

    If so, GP does not have control over permalinks, you need to rewrite your custom rule or use a plugin to re-direct it.

    The PHP code you added is to modify the legacy nav search, not for the new search modal.

    However, in WordPress, by default, the search form expects the search query parameter to be named “s”. So, if you change the name attribute of the input field from “s” to “q” in your search form, WordPress won’t automatically recognize it. You would need to modify the search query processing to look for the “q” parameter instead of the default “s” parameter.

    If you still want to change it, you can use the block element – search modal:

    Add the form HTMl you want, it will replace the default GB search form in the modal.

  • Fortunately, I am using Google Custom Search Engine instead of default search. The default search is prone to DDoS attack while CSE can be much secure as /search/ page can be cached (ignoring query strings) and ‘q’ can handle *unlimited number of queries without putting stress over WP.

    Hence, I need a different action path which finally works this way



    When I was using former version of GP navigational based search bar, the snippet used to work but with modal I am seeking a solution.

    Thanks for your understanding.

  • Hi there,

    with the Search Modal you would do this:

    	remove_action( 'generate_inside_search_modal', 'generate_do_search_fields');
    	add_action( 'generate_inside_search_modal', 'custom_do_search_fields' );	
    function custom_do_search_fields() {
    	<form role="search" method="get" class="search-modal-form" action="<?php echo esc_url( home_url( '/search/' ) ); ?>">
    		<label for="search-modal-input" class="screen-reader-text"><?php echo apply_filters( 'generate_search_label', _x( 'Search for:', 'label', 'generatepress' ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></label>
    		<div class="search-modal-fields">
    			<input id="search-modal-input" type="search" class="search-field" placeholder="<?php echo esc_attr( apply_filters( 'generate_search_placeholder', _x( 'Search &hellip;', 'placeholder', 'generatepress' ) ) ); ?>" value="<?php echo get_search_query(); ?>" name="s" />
    			<button aria-label="<?php echo esc_attr( apply_filters( 'generate_search_button', _x( 'Search', 'submit button', 'generatepress' ) ) ); ?>"><?php echo generate_get_svg_icon( 'search' ); // phpcs:ignore -- Escaped in function. ?></button>
    		<?php do_action( 'generate_inside_search_modal_form' ); ?>

    Note this line:

    <form role="search" method="get" class="search-modal-form" action="<?php echo esc_url( home_url( '/search/' ) ); ?>">

    I have modified the action attribute to include the /search/ in the URL.

  • It works perfectly. Thank you so much for your assistance.

  • You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.