Primo List lets you customise how your lists appear

Define your list items

You define each item once: an image, a heading, a subtitle, body text, a link, and as many categories as you like. Everything except the heading is optional, and the layout closes up neatly around whatever you leave out. An item with no image simply shows none, unless you give it a couple of initials to display in place of one.

When you’re logged in, every item carries a small edit pencil, so you can fix a typo straight from the page.

Any page can then show that set as a vertical list, or as a grid where you choose the number of columns.

The number you choose is for a full-size screen; narrower ones look after themselves. Every grid steps down to two columns on a small tablet, and to a single column on a phone. So a six-across sponsor wall arrives on a phone as one logo per row, big enough to recognise, rather than six squeezed across the width of the screen.

An image library

Both the link and its wording are set per item, so these read “View at NASA” rather than the usual “Visit”.

[primo_list category="prints" layout="list" limit="5"]

A sponsor wall

Every logo is shown whole and never cropped, however wide or tall it happens to be, with a little room left around it. Tiers sort by category weight, so gold comes first.

Give items multiple categories – so the one company might sponsor several leagues in your club – so gets displayed in multiple lists.

[primo_list category="sponsors" layout="grid" columns="3" fit="contain" ratio="3:2" headings="yes" columns_mobile="3"]

A staff directory

Eight photographs, of varying shapes, all rendered as neat square tiles.

These are set to fit="contain", so each photograph is shown whole inside its square tile. With originals this varied, filling the tile would crop straight through the mounts and cases that are half their character.

Use fit="cover" instead and the tiles fill edge to edge, cropping to a focus you set per item (top, bottom, left, right, center and the corners), so the sitter stays in frame even when they are nowhere near the middle of the original.

[primo_list category="staff" layout="grid" columns="4" fit="contain" ratio="1:1" limit="8" columns_mobile="2"]

Primo Vars keeps your contact details in one place

Phone numbers, email addresses and social links tend to end up copied across a dozen pages. Primo Vars gives each one a name and a home on a single settings screen, then you drop it in wherever it belongs with a shortcode. Change the value once and every page that uses it follows.

Each variable has a type that does the fiddly work for you: a phone number becomes a tappable tel: link while still displaying exactly as you typed it, an email address links as mailto: with the address obfuscated against scrapers, and a web address links as a plain anchor. An address or a block of multi-line text keeps its line breaks; anything else is just text.

Real phone numbers are messy, and that is where it earns its keep. +61 491 570 156 Option 2 displays and dials correctly, with the trailing “Option 2” left alone. A number that cannot be worked out safely, such as the vanity number 1300 PRIMO, is shown as plain text instead of a link that would dial the wrong number.

Demo images are public domain. The portraits come from The Met Open Access collection, and the space photography is courtesy of NASA, credited on each item. The staff are fictional, and the job titles are a joke at the expense of some very serious Victorians.

Built by Primo Website Design (to fix an itch!), who spend their days repairing and looking after WordPress sites.