What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Display a Visual Sitemap on Your WordPress Site?

How to Display a Visual Sitemap on Your WordPress Site?

Want to show different pages or sections of your website in a hierarchy layout? This can be achieved with a visual sitemap. In the following, we will firstly give a brief introduction to the differences between visual, XML, and HTML sitemaps. Then, we will introduce a simple method to help you quickly display a visual sitemap on your WordPress site.

What Are the Differences Between XML, HTML, and Visual Sitemaps?

XML and HTML are two popular versions of sitemap designed for crawlers and visitors in respective. An XML sitemap, generally speaking, is a structured format that tells the search engines which pages of your website should be crawled. You can check our beginners’ guide on how to create an XML sitemap for a WordPress site for more detailed information.

SitemapAn HTML sitemap, on the other hand, uses HTML markup language to list some pages and sections of your website. By creating an HTML sitemap, you can help visitors find contents that they may be concerned about on your website.

As for a visual sitemap, it is an alternative option to an HTML layout. It grants you with the ability to show some items from your site in a tree-like structure, which is helpful to bring users with a good browsing experience and reduce the potential bounce rate.

After briefly reviewing the definition and benefits of a visual sitemap, let’s move on to the following part about how to add it to the WordPress site of your own.

How to Display a Visual Sitemap in WordPress?

In fact, this process is fairly simple with a plugin named as Slick Sitemap. The plugin enables you to easily add multiple sitemaps on your website using a shortcode. Now, refer to the following steps to see how we will use it.

Step 1 – Install the Slick Sitemap plugin

In the first place, you need to install the Slick Sitemap plugin. Search for the plugin via the “Plugins” > “Add New” menu in your admin area, download the zip file into your own /wp-content/plugins/ folder, and activate it. If you are a complete novice at this process, we sincerely suggest you read the tutorial about how to install WordPress plugins in advance.

Install the Slick Sitemap Plugin

Step 2 – Create a navigation menu

Before setting up the plugin, you need to create a navigation menu for the sitemap. This can be done with the help of some excellent navigation menu plugins or the decent navigation menu system coming with WordPress itself. In our case, we will choose the latter solution.

Firstly, navigate to “Appearance” > “Menus” option in the sidebar menu of your dashboard. Then, you will be brought to the “Edit Menus” page where you can add and adjust menus. Hit the “create a new menu” link and get started by providing a suitable name for the menu.

Create a New Menu

Secondly, you need to select the pages that you want to display on this menu. After clicking the “Add to Menu” button on the right side of the pages list, you can see the selected pages in the “Menu Structure” section.

Add Pages to the Menu

The next thing you need to do is choosing a theme location to display the menu. It has to be noted that the number and names of theme locations may vary from theme to theme. In this case, you can choose the one according to your own preferences.

Choose a Theme Location

Besides the options above, the plugin also allows you to create nested menus or say drop-down menus. As the following screen capture shows, this can be done by dragging the menu item that you want to display as a child item slightly to the right of its parent item.

Add Child Item

In addition, you can add categories, custom links, posts, and movies to the navigation menu using the options available. Also, it is possible for you to further configure each menu item by clicking the arrow on the top right corner. Once you have finished these settings, remember to click the “Save Menu” button to make them work alright.

In the last, you can visit your site to check whether the navigation menu is working in the way you like. If yes, proceed to the next step. If not, you can head back to the menu editing and managing system to adjust it to your taste. The following is an example navigation menu that we’ve created.

Example Navigation Menu

Step 3 – Set up the plugin

Now, it’s time to set up how the plugin will work on your site. Enter the plugin configuration page via the “Settings” > “Slick Sitemap” option in the admin area. Displayed as below, all you need to do is specifying the default menu for the visual sitemap, default utility menu, and default columns for the layout.

What worth mentioning is that the utility menu will be displayed on the top of your visual sitemap. You can choose to create a new one or use an existing menu according to your needs. The last but not the least thing here is hit the “Save Changes” button to enable all your settings.

Set Up the Plugin

Step 4 – Display a visual sitemap

When you have finished the operations above, now you can display the visual sitemap on your website. Simply start by adding a new page in WordPress. Then, copy and paste the shortcode [slick-sitemap] to the content area and publish the page.

Now, there is no more configuration. You can visit your website to see the visual sitemap functioning as below.

Visual Sitemap in Action


Zoe is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building and loves to share her experience with people all over all the world. In the daily life, Zoe loves detective novels as it can train her logical thinking and creativity.