How To Add HTML Sitemap For Custom Post Types in WordPress

In this tutorial, I will show you how to dynamically display an HTML Sitemap for Custom Post Types in WordPress without the need of a plugin. Dynamically means that the Sitemap updates automatically with every new Custom post added. Yes, there are plugins that add an HTML Sitemap to your blog. But I encourage you to read my previous post about unnecessarily adding plugins to your theme, and you don´t need a plugin for such a simple task.

In a previous tutorial, I showed you how to Add a Dynamic HTML Sitemap in WordPress Without a Plugin, that did not include Custom Post Types. In this tutorial, I will show you how to enhance that code to include Custom Post Types.

What is an HTML Sitemap?

An HTML Sitemap provides a mechanism to display the blog´s structure, the list of posts and pages, and other sections, so that users will get a quick overview of the content. An HTML sitemap primarily focus on helping users easily navigate your blog.

What are Custom Post Types?

Since version 3.0, WordPress added the capability to create and manage content via custom post types. WordPress can hold and display many different types of content, which are: Post, Page, Attachment, Revision, Menus and also Custom Types that you define. Custom Post Types represent any type of content you want, and add the flexibility to have more than just posts and pages for content by allowing users to register their own post types. Think of Custom Post Types as Custom Content Types.

How To Create/Register Custom Post Types?

Adding a Custom Post Type to WordPress is done via the register_post_type() function, which allows you to define the post type and how it operates within WordPress.

CODE-a is a very basic example of adding Custom Post Types and is done here just for testing purposes.

I added CODE-a to the functions.php file located in my theme´s folder. I saved the functions.php file and uploaded it to the server.

CODE-a :: Creating 3 different Custom Post Types

Note: To scroll within the code: You can also click on the code window and use your keyboard´s arrow keys.

<?php 
/********************************************************************
* @Author: Boutros AbiChedid
* @Date: February 13, 2011
* @Description: Functions that register Custom Post Types (CPTs)
* (Products, Restaurants, Hotels), and adds them to the WP dashboard.
* @Tested on: WordPress version 3.3.1 (Works on WP version >= 3.0)
*********************************************************************/
 
add_action( 'init', 'register_new_post_type_products' );
function register_new_post_type_products() {
    register_post_type( 'multi_products',
        array(
            'labels' => array(
            'name' => __( 'Products' ),
            'singular_name' => __( 'Product' )
            ),
        'public' => true,
        'has_archive' => true,
		'supports' => array('title','editor','excerpt','custom-fields')
        )
    );
}
add_action( 'init', 'register_new_post_type_restaurants' );
function register_new_post_type_restaurants() {
    register_post_type( 'multi_restaurants',
        array(
            'labels' => array(
            'name' => __( 'Restaurants' ),
            'singular_name' => __( 'Restaurant' )
            ),
        'public' => true,
        'has_archive' => true,
		'supports' => array('title','editor','excerpt','custom-fields')
        )
    );
}
add_action( 'init', 'register_new_post_type_hotels' );
function register_new_post_type_hotels() {
    register_post_type( 'multi_hotels',
        array(
            'labels' => array(
            'name' => __( 'Hotels' ),
            'singular_name' => __( 'Hotel' )
            ),
        'public' => true,
        'has_archive' => true,
		'supports' => array('title','editor','excerpt','custom-fields')
        )
    );
}
?>

CODE-a Notes:

After I added CODE-a to the functions.php file, I ended up with 3 new Tabs in the admin menu of the WordPress dashboard as shown in the image below:

Created 3 new Tabs for Custom Post Types in WordPress dashboard called 'Products', 'Hotels' and 'Restaurants'.

For testing purposes, I chose very simple Custom Post Types. Each CPT has 4 major arguments with it. The first one is the “labels”, which define the name of the type in both plural and singular forms. The second one is “public”, which is a predefined flag to show the post type in the WordPress dashboard and to show it up on the main Website itself, if it is queried for. The third one is “has_archive” which enables post type archives, and the fourth one is “supports” which register support of certain features for a given post type in the dashboard.

Adding Posts to the Custom Post Types

Also for testing purposes, I added several posts for each Custom Post Type as shown in the images below:

Created 4 posts for the Custom Content Type named 'Products'.

Created 4 posts for the Custom Content Type named 'Restaurants'.

Created 4 posts for the Custom Content Type named 'Hotels'.

Features of CODE-b Below

CODE-b below, specifically adds the HTML Sitemap for Custom Post Types and has the following features:

  1. The code is specifically for Custom Post Types.
  2. The code displays the list of Custom Post Types. You have the option to exclude Posts as you wish.
  3. The code is XHTML valid.
  4. The code is dynamic, the Sitemap page automatically updates with any new changes to the blog related to Custom Post Types.
  5. You can use CODE-b on its own to only display Custom Post Types. Or you can add it to the end of CODE-2 from my previous tutorial.
  6. However; the code does NOT support Custom Taxonomies.

Enough with talking, show me the Code!

Dynamic Sitemap Code For Custom Post Types | CODE-b

My previous tutorial: How To Add a Dynamic HTML Sitemap in WordPress Without a Plugin, consiututes the basis for this post. Even if you decide to use CODE-b on its own you still have to follow the instructions of my previous tutorial.

CODE-b :: Dynamic Sitemap Code For Custom Post Types

<?php 
/********************************* CODE-b ********************************
* @Author: Boutros AbiChedid 
* @Date:   February 13, 2012
* @Websites: bacsoftwareconsulting.com/ ; blueoliveonline.com/
* @Desc: Adds Custom Post Types to your Dynamically generated HTML sitemap.
* @Tested on: WordPress version 3.3.1 (Works on WP version 3.0 and higher)
***************************************************************************/ 

//Iterate over get_post_types arrays. 
//get_post_types(): returns the registered post types as found in $wp_post_types. 
//Set '_builtin' to false and 'public' to true to return only public Custom Post Types.
foreach( get_post_types( array('public' => true, '_builtin' => false) ) as $post_type ) {

//Retrieves an object which describes any registered post type: 
//in this case only user-created Custom Post TypeS
$cpt = get_post_type_object( $post_type );

echo '<h2>'.$cpt->labels->name.':</h2>';
echo '<ul class="sitemap-pages">'; /***MODIFY THE CSS CLASS TO FIT YOUR THEME***/

$args = array(
	'post_type' => $post_type,
    'post__not_in' => array(), /**Exclude custom posts by ID separated by comma inside the array.**/
	'posts_per_page' => -1  //show all custom posts
);
$query_cpt = new WP_Query($args);

//Loop throught the Custom Post TypeS and display them as a list. Exit when done.
while( $query_cpt->have_posts() ) {
	$query_cpt->the_post();
	echo '<li><a title="'.get_the_title().'" href="'.get_permalink().'">'.get_the_title().'</a></li>';
}
echo '</ul>';
} 
?> 

CODE-b Notes:

Note: If you don´t see the horizontal bar, and to scroll within the code, you can also click on the code window and use your keyboard´s arrow keys.

You can use CODE-b on its own to only display Custom Post Types. Or you can add it to the end of CODE-2 of my previous tutorial. In any case my previous tutorial is the foundation for this post

On line 20 of the code, you can change the CSS class to fit your theme. More on CSS later.

You have the option to exclude posts from your Custom Post Types, by changing line 24 of the code. For instance, if you want to exclude 3 custom posts, then replace line 24 of CODE-b with the following line: Note that the number 1115, 1157 and 1227, are separated by commas, and are 3 post IDs on this blog, you need to replace these 3 numbers with yours.

'post__not_in' => array(1115, 1157, 1227),

CODE-b was tested to work on WordPress 3.0 and above. But I hope that you will upgrade to the latest WordPress version.

The Post IDs, specified above, are different in your case. If you don´t know how to find the Post ID, read my previous tutorial on How To Find the Post ID.

Result of CODE-b

The image below shows the Result when adding CODE-b alone:

Result of CODE-b. WordPress Sitemap for Custom Post Types.

Styling the HTML sitemap | style.css

Finally we need to style the HTML Sitemap Page with CSS. You could use the same styling as in my previous CSS code for Styling the HTML Sitemap for WordPress. The code should be added to your theme´s CSS file (called style.css). Change it to fit your blog´s design.

Your Turn to Talk

In this tutorial, I showed you How To add a Dynamic HTML Sitemap For Custom Post Types in WordPress without a plugin

By combining my previous tutorial with this one, you now can Create an Effective HTML Sitemap Page that also includes Custom Post Types for your WordPress Blog and without the need of a plugin.

How easy did you find this tutorial to implement? Do you have something to add or anything else to say? If so, please share your opinion or questions in the comments section. Your opinion matters, unless it is a Spam.

If you found this post useful, please consider: linking back to it, subscribing by email to future posts, or subscribing to the RSS feed to have new articles delivered to your feed reader, or feel free to donate. Thanks!

About the Author |
Boutros is a professional Drupal & WordPress developer, Web developer, Web designer, Software Engineer and Blogger. He strives for pixel perfect design, clean robust code, and user-friendly interface. If you have a project in mind and like his work, feel free to contact him. Connect with Boutros on Twitter, and LinkedIn.
Visit Boutros AbiChedid Website.

One Response to “How To Add HTML Sitemap For Custom Post Types in WordPress”

  1. Shayne says:

    I appreciate the tutorial. It points in the direction that I need to go. We are just looking at something a bit more complex. We have several post types and over a dozen different taxonomies, with hundreds of terms. I think we will end up having to go with hierarchical taxonomy lists instead of listing the individual posts as it would be impractical to browse through hundreds of articles, and not to mention duplicate entries appearing in multiple locations. Great tutorial though, I will probably use this on some smaller more niche based websites in the future. Thanks for the effort.