How to add definition lists to WordPress

The other day I wanted to format the text in a post using a definition list-like structure. In this post, I show how it is possible to achieve this in WordPress using only CSS.

The other day I wanted to format the text in a post using a definition list-like structure. Basically I wanted something like this:

May 2018Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac quam venenatis, finibus nunc ac, congue nisi. Aliquam erat volutpat. Ut auctor neque a sodales fermentum.

June 2018Proin nisl mauris, tempus vitae venenatis vel, maximus vel leo. Etiam aliquam semper orci eu bibendum.

I found an abandoned plugin which hasn’t been updated for loooong time and not much else. After thinking for a bit, I realised that it is possible to achieve this formatting using only CSS. 

The first step is to add the following styles in Appearance/Edit CSS:

After this, if you use the new Gutenberg editor, you need to add a paragraph block for each entry, make bold the “term” and then enter def-list in the Additional CSS Class

Specify the CSS class for the definition.

Depending on the size of your terms, you may need to adjust the size of the margin-left/padding-left

If you do not use Gutenberg, it is still possible to use this approach, but you will need to edit the HTML directly. For the example above, you will need to enter to following in the text editor:

It is a bit painful, but it does the trick. 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.