Most WordPress sites don’t have a single page that lists everything in one place, so visitors have to rely on menus or search to stumble onto the right content.
An HTML sitemap fixes this by putting all your important content into one page. In this guide, we’ll show you how to create one with a plugin and without code snippets.
What’s the Difference Between XML and HTML Sitemaps?
An XML sitemap is a file that lists all your website’s content in a format that search engines like Google can read. You can submit it in Google Search Console to help search engines find and crawl your pages faster.
An HTML sitemap works differently. Think of it like a directory board in a shopping mall.
Instead of guiding search engines, it guides your visitors, listing your posts and pages on one organized page so people can quickly find what they came for.
Now that you know the difference, let’s look at how to add an HTML sitemap to your WordPress site. You can use the quick links below to jump straight to the method you want to use:
Method 1: Add HTML Sitemap Page in WordPress With All in One SEO
Using a WordPress SEO plugin, like the free All in One SEO plugin, is the easiest way to add an HTML sitemap page in a few clicks.
Since the plugin already handles your XML sitemap and core SEO settings, you can manage both of them from the same place instead of installing a separate tool just for this.
First, you need to install and activate the plugin. Upon activation, the setup wizard will open up, where you can click the ‘Let’s Get Started’ button.
If you want a full walkthrough of each setting, see our guide on how to set up All in One SEO for WordPress.
Once you’re done, go to All in One SEO » Sitemaps and click on the ‘HTML Sitemap’ tab. Then, turn on the ‘Enable Sitemap’ toggle.
Next, choose how you want to display your sitemap. For this tutorial, we’ll select the ‘Dedicated Page’ option. Alternatively, you can add it as a shortcode, block, or widget.
Once you do that, enter the URL where you want your sitemap to appear, and the plugin will automatically create that page for you.
Note: Since All in One SEO creates this page dynamically, it won’t show up in your list of pages in the WordPress admin area. You can always come back to this settings screen to make changes.
Then, scroll down to the ‘HTML Sitemap Settings’ section. Here, you can choose which post types and taxonomies, like categories and tags, show up in your sitemap.
If you want more control, the ‘Advanced Settings’ let you exclude specific posts, pages, or terms from the list.
You can also turn on ‘Compact Archives‘ if you’d rather display your sitemap as a compact date archive instead of a full list. Once you’re happy with your settings, click ‘Save Changes.’
Your HTML sitemap is now live. If you chose the ‘Dedicated Page’ option, you can view it by clicking the ‘Open HTML Sitemap’ button.
Method 2: Add HTML Sitemap Page in WordPress With Code
If you don’t want to use All in One SEO because you don’t need all its other features, you can create an HTML sitemap by adding custom code to your child theme’s functions.php file.
However, the smallest mistake can break your entire site and cause the WordPress white screen of death.
That’s why we recommend using a code snippets plugin like WPCode. Its free version lets you add and manage your code safely without touching your theme files.
The first thing you need to do is install and activate the WPCode plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.
Once it’s active, go to Code Snippets » + Add Snippet from your WordPress dashboard. Hover over ‘Add Your Custom Code (New Snippet)’ and click ‘Use snippet.’
On the new screen, select ‘PHP Snippet’ as the code type, and give your snippet a title so you can find it later. It can be something like ‘HTML Sitemap’.
Then, paste the following code into the ‘Code Preview’ box.
function custom_html_sitemap() {
$out = '<ul class="custom-sitemap">';
// Pages
$pages = get_pages(
array(
'sort_column' => 'menu_order,post_title',
'post_status' => 'publish',
)
);
foreach ( $pages as $page ) {
$out .= sprintf(
'<li><a href="%s">%s</a></li>',
esc_url( get_permalink( $page->ID ) ),
esc_html( get_the_title( $page->ID ) )
);
}
// Recent posts
$recent_posts = get_posts(
array(
'posts_per_page' => 50,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'post_type' => 'post',
'ignore_sticky_posts' => true,
)
);
foreach ( $recent_posts as $p ) {
$out .= sprintf(
'<li><a href="%s">%s</a></li>',
esc_url( get_permalink( $p->ID ) ),
esc_html( get_the_title( $p->ID ) )
);
}
$out .= '</ul>';
return $out;
}
add_shortcode( 'custom_html_sitemap', 'custom_html_sitemap' );
This code lists all your published pages first, then your 50 most recent posts, and wraps everything into a shortcode called [custom_html_sitemap] that you can place on any page.
Once you’re done, toggle the switch at the top from ‘Inactive’ to ‘Active,’ then click ‘Save Snippet.’
Now, create a new page by going to Pages » Add New, or open an existing page where you want your sitemap to display. Add a ‘Shortcode’ block and paste the following shortcode into it:
[custom_html_sitemap]
Once you publish the page, your visitors will see a simple list of your pages and recent posts, all linked and ready to browse.
HTML Sitemap FAQs
Is an HTML sitemap good for SEO?
Yes. An HTML sitemap adds an internal link to every important page on your site, which helps search engines discover your content. It also makes your site easier for visitors to navigate.
Does the HTML sitemap update automatically when I add new content?
Yes. Whether you use All in One SEO or the custom code method above, your sitemap updates automatically whenever you publish a new post or page. You won’t need to do anything extra to keep it current.
Where should I put my HTML sitemap?
The most common place to link to your HTML sitemap is your website’s footer. This makes it accessible from any page without cluttering your main navigation menu.
Another good spot is your 404 error page. If a visitor lands on a broken link, a link to your HTML sitemap can help them find what they were looking for.
How do I add my new HTML sitemap page to my navigation menu?
Once you publish your sitemap, go to Appearance » Menus in your WordPress admin dashboard to add it to any menu. If you used the custom code method, check the box next to your new page.
However, if you used All in One SEO, your dynamically created page won’t appear in the Pages list. You will need to click on the ‘Custom Links’ tab to paste your sitemap’s URL.
If you’re using a block theme, you’ll need to add the link through the Site Editor instead.
Video Tutorial
We hope this article helped you learn how to add an HTML sitemap page in WordPress. You may also want to see how to display breadcrumb navigation in WordPress and our comprehensive WordPress SEO guide.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Linh
So far these 2 methods does not apply to my website since I’d like to choose only a specificied category to be showed up on the HTML sitemap. Neither AIOSEO or SimpleSitemap allows me to do that. Of course I’ve tried Advanced Settings (only AIO has it) but than I have to manually choose every single Posts or Pages which will be excluded from the Sitemap. This manually requirement simply kills the purpose of using plugins to create a HTML sitemap.
Another thing about this AIO (that wpbeginner promotes it everytime and makes me feel it’s like a almighty Plugin) is with the Breadcrumb:
This feature from AIO just does NOT follows URL logic! More specifically, it only shows nicely on your website until you click on it in order to get back to the previous page (or parent page), which every human do while surfing on any website. AIO’s gonna bring you to another pages (which is the archives page). Personally I don’t get it.
To me, except from a SEO tools, AIO offers a too basic feature, not to say, useless when it comes to self-hosted website.
WPBeginner Support
Thank you for your feedback, if you only wanted a few of your posts and pages on a specific page instead of a collection of all of your posts and pages we would recommend manually creating the list that you are wanting and that should achieve what you’re wanting unless we’re misunderstanding the goal you’re trying for.
For your statement on breadcrumbs, breadcrumbs are there to link to the organization of your content and not specifically be a back button, normally that would be done by the browser or an alternate method.
Admin
Jiří Vaněk
I’ve always considered a sitemap as a tool for improving SEO and showing Google or other search engine bots the content of my pages. It’s interesting how sometimes you focus so much on search engines that you forget to make the website more accessible for regular users. I created an HTML sitemap and placed it on the website so that people can navigate the content more easily if they want to. Thanks for the new insight that a sitemap can serve users just as well as it does robots.
Dennis Muthomi
Hi WPBeginner, thank you for this informative article
I’ve always focused on XML sitemaps for search engines, but I now see the value of HTML sitemaps for user navigation.
Thanks for the instructions for using the All in One SEO.
Robert Thompson
WordPress wants me to pay them $300 just to upgrade to their business plan so that I can have access to their plugins. I’ll pass on their offer.
WPBeginner Support
That would be a limitation if you are on WordPress.com, our tutorials are for WordPress.org sites. You can see the difference between the two in our article below!
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Admin
faraz ahmed
How can i show sitemap specific category wise?
WPBeginner Support
The second plugin from this article should allow you to separate the content by category.
Admin
Carol
Cannot get POSTS to show like pages do, so it’s useless for me. On my site, pages are static stuff, About, etc. But posts are the new items that people want to see right away. I do research on various topics and that is the heart and soul of my blog. I want them to see the new stuff in order on that subject, in a list. I really don’t care about Pages, Privacy, Cookies, About, stuff you look at once, maybe, if ever
I have experimented with the code, get only the CODE on the finished page.
What can I do?
WPBeginner Support
Hi Carol,
Please see our article on how to add topics in WordPress navigation menus.
Admin
Shawn
I’d like to generate a sitemap page with all my woocommerce shop categories and products. Can this plugin do that?
Raghvendra singh Jadon
can’t we make a sitemap page like privacy policy or contact us
deepa
is it possible if we can create our own sitemap
shirish
really very nice and useful article.
ibu solihatun
The article is very interesting. Helped me understand many things and will be happy soon to write like again.
Memory
Thank you so very much, this site map is amazingly fine-tuned, absolutely perfect, and saved me a great deal of time.
srekanth
how can i create the xml sitemap like html site is there any possibilites
adilop
Sir, sitemap of yoast plugin isn’t enough?
WPBeginner Support
Please read the section about the difference between XML and HTML sitemaps.
Admin
adilop
Thanks for your suggestion sir.
Blane Beckwith
I added an HTML site map to my webpage, and it made a very nice looking, and functional archive page.
Connor Rickett
Never a bad idea to have a sitemap for your visitors. Just as a side note, when/if you submit your sitemap to Google, make sure it’s the XML one!
Natascha
What I do miss though is, why would someone need a HTML sitemap or when is it recommended? Maybe a short pro and cons list would help. Thanks
WPBeginner Support
It is more useful for sites with static and non-chronological content, i.e. pages. A sitemap page can help users see all the pages in their hierarchical order.
Admin