# Full-Screen Search Overlay

> Opens a full-screen search box when visitors click any link to #search (for example a menu item) and closes with Escape, giving small headers a roomy, focused search.

- Type: PHP
- Runs: Frontend only
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: search, overlay, menus
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-search-overlay/

## Code

```php
add_action( 'wp_footer', function () {
    ?>
<style>#wpide-search-overlay{position:fixed;inset:0;z-index:100000;background:rgba(17,24,39,.94);display:flex;align-items:flex-start;justify-content:center;padding:15vh 20px 20px;}#wpide-search-overlay[hidden]{display:none;}</style>
<div id="wpide-search-overlay" role="dialog" aria-modal="true" aria-label="<?php echo esc_attr__( 'Search' ); ?>" hidden>
    <div style="width:100%;max-width:680px;">
        <?php get_search_form(); ?>
        <p style="color:#d1d5db;margin-top:1em;font-size:14px;"><?php echo esc_html__( 'Press Esc to close' ); ?></p>
    </div>
    <button type="button" class="wpide-search-close" aria-label="<?php echo esc_attr__( 'Close' ); ?>" style="position:absolute;top:16px;right:16px;width:48px;height:48px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;cursor:pointer;">&times;</button>
</div>
<script>
(function () {
    var overlay = document.getElementById('wpide-search-overlay');
    if (!overlay) { return; }
    var last = null;
    function open(e) {
        e.preventDefault();
        last = document.activeElement;
        overlay.hidden = false;
        document.documentElement.style.overflow = 'hidden';
        var input = overlay.querySelector('input[type="search"], input[name="s"]');
        if (input) { setTimeout(function () { input.focus(); }, 30); }
    }
    function close() {
        overlay.hidden = true;
        document.documentElement.style.overflow = '';
        if (last) { last.focus(); }
    }
    document.addEventListener('click', function (e) {
        var link = e.target.closest ? e.target.closest('a[href$="#search"]') : null;
        if (link) { open(e); return; }
        if (e.target === overlay || (e.target.closest && e.target.closest('.wpide-search-close'))) { close(); }
    });
    document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && !overlay.hidden) { close(); } });
})();
</script>
    <?php
} );
```

## Notes

Add a Custom Link menu item with the URL #search and the label "Search". The overlay uses your theme's normal search form.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Full-Screen Search Overlay" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/