How to make an automatically updating index page
WordPress has a lot of “hidden gem” features. Shortcodes are one of them. Simply put, shortcodes are little snippets of text that the WordPress engine uses as instructions for embedding content. There are shortcodes to insert anything from Spotify playlists to YouTube videos.
Shortcodes can also make indexing your WordPress blog easier. One feature I wanted was an index page for reviews I’ve written or will write. I started out by creating a new page, and deciding on which headings to use.
Then I added a link, and formatted it. And stopped. I realized that I would have to do this for every link I wanted to add to the page. I firmly believe that computers are much better than people at certain tasks. Index information and links is one of them. Fortunately, I was able to find out about the display-post shortcode without too much searching.
For a short recap, updating an index page manually would mean:
That seems like a lot of work, and it is. Computers (the WordPress posting engine, specifically) can do all of this and keep it up-to-date with nothing other than the initial setup.
First you need a page. A post might do it, but for something like this, a fixed location on your site is better. For this example, I’ll use my Review Index page.
After deciding on a name, I wanted to divide my index into three parts: books, software, and hardware. Those became my headings, and are the base of the page.
[code language=“html” autolinks=“false” highlight=“2,3,4”] <p>I’ll keep this page updated with reviews I’ve written, both here and elsewhere.</p> <h2>Books</h2> <h2>Software</h2> <h2>Hardware</h2> <hr /> <p>All reviews are my personal opinion and may contain affiliate links.</p> [/code]
To display posts, WordPress uses the non-ironically named display-posts shortcode. It’s always a good idea to review the latest documentation. Things do change, and keeping up-to-date is the best way to prevent a broken site.
By itself, display-posts doesn’t do much other than list all your posts. Adding a few parameters makes it do exactly what I want.
A quick example: To find all posts tagged “spaceships” the shortcode would look like this:
I use tags, mostly because I forget to change categories when posting. My reviews start with the tag “review” and then are either “books,” “software,” or “hardware.” It’s simple and doesn’t get in my way when writing.
My first attempt at using the display-post shortcode looked like this:
And it didn’t work anything like I expected.
As designed, the tag parameter has the following description:
The important part is the OR. This means that a post having any of the listed tags will be found and displayed. So each line above would list every review with the tag “review,” regardless of what the other tags were. This result would be the exact opposite of what I wanted.
If I were to create a category called “reviews” then use the following shortcode, it would find all posts tagged “books” in that category.
I’ve decided against categories for now, and I needed another solution.
Digging deeper into how display-posts works, I found that multiple queries are allowed. This allows combinations of searches that are not explicitly defined. Also, the default relationship is AND. So multiple queries will only return the results that meet ALL search terms.
It gets a little complicated, but follows the same format as above. Each query has two parts, the “taxonomy” and the “term.” The first is the where, the second the what. They must be grouped with an index number if using more than one pair.
I started with my tags “review” and “books.” I built it as follows:
And it worked!
display-posts is versatile and do more that just list posts. It can also add information, like the date or post excerpt, and format the post link. I just wanted the date added to the post link, after an EM dash.
The following is my final display-posts shortcode:
This is the final code for the full page:
[code language=“html” autolinks=“false” highlight=“3,5,7”] <p>I’ll keep this page updated with reviews I’ve written, both here and elsewhere.</p> <h2>Books</h2> [display-posts taxonomy="post_tag" tax_term="review" taxonomy_2="post_tag" tax_2_term="books" include_date="true" date_format=" — Y-m-d"] <h2>Software</h2> [display-posts taxonomy="post_tag" tax_term="review" taxonomy_2="post_tag" tax_2_term="software" include_date="true" date_format=" — Y-m-d"] <h2>Hardware</h2> [display-posts taxonomy="post_tag" tax_term="review" taxonomy_2="post_tag" tax_2_term="hardware" include_date="true" date_format=" — Y-m-d"] <hr /> <p>All reviews are my personal opinion and may contain affiliate links.</p> [/code]
And now I have an index page that keeps track of everything for me.