How to Add Skip Link to WordPress Theme

/ Blog, WordPress, WordPress Development /

All standard WordPress themes have a skip link. This feature allows users to go to content directly. In this tutorial, we will add a skip link to the WordPress theme.

What is a Skip Link?

Skip links are a great way to improve the accessibility of a WordPress theme. They are a type of link that allows users to quickly navigate to the main content of a page, bypassing the navigation menu, header, and sidebar. This is especially useful for people who use keyboard navigation or screen readers.

How to add a Skip Link to Theme?

Adding skip links to a WordPress theme is an easy way to improve the accessibility of a site. Skip links are typically placed at the top of a page, and allow users to quickly jump to the main content. They are usually coded as a link with the text “skip to main content”.

Adding skip links to a WordPress theme is relatively simple. The first step is to add the skip link HTML to the theme’s header.php file. This should be placed just before the main content section of the page.

Open the header.php file of your theme. Add the below code after the wp_body_open()

<a class="skip-link screen-reader-text" href="#content"><?php esc_html_e('Skip to content', 'text-domain'); ?></a>

If the user clicks on this link, he will go to the content directly but you have to do two extra steps in your themes code.

Add an item with id=”content” right before your content or add the id to the tag of your content.

Add style to the skip link. Normally the skip link has to be hidden by default and only by keyboard navigation it will be displayed. Then, add below CSS codes to your style to do the job.

The skip link needs to be styled so that it is visible to the user. This can be done by adding some CSS to the theme’s style.css file.

.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link {
  top: -100%;
  z-index: 100000;
}

Related Posts