1. Home
  2. WordPress Tutorials
  3. How to Create a WordPress Visual Sitemap for Visitors

How to Create a WordPress Visual Sitemap for Visitors

Having a sitemap in WordPress is important for search engine optimization. But what about showing something nice for your visitors that has a bit more visual appeal than just an HTML sitemap layout? While some plugins do offer a nice appearance, sometimes something more graphic is ideal. That’s when you create a WordPress visual sitemap.

A visual sitemap has all the same properties of its HTML variant but uses imagery or graphics instead of traditional links. So you might see something that looks more like an interactive button than just a link of text.

In this tutorial, I’ll show you how to create WordPress visual sitemaps for your website. It’s just something more to engage your visitors while showing them your content.

Using WP Visual Sitemap

Today, I’m demonstrating the WP Visual Sitemap plugin. It’s a relatively new tool as of this tutorial, but it has some very interesting and favorable features you might like. For instance, changing the colors within the sitemap to fit your theme.

Install and activate the “WP Visual Sitemap” plugin. Make sure you install the correct tool. There are a few when you do a search for new plugins, and some of them may have potential. You may want to explore other plugins to match your design ideas.

Install Visual Sitemap

Go to Settings and click, “WP Visual Sitemap.”

WP Visual Sitemap Settings

In this screen, your able to change colors of the visual elements as well as add icons. You also have control of your font size and how many columns the sitemap breaks down into.

You may want to spend a bit of time customizing these to fit your theme. Use the “Preview” window on the right to see what your changes will look like after you save.

Customize WP Visual Sitemap

Click the “Save Changes” button on the bottom.

Save WP Visual Sitemap

Using WP Visual Sitemap

WP Visual Sitemap uses a shortcode to display it on your WordPress website. This code is: “[wp_visual_sitemap]” and you are able to place anywhere you can use shortcodes, such as posts, pages and most custom post types.

You can find this shortcode in the Installation instructions on the WordPress.org website for WP Visual Sitemap.

Visual Sitemap Shortcode

Copy and paste the shortcode into any post or page you wish. For this tutorial, I’m just going to add it to my HTML sitemap page I created before.

Paste Visual Sitemap Shortcode

Click the Update or Publish button of the page to make the changes live.

Update Page

Now, you have a visual sitemap that uses a button-style layout.

Visual Sitemap

Using the Icons in WP Visual Sitemap

One of the fun features of WP Visual Sitemap is the ability to include icons. These little images accentuate the layout by adding a small graphic next to the name of the WordPress page.

To access this feature, open any page in WordPress to edit.

Edit Page

On the right side of the editor, you’ll see a section for “WP Visual Sitemap.” It’s under the Page Attributes. If you don’t see it, you may have to activate the panel by going into the “Screen Options” on the top.

From this panel, you can click the box to exclude the page from showing up in the visual sitemap. For now, we’ll leave this box alone as we want it to appear.

Click into the “Search for icon” text box.

Search For Icon

Choose the icon you want to display in the sitemap for this particular page. WP Visual Sitemap comes with a lot of icons, so try typing in your preference before scrolling through what’s available. In this example, I am using a book to display my sample “Blog” page.

Choose Icon

Click the “Update” button to add the icon to the page. If this is a new page, you can either click “Save Draft” or “Publish.”

Update Sitemap Icon

The icon will be visible in the sitemap next to the page.

Sitemap Icon

Why does the icon look separated from the text in the sitemap?

WP Visual Sitemap is responsive. This means it will move the text and icon closer together depending on the size of the display. So if your theme uses a 600-pixel width for content, the graphics will look more separated. But on a smaller, 300-pixel width screen, they will be closer together.

For example, you can place the shortcode for the visual sitemap in a text widget for the sidebar. This would make the icon and page title closer together while showing the layout of the site.

Does this interfere with other sitemap plugins?

Not necessarily. The only way this plugin would interfere with another is if they are using the same shortcode style. I actually tested this with two other sitemap generators at the same time and all three worked perfectly together.

What about using Slick Sitemap instead?

Slick Sitemap does have an attractive layout and is more complete than WP Visual Sitemap. However, it hasn’t been updated in over three years at the time of this article and is only tested up to WordPress 4.2.19.

This means there is no guarantee it will still work and no guarantee it is protected from any exploits or future patches. It also means Slick Sitemap is a high-risk plugin, which is why it’s difficult to find when looking through the “Add New” plugins section of the WordPress admin screen.

Many will use automatic plugin updates to keep their sites safe and in prime working condition. However, this doesn’t work well if the plugin you use isn’t updated regularly.

Adding Flare to the Website

Visual elements are becoming more commonplace as part of content marketing strategies. As more people access sites from smartphones, something like a button-style visual sitemap layout is often ideal. Add some flare to your site and engage your audience. Just make sure it’s nothing too extravagant that hurts the performance of your webpages.

Author: Alex G.

Updated on March 12, 2018

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.