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.
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:
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.
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
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.
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:
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.