Having an HTML sitemap page (or “human readable” sitemap) on your website will provide an alternative to menu navigation, assist the search engine crawlers, and improve the user experience (UX). This tutorial will walk you through setting up the WordPress plugin WP Realtime Sitemap and show you how to add an HTML sitemap page to your WordPress website.
About WP Realtime Sitemap
WP Realtime Sitemap is a plugin for WordPress which will display links to your pages, posts, categories, archives, and tags anywhere that you place the plugin’s shortcode. The plugin is easy to use and does not require additional coding (unless you plan to style the HTML sitemap to match your theme, which will require using CSS). The HTML sitemap is generated automatically by the plugin and is controlled through the plugin’s settings page.
Download WP Realtime Sitemap
NOTE: This plugin does not create an XML sitemap file for search engines to crawl.
WP Realtime Sitemap Settings Overview
The settings page can be found in the WordPress admin dashboard by visiting:
Settings > WP Realtime Sitemap
These settings allow you to control what content is displayed in the sitemap, including:
- custom post types
You can also set up the format and the order in which the content appears.
There are several ways to use this plugin to assist in the navigation of your website. One solution is to create a menu in WordPress which will be used only for the sitemap. The menu will include all of the selected pages, posts, categories, archives, etc. The benefit of doing this is that you can easily add CSS classes to any of the items in the menu structure, as well as control exactly what you want to display on the sitemap with a drag-and-drop interface.
The downside to using the menu only method is that you have to update the menu every time you add or remove content on your website. Also, you will need to take extra care you don’t accidentally produce an HTML sitemap page with broken or missing links.
To create a new menu, in the WordPress admin dashboard, visit:
Appearance > Menus
Click on the “create a new menu” link. Give the menu a name in the Menu Name field and click the “Create Menu” button. Add items from the left column to the menu area and save it.
You will need to know the menu ID for the sitemap settings Menu ID field. You can find this by looking at the URL while editing the menu. It will be the “xxxx” like in the following example:
If you choose not to display a menu on the sitemap page, leave the Menu ID field blank.
This settings section lets you change how the pages are displayed and which pages to exclude. If you want to manually sort the pages, choose “Page order” in the Order By drop-down field and then manually sort the pages with the CMS Tree Page View plugin. Otherwise, you can choose to display the pages by:
- creation time
- time last modified
- numeric page ID
- page author
- alphabetically (by post slug)
To hide pages from showing on the sitemap, add the page IDs to the Exclude IDs field. If you are having trouble finding the page ID, edit the page you want to exclude and look at the URL. The page ID will be the ‘xxxx’ like in the following example:
TIP: The CMS Tree Page View plugin is a quick way to find the page IDs.
Post & Custom Post Type Settings
Just like the Page Settings section, you can choose how to order the posts and custom post types, as well as exclude specific IDs. The “Display Date” option will output the date onto the sitemap that the post was created, and the “Limit” option will only show the number of posts and custom post types that you input. If you want to divide this section of the sitemap into categories, choose “Yes/on” from the Display Categories drop-down field.
This settings section gives you the option to display the archive Type as:
- Monthly (default)
Leave the Limit field blank if you want to show all. Choosing True (Default) in the Post Count drop-down field will display the number of posts in parentheses next to each archive type on the sitemap.
The categories on the sitemap can be displayed either as a Tag Cloud or as a list. You’ll want to customize the CSS for the Tag Cloud setting to match your theme. You have the option to order how you want the categories to show, including which categories to exclude. The Hide Empty field will remove a category from the sitemap that does not have a published post or custom post type.
It’s a good idea to include all categories on the sitemap, so put a zero in the Limit field. The Hierarchy Depth drop-down field gives you control of displaying the parent/child categories. The available options are:
- All Categories and child Categories (default)
- All Categories displayed in flat (no indent) form
- Show only top level Categories
TIP: If your website has hundreds of categories and sub-categories, consider using the “Show only top level Categories” option, as well as limiting the number of categories to show on the sitemap.
The Tag Settings section is just like the Category Settings section, except the tags do not have a “Hierarchy Depth” option. Depending on how you’ve structured your website, you may want to leave the tag settings off unless you use tags as a way to organize your posts and custom post types.
The HTML sitemap page is divided into the following sections:
You can rename a header, or leave the field empty to display the default.
TIP: The header output is an H3 HTML tag.
These options determine which sections to display on the sitemap. One thing to mention about the “Show ALL Custom Post Types” option is it really will show ALL of the custom post types. Unfortunately, there isn’t an option to exclude all of the posts of an entire custom post type. You will have to exclude the individual IDs in the Post & Custom Post Type Settings section.
TIP: Some themes allow you to turn off custom post types that you aren’t using.
This final settings section lets you order your sitemap. The plugin author suggests that “common sense is required when choosing the order,” and I tend to agree that you should create a sitemap appropriate to your website.
Styling the HTML Sitemap Page using CSS
This plugin does not offer a way to style the sitemap through the settings. Instead, it lists (at the top of the settings page) the CSS ID selectors that can be used for each section of the HTML sitemap page:
wp-realtime-sitemap-menu wp-realtime-sitemap-pages wp-realtime-sitemap-posts wp-realtime-sitemap-your-custom-post-type *custom post type* wp-realtime-sitemap-archives wp-realtime-sitemap-categories wp-realtime-sitemap-tags
TIP: The custom post types ID selectors will begin with wp-realtime-sitemap- and end with the custom post type.
The following CSS code can be used/modified to style the HTML sitemap page:
TIP: If you want a specific custom post type hidden from the sitemap, modify the following CSS code for your website:
Once you have saved the settings, place the following shortcode on the page that you want the sitemap to show:
Final Thoughts: How to Add an HTML Sitemap Page to Your WordPress Website
When creating an HTML sitemap page, a good rule of thumb is to design it to function as a table of contents. Make sure to keep it organized and easy to navigate.
Google’s Webmaster Guidelines states the importance of having an XML sitemap file and suggests to “Also provide a page with a human-readable list of links to these pages (sometimes called a site index or site map page).” Google XML Sitemaps is a free plugin which will generate the XML file.
With the increased usage of devices over desktops, sometimes website navigation can get cumbersome or difficult depending on the device’s viewport size. Offering an HTML sitemap page is a great way to solve this problem.
Take a look at our sitemap page on this website and leave a comment below.
Need help? Our WordPress Development Service is a comprehensive solution for small, medium and enterprise-level businesses. Call us at 602-633-4758 for a free consultation.