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 WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Search modal replacement

  • Hi,

    I have an issue with the new search modal.
    Back in the day with the old search modal we were able to create our own pop-up style search modals with hooks and functions. See this site: https://www.lekkeretenmetlinda.nl/
    Here when you click search, it opens a fully customized modal.

    The code looks like this:

    <div class=”header-after-primary-menu”>
    <div class=”custom-search”>
    <?php
    if ( ‘enable’ === generate_get_option( ‘nav_search’ ) ) {
    generate_do_navigation_search_button();
    echo ‘<div class=”header-search navigation-search-container”>’;
    generate_navigation_search();
    echo ‘</div>’;
    }
    ?>
    </div>

    </div>

    I believe the option nav_search does not work anymore. Is there any way to get this to work again in the newest version?

  • Hi there,

    theres several options now:

    Option A – Use GP Block Element to cerate your own Search Modal.
    Go to Appearance > Elements -> Add New –> Block
    Set the Element Type to Search Modal and the Display Rules to Entire Site.

    Build your own search modal or other content in the element block editor.

    Option B – Use a PHP Function to unhook the Search Modal form and hook in your own function:

    add_action('wp',function(){
    	remove_action( 'generate_inside_search_modal', 'generate_do_search_fields');
    	add_action( 'generate_inside_search_modal', 'custom_do_search_fields' );	
    });
    
    /**
     * Add our search fields to the modal.
     */
    function custom_do_search_fields() {
        // do your custom search here
    }

    Option C – Modify the existing Modal search form using hooks ( not fully relevant here )

    For reference here is the current function:

    
    function generate_do_search_fields() {
    	?>
    	<form role="search" method="get" class="search-modal-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    		<label 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 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>
    		</div>
    		<?php do_action( 'generate_inside_search_modal_form' ); ?>
    	</form>
    	<?php
    }

    You can see within there are fitler hooks for:

    generate_search_label
    generate_search_placeholder
    generate_search_button

    And action hooks:

    generate_inside_search_modal_form

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