Page 1 of 1

WordPress – How to create a sitemap Page …

WordPress – How to create a sitemap Page …
   0

In this short article, I’ll show you how I made my sitemap (not to be confused with sitemap.xml) of my website.

For Tweaking4All I just wanted a list of all pages, and all categories with the posts listed underneath it. The reason why I wrote my own code is pretty simple: Everything I could find out there on the Internet only showed first level posts and categories, or made a flat list out of it, or skipped duplicates. This list however maintains the actual hierarchy, and if a post occurs in multiple categories then this will reflect this as such.

With a simple tiny bit of code and your own customized CSS, things can be pretty easy.




WordPress code for a HTML sitemap

Creating a list of all Pages

Let’s first create a list of all Pages, it’s probably the easiest thing to do.

In the code below you will see that I assigned the CSS class “your_pages_list_class” – you can obviously rename this to anything you’d like. The point being that this class will give you the option to modify the look of this list (UL), it’s list items (LI), and items in the list, for example links or icons.

Note that if you’d like to exclude certain pages, then you can add their ID’s to line 6.

This list will only show top-level pages, alphabetically sorted. You can expand the depth (line 8) if you have pages with sub-pages.

This code goes into the “page.php” file (for example) – or where ever you’d like to see this list.


1
2
3
4
5
6
7
8
9
10
11
<ul class="your_pages_list_class">
    <?php
    // Add Page ID's you'd like to exclude in the exclude below
    wp_list_pages(
        array(
            'exclude' => '',
            'title_li' => '',
            'depth' => 1
    ));
    ?>
</ul>

Creating a list of Categories and Posts

For the generation of this list, I’ll be using recursion (here: a function that calls itself), so I need to put it in a function. This is not only needed for recursion but it makes it also nice and clean to put in your template.

This function generates an unordered list (ul) with the items in a category being an unordered list (ul) inside the list item (li). A simple example of what the structure will look like:


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul>
    <li>Category 1
        <ul>
            <li>Sub Category 1.1
                <ul>
                    <li>Post 1 in 1.1</li>
                    <li>Post 2 in 1.1</li>
                    <li>Post 3 in 1.1</li>
                </ul>
            </li>
            <li>Post 1 in 1</li>
            <li>Post 2 in 1</li>
            </li>
        </ul>
    </li>
... etc ...
</ul>

For this we use the following “call” in our template file (I used mine in page.php – but you can use it where ever you’d like);


t4a_sitemap_categories(0,$exclude);

The “$exclude” variable can be empty (”) or contain a list of category ID’s you do not wish to see in this list.

The Function to generate the Category and Posts list

Below you will find the code I used to generate the list of Categories and Posts – place this code in your “functions.php” file.

As you can see, I added the CSS class “your_category_list_class” and “your_posts_in_category_list” to give you the possibility to make it look and feel the way you prefer. Feel free to modify as needed.

As you can see in line 17 – This function calls itself again to see if there are sub-categories.

The process is simple:

  1. Get all categories in the active category ($startnode).
  2. For each category, display title and link, and get all categories in this category (line 17) and process these the same way as the active category.
  3. For each category get all posts (line 19) and display a list with all titles and links.

 

The recursion takes place in step 2 where it repeats the steps 1, 2, and 3 for the sub-category. When done with the function call in the recursion (step 2), it will return and continue with step 3.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function t4a_sitemap_categories($startnode=0,$exclude='')
{
    $categories_in_this_category = get_categories('parent='.$startnode.'&hierachical=1&hide_empty=0&exclude='.$exclude);
    $post_count=0;
    $category_html='';

    $category_base= get_option('category_base')!=''?get_option('category_base'):'category';

    echo '<ul class="your_category_list_class">';

    foreach ($categories_in_this_category as $this_category)
    {
        $link  = esc_url( get_category_link($this_category->cat_ID) );
        // Output category link
        echo '<li><h4><a href="'.$link.'">'.$this_category->cat_name.'</a></h4>';
        // Get sub categories
        t4a_sitemap_categories($this_category->cat_ID,$exclude);
        // Get posts in this category
        $post_in_this_category = get_posts('category='.$this_category->cat_ID.'&posts_per_page=-1&order=ASC');
        // Output posts
        echo '<ul class="your_posts_in_category_list">';

        foreach($post_in_this_category as $a_post)
        {
            if (in_category($this_category,$a_post->ID))
            {
                $post_title = $a_post->post_title;
                echo '<li><a href="'.get_permalink($a_post->ID).'">'.$a_post->post_title.'</li>';
            }
        }

        echo '</ul></li>';
    }

    echo '</ul>';
}

Enjoy … 

Support Us ...


Your support is very much appreciated, and can be as easy as sharing a link to my website with others, or on social media.

Support can also be done by sponsoring me, and even that can be free (e.g. shop at Amazon).
Any funds received from your support will be used for web-hosting expenses, project hardware and software, coffee, etc.

Thank you very much for those that have shown support already!
It's truly amazing to see that folks like my articles and small applications.

Please note that clicking affiliate links, like the ones from Amazon, may result in a small commission for us - which we highly appreciate as well.

Comments


There are no comments yet.
You can post your own comments by using the form below, or reply to existing comments by using the "Reply" button.



Your Comment …

Do not post large files here (like source codes, log files or config files). Please use the Forum for that purpose.

Please share:
*
*
Notify me about new comments (email).
       You can also use your RSS reader to track comments.


Tweaking4All uses the free Gravatar service for Avatar display.