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.
Go to Settings and click, “WP Visual Sitemap.”
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.
Click the “Save Changes” button on the bottom.
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.
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.
Click the Update or Publish button of the page to make the changes live.
Now, you have a visual sitemap that uses a button-style layout.
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.
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.
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.
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.”
The icon will be visible in the sitemap next to the page.
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: Josh Dargie
My name is Josh Dargie and I’m the Operations Manager at GreenGeeks. I’ve been with the company since 2009. I have over 16 years of experience working with and for various web hosting providers specifically in development, day-to-day operations and customer service.