A to Z Index and Site Map for WordPress

Over the months and years a WordPress site will grow and grow with pages and posts. Older posts become buried under the new content and may not be easy to find for someone browsing your site. It is good to have a page that allows for easy navigation to older content, sometimes referred to as a site map or site index. A good site index would list each category and the posts in each category, preferably in alphabetical order. There are WordPress plug-ins available for similar functionality though some can be overly complex. It can be difficult to find a straightforward way to index a site when searching for the answer on the Internet. Information on producing a site map or index page will often throw up articles on the sitemap.xml file format. sitemap.xml is used by search engines to help build a search index on a site. Thus that file is important for your website and one is recommended, however, your website visitors would appreciate a page with a human readable site index that they can use when needed. This article shows you how to add such a site index to a WordPress based website.

Add a Site Map with an A to Z Index to a WordPress Website

The website index defined in this tutorial will be formatted as follows. The index list all the categories, in alphabetical order, and shows the number of posts in each category. Below the category list every post is then listed for each category, again in alphabetical order. Clicking on a category in the first list will take you to the list of posts in that category. Each list entry for a post will link to the post itself. Finally there is a list of the site's pages.

The following method shows how to add this useful page, as a Template, to a theme on a WordPress site. A child theme is recommended when modifying themes but you can also add the Template to an existing theme directly.

Create a new file in your theme's directory, most hosting sites provide a control panel to allow you to do this and will have online help to show you how. Alternatively create the file in a temporary directory on your computer for uploading when the editing of the file is complete. Call the file sitemap.php or some other name that is relevant. Edit the file using the online tools provided by your hosting company, or on your computer in a text editor program, such as Notepad on Windows. Add the following code to the file (copy and paste it in) and save it, alternatively you can download it from here.

<?php
/*Template Name: SiteMap
*/
/**
* The template for displaying a comprehensive site index (site map).
*/
get_header(); ?>
<div id="primary">
  <div id="content" role="main">
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
          <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1>
        </header>
        <div class="entry-content">
          <?php $categories = get_categories('orderby=name');
          echo ("<h2>Categories</h2>Select a category to jump to it's article list:<ul>");
          foreach($categories as $thisCategory) {
            echo ('<li><a href="#' . $thisCategory->slug . '">' . $thisCategory->cat_name . '</a> - ' . $thisCategory->count . "</li>\n");
          }
          echo ('</ul><a href="#tekpagesindex">Click here to go to the Pages listing.</a><hr />');
          foreach($categories as $thisCategory) {
            $thesePosts = get_posts(array('numberposts' => -1,
                                      'category' => $thisCategory->cat_ID,
                                      'orderby' => 'title',
                                      'order' => 'ASC'));
            echo ('<a name="' . $thisCategory->slug . '"><h2>' . $thisCategory->cat_name . "</h2></a>\n");
            foreach($thesePosts as $thisPost) {
              echo ('<a href="' . get_permalink($thisPost->ID) . '">' . $thisPost->post_title . '</a><br />' . "\n");
            }
            echo ('<hr />');
          }?>
      <a name="tekpagesindex"><h2>Pages</h2></a>
      <ul><?php wp_list_pages(array('title_li' => '') ); ?></ul><hr />
      </div><!-- .entry-content -->
  </div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>

If not created in your themes directory then upload it. For example if you are using the default Twenty Sixteen theme then it should be saved in the wp-content/themes/twentysixteen folder. If unsure on how to do this your hosting company will be able to help.

To add a site index create a new page, give it a title (for example Index), then in the Page Attributes box set the Template to SiteMap (or whatever you called the Template, see the Template Name setting at the start of the code). Publish the page and the Index page will be up and running (depending upon the Theme you may need to define a menu and link the page to a menu entry):

Additional Index Page Features

For the Pages listing you can exclude a page and its children by adding the exclude_tree option to the wp_list_pages call. For example to exclude page 12 and all its children change:

wp_list_pages(array('title_li' => '') );

to:

wp_list_pages(array('exclude_tree' => 12,'title_li' => '') );

(To get a page number look at the link to a page in the list of Pages in admin, it appears after post=.)

To add the tag cloud to the index immediately after:

echo ('</ul><a href="#tekpagesindex">Click here to go to the Pages listing.</a><hr />');

add:

the_widget( 'WP_Widget_Tag_Cloud' );
echo ('<hr />');

Those familiar with HTML and PHP should be able to modify the code further for their needs.

This website index Template will help visitors navigate larger WordPress based websites. Enjoy your web publishing.

See Also

• You can download the code from this article from here: sitemap.zip
• For a full list of all the articles on Tek Eye see the full Index.