Forem: anti Gym Club

How to Add Skip Links to Any WordPress Theme

anti Gym Club — Tue, 21 Apr 2026 04:07:31 +0000

Skip links are one of the most important accessibility features and one of the most overlooked.

They let keyboard users bypass repetitive navigation and jump directly to content. WCAG 2.4.1 (Level A) requires them. Yet most WordPress themes don't include them.

Here's how to add skip links to any theme, with code you can use today.

What Are Skip Links?

A skip link is a hidden anchor link that becomes visible when a keyboard user presses Tab. It typically says "Skip to content" and jumps to the main content area.

For someone using a screen reader or keyboard-only navigation, this means not having to tab through 20 menu items on every single page.

The Basic Implementation

Add this to your theme's functions.php or a custom plugin:

/**
 * Add skip link to the beginning of the page
 */
function add_skip_link() {
    // Don't show in admin
    if ( is_admin() ) {
        return;
    }

    echo '<a class="skip-link screen-reader-text" href="#main-content">Skip to content</a>';
}
add_action( 'wp_body_open', 'add_skip_link', 1 );

The CSS (This Is Where Most Fail)

The skip link must be:

Invisible by default (but NOT display: none screen readers skip those)
Visible on focus
High contrast
Properly positioned

.skip-link {
    /* Visually hidden but accessible */
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    word-wrap: normal !important;
}

.skip-link:focus {
    /* Visible on focus */
    background-color: #000;
    color: #fff;
    clip: auto !important;
    clip-path: none;
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    height: auto;
    width: auto;
    margin: 0;
    overflow: visible;
    padding: 15px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    text-decoration: none;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

Enqueue it properly:

function enqueue_skip_link_styles() {
    wp_enqueue_style(
        'skip-link-style',
        get_template_directory_uri() . '/css/skip-link.css',
        array(),
        '1.0.0'
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_skip_link_styles' );

The Target Element Problem

Your skip link points to #main-content. But does that ID exist in your theme?

Check common IDs by theme:

Twenty Twenty-Four: main
Astra: content or primary
GeneratePress: content
Kadence: main
Custom themes: Check your single.php or index.php

If your theme doesn't have an ID on the main content wrapper, add one:

// In your theme's template files, find the main content div and add an ID
<main id="main-content" class="site-main">

Or use JavaScript as a fallback:

document.addEventListener('DOMContentLoaded', function() {
    // Find common main content elements
    const selectors = ['main', '[role="main"]', '#content', '#primary', '.site-main'];

    for (const selector of selectors) {
        const element = document.querySelector(selector);
        if (element && !element.id) {
            element.id = 'main-content';
            break;
        }
    }
});

Handling Themes Without wp_body_open

Older themes might not call wp_body_open(). Use a fallback:

function add_skip_link_with_fallback() {
    if ( is_admin() ) {
        return;
    }

    // Check if wp_body_open was already called
    if ( did_action( 'wp_body_open' ) ) {
        return; // Already rendered via wp_body_open
    }

    // Inject via JavaScript
    $html = '<a class="skip-link screen-reader-text" href="#main-content">Skip to content</a>';
    ?>
    <script>
    (function() {
        var skipLink = <?php echo wp_json_encode( $html ); ?>;
        var div = document.createElement('div');
        div.innerHTML = skipLink;
        document.body.insertBefore(div.firstChild, document.body.firstChild);
    })();
    </script>
    <?php
}
add_action( 'wp_footer', 'add_skip_link_with_fallback', 1 );

Adding Multiple Skip Links

Some sites benefit from multiple targets:

function add_multiple_skip_links() {
    if ( is_admin() ) {
        return;
    }
    ?>
    <nav class="skip-links" aria-label="Skip links">
        <a class="skip-link" href="#main-content">Skip to content</a>
        <a class="skip-link" href="#site-navigation">Skip to navigation</a>
        <a class="skip-link" href="#footer">Skip to footer</a>
    </nav>
    <?php
}
add_action( 'wp_body_open', 'add_multiple_skip_links', 1 );

Testing Your Implementation

Reload your site
Press Tab immediately
The skip link should appear
Press Enter
Focus should move to your main content

Test with actual assistive technology if possible. NVDA (Windows) and VoiceOver (Mac) are free.

Common Mistakes

Using display: none Screen readers skip it entirely
Wrong target ID Link goes nowhere
Low contrast colors Fails WCAG
Missing focus styles Users can't see the link
z-index too low Hidden behind sticky headers

The Easy Way

If you don't want to maintain custom code, I built Skip Links Generator Pro that handles all edge cases including themes without wp_body_open, automatic ID detection, and customizable styling.

But the code above will work for most themes. The important thing is to have skip links at all.

Resources:

llm.txt: How to Make Your Wordpress Readable by AI Assistants

anti Gym Club — Sun, 12 Apr 2026 23:37:17 +0000

You've heard of robots.txt. It tells search engines what to crawl.

Now there's llm.txt. It tells AI assistants what your site is about.

The Problem

AI assistants like ChatGPT and Claude are becoming how people find information. But they work differently
than Google.

Google crawls your site, follows links, understands structure. AI assistants? They need explicit context.

Without it, they might:

Ignore your site entirely
Hallucinate wrong information about you
Recommend competitors instead

What is llm.txt?

A plain text file at yoursite.com/llm.txt that provides context to AI.

Basic structure:

Site Name

Brief description of what this site does

About

Detailed information about the site or business.

Key Pages

/about - About page
/products - Product listings
/blog - Technical articles

Products/Services

Product 1 - Description
Product 2 - Description

Contact

email@example.com

Human-readable. Machine-parseable. Takes 5 minutes to create.

Why It Matters

AI search is growing:

ChatGPT: 100M+ weekly users
Perplexity: 10M+ monthly users
Google AI Overviews: 30%+ of searches

These tools decide what content to surface. Without context, they skip you.

Implementation in WordPress

Option 1: Manual

Create llm.txt in your root directory:

  // In functions.php - serve llm.txt
  add_action('init', function() {
      if ($_SERVER['REQUEST_URI'] === '/llm.txt') {
          header('Content-Type: text/plain');
          echo file_get_contents(ABSPATH . 'llm.txt');
          exit;
      }
  });

Then create the file manually and update it when you publish.

Option 2: Auto-generate

Query your posts and build the file dynamically:

  add_action('init', function() {
      if ($_SERVER['REQUEST_URI'] === '/llm.txt') {
          header('Content-Type: text/plain');

          $output = "# " . get_bloginfo('name') . "\n\n";
          $output .= "> " . get_bloginfo('description') . "\n\n";

          $output .= "## Recent Posts\n";
          $posts = get_posts(['numberposts' => 10]);
          foreach ($posts as $post) {
              $output .= "- " . get_permalink($post) . " - " . $post->post_title . "\n";
          }

          echo $output;
          exit;
      }
  });

This keeps it updated automatically.

Option 3: Use a Plugin

If you want more control without writing code, https://antigymclub.com/plugins/llm-txt-generator-pro/ handles:

Auto-generation from all content types
- Custom sections and context
- Updates on publish
- Preview before going live

Content Portability

Related problem: your content is trapped in WordPress's database.

For AI training, headless migrations, or proper backups, you need clean exports.

WordPress's native XML export is... not clean.

Better approach: export to JSON or Markdown.

  // Simple JSON export
  $posts = get_posts(['numberposts' => -1]);
  $export = [];

  foreach ($posts as $post) {
      $export[] = [
          'title' => $post->post_title,
          'content' => $post->post_content,
          'date' => $post->post_date,
          'url' => get_permalink($post)
      ];
  }

  header('Content-Type: application/json');
  echo json_encode($export, JSON_PRETTY_PRINT);

For Markdown with frontmatter, you'll need to convert HTML content - more complex but doable.

Full Solution

I built two plugins that work together:

LLM.txt Generator Pro - AI context file, auto-updated
Content Exporter JSON/MD - Clean exports to JSON/Markdown

Available as the https://antigymclub.com/bundles/ai-readiness-bundle/ - $29 for both.

Getting Started

Minimum viable approach:

Create llm.txt with your site description and key pages
Upload to root directory
Test: visit yoursite.com/llm.txt

That's it. AI assistants can now understand your site.

For automation, either write the code above or use a plugin.

Questions? Drop them in the comments.