How to Add Skip Links to Any WordPress Theme in 2 Minutes
Your WordPress site needs skip links for accessibility. Here's how to add them without touching code, even on block themes like Twenty Twenty-Five.
Key Takeaways
- Test for existing skip links by pressing Tab on your site. If nothing appears, you need to add them.
- Block themes (like Twenty Twenty-Five) make manual implementation tricky because they lack header.php.
- A plugin is the simplest solution for any theme type, especially block themes and page builders.
- Always verify your skip link target ID exists, or the link will do nothing.
- Test with a screen reader (NVDA, VoiceOver) to confirm the skip link works for real users.
Do You Already Have Skip Links?
Before adding anything, check if your theme already includes them:
- Open your website in Chrome or Firefox
- Click anywhere on the page, then press Tab
- Look for a "Skip to content" link appearing at the top
If you see a skip link, you're done. Many premium themes and some default themes include this feature.
If nothing appears, or only your menu links highlight, you need to add skip links.
The Challenge with Block Themes
Classic WordPress themes use PHP templates where you can add code to header.php. Block themes like Twenty Twenty-Five, Flavor, and Flavflavor work differently:
- No header.php to edit
- Templates are HTML files
- The
wp_body_openhook often doesn't fire
This makes manual skip link implementation tricky. A plugin that handles both classic and block themes is the simplest solution.
Method 1: Using Skip Links Generator Pro (Recommended)
Step 1: Install the Plugin
- Download the ZIP file from Gumroad
- Go to Plugins > Add New > Upload Plugin
- Select the ZIP and click Install Now
- Click Activate
Step 2: Done
Seriously. The plugin works immediately with default settings. Go to your site, press Tab, and you'll see the skip link.
Step 3: Customize (Optional)
Go to Settings > Skip Links to adjust:
| Setting | What It Does |
|---|---|
| Show Only on Focus | Uncheck to make the link always visible |
| Link Text | Change "Skip to content" to any language |
| Background/Text Color | Match your brand colors |
| Position | Top Left, Center, or Right |
| Additional Links | Add "Skip to navigation" or "Skip to footer" |
Method 2: Manual Code (Classic Themes Only)
If you prefer not to use a plugin and have a classic theme:
Step 1: Edit header.php
In Appearance > Theme File Editor, find header.php. Add this right after <body>:
<a class="skip-link screen-reader-text" href="#main">
Skip to content
</a>Step 2: Add CSS
In Appearance > Customize > Additional CSS:
.skip-link {
position: absolute;
top: -100px;
left: 0;
background: #000;
color: #fff;
padding: 15px;
z-index: 999999;
text-decoration: none;
}
.skip-link:focus {
top: 0;
outline: 2px solid #fff;
}Step 3: Verify Target ID
Make sure your main content area has id="main". Check your theme's template files or use browser DevTools to find the correct ID.
Problems with Manual Method
- Theme updates may overwrite your changes
- Doesn't work on block themes
- Need to verify the target ID exists
- Have to manage child theme for persistence
You can avoid all these problems. Skip Links Generator Pro works on any theme, survives updates, and auto-detects the correct target. $15 one-time, no subscriptions.
Verifying Your Skip Links Work
Basic Test
- Clear your browser cache
- Open your site
- Press Tab once
- Skip link should appear and have focus
- Press Enter
- Page should scroll and focus moves to main content
Screen Reader Test
For a real accessibility test:
- Windows: Download NVDA (free)
- Mac: Use VoiceOver (Cmd + F5)
- Chrome: Use ChromeVox extension
Navigate your site with the screen reader. The skip link should be announced first.
Common Issues and Fixes
| Problem | Cause | Solution |
|---|---|---|
| Skip link appears but nothing happens | Target ID doesn't exist in your theme | Try IDs: main, content, primary, main-content. Or use a plugin that auto-detects. |
| Skip link doesn't appear at all | Block theme doesn't fire wp_body_open hook | Use a plugin with fallback injection method |
| Skip link has low contrast | Colors don't meet WCAG 4.5:1 ratio | Use black background + white text (always passes) |
| Skip link disappears on theme update | Manual code in header.php overwritten | Use child theme or plugin instead |
| Focus doesn't move to content | Target element not focusable | Add tabindex="-1" to the target element |
Multiple Skip Links
For complex sites, consider adding multiple skip links:
- Skip to content: Main article/page content
- Skip to navigation: Useful for footer-heavy sites
- Skip to footer: Quick access to contact info
Skip Links Generator Pro supports all three with individual text customization.
Checklist
- Skip link appears on Tab press
- Link is visible when focused
- Clicking/Enter moves focus to content
- Works on all pages (not just homepage)
- Text has sufficient contrast
- Works with keyboard only (no mouse)
Manual Code vs Plugin
| Method | Time | Maintenance |
|---|---|---|
| Manual theme code | 15-30 minutes | Redo after every theme update |
| Skip Links Generator Pro | 2 minutes | None - survives updates |
If you use the manual method: Next theme update, your skip links disappear. You won't notice until a user complains or an audit flags it. By then you've been non-compliant for weeks.
Add skip links that actually persist
Skip Links Generator Pro works with any theme including FSE/block themes. Survives updates. Customizable text and colors. No child theme required.
Get Skip Links Generator Pro - $15
One-time payment. No subscriptions. Lifetime updates.