How to add definition lists to WordPress

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. Basically I wanted something like this:

May 2018Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 

June 2018Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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:

p.def-list strong {
	display: inline-block;
	float: left;
	margin-left: -7em;

	display: inline-block;
	float: right;
	padding-left: 7em;

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:

<p class="def-list"><strong>May 2018</strong> Lorem 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.</p>

<p class="def-list"><strong>June 2018</strong> Proin nisl mauris, tempus vitae venenatis vel, maximus vel leo. Etiam aliquam semper orci eu bibendum.</p>

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

Leave a Reply

Your email address will not be published. Required fields are marked *

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