Integration with Divi Menu module

[danielschwindt_zjjc]

I see that I can try to replace WordPress default search functionality with Ajax Search instances, which is awesome, but we use Divi, which means we use the Divi Menu module for our main menu, and that Divi module has its own search box/icon. The toggle to replace WordPress default does not seem to replace searches that operate via the Divi modules. Is there a way to make this work that I am missing?

[danielschwindt_zjjc]

You cannot access this content.

[Ernest Marcinko]

Hi!

I’m afraid that is not possible to replace via a hook, I just checked, and it is unfortunately hard-coded into the header.php and the theme-header.php files.

The only way to make a change there is to edit those files directly, but that’s usually not a good idea, unless you are using a child theme. I managed to repace it, by finding this code in the header.php file in the Divi theme directory (around line 332):

<?php if ( $show_search_icon ) : ?>
<div class="et_search_outer">
	<div class="container et_search_form_container">
		<form role="search" method="get" class="et-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
		<?php
			printf( '<input type="search" class="et-search-field" placeholder="%1$s" value="%2$s" name="s" title="%3$s" />',
				esc_attr__( 'Search &hellip;', 'Divi' ),
				get_search_query(),
				esc_attr__( 'Search for:', 'Divi' )
			);

			/**
			 * Fires inside the search form element, just before its closing tag.
			 *
			 * @since ??
			 */
			do_action( 'et_search_form_fields' );
		?>
		</form>
		<span class="et_close_search_field"></span>
	</div>
</div>
<?php endif; ?>

And replacing it with:

<?php if ( $show_search_icon ) : ?>
<div class="et_search_outer">
	<div class="container et_search_form_container">
	
		<?php echo do_shortcode('[wd_asp id=1]'); ?>
		
		<span class="et_close_search_field"></span>
	</div>
</div>
<?php endif; ?>

But this is very far from a permanent solution, if the form were wrapped in a hook, that would make it possible to auto-replace. This still works if you use a child theme, but please mind that an update could cause issues, if they change the main theme header.php file structure.

The optimal solution would be to have hook in Divi to access the search form output. For example if the Divi header.php file search section would look like this:

<?php if ( $show_search_icon ) : ?>
<div class="et_search_outer">
	<div class="container et_search_form_container">
		<div class="container et_search_form_container">
			<?php ob_start(); ?>
			<form role="search" method="get" class="et-search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
				printf( '<input type="search" class="et-search-field" placeholder="%1$s" value="%2$s" name="s" title="%3$s" />',
					esc_attr__( 'Search &hellip;', 'Divi' ),
					get_search_query(),
					esc_attr__( 'Search for:', 'Divi' )
				);

				/**
				 * Fires inside the search form element, just before its closing tag.
				 *
				 * @since ??
				 */
				do_action( 'et_search_form_fields' );
				?>
			</form>
			<?php $header_search_form = ob_get_clean(); ?>
			<?php echo apply_filters('divi/header/search', $header_search_form); ?>
			<span class="et_close_search_field"></span>
		</div>
	</div>
</div>
<?php endif; ?>

Then a simple hook to ‘divi/header/search’ would do the trick permanently. If you want you can make a suggestion to them, although I don’t know how this will change once they update to divi 5. Maybe there is a hook planned already.

[danielschwindt_zjjc]

Ernest,

Thank you so much for looking into this so thoroughly. I will send this on to Divi and see if I can get a response as far as Divi 5 goes. I appreciate you trying all the options presenting me with possible workarounds. I may toy with some of it depending on what Divi says. I’ve been meaning to create a child theme anyhow.

[Ernest Marcinko]

You cannot access this content.

[Author]

Posts