Creating A Skip Navigation Link In WordPress

Skip navigation is an important feature for accessibility. Skip navigation allows screen reader users and persons with motor disabilities to go directly to the main content, without pressing the arrow or tab keys multiple times.

Using WordPress, you can easily do this in your pages. Below are the steps on how to create a skip navigation in WordPress.

How to Create a Skip Navigation in WordPress

The simplest way to insert a skip navigation link to your page is by modifying the current theme you are using. To do this, we have to edit three PHP files located in the current theme’s folder (e.g. wordpress/wp-content/themes/FolderOfTheCurrentThemeUsed):

• header.php – Preferably, this file would be the ideal place to put your “Skip to Content” link
• index.php – has the contents of your main page
• page.php – has the contents for all the other pages.

Open header.php using a text editor. You then have to look for the line for the description. By default, it looks like this:


<div class="description"><?php bloginfo('description'); ?></div>.


Enter a new line below it to type in your skip-navigation link tag.


<a href="#skiphere">Skip to content</a>.


It should look like this:


<div id="header" role="banner">

<div id="headerimg">

<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>

<div class="description"><?php bloginfo('description'); ?></div>

<a href="#skiphere">Skip to content</a>

</div>

</div>


You then need to format your skip-navigation link using your current CSS in order to blend it with the current theme.

The next few steps for the index.php and the page.php files will be relatively similar.
Open the files using a text editor and by default the content area is under a CSS <div> below:


<div id="content" class="narrowcolumn" role="main">


Enter a blank line below it and type the <a name> tag.
It would then look like:


<div id="content" class="narrowcolumn" role="main">

<a name="skiphere"></a>

<?php if (have_posts()) : ?>


There is no need to modify a style for it in the CSS, since it’s not visible in the page. After doing the modifications above, test the skip navigation link.