Replacing content on dynamic_sidebar

  • adam198

    (@adam198)


    2 years, 7 months ago

    Hello

    I am trying to change the classes in some of the WordPress default widgets. Specifically, I want to add bootstrap classes.

    For example, I want to add the form-control class to wp-block-search__input class or nav flex-column to class=”menu”

    For example, if I register a sidebar and add it into my template with the code

    dynamic_sidebar( 'main-sidebar' );

    Then I add the default WordPress search widget to my sidebar it creates this code like this

    <form role="search" method="get" action="https://website.com/" class="wp-block-search__button-outside wp-block-search__icon-button wp-block-search">

   <label for="wp-block-search__input-1" class="wp-block-search__label screen-reader-text">Search</label>

   <div class="wp-block-search__inside-wrapper">

      <input type="search" id="wp-block-search__input-1" class="wp-block-search__input" name="s" value="" placeholder="search" required="">

      <button type="submit" class="wp-block-search__button">Search</button>

   </div>

</form>

    In this I want to replace “wp-block-search__inside-wrapper” with “input-group” and “wp-block-search__input” with “form-control” and “wp-block-search__button” with “btn btn-secondary”

    If I have this search block on a page I can do this with the following code in my functions.php file

    function replace_widget($text) {
   $text = str_replace('wp-block-search__inside-wrapper', 'wp-block-search__inside-wrapper input-group', $text);
   $text = str_replace('wp-block-search__input', 'wp-block-search__input form-control', $text);
   $text = str_replace('wp-block-search__button', 'wp-block-search__button btn btn-secondary', $text);
   $text = str_replace('class="menu', 'class="menu nav flex-column', $text);
   return $text;
}
add_filter('the_content', 'replace_widget');

    This works on the content when I add the search block to a page. I want to also do this on the sidebars and I have not been able to accomplish this.

    I have tried

    add_filter('dynamic_sidebar', 'replace_widget');
add_filter('dynamic_sidebar_params', 'replace_widget');
add_filter('wp_render_widget', 'replace_widget');
add_filter('the_widget', 'replace_widget');

    With no success.

    I am sure I am missing something but not sure what.

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    2 years, 7 months ago

    Try the “get_search_form” filter.

    If your theme has a searchform.php template, that is is the source of the form, so you could alter the template code instead. If your theme is subject to periodic updates, you should create a child theme to contain the altered template. If your theme has no such template, you could create your own for your child theme. Or create one anew anyway to override the parent theme’s.

    Dion

    (@diondesigns)

    2 years, 7 months ago

    It’s not the most elegant solution, but the following should work:

    ob_start();
dynamic_sidebar('main-sidebar');
echo str_replace(
	[
		'wp-block-search__inside-wrapper',
		'wp-block-search__input',
		'wp-block-search__button',
		'class="menu'
	], [
		'wp-block-search__inside-wrapper input-group',
		'wp-block-search__input form-control',
		'wp-block-search__button btn btn-secondary',
		'class="menu nav flex-column'
	],
	ob_get_clean());
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Replacing content on dynamic_sidebar’ is closed to new replies.