How to Add Skip Link to WordPress Theme

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

Open header.php file of your theme. Add 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 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.

.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;
}