WordPress Fixes

Fix Duplicate “Skip to navigation / Skip to main content” Buttons in WordPress (WoodMart) — An Accessibility-Safe Guide

Posted by

Pouyaweb

October 27, 2025

On October 27, 2025

Fix “Skip to Navigation” & “Skip to Content” in WordPress (WoodMart)

Keywords: skip links, accessibility, WordPress, WoodMart

What Are Skip Links and Why You See Them

“Skip to navigation” and “Skip to content” are skip links that let keyboard and screen-reader users bypass repeated blocks and jump straight to primary content or the main menu. Themes (including WoodMart) often surface them after updates to improve accessibility compliance.

If these links suddenly appeared after a theme or core update, that’s expected behavior. The right approach is to keep them accessible and style them to match your brand—rather than removing them.

Option A (Recommended): Keep and Style Accessibly

Keep the links in the DOM, hide them off-screen by default, and reveal them on focus. This offers great UX for keyboard users and keeps Lighthouse and a11y checks happy.

Minimal HTML

<a class="skip-link" href="#primary">Skip to content</a>
<a class="skip-link" href="#site-navigation">Skip to navigation</a>

<nav id="site-navigation" aria-label="Primary">...</nav>
<main id="primary" tabindex="-1">...</main>

CSS (Match Brand Styles)

/* Already included above; paste into your child theme CSS or Customizer */
.skip-link { position:absolute; top:-40px; left:0; padding:.65rem 1rem; background:#000; color:#fff; border-radius:.5rem; opacity:0; transition:top .2s ease, opacity .2s ease; z-index:10000; }
.skip-link:focus,
.skip-link:focus-visible { top:8px; opacity:1; outline:2px dashed #777FFF; outline-offset:4px; }

Optional: Smooth Focus to Main Content

<script>
document.addEventListener('DOMContentLoaded', function () {
  var link = document.querySelector('a.skip-link[href="#primary"]');
  if (!link) return;
  link.addEventListener('click', function (e) {
    var target = document.querySelector('#primary');
    if (!target) return;
    target.setAttribute('tabindex', '-1');
    target.focus({ preventScroll: true });
    target.scrollIntoView({ behavior: 'smooth' });
  });
});
</script>

Option B: Visually Hide But Keep Accessible

If design requirements demand that the links never appear visually, you can keep them accessible for assistive tech while making them invisible. Use the .visually-hidden utility:

<a class="visually-hidden" href="#primary">Skip to content</a>
<a class="visually-hidden" href="#site-navigation">Skip to navigation</a>

Note: This offers less discoverability for keyboard users compared to Option A.

Option C (Not Recommended): Remove Completely

Removing skip links can degrade accessibility and may fail audits. If you must remove them, do it via child theme hooks and document the decision:

/**
 * Child theme: carefully unhook theme-generated skip links.
 * Adjust the hook name/callback to match your theme.
 */
add_action('after_setup_theme', function () {
  // Example only — replace with your theme's actual hook/callback:
  // remove_action('wp_body_open', 'theme_output_skip_links');
});

Before removing, consider Option A with brand styling. It preserves accessibility and looks intentional.

WoodMart-Specific Notes

WoodMart may inject skip links near <body> via hooks. Keep them and apply the CSS above.
Confirm target IDs (e.g., #primary, #site-navigation) exist in your templates.
Use a child theme or the Customizer’s Additional CSS to persist styles across updates.

Blog