HTML sitemaps significantly enhance user experience by providing a clear, organized overview of a website’s content. It serves as a roadmap, making it easy for visitors to find specific pages or sections they’re looking for. This is especially beneficial for large or complex websites, where navigation menus might not be sufficient. By improving navigation and reducing the number of clicks required to reach desired content, HTML sitemaps keep users engaged and reduce frustration.
From an SEO perspective, HTML sitemaps contribute to improved search engine optimization by facilitating the discovery and indexing of web pages. While primarily designed for users, they also help search engine crawlers efficiently explore and understand the website’s structure. The internal links within the sitemap lead crawlers to all corners of the website, ensuring that even deep or recently added pages get indexed. This, in turn, can lead to better visibility in search engine results pages (SERPs) and potentially increased organic traffic.
This code snippet creates a function in WordPress to generate an HTML sitemap and provides a shortcode to display it. Here’s a breakdown of what each part does:
Post and Page Sitemap in 2 Columns
[code]
// Function to generate HTML sitemap
function generate_html_sitemap() {
// Get categories and posts
$categories = get_categories(array(
‘orderby’ => ‘name’,
‘order’ => ‘ASC’
));
// Get pages
$pages = get_pages(array(
‘sort_column’ => ‘post_title’,
‘sort_order’ => ‘ASC’
));
if (empty($categories) && empty($pages)) {
return ‘
No content found.
‘;
}
$html = ‘
‘;
$html .= ‘
$html .= ‘
Posts
‘;
foreach ($categories as $category) {
$html .= ‘
‘ . esc_html($category->name) . ‘
‘;
$html .= ‘
- ‘;
- No posts found in this category.
-
Pages
‘;
$html .= ‘- ‘;
- ‘;
foreach ($categories as $category) {
$html .= ‘‘ . esc_html($category->name) . ‘
‘;
$html .= ‘- ‘;
- No posts found in this category.
- ‘;
$html .= ‘Pages
‘;
$html .= ‘- ‘;
- Initializes a string to hold the HTML output for the sitemap.
foreach ($pages as $page) {
$html .= ‘- Loop Through Each Category:
foreach ($categories as $category) { ... }- Loops through each category to generate the sitemap structure.
- Add Category Title:
$html .= '<h2>' . esc_html($category->name) . '</h2>';- Adds the category name as a heading to the HTML.
- Get Posts in Category:
$posts = get_posts(array('category' => $category->term_id, 'orderby' => 'title', 'order' => 'ASC', 'numberposts' => -1));- Retrieves all posts within the current category, sorted by title in ascending order.
- Check for Empty Posts:
if (empty($posts)) { $html .= '<li>No posts found in this category.</li>'; }- If no posts are found in the current category, it adds a list item indicating no posts were found.
- Add Posts to HTML:
foreach ($posts as $post) { $html .= '<li><a href="' . get_permalink($post->ID) . '">' . esc_html($post->post_title) . '</a></li>'; }- Loops through each post and adds a list item with a link to the post.
- Close HTML Tags:
$html .= '</ul>';andhtml .= '</div>';- Closes the unordered list and the main div for the HTML sitemap.
- Return the HTML:
return $html;- Returns the complete HTML sitemap.
Shortcode:
html_sitemap_shortcode- Define Shortcode Function:
function html_sitemap_shortcode() { return generate_html_sitemap(); }- Defines a function that calls
generate_html_sitemap()and returns its output.
- Add Shortcode:
add_shortcode('html_sitemap', 'html_sitemap_shortcode');- Registers the shortcode
[html_sitemap]which calls thehtml_sitemap_shortcodefunction.
Usage
- To display the HTML sitemap on any page or post, you can use the shortcode
[html_sitemap]. - This shortcode will generate and display a hierarchical list of categories and their posts in an HTML format.
More like this
$posts = get_posts(array(
‘category’ => $category->term_id,
‘orderby’ => ‘title’,
‘order’ => ‘ASC’,
‘numberposts’ => -1
));
if (empty($posts)) {
$html .= ‘‘;
} else {
foreach ($posts as $post) {
$html .= ‘
foreach ($pages as $page) {
$html .= ‘ - ‘;
$posts = get_posts(array(
‘category’ => $category->term_id,
‘orderby’ => ‘title’,
‘order’ => ‘ASC’,
‘numberposts’ => -1
));
if (empty($posts)) {
$html .= ‘
‘;
} else {
foreach ($posts as $post) {
$html .= ‘
Join the conversation