8 Ways to Improve Your WordPress Website Navigation

A good user experience is what every website should provide to its audience. It doesn’t necessarily matter how you build your site, so long as you do so with the customer journey top of mind.

How will a user find a specific page on your website? How will they know how to contact you? What can you do to make navigating your website easier? That’s the golden question!

Website visitors aren’t going to convert if your site isn’t easy to navigate—poor website navigation makes it too difficult for them to find what they’re looking for.

Ensuring your site offers an intuitive, easy-to-use navigation experience should be a top priority, and if your site is built with WordPress, there are a number of options you can put use. Let’s jump in!

1. Keep it simple
2. Optimize the navbar
3. Include contact information
4. Use breadcrumbs
5. Include social networking buttons
6. Fix broken links
7. Add a sitemap
8. Optimize for mobile

1. Keep it Simple

This refers to your website’s overall design and isn’t necessarily specific to WordPress (more on this below). Keeping your design simple helps with a multitude of factors. Not only is it easy to navigate for a user, but it also increases your chances of gaining a conversion. You don’t need to get wildly creative to try and appeal to visitors, simple is better. Stick with the modern-day status quo—whatever is working now is obviously working for a reason.

A simple design also means that users won’t have to spend extra time trying to find what they’re looking for. If your website doesn’t have a lot of distractions and isn’t too cluttered, a visitor is more likely to discover what they want.

Here’s where WordPress users have a leg up. The WordPress theme repository, which is home to more than 10,000 free WordPress themes, is an incredible resource filled with sleek, simple site designs that will help you reduce the clutter. And while that massive list has numerous viable options, you can simplify even further with Genesis-built premium themes, which prioritize site navigation and the end-user experience.

2. Optimize the Navbar

Your site’s navbar (navigation bar) is essential for visitors to find pages of interest. Without a properly optimized navigation bar, you’re likely to lose that visitor and, in turn, conversion. The navigation bar should obviously be above the fold on each web page, but you should also keep it in front of the user at all times. Think about creating a sticky navbar that follows the user as they scroll down and through various pages.

If you’re using WordPress, there are a couple of ways you can create a sticky navbar. The first, and easier of the two, is using a plugin or theme that includes sticky navbar functionality. As noted above, there are thousands of WordPress themes you can explore for this type of functionality, and there are more than 60,000 free plugins in the WordPress plugin repository, many of which are built specifically to improve or customize site navigation.

It’s important to always do your research on a plugin or theme before putting it to use on your site, and WP Engine always recommends that you test changes to your site in a staging environment before pushing it live to production.

The second way WordPress users can add a sticky nav (or other navigation functionality) to their site is with manual code, and more specifically CSS. Here’s how to add a sticky nav menu using CSS:

1. Log in to your WordPress dashboard.
2. Navigate to “Appearance” and click on “Customize.”
3. In the Customizer, look for the “Additional CSS” option. Click on it to open the CSS editor.
4. Add the following CSS code to make the navigation sticky:

/* Select the navigation element */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

/* Add some spacing to prevent content overlap */
.site-content {
  margin-top: 100px; /* Adjust the value according to your navigation height */
}

5. Adjust the CSS selector and properties according to your theme’s navigation structure. The example code assumes that the navigation is wrapped in a <header> element with the class “site-header.” Modify it as necessary.
6. Save the changes in the Customizer.
7. Preview your site or visit it to see the sticky navigation in action. Scroll down the page, and the navigation should remain fixed at the top.

Note: Depending on your theme’s structure and CSS classes, the selectors and properties may differ. You need to inspect your site’s HTML structure and modify the CSS code accordingly.

If you prefer to modify the theme files directly instead of using the Customizer, you can add the CSS code to your theme’s stylesheet. Access your WordPress installation via FTP, navigate to the theme directory (/wp-content/themes/your-theme-name/), and open the style.css file. Add the CSS code mentioned above, save the file, and upload it back to your server.

Remember to take a backup of your theme files before making any changes and consider using a child theme to ensure your modifications won’t be overwritten during theme updates.

A final note on menu designand specificallyy your menu items (links to pages in the navbar). You want your design to be simple and easy to use, so limit your menu items to seven orfewers so as not to clutter your navbar. If you go to most websites, you’ll notice that they keep their menu items at or below seven. If you absolutely need more menu items, then use a mega menu, not a drop-down.

3. Include Contact Information

What if a visitor needs to contact you? How are they supposed to find your information? There are a couple of ways you can do this, and WordPress makes it nice and easy.

Use a “Contact Us” page. A very popular way to get visitors to communicate with you is through a “Contact us” page. This page should be located within your navbar or at least in your footer at all times. This tells visitors that you’re open to communication and want to hear from them. This is a very easy and important navigation factor to consider and implement since you’re most likely wanting contact from your visitors if they have any questions or concerns.

Consider including either a contact form or an active email address such as “[email protected]” (or even both) for users to easily connect with you at any time. There are several popular WordPress plugins for creating contact forms including WPForms and Contact Form 7.

Another way to make it easy for site visitors to contact you is to add live chat to your pages. Live chat allows any visitor to contact you on any web page. Many service companies use this method and it goes hand-in-hand with a contact us page.

If you really want visitors to contact you and convert, add that live chat ASAP! Great areas to place the live chat on both desktop and mobile website versions include the bottom-right or bottom-left corners of the screen. Don’t let the live chat button overlap your other website content though. Yes, WordPress has plugins for this as well.

4. Use Breadcrumbs

Breadcrumbs are fantastic for visitors to find their way back through pages, especially if you have a lot on your website. But breadcrumbs aren’t just for finding your way back, they’re also for telling you where you are.

If you have loads of pages or even a small amount, breadcrumbs will lead visitors through the process of how they got there and how they can get back to where they just were.

This is especially nice for large websites because it can become confusing as to how you accessed the page you’re currently on since it might have taken you a few page clicks to get there.

If you’re a WordPress user, there are a number of ways to display breadcrumbs on your site. For starters, you can use a plugin like All in One SEO, which comes with an easy-to-use breadcrumbs feature.

You can also display breadcrumbs using a shortcode, which provides an easy way to add functionality to your WordPress site without writing extensive code or editing theme files.

To add breadcrumbs to your WordPress site using a shortcode, follow these steps:

1. Open your WordPress dashboard and go to “Appearance” and click on “Editor” or access your WordPress installation via FTP and navigate to the theme directory (/wp-content/themes/your-theme-name/).
2. Look for the functions.php file and open it for editing.
3. Add the following code to the functions.php file to create a shortcode for the breadcrumbs:

// Breadcrumbs shortcode
function custom_breadcrumbs_shortcode() {
    ob_start();
    // Your breadcrumb code here
    return ob_get_clean();
}
add_shortcode('breadcrumbs', 'custom_breadcrumbs_shortcode');

4. Replace the comment “Your breadcrumb code here” with the actual code that generates the breadcrumbs for your site. You can use a custom code or utilize a breadcrumb plugin that provides shortcode support. Make sure the code generates the breadcrumbs HTML structure.
5. Save the changes to the functions.php file.
6. Now, you can use the [breadcrumbs] shortcode in your posts, pages, or widgets to display the breadcrumbs. Simply add [breadcrumbs] wherever you want the breadcrumbs to appear.
7. Update or publish your posts or pages to see the breadcrumbs in action.

Note: If you decide to use a breadcrumb plugin, make sure it supports shortcodes or provides a shortcode specifically for displaying the breadcrumbs. In such cases, you may skip steps 3 and 4 and use the plugin’s provided shortcode instead.

Remember that modifying theme files directly may not be the best practice, as it can be overwritten during theme updates. Consider using a child theme or a custom plugin to house your modifications and keep your changes safe from updates.

5. Include Social Networking Buttons

Want users to find you on social media or to share your recent post? Include social media buttons on your website. Social media expands your brand across multiple levels. For visitors interested in your content, it’s a way for them to share with others what they found to be helpful or intriguing. For your business, it’s a way to help you spread your name.

How will visitors share your content or find you on social networks? WordPress has several plugins to help aid in social network sharing. Choose which one works best for your desktop and mobile website versions.

6. Fix Broken Links

Over time, web pages become old and errors can occur. The average lifespan of a web page is said to be 100 days. Keeping this in mind, links can break over time. Whether the page is yours or from another website that you hyperlinked somewhere, 404 error pages aren’t helpful for visitors. Actually, they make them want to leave!

Fix your broken links. Large websites are especially prone to this, since you could have so many pages with so many links that you don’t have the time to individually check each one on a regular basis to ensure they’re working properly. To make this simple for you, WordPress has multiple plugins to check for broken links within your pages, posts, comments, directories, etc. but we suggest using Broken Link Checker since it’s one of the top plugins for this purpose.

7. Add a Sitemap

A sitemap is a list of all the URLs on your website. Each and every page and post has its own sitemap URL. Adding a sitemap to your website means two things:

1. Users will be able to have every link in front of them and choose which one(s) they want to click.
2. Google will be able to add you to the SERPs (search engine results pages) way faster than waiting to be added and hoping Google will index and rank all of your pages.

Note: Not every website uses a sitemap for its visitors, but you can if you want to add that extra user experience for your visitors. Check to see what your competitors are doing.

The sitemap that you’ll want on your website is a basic HTML index that you’ll want in the footer since it’s not of the utmost importance but could be useful to some visitors. It will look something like the USPS About sitemap. Again, this allows visitors to view every link to every page/post you have on your website, which could prove useful if they want to see an overall view of your website.

You can upload this same sitemap to Google Search Console for SEO purposes, but an XML file is recommended. HTML sitemaps are more for users and Google may not be able to find all the associated pages, posts, and attachments like images or videos on your website.

8. Optimize for Mobile

Everything previously stated can help with your mobile website version as well, but there are a few things that you should consider for a mobile website that won’t affect desktop visitors the same.

Make sure that everything you have on your desktop website version fits well with the mobile version. Choose either to create a responsive or adaptive mobile version depending on budget and what works best for your overall needs.

Some things will need to be different from your desktop site. Since mobile devices are typically a much narrower screen, your navigation won’t be the same. For instance, you’ll need to optimize your navbar. Instead of listing your menu items, you’ll need a mobile menu.

This can be shown as a “hamburger” menu icon at the top right or left of the screen. The hamburger menu icon is three horizontal lines stacked atop each other and is the best way to imply “click here for menu” instead of using the desktop technique of always showing the navbar. (This will remove the clutter of all the menu items until a user wants to view it). If you add the text “menu” below or within these lines, you’ll be doing your mobile visitors an extra favor, since some might not know what the icon means.

In addition to the above, WordPress offers users a ton of mobile optimization options through its expansive theme and plugin catalogs. While some plugins and themes provide all-in-one mobile optimizations, you can also focus on a specific area of improvement for mobile, i.e. image optimizations, and there are specific plugins and themes for that too!

Conclusion

Use any or all of these techniques for your WordPress website and you’ll be helping yourself and your visitors! No one wants to go through leaps and hurdles to get to the endpoint, so make it easy and optimize your navigation for a better user experience.

Want to learn more about providing your site visitors with a seamless digital experience? Visit WP Engine to learn more about fully managed WordPress hosting or speak with a representative today!