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.
The hard way
For a short recap, updating an index page manually would mean:
- Copying the post URL.
- Navigating to the Pages section of the Wordpress admin area.
- Editing the page to add the URL.
- Dressing the URL up with a proper description and date.
- Saving the page, and then checking for errors.
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.
The easy way
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:
[display-posts tag="spaceships"]
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:
[display-posts tag="review, books"]
[display-posts tag="review, software"]
[display-posts tag="review, hardware"]
And it didn’t work anything like I expected.
A gotcha with tags
As designed, the tag
parameter has the following description:
Display posts from a specific tag, or tags
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.
The category solution
If I were to create a category called “reviews” then use the following shortcode, it would find all posts tagged “books” in that category.
[display-posts tag="books" category="reviews"]
I’ve decided against categories for now, and I needed another solution.
Taxonomy to the rescue
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:
[display-posts taxonomy="post_tag" tax_term="review" taxonomy_2="post_tag" tax_2_term="books"]
And it worked!
Pretty printing
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:
[display-posts taxonomy="post_tag" tax_term="review" taxonomy_2="post_tag" tax_2_term="books" include_date="true" date_format=" — Y-m-d"]
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.