Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Search Box In Blog Header

Home Forums Support Search Box In Blog Header

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #390489
    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

    #390683
    Leo
    Staff
    Customer Support

    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.

    #390728
    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?

    #390740
    Leo
    Staff
    Customer Support

    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.

    #390860
    Giovanni

    Ok, I will try the plugin.
    Thank you

    #391027
    Leo
    Staff
    Customer Support
    #392674
    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?

    #392910
    Leo
    Staff
    Customer Support

    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/

    #392973
    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?

    #393077
    Leo
    Staff
    Customer Support

    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?

    #393115
    Giovanni

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

    #393314
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #393607
    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/?

    #393701
    Tom
    Lead Developer
    Lead Developer

    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.

    #393778
    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.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.