Skip to Main Content

How to create a site map for your visitors on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Have you ever wanted to display a site map visible to visitors on WordPress? A visible site map allows you to present a hierarchical diagram of your different pages and sections. In this article, we'll show you how to create a sitemap in WordPress without writing any code.

visualsitemap

Difference between HTML sitemap, XML sitemap, and WordPress visible sitemap

A site map (sitemap) XML is generated for machines and search engines. It uses the XML markup language to represent the content of your site. Search engines can use these site maps to manage your website's exploitation rate.

In addition, an HTML site map is intended to be used by visitors to your website (real people). It simply displays a list of your pages and the different sections of your site on one page. Although the site map (sitemap) HTML is used to show the structure of your site, however this is not often the ideal option for showing your website hierarchy.

This is where a site map visible to users comes in handy. It allows you to display the elements, child elements, sibling elements, all in a tree structure. That being said, let's take a look at how to easily add a user viewable sitemap on WordPress.

Add a site map visible to users in WordPress

The first thing you need to do is install and activate the plugin Slick Sitemap. Now, before installing the plugin, you need to create a navigation menu in WordPress. Using the WordPress navigation menus, you can create menus with submenus. Likewise the sub-menus can have their own sub-menus.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

navmenustructure

This navigation menu will contain all the pages or articles that you want to display in your map. You can name this menu " Visible Site Map And save it.

You can also create another menu or use an existing menu with only a few important pages. This menu will be used as the utility menu above your visible site map.

Once you have created the menus, it's time to set up your site map. Just go to page Settings »Slick Sitemap and configure the plugin.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

slicksitemapsettings

In the option "Default Sitemap Menu", you must select the main menu "VisualSitemap". Choose the number of columns you want to display. Finally, you have to choose the utility menu and click on the button " Save Changes To save everything.

Display the site map visible on your site WordPress

Now that you have successfully created and configured a user viewable sitemap, the next step is to display this map on a page in your WordPress site.

Just create a new page in WordPress and add this shortcode in the content area.

[slick-sitemap]

After that, click on the button " Record " ou "Publish" To save your changes. You can now visit this page and see the site map in action.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

preview-visualsitemap

We hope this article helps you add a user visible sitemap on WordPress. If you have comments on this article, or suggestions, please let us know in the dedicated section.

This article features 11 comments

  1. Re,
    Yes absolutely, that's it: the tree structure is displayed but as I told you, we see lines and an offset in the rectangles of different colors in which the names of the pages are found. No way to make them disappear. Or maybe I am too demanding? Because on your demo, it's on the contrary perfect!
    Thank you for telling me…
    Jean-Marc

    1. Hello,
      Sorry for the delay, I was a little bit busy, all you have to do in this case is use some custom CSS code, I have a code for you, try installing the Header plugin & Footer (I believe that's the name) and add the following code:

      # Post-1255 code {
      Padding: 0px! Important;
      }

      If the code does not work, let me know always by this form.

      1. This code only applies to this page, so if you plan to use the tree in another page, you will need to contact us to provide you with a code for that page.

        1. Hello,
          Thank you for that answer. It's very sweet.
          I don't know how to handle codes and other languages, unfortunately ...
          I installed the plugin indicated with the settings that I inserted above the page which contains the site map (which is displayed badly). Link below:

          http://sante.entre-coeurs.org/plan-site-entre-coeurs-module-sante/

          Of course, as I did, your code appears on all pages with the same message because I don't know how to do otherwise (insert it on the plan page and only this one) ... Please tell me where the put it exactly as soon as you have time, it's very nice.

          Excellent day to you.
          Jean-Marc

  2. Hello,
    First of all thank you for this tutorial.
    I tried it on my site and unfortunately little lines appear which “shift” the rectangles of different colors in which the names of the pages are. No way to make them disappear (there aren't many options)… too bad. I will look for another plugin of this kind because it is very useful. Thanks again. Excellent day
    JMarc

      1. You're welcome.
        I forgot to mention the address where these graphic "offsets" are visible.
        http://sante.entre-coeurs.org/plan-site-entre-coeurs-module-sante/
        Nothing really bad but… it's not very pretty!
        I looked for others since yesterday but I couldn't find anything that shows a diagram of the pages of a site. Apparently the standard remains "Sitemap-page" with which we only get a vulgar alphabetical listing of pages, articles… (no graphics).
        Excellent day
        Jean-Marc

    1. Hello,
      Can you take a screenshot of your settings screen and publish it? In principle this plugin works normally. If not, then an error or omission probably occurred during the settings.

      Best regards.

      1. Hello,
        First of all, thank you for your interest in my case… It's super nice.
        First of all, here is the address where this plan is visible:
        http://sante.entre-coeurs.org/plan-site-entre-coeurs-module-sante/

        Slick Sitemap Settings:
        Default Sitemap Menu: I chose the name of the menu which is the same as the one displayed on the right in the sidebar (see with the link above) of my theme (Twenty Sixteen that I have nothing amended).
        Default Columns: 3 columns
        Default Utility Menu: I didn't choose anything, so it appears “Select a menu for Utility”.

        Here I hope to have been complete.
        Thank you very much for this help because this plugin is very visually friendly.
        Great Sunday
        Jean-Marc
        PS: I took a screenshot but the "paste" on this comment page does not work ...

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
16 shares
Share14
tweet1
Save1