How To Create A Site Map With Post Images And Descriptions In WordPress

Learn how to create an HTML site map with post images and descriptions for your visitors without touching code in this WordPress ‘quick tips’ tutorial …

Get Thrive Leads for WordPress

How To Create A Site Map With Post Images And Descriptions In WordPress

How To Create A Site Map With Post Images And Descriptions In WordPressSite maps are useful for helping visitors find what they are looking for quickly and easily on your site.

In this WordPress ‘quick tips’ tutorial, we’ll show you a simple and easy way to make your site map more attractive to visitors by including post thumbnail images and descriptions without modifying any code on your site.

In other tutorials, we show you how to create an HTML site map for your visitors and an XML sitemap for search engines.

To learn more about the differences between an HTML site map and an XML sitemap, what they are used for, and how to add them to your WordPress site, see these tutorials:

Most Visitor Site Maps Are Plain And Boring …

Normally, visitor site maps tend to look a little plain or boring, as most consist of a simple list of all the pages and posts on your site …

An HTML site map

(An HTML site map)

As explained in our tutorial on how to add an HTML site map to WordPress, you can easily add a site map for your visitors by installing a plugin (there are many site map plugins to choose from), and then copying and pasting the plugin’s shortcode in the page where you would like your site map to display …

Add a site map shortcode to your Site Map page

(Add a site map shortcode to your Site Map page)

Take Your Visitor Site Map To The Next Level …

Add Post Descriptions To Your Visitor Site Map

Instead of creating a site map for your visitors using a site map plugin, you can add a site map with post descriptions like this …

Add a site map with post descriptions for your visitors

(Add a site map with post descriptions for your visitors)

The above was created using a free plugin called Content Views.

Content Views

Content Views - Post Grid & List for WordPress

(Content Views – Post Grid & List for WordPress)

Content Views is a free WordPress plugin that lets you organize, filter, sort, and display content from selected posts, pages, or custom post types using different views and layouts (e.g. grid, table, list) and insert these views anywhere on your site using a shortcode …

Content Views WordPress plugin

(Content Views WordPress plugin)

The plugin is very easy to use and lets you create unlimited custom views and layouts without touching code.

Tip

‘Content Views’ is a powerful and versatile plugin that can do a whole lot more than just add an attractive site map to your site. For a tutorial that shows you how versatile and useful this plugin is, go here:

Add Images And Post Descriptions To Your Visitor Site Map

The free version of the plugin let’s you add post descriptions but offers limited functionality compared to the premium version (called ContentViews PRO), such as little control over  your post descriptions and no thumbnail images taken from your content.

To have full control of your post descriptions and the ability to display post thumbnail images on your site map, you will need to upgrade to ContentViews PRO

Site map with post images and descriptions

(Site map with post images and descriptions)

To add this enhanced site map to your site, create a “view” (i.e. a layout) that includes all of your posts and copy the shortcode to your clipboard …

Content Views Shortcode

(Content Views Shortcode)

Then paste the views shortcode into your content where you would like the site map to display …

Add the 'content views' shortcode to your Site Map page

(Add the ‘content views’ shortcode to your Site Map page)

Creating a ‘view’ is simple. Here is the process in a nutshell:

After installing the plugin, do the following:

1 – Create a new view and give it a title (e.g. Sitemap).

2 – In the ‘Filter Settings’ tab, select Content Type > Post (note: the premium version of the plugin lets you combine posts, pages, media, and other custom post types).

3 – Make sure that the ‘Include Only’ field is left blank to select all posts published on your site. To exclude posts from displaying on your site map, add the post ids of the posts you would like to exclude into the ‘Exclude’ field.

4 – Leave the ‘Limit’ field blank to display all posts on your site map.

5 – You can sort your list of posts if you like (e.g. alphabetically, by published or modified date, by comment count, etc.)

Content View - Filter Settings

(Content View – Filter Settings)

To configure how the site map will display to visitors, switch to the ‘Display Settings’ tab and change the settings to suit your preferences.

For example, to display a list of posts with one item per row, a  thumbnail image on the left, the post title and the post excerpt, do the following:

6 – In the Layout section, select ‘Grid’ view.

7 – Select 1 item per row.

8 – In the Format section, select ‘Show thumbnail on the left/right of text’ and adjust any other settings to suit (e.g. wrapping text around image), including Thumbnail Position (Left or Right)

9 – Configure your settings for Post Title, Post Thumbnail, and Content.

Content View - Display Settings

(Content View – Display Settings)

Below are screenshots of how the Fields Settings options have been configured for the Thumbnail image, Post Title and Post Description used in our example site map (using ContentViews PRO).

Useful Info

You can change the order of how your post images, post titles and post descriptions display in your views using drag and drop to reposition element layouts.

Post Title

For site map post titles, we just left the default settings (H4 heading) …

Content Views: Fields Settings - Title

(Content Views: Fields Settings – Title)

Post Thumbnail Image

For our example site map, we have configured the following settings:

  • Selected 150×150 thumbnail image size,
  • Enabled ‘Show all images in same size’ checkbox,
  • Added a style to the image (Shadow)
  • Selected to show an ‘Image’ if no featured image found (this automatically grabs an image from your content) …

Content Views: Fields Settings - Thumbnail

(Content Views: Fields Settings – Thumbnail)

Post Description

For the site map used in our example, we have configured the following settings:

  • Selected ‘Show Excerpt’,
  • Limited excerpt to 25 words,
  • Selected ‘Use manual excerpt (without modifying)’. This displays the post excerpt for each entry in the site map (instead of grabbing the first 25 words of each post, which the free version of the plugin does).
  • Enabled the ‘Read More…’ text to display for each entry (the premium version of the plugin lets you customize this section, including text, typefaces, button colors, etc.) …

Content Views: Fields Settings - Content

(Content Views: Fields Settings – Content)

As you can see, we have gone from adding a plain looking site map for your visitors like this …

Visitor site map created using a site map plugin

(Visitor site map created using a site map plugin)

To adding a site map with post descriptions like this …

Visitor site map created using Content Views plugin

(Visitor site map created using Content Views plugin)

To adding a site map with an attractive layout for visitors that includes post thumbnail images and customized post excerpts like this …

Visitor site map created using ContentViews PRO plugin

(Visitor site map created using ContentViews PRO plugin)

We hope that you have found this ‘quick tips’ tutorial on how to create a visitor site map with post images and descriptions in WordPress useful.

Tip

For loads of useful WordPress tips, sign up to our FREE 101+ WordPress Tips, Tricks & Hacks For Non-Techies e-course!

How To Create A Site Map With Post Images And Descriptions In WordPress

(Source: AustralianPrints.com)

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

***

How To Add An HTML Site Map To WordPress

Adding a site map helps visitors find more of your content. Learn how to add an HTML site map to WordPress in this tutorial.

How To Add An HTML Site Map To WordPressAdding a site map helps visitors (and search engines) to find more of your content and is a great resource for people who experience difficulties navigating around your site. They can just visit the site map and click on where they want to go on your site.

In this tutorial, we’ll show you how to add an HTML site map to your WordPress website or blog.

Adding An HTML Site Map To WordPress

A “site map” (not to be confused with sitemap) is a regular web page containing links to other pages on your site that can be read by humans and search bots alike.

A site map can also help drive more visitors to your site by earning you free organic links from various assistive technologies and bots that roam the net looking for content or reference sites.

Building A Site Map

You can build a site map manually simply by creating a new page and then adding links on the new page to your main site pages, or even links to your category pages (which will then display content organized by categories). To improve search engine optimization and create a better experience for your site users, you could also include a short description of the content your visitors can expect to see when they click on the links.

In this tutorial, you will learn how to create a site map on your WordPress site for your visitors that will self-update automatically whenever new content is added, using a WordPress plugin called Dagon Design SiteMap Plus – an HTML sitemap plugin.

Dagon Design SiteMap Plugin

This plugin adds an HTML sitemap plugin to your WordPress site quickly and easily.

Plugin URL

Go here to download the plugin:

http://www.dagondesign.com/files/sitemap-generator.zip

Plugin Description

This plugin creates a sitemap for your WordPress-powered site. This is not an XML sitemap plugin but a true sitemap generator, which can be customized from its own options page in the WordPress admin panel.

Some of the plugin’s features include:

  • Support for multi-level categories and pages
  • Category/page exclusion
  • Multiple-page generation with navigation
  • Permalink support
  • Choose what to display, what order to list items in, show comment counts and/or post dates, and much more.
Plugin Configuration

If you haven’t already activated this plugin, then scroll down your WP admin sidebar menu and click on Plugins

WordPress Plugins

Activate the “Dagon Design Sitemap Generator” plugin …

Dagon Design Sitemap Generator - WordPress Plugin

Step 1 – Create A Site Map Page

Before you can generate your site map using the plugin, you will need to create a page on your site to display the site map content.

Go to Pages > Add New

Dagon Design Sitemap Generator - WordPress Plugin

Create a page with the title “Site Map” and make sure that the slug of your new page is “site-map” (without the quotes) …

Add An HTML Sitemap To Your WordPress Site

Select the “Text” editor option (NOT the “Visual” editor tab) and paste the shortcode below into the body of your new page:

<!– ddsitemapgen –>

This shortcode instructs the plugin to insert the site map data into this page …

Add An HTML Sitemap To Your WordPress Site

Important

Note: Below your Post editor area, make sure that the “Discussion” box is enabled and uncheck the “allow comments” and “allow trackbacks and pingbacks” options …

WordPress Discussion Settings

Also, make sure to add your “meta data” to the WordPress SEO section if you have already installed and configured the Yoast SEO plugin …

Dagon Design Sitemap Generator - WordPress Plugin

Click Publish when finished to create the page …

WordPress Publish Button

Step 2 – Configure Your Plugin Settings

Now that your site map page has been created (http://www.yourdomain.com/site-map)

Go to Settings > DDSitemapGen

Dagon Design Sitemap Generator - WordPress Plugin

Configure the plugin settings as shown below:

General Options

Enter your “Sitemap page slug“.

If you are using the settings recommended in this tutorial, then enter “site-map” (without the quotes) into this field. This needs to match the “slug” or permalink that appears at the end of your site map URL exactly (eg: http://www.yourdomain.com/site-map) …

Dagon Design Sitemap Generator - WordPress Plugin

Sitemap Generation

Configure the settings in this section according to your own preferences. The screenshot below shows a recommended configuration for this section …

Dagon Design Sitemap Generator - WordPress Plugin

Exclusions

If you do not want certain categories or pages to be included in your sitemap, then enter the ID of the categories or pages you want excluded from the sitemap in this section (if you need help with this step, see this tutorial: How To Find Your WordPress Post Or Page Id).

Additionally,

  • Check: Hide future-dated posts
  • Check: Hide password-protected items

Dagon Design Sitemap Generator - WordPress Plugin

Note: See the “Additional Plugin Information” section at the end of this tutorial:

  • If you have specified one of your pages to be the permanent homepage of your site, or
  • If there are pages on your site that you would like to include in your sitemap, but not display to visitors on your site’s navigational menus.
Navigation

Configure the settings in this section according to your own preferences. The screenshot below shows a recommended configuration for this section …

Dagon Design Sitemap Generator - WordPress Plugin

Miscellaneous

Enter the “Full path to XML sitemap” value.

You currently have two options:

  • http://www.yourdomain.com/sitemap_index.xml – choose this option to use the XML sitemap from the WordPress SEO Plugins tutorial
  • http://www.yourdomain.com/sitemap.xml – choose this option to use the XML sitemap from the Google XML Sitemap Generator tutorial

Tip

Use either the XML sitemap created in the WordPress SEO Plugins tutorial to your robots.txt file or the XML sitemap created using the Google XML Sitemap Generator plugin into this section. You don’t need two XML sitemaps.

Additional settings:

  • Where to show XML sitemap link:” – Set this to “At the end of every page
  • Check: “Sitemap links open in new window

Dagon Design Sitemap Generator - WordPress Plugin

Click Update options to save your changes …

Dagon Design Sitemap Generator - WordPress Plugin

Step 3 – Add A Link To Your Site Map On Your Site Footer

Now that you have configured your plugin settings, the next step is to add a link to your site map page on the footer section of your WordPress theme.

This will help search engines find and crawl all the pages listed in your site map …

Dagon Design Sitemap Generator - WordPress Plugin

Depending on your server’s settings and your WordPress theme, you can modify your footer.php file either by:

  • Adding the code directly to your footer.php file, then uploading the file to your server and overwriting the existing file (always make a back up of your files before making any changes), or
  • Editing content on your footer file directly through the Appearance > Editor menu inside your WP-admin area.

How to edit WP themes

Also, we recommend adding a link to your site map on your sidebar navigation menu

Adding A Site Map to WordPress

Load your website into a web browser window and click on the site map link to make sure that your site map display correctly …

Adding A Site Map to WordPress

Important

If you don’t see your site map displayed on your Site Map page, check that you have entered the site map shortcode correctly into your page’s text editor tab.

The shortcode should look like this …

Dagon Design Sitemap Generator - WordPress Plugin

Not this …

Dagon Design Sitemap Generator - WordPress Plugin

The error shown above happens when you paste the code into the “Visual” editor tab instead of the “Text” tab …

Add An HTML Sitemap To Your WordPress Site

Your plugin is now fully configured.

Plugin Usage Instructions

You don’t need to do anything further after configuring this plugin. When new content gets added to your site, a link pointing to new posts or pages published on your site will automatically be added to your site map.

Additional Plugin Information

Should You Include Your Index Page In Your Sitemap?

WordPress lets you to set any page of your site as the “home page” (see this tutorial: How To Display Any WordPress Page As Your Home Page).

If you set a WordPress page as the “home page” of your site, WordPress internally redirects the URL of that page to point to your main domain.

So, for example, let’s say that you create a page with a URL like this:

http://www.mydomain.com/travel-tips/how-to-choose-the-best-2-for-1-cruise-deals

If you set the above page as your home page, the page will display as shown below when visitors type the URL shown below into their browsers:

http://www.mydomain.com

In this situation, excluding your site’s default index page link from being listed on your site map can help prevent your index page being seen by Google as “duplicate content“.

To exclude your site’s default index page from being included in your sitemap, do the following:

Go to Pages > All Pages in your WordPress administration area …

Add An HTML Sitemap To Your WordPress Site

Locate the page you’ve specified as your site’s index page and hover your mouse over its title …

Add An HTML Sitemap To Your WordPress Site

Note down the ‘Post ID’ value displayed in the status bar of your browser window. (In the example above, the post ID is “26”) …

Dagon Design Sitemap Generator - WordPress Plugin

Go to Settings > DDSitemapGen

Dagon Design Sitemap Generator - WordPress Plugin

Scroll down to the Exclusions section, and enter the ‘post id’ value (e.g. “26”) into the “Excluded pages:” field …

Dagon Design Sitemap Generator - WordPress Plugin

Click Update options to save your changes …

Dagon Design Sitemap Generator - WordPress Plugin

For more information about the Dagon Sitemap plugin, visit the plugin website:

Alternative Site Map Plugins

If you want to experiment with different WordPress site map plugins, here are a couple of alternative options:

Simple Sitemap

Simple Sitemap - WordPress Plugin

Plugin URL

http://wordpress.org/plugins/simple-sitemap

Plugin Description

As the plugin name implies, Simple Sitemap adds a very basic HTML site map to your site.

Simple Sitemap lets you add a single, one-column site map listing all your Pages and Posts quickly using a shortcode. You can also add a site map to your sidebar using a text widget.

Plugin Installation

From your WordPress administration area, select Plugins > Add New

Simple Sitemap - WordPress Plugin

Select the Install Plugins > Search tab, then type in “simple sitemap” into the search field and click on the Search Plugins button …

Simple Sitemap - WordPress Plugin

Locate the plugin in the search results area and click Install Now

Simple Sitemap - WordPress Plugin

Activate the plugin after installing it …

Simple Sitemap - WordPress Plugin

Once the plugin has been activated, click on Settings

Simple Sitemap - WordPress Plugin

You can also get to the plugin’s settings screen by selecting Settings > Simple Sitemap from your dashboard menu …

Simple Sitemap - WordPress Plugin

This takes you to the plugin settings page …

Simple Sitemap - WordPress Plugin

Plugin Configuration

You can configure the plugin to:

  • Display (or not display) Pages and Posts by ticking a checkbox (or leaving the box unticked)
  • Exclude pages (by entering the page IDs you would like to exclude into the field), and
  • Allow your visitors to sort the information on your site map page using drop-down menus …

Simple SitemapThe order and style in which your posts and pages are displayed on the screen depends on the drop-down option chosen in the settings.

Post/pages are rendered as a single linked list of titles, or they can be grouped by date, author, category, and tag, where each heading acts as a link to the relevant taxonomy type as well, giving your visitors an efficient way to view all of your site content in one place and making it easier for spiders to index your site.

You can display pages by:

  • Title
  • Date
  • Author

You can display posts by:

  • Title
  • Date
  • Author
  • Category
  • Tag

Click ‘Save Changes’ when finished to update your plugin settings …

Simple Sitemap - WordPress Plugin

Plugin Usage

The plugin uses the following shortcode to create a site map …

Simple Sitemap - WordPress Plugin

To add a site map to your site, create a new page and add the shortcode to the content section of your page, then save and publish …

Simple Sitemap - WordPress Plugin

You can also add the shortcode to your sidebar menu by adding the shortcode to a Text widget …

Simple Sitemap - WordPress Plugin

To learn more about adding widgets to your WordPress sidebar, see the tutorial below:

Once the page has been published, your site map will display to visitors and automatically update whenever new posts and pages are published …

Simple Sitemap - WordPress Plugin

For more details about this plugin, or to get plugin support, visit the site below:

If you want to have a little more control over the way your site map displays on your site, then try the plugins below.

PS Auto Sitemap

PS Auto Sitemap

Plugin URL

http://wordpress.org/plugins/ps-auto-sitemap

Plugin Description

PS Auto Sitemap lets you add a site map to your WordPress site and choose different styles for displaying the list of Pages and Posts on your site map page …

PS Auto Sitemap

This is easily done using a drop-down menu in the plugin settings page …

PS Auto Sitemap

Below are some examples of the different styles you can choose for your site map …

PS Auto Sitemap

Important Info

Follow the instructions at the bottom of the plugin settings page when adding your site map …

PS Auto Sitemap

Essentially, the above instructions are asking you to create a new page for your site map, then paste the code exactly as shown above into your page using the “Text” tab (not the “Visual” tab), and specify the Page ID of the page you have added the site map code to in the settings section, as shown in the example screenshot below …

PS Auto Sitemap

For more details about this plugin, or to get plugin support, visit the site below:

Page-List

Page-List - WordPress Plugin

Plugin URL

http://wordpress.org/plugins/page-list

Plugin Description

Page list lets you display site maps using various shortcode configurations.

The screenshots below taken from the plugin site show some examples of site maps you can create using different shortcode settings …

Example 1 – Creating A Site Map With Child Pages

Page-list WordPress Plugin

Example 2 – Creating A Site Map Which Displays Images With Listings

Page-list WordPress Plugin

The Page-list plugin development site provides a documentation section that explains how to use all the shortcodes and variations to create your custom site map …

Page-list WordPress Plugin

To access the Page-list plugin documentation section, or get plugin support, visit the site below:

WP SEO HTML SITEMAP

WP SEO HTML Sitemap

Plugin URL

https://wordpress.org/plugins/wp-seo-html-sitemap

Plugin Description

The WP HTML Sitemap lets you add a responsive HTML site map to your WordPress site using the XML sitemap settings from the Yoast SEO plugin for WordPress. Use this plugin to display a list of all your Pages and Posts, specify the number of columns and add styling options using CSS.

To see an actual site map created using this plugin, go here.

For more details about this plugin, or get plugin support, visit the site below:

Tip

To learn how to add an attractive site map for your visitors with post thumbnail images and descriptions, go here:

Congratulations! Now you know how to add an HTML site map to WordPress.

How To Add An HTML Site Map To WordPress

(Image: Pixabay.com)

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

***