By default, Bricks comes with two skip links out of the box, one for the main content area and one for the footer. When a user first lands on the page and start tabbing with their keyboard, this allows them a quick way ‘skip’ to where they want to go on the page. No need to have tab through every single focusable element to get there. (useful if you have lots of menu links in the header)
In this Pro tutorial we’ll look at how we can customise these skip links for different templates, so they better match the content on the page. For example, for single posts if there are lots of other sections on the page, we may want the user to be able to skip straight to the article content, or have a way to go straight to the comments, or a sidebar or anything else.
For an archive page we may want the user to be able to skip over different content types, or go straight to a search form to help them quickly find they need, for example.
Disable the default skip links
First we need to remove the default skip links, which we’ll add back inside our code if none of the conditions are true.
These can be removed from inside the Bricks settings page under the ‘general’ tab under ‘Miscellaneous > disable skip links’.
Adding conditional skip links
Bricks has an action hook ‘bricks_body’, which is positioned immediately after the opening body tag where skip links live.
What we can do is add our new skip links there, with the same classes/markup as Bricks’ defaults, so everything will look the same, but now we can add conditional statements to make sure the links that appear are more relavent to the content being viewed.
Here’s example code to get this setup. This would need to be added to your child theme or a code snippet manager like WPCodeBox
add_action( 'bricks_body', 'bl_add_custom_skip_links');
function bl_add_custom_skip_links() {
if ( is_singular( 'post' ) ) {
$skiplinks = [
'#brx-article-content' => 'Skip to article content',
'#brx-featured' => 'Skip to featured articles',
'#brx-footer-menu' => 'Skip to footer menu',
];
} else {
$skiplinks = [
'#brx-content' => 'Skip to main content',
'#brx-footer' => 'Skip to main footer',
];
}
foreach($skiplinks as $id => $label) {
echo '<a class="skip-link" href="' . $id . '" aria-label="' . $label .'">' . $label . '</a>';
}
}You can see in the example code, we have a $skiplinks array which holds the IDs of the container/section we want to link to, and the corresponding link text/label for each skip link.
In this example, we just have one condition. We’re adding the condition ‘is_singular(‘post’)’ to check if the user is currently viewing a single post.
If true, you can see the $skiplinks array contains three items, so there’s going to be three skiplinks added. One to go to the article content, another for a featured articles section, and a third to go to a footer menu. With the corresponding IDs for the container where the link would take the user.
If the condition is false, and we’re not viewing a single post, then the original ‘main content’, ‘main footer’ that is default in Bricks would appear.
Customising for your needs
Simply add more conditions for the different templates being used across the site where you need more specific skip links and just make sure the IDs match the containers in your templates, so the links will jump the user to that container.
If there’s not going to be much content or links on the page, the defaults are likely going to be sufficient. The IDs ‘#brx-content’ and ‘#brx-footer’ are added to every page so these don’t need to be edited.
(Note that IDs can be edited in bricks by clicking the small pencil icon when hovering over the ID of the element in the builder)
