[itmsolParticipant]

Hi! I would like to include a search bar to my blog page, something like the attached picture. I’ve looked around and I guess, I have to modify the template so I installed a child theme. I am using Ethos stack.
Could you help me, please?

My website is: http://magicsolutions.eu/mgs_web/blog/

Thanks in advance!

[RahulModerator]

Hey There,

Thanks for writing in!

You can add full width search bar with a media queries to fit it with all devices.

.searchandfilter input[type="text"] {font-size:26px; width:630px;}
@media only screen and (max-width: 767px) and (min-width: 480px){
.searchandfilter input[type="text"] {width:325px;}
}
@media only screen and (max-width: 479px){
.searchandfilter input[type="text"] {font-size:16px; width:180px;}
}

Hope this helps!

[itmsolParticipant]

Thank you for answering so fast.
Well, the problem is that the searchbar is not existing yet. The image I’ve attached above is just an illustration. Right now the blog looks like this. So i have to insert the sidebar somehow. Or do I have just to copy that code you wrote somewhere? (I tried to copy under CustomCSS but nothing happened.)

So my question. How can I insert a searchbar to blog section when there is no searchbar at all?

[JadeModerator]

HI there,

Would you mind specifying which part of the blog page you want the search bar to be placed? If you can, kindly provide us with a mockup design of what you are trying to achieve so that we’ll have a better idea of what you’re aiming to do.

Thank you.

[itmsolParticipant]

Okay.
So here is my blog posts page (where my posts are): http://magicsolutions.eu/mgs_web/blog/
Right now looks like in this picture (https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/22103657/now.png).
I would like to place a search bar below the nav-bar and above the posts, like in this picture (https://s3.amazonaws.com/community-themeco/app/uploads/2016/08/22090152/legyen.png).
Basically the functionality would be the same like the single post view’s sidebar search field.
How is it possible?

[Paul RModerator]

Hi,

You can add this in your child theme’s functions.php file (wp-content/themes/x-child/functions.php)

function add_search(){      
     if(is_home()){         
          echo '<div class="my-search">'.get_search_form().'</div>';
     }
}
add_action('x_after_view_global__slider-below', 'add_search');

Kindly add it after this line

// Additional Functions
// =============================================================================

Hope that helps

[itmsolParticipant]

Yes, this works well! Thank you very much!

[ThaiModerator]

Glad it worked 🙂

If you need anything else please let us know.

[Kev_LeMParticipant]

Hi, I am trying to do something similar.

I want the search field to be smaller and I want it to be to the left of the page title.

Thank you.

[Prasant RaiModerator]

Hello @kev_lem,

Thanks for writing in!

Would you mind providing us with your website URL in a separate ticket so we can take a closer look?

Thanks.

[Author]

Posts