Large and centralized search bar

Hi,

How can I add a large and centralized search bar on my blog page?

I am using Sydney Pro and my url is https://dragoman.ist/category/tips/
Thanks
Umit

Hello Umit,

In order to display additional search bar on archive pages, add this snippet to your child theme’s functions.

    add_action('sydney_before_content', 'sydney_pro_child_top_search');
    function sydney_pro_child_top_search() {
      if(!is_archive() && !is_post_type_archive('post')) {
        return;
      }
      ?>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="sp-top-search">
              <?php get_search_form(); ?>
            </div>
          </div>
        </div>
      </div>
      <?php
    }

Or you can use a plugin that allows adding extra function without child theme like Code Snippets.

Then add this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .sp-top-search .search-form {
      display: table;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 60px;
    }

Lastly free your site from any caching because it usually blocks recent code addition to take immediate effect on the front-end. https://codex.wordpress.org/I_Make_Changes_and_Nothing_Happens

Regards,
Kharis

Hi Kharis,

One more question if I may.
I added snippet to the functions.php and it works, thank you.

Can I make this search box longer and appear at the center of the page rather than top left?

Try applying this additional CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 480px) {
      .sp-top-search label {
        width: calc(100% - 140px);
        width: -moz-calc(100% - 140px);
        width: -webkit-calc(100% - 140px);
      }
      .sp-top-search input.search-field {
        width: 100%;
      } 
    }  
  

Regards,
Kharis

Hi again,
It works. And I guess if I reduce min width from 480 to a lower number, the search bar gets shorter.

Thanks Kkaris - you are awesome

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hello Kharis,

My big and central search bar disappeared after updating to Wordpress 5.0 and Sydney Pro latest version. Any ideas how I bring it back?

Best

Umit

Hello Umit,

Does this file still present in your child theme?

Regards,
Kharis

Hi Kharis,

No, it didn’t. I added and now search bar is back.
Thanks heaps
Umit

You’re welcome Umit!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi Kharis,

I am trying the same for another Sydney Pro based WP site nubuto.com and it does not work. What do you recommend?

Hello there,

It looks like you’re running older version of Sydney Pro. Please consider to upgrade it first. https://docs.athemes.com/article/244-how-to-upgrade-to-sydney-pro-2

Regards,
Kharis

Hi Kharis,

I upgraed to Sydney Pro 2 as you suggested - my license looks active again.
But the snippet does not work.
Strange because same theme, same host (godaddy) same snippet works on dragoman.ist

Any ideas?

Try removing these lines of code:

  if(!is_archive() && !is_post_type_archive('post')) {
     return;
  }

Regards,
Kharis

Hi Kharis,

Removing those lines solved the problem. Now I have a nice and large search bar on my blog page.

Thank you very much,

Umit

You’re welcome Umit!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi there,

Large search bar is gone. The additional code to the functions.php does not work.
How can I add large search bar again?

Hello there,

Does this code still present?

    add_action('sydney_before_content', 'sydney_pro_child_top_search');
    function sydney_pro_child_top_search() {
      if(!is_archive() && !is_post_type_archive('post')) {
        return;
      }
      ?>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="sp-top-search">
              <?php get_search_form(); ?>
            </div>
          </div>
        </div>
      </div>
      <?php
    }

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support