[Resolved] Search Box In Blog Header

[Giovanni]

Hi everyone,

I would like to add a Search Box in the Blog Header to help to browse through blog posts.
I know one way to do it would be with a widget-shortcode plugin and GP hooks.
My questions are:
1) How would I do that with coding and without plugins?
2) Which solution is better in terms of website performance?

Thanks

[Leo]

Hi there,

This might be a more detailed answer than before.

If you are referring to the blog page header the widget shortcode is the easiest option as the page header content accepts shortcode but not PHP.

Otherwise you can use one of GP hooks:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

With conditional tags like this:

<?php if ( is_home() ) { 
    get_search_form();
} ?>

Let me know if this helps.

[Giovanni]

Hi Leo,

Yes, I’m referring to the blog page header.
The fact is, I prefer to have as few plugins as possible. Which code should I use?
Also, is there a ‘better’ option amongst the two (plugin vs code) in terms of website performance?

[Leo]

Page header content box doesn’t take PHP so try the plugin route.

That’s a broad question. Huge depends on how good the code is and how well the plugin is coded.

If you add code then you are responsible to maintain in, verses the plugin author maintain it for you.

I would give Widget Shortcode a shot.

[Giovanni]

Ok, I will try the plugin.
Thank you

[Leo]

No problem!

[Giovanni]

The plugin works perfectly, just two follow-up questions.

1) If I want to move the search box from the blog page header to inside the content container on the blog page, what should I do? I’ve tried the code above but can’t seem to make it work.

2) Is it possible to change the placeholder from “search” to something else?

[Leo]

1) Hmm I’ve tested the code in hook and it should work. Are you checking execute PHP?

2) https://docs.generatepress.com/article/generate_search_placeholder/

[Giovanni]

1) My mistake, now it works but the box is too narrow and aligned left. How can I increase the width and center it?
2) If I change it will it affect every search box on the site?

[Leo]

1) Can you link me to the site?

2) Yes but we could use conditional tag to make it only on that page if you’d like?

[Giovanni]

1) https://www.giovannibaldi.com/blog/
2) That would be great

[Tom]

1. Try this:

.site-main > .search-form {
    text-align: center;
}

.site-main > .search-form input[type="search"] {
    width: 500px;
    max-width: 100%;
}

2. Here’s an example:

add_filter( 'generate_search_placeholder', 'tu_search_placeholder' );
function tu_search_placeholder( $text ) {
    if ( is_home() ) {
        return 'Custom placeholder text';
    }

    return $text;
}

[Giovanni]

Sorry for the dumb question but, where should I paste the filter?
Also, how would you remove the search button and make a search box like the one you use here https://docs.generatepress.com/?

[Tom]

You can add it like this:

To remove the search button, do this:

.site-main > .search-form input[type="button"] {
    display: none;
}

Unfortunately a solution like that takes a lot of custom code, including AJAX. It’s a bit too complicated to help with in the support forum.

[Giovanni]

Tom, I don’t get how to add the filter. Maybe something is missing in your post?
I tried the code in the CSS but the button is still there.

[Author]

Posts