# "Skip to Content" Link

> Adds a hidden "Skip to content" link that appears when keyboard users press Tab, letting them jump past the header and menu, for themes that lack one.

- Type: HTML
- Runs: Site-wide body
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: accessibility, keyboard, navigation
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-skip-to-content/

## Code

```html
<a class="wpide-skip-link" href="#main">Skip to content</a>
<style>
.wpide-skip-link{position:absolute;left:-9999px;top:0;z-index:100001;padding:10px 16px;background:#1e1e1e;color:#fff;text-decoration:none;}
.wpide-skip-link:focus{left:10px;top:10px;}
</style>
<script>
(function () {
    var link = document.querySelector('.wpide-skip-link');
    var target = document.querySelector('#main, main, .site-main, #content');
    if (!link || !target) { return; }
    if (!target.id) { target.id = 'wpide-main'; }
    if (!target.hasAttribute('tabindex')) { target.setAttribute('tabindex', '-1'); }
    link.setAttribute('href', '#' + target.id);
})();
</script>
```

## Notes

The link targets #main, main or .site-main, whichever exists first. Your theme must call wp_body_open.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find ""Skip to Content" Link" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/