Easily create and manage article series in WordPress with menus

This short guide shows how you can easily create and manage article series in WordPress with the help of a WordPress menu and a small snippet of code.

Last week I started a multi-part series of articles on featured images . For this I wanted to display a table of contents under each article, which provides an overview of the series and allows visitors to quickly click through all the articles.

The simplest option would be to manually link all posts to a list in the visual editor. With many posts, however, it takes a lot of work to have to update all previous posts with each new post. That's why I wanted to be able to change the table of contents centrally in one place.

Manage article series in WordPress with menus

There are of course a number of plugins available for managing article series, for example Organize Series . But I didn't want to be dependent on a plugin. Here, too, if the plugin development is stopped and there are no updates, all contributions would have to be changed manually if the plugin has to be deactivated or changed.

In addition, I don't need many features of the plugins, I just want to display a simple list of links. And WordPress has already built in a feature for this - the menus. Although these are mostly used for navigating the theme, menus can also be used very easily to create an article series.

Create a new menu for the article series

The first thing to do is to create a new menu for the article series. I just created a menu called serie-bilder for this. All articles that have already appeared can be added directly to the menu.

We create individual links for articles that have only been planned but not yet published. Instead of a real link, we only enter a hash tag (#) as the URL. This means that this menu element is not linked.


Together with the articles and individual links, we have created the complete table of contents for the article series in the backend. Every time a new article is published, the table of contents can now be updated centrally. The individual link is removed and the newly created post is added to the menu.


Shortcode to display the menu in the frontend

We create a shortcode to display the menu in the post. To do this, the following code snippet can be copied into functions.php . I recommend creating a child theme here so that the function is not lost when the parent theme is updated.

Addition: Of course, the shortcode would be even better stored in a plugin. This means that the functionality is retained when the theme is changed. If you don't want to create your own plugin, you can add extra functions with the Code Snippets plugin . A big thank you to Wolfram for pointing this out to me in the comments .

The shortcode supports a parameter slug , with which the correct menu can be defined. The menu is displayed with the wp_nav_menu () function.

Deactivating the direct output of the menu with the echo parameter is important for correct functioning, because the output must be returned with return for the shortcode. Otherwise we use items_wrap for a numbered list with ol and add a class .article series .

The table of contents or WordPress menu can then be inserted anywhere in each post with this shortcode:

[custom_menu slug = "series-pictures"]

Adjust the styling of the article series menu with CSS

With the .article series class, the styling of the menu can now be adjusted a little. The CSS code can be used in the style.css of the child theme.

Unpublished, planned contributions should only be shown as text and not as a link. You can do this with the CSS commands cursor and pointer-events . In addition, the standard styling of the links can be reset. For my blog I change the link color to the normal text color.

 .artikelserie li a[href*="#"]:link, .artikelserie li a[href*="#"]:visited, .artikelserie li a[href*="#"]:hover {   color: #303030;   cursor: default;   pointer-events: none; }

We also make the currently accessed post visually recognizable. WordPress menus have the .current-menu-item class , with which the link of the current page can be specifically addressed. Again, we use CSS to ensure that the article is not linked to itself in the table of contents. I chose to underline the link as a visual contrast.

 .artikelserie li.current-menu-item, .artikelserie li.current-menu-item a:link, .artikelserie li.current-menu-item a:visited, .artikelserie li.current-menu-item a:hover {   text-decoration: underline;   cursor: default;   pointer-events: none; }


A current table of contents is now displayed with the shortcode under each post in the article series, which can be easily managed as a WordPress menu in the backend. Menus also allow the article series to be displayed very flexibly, for example as a widget in the sidebar or in the footer.

You can find a live view in my article series about featured images .