Back to Blog
Tutorial 4 min read

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.

Do You Already Have Skip Links?

Before adding anything, check if your theme already includes them:

  1. Open your website in Chrome or Firefox
  2. Click anywhere on the page, then press Tab
  3. 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:

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

  1. Download the ZIP file from Gumroad
  2. Go to Plugins > Add New > Upload Plugin
  3. Select the ZIP and click Install Now
  4. 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

Verifying Your Skip Links Work

Basic Test

  1. Clear your browser cache
  2. Open your site
  3. Press Tab once
  4. Skip link should appear and have focus
  5. Press Enter
  6. Page should scroll and focus moves to main content

Screen Reader Test

For a real accessibility test:

Navigate your site with the screen reader. The skip link should be announced first.

Common Issues and Fixes

Skip link appears but nothing happens on click

The target ID doesn't exist. Common IDs to try:

Skip Links Generator Pro auto-detects the correct element, even if it has no ID.

Skip link doesn't appear at all

On block themes, the wp_body_open hook may not fire. Skip Links Generator Pro has a fallback that works on all themes.

Skip link has low contrast

WCAG requires 4.5:1 contrast ratio. Use a contrast checker and adjust your colors. Black background with white text (default) always passes.

Multiple Skip Links

For complex sites, consider adding multiple skip links:

Skip Links Generator Pro supports all three with individual text customization.

Checklist

Skip the manual work

Skip Links Generator Pro handles all edge cases automatically. Works with any theme, any page builder, any WordPress setup.

Get Skip Links Generator Pro - $15