[Resolved] Show search icon only, not search bar (Full Amp Site)

[Antoinette]

Me again 🙂

If I want to display only the little search icon rather than the whole bar, what would be the best way to do?

Would using inserting it with a hook by using the block element work? In fact, now that I think about it, would it be worth getting rid of GP’s headers via the customizer entirely and using the block element for all of these?

NB: Our site is fully AMP.

[David]

Hi there,

AMP doesn’t support anything that requires Javascript, which our Navigation Search function requires. Would a simple switch to open and close the default WP search field suffice ?

Header Elements currently have one advantage over the Block Element in that they can display dynamic content using the {{template tags}} without the need for shortcodes like would be required in todays Block element.

[Antoinette]

Yeah, anything like that is fine… just so long as it is not the hideous search bar widget that WP thrusts on us.

However, the reason I asked about the blocks is that the default WP search block in there looks miles better. I know you mentioned switching not needing short codes on the cards is in the works, but my needs for a menu/nav is super simple.

Logo, navigation and search.

Worth switching it all over into the block Element and then just getting rid of the shortcode once that functioanlity is available?

[David]

Can you share a link to your site so i can see the layout.
Aah ok – do you mean using a Block element to replace the site header – to add your logo / nav / search ? If so – it wouldn’t at this time as there is no Navigation Block yet.

[Antoinette]

Correct. Could I not generate a shortcode for the nav?

You can see the site here.

Or just use the nav as the header and use the Element block with the logo + search above it.

[David]

No easy way to output a Menu with a shortcode and we shouldn’t need to re-invent the wheel for this one. So we can try this:

1. Create a new Hook element:

https://docs.generatepress.com/article/hooks-element-overview/

2. Add this HTML to your Hook Element content:

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
    <label>
        <span class="screen-reader-text">Search for:</span>
        <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
    </label>
    <input type="submit" class="search-submit" value="Search" />
</form>

3. In the Hook List select: generate_menu_bar_items
4. Check the Execute PHP option.
5. Set the Display Rules to the Entire Site

Now we need some CSS:

menu-bar-items {
    margin-left: 50px;
}

.menu-bar-items .search-form {
    position: absolute;
    right: 0;
}

.menu-bar-items .search-field {
    background-color: #ccc;
    background-image: url(URL_TO_YOUR_ICON/icon.png);
    background-position: 5px center;
    background-repeat: no-repeat;
    background-size: 24px 24px;
    border: none;
    cursor: pointer;
    height: 37px;
    margin: 3px 0;
    padding: 0 0 0 34px;
    position: relative;
    -webkit-transition: width 400ms ease, background 400ms ease;
    transition: width 400ms ease, background 400ms ease;
    width: 0;
}

.menu-bar-items .search-field:focus {
    background-color: #fff;
    border: 2px solid #c3c0ab;
    cursor: text;
    outline: 0;
    width: 230px;
}

.menu-bar-items .search-form .search-submit {
    display: none;
}

In the CSS you will see this line:
background-image: url(URL_TO_YOUR_ICON/icon.png);

You will need to upload a JPEG,PNG or SVG image to your media attachments and replace the URL in that CSS.

[Antoinette]

Thanks David. I’ll give that a whirl in the coming days.

[Antoinette]

Finally got around to this and it works like a charm ^_^
Thank you!

Don’t suppose you know of any useful bits of PHP to help filter/improve the default WP search results?
[happy to open a new topic if that’s a common q]

[David]

Glad to hear that.
Create a new topic and let us know what sort of improvements you require and we’ll see what we can find.

[Author]

Posts