Changing the XML sitemap appearance

If you wish to change the look of your XML Sitemaps, you have several options:

Wait for the XML Sitemap Advanced plugin (under development);
Create custom XSL template files and
- place them in your WordPress custom/child theme directory;
- place them elsewhere and use the xmlsf_stylesheet_url filter hook to load them.

Let’s look closer at each of these options so you can decide which approach is best for you.

XML Sitemaps Advanced plugin

The XML Sitemap Advanced WordPress plugin is currently under development. A feature to set custom CSS style rules in the admin is planned but it is not yet clear when this will be ready.

If you do not have a custom/child theme or you do not wish to meddle with custom .xsl files or custom PHP code, then waiting for the first release is your best option…

Custom XSL files

If you are using a custom (parent) theme or a child theme (and only the parent theme receives updates), you can use this approach. If not, your work will likely be overwritten on the next theme update!

A custom XSL template file will be used when found in the active parent or child theme. Such an XSL template file needs to adhere to certain location and naming rules:

Be in an /assets subdirectory of the (parent or child) theme directory;
Must start with ‘sitemap’, optionally followed by a sitemap name, separated by a hyphen;
End with the .xsl extension.

Examples:

wp-content/themes/[your_theme_dir]/assets/sitemap.xsl
wp-content/themes/[your_theme_dir]/assets/sitemap-root.xsl
wp-content/themes/[your_theme_dir]/assets/sitemap-posttype.xsl
wp-content/themes/[your_theme_dir]/assets/sitemap-taxonomy.xsl
wp-content/themes/[your_theme_dir]/assets/sitemap-author.xsl
wp-content/themes/[your_theme_dir]/assets/sitemap-custom.xsl
wp-content/themes/[your_theme_dir]/assets/sitemap-news.xsl

In these examples, [your_theme_dir] would be the directory name of your active custom/child theme or the parent theme directory name.

The file named sitemap.xsl is used for the sitemap index sitemap.xml while the others are used for the actual sitemaps, in correspondance with the name part after the hyphen. The file sitemap-posttype.xsl is used for all post type sitemaps and sitemap-taxonomy.xsl is used for all taxonomy sitemaps.

About XSL templates

It is important to note that an XSL template is much more than a regular CSS style sheet. It contains a template that is used by your browser to transform the complete XML markup into human readable form. Within that template, the usual CSS style sheet rules can be applied.

You can read a bit more on What is XSL? on w3.org or try it our yourself in the Online XSLT Editor on XSL Introduction by w3schools.com

The easiest approach is to copy the existing XSL template files from the plugin assets sub-directory over to your theme assets sub-directory. Once they are in your theme sub-directory, you can edit them.

Copying and editing of files in your WordPress installation can be done via your hosting provider’s File Manager or you can download them with an FTP program, edit them with a simpel/plain text editor or a code editor on your computer (never use rich text editors!) and re-upload them via FTP.

Let’s start with changing some general styles…

Changing the sitemap style

Once you have an XSL template opened in an editor (hosting provider or local plain text or code editor) you can see the basic structure.

The file starts with a heading that should be left in place:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
	xmlns:sitemap="http://www.sitemaps.org/schemas/sitemap/0.9"
	xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">

Following this, you can see the start of the “HTML” part of the template. This may look more familiar to those that have some experience with HTML or know what the source code of a web page looks like:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>XML Sitemap</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">body{font-family:"Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif;font-size:13px}#header,#footer{padding:2px;margin:10px;font-size:8pt;color:gray}a{color:black}td{font-size:11px}th{text-align:left;padding-right:30px;font-size:11px}tr.high{background-color:whitesmoke}#footer img{vertical-align:middle}</style>
</head>
<body>
...

Within the <head> section, you will notice the line that starts with <style type="text/css"> and ends with </style>. Everything between these two tags is regular CSS which can be adapted or replaced to style the resulting XML sitemap as you like.

Example:

Here is an example of style rules for a sitemap with a dark grey background, a white serif font and a 960 pixel wide, centered content:

body {
    font-family:  Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
    font-size: 1em;
    background-color: #333;
    color: #fff;
    max-width: 960px;
    margin: 10px auto;
}
a { color: #fff; }
table { width: 100%; }
th {
    text-align: left;
    border-bottom: 2px solid #eee;
}

Changing the sitemap appearance

If you wish to go further than adapt styling, you’ll need to modify other parts of the template. You can go as far as you like but you’ll need advanced understanding of XSL template functions if you wish to change anything that is rendered by the <xsl> tags.

Modifying parts that start with <xsl:... and end with </xsl:...> will easily break correct rendering in the browser. The result will be a blank page or a browser error. Note that this will not break the XML sitemap itself. The XML sitemaps which will still be readable by search engines because they do not use the XSL template at all.

The rest of the template is basic HTML which can be adapted without much risk.

Some basic examples:

The XML sitemap in your language: translate or replace the heading title, the intro text, the table column titles and footer text.
No header and footer: find and remove the parts <div id="header">...</div> and <div id="footer">...</div>.
Your own header (XML Sitemap title and intro text and links): replace the part between <div id="header"> and following </div> tags with your own text HTML.
Your own footer (XML Sitemap icon and courtesy plugin and WordPress links): move down to the end of the template file and replace the part between <div id="footer"> and following </div> tags with your own text or HTML.
Remove a table column (from visual rendering, not from the XML source code!): remove the column header line <th>...</th> and respective column <td>…</td> inside the <xsl:for-each> section.

Custom XSL file location

Alternatively, if placing custom XSL files in the theme folder is not an option for you then you can consider placing them in a custom FTP location (on the same domain!) and use the following PHP code to load them.

There is a filter available that can be used by another plugin or a theme function. The filter passes the last found XSL template file URL and expects a file URL or relative path (relative to your site root!) in return.

The PHP code can be placed in a custom WordPress plugin or in a Code Snippets plugin. Read all about WordPress plugin in the Plugin Developer Handbook. You can find popular Code Snippet plugins in the WordPress.org Plugins Library.

A basic example in PHP:

add_filter( 'xmlsf_stylesheet_url', 'my_custom_xsl_template_url' );

function my_custom_xsl_template_url( $url ) {
    // Replace the file URL $url here.
    return $url;
}

Note 1: The XSL file must be loaded from the same domain as the XML sitemap itself. If the file is fetched from another domain, most browsers will block it for security reasons. Your sitemap will render as a blank page or show an error.

Note 2: A malformed or blocked XSL file will not break the XML sitemap itself. The XML sitemaps will still be readable by search engines because they do not use the XSL template at all.