Australia's Leading Digital Marketing Experts. T. 1300 235 433  |  Aggregation Enquires Welcome

Styled Lists in WordPress with Shortcode

Styled Lists in WordPress with Shortcode

Several years ago we shared a basic shortcode function that would style lists with image icons rather than the default bullet point. To recap on the hacky result, we'd simply wrap the list in a shortcode function and the appropriate style would be applied.

  • Any image icon type may be used.
  • You may style existing lists simply by wrapping them in shortcode.

It works... and works well, but there were limitations: each icon list required its own CSS, and we had to build each list with tedious HTML. It's only recently we were working on a project that required we copy large blocks of lists into an article and we simply didn't want to have to spend the extra few seconds formatting the list items. The following shortcode isn't a perfect solution but it did make list creation easier for us since none of the <ul> or <li> HTML is required - we simply copy a block of list items into our WordPress post editor, wrap it in the shortcode, and a nicely formatted list is returned.

For example, the following shortcode returns the list that follows.

[bm_list]
List Item 1
List Item 2
List Item 3
[/bm_list]
  • List Item 1
  • List Item 2
  • List Item 3

A better example is demonstrated by a larger list. In the next example we'll include a large list of medical professions (a similar list is included in our mortgage broker website when detailing home loans for doctors). In this case we'll alter the icon with the attribute of type="doctor" in our shortcode (it's meant to show doctor-style list icons but it's far too small... if you zoom in you'll see it).

  • Academic Pharmacist
  • Anaesthetist
  • Anesthesiologist
  • Animal chiropractor
  • Cardiologist
  • Cardiothoracic Surgeon
  • Chiropractor
  • Clinical Pharmacologist
  • Clinical Pharmacy Specialist
  • Community Pharmacist
  • Compounding Pharmacist
  • Consultant Pharmacist
  • Cosmetic Surgeon
  • Dental Specialist
  • Dentist
  • Dermatologist
  • Doctor
  • Drug Information Pharmacist
  • Ear and Throat Surgeon
  • Emergency Doctor
  • Emergency Medicine Specialist
  • Emergency Surgeon
  • Endocrinologist
  • Epidemiologist
  • Gastro Intestinal Surgeon (Upper/Lower)
  • Gastroenterologist
  • General Practitioner (GP)
  • General Surgeon
  • GP Registrar
  • Gynaecologist
  • Haematologist
  • Heart Doctor
  • Heart Surgeon
  • Hepatologist
  • Herpetologist
  • Home Health Pharmacist
  • Hospital Pharmacist
  • Hospital-employed doctors
  • House Medical Officer (HMO/residency)
  • Immunologist
  • Industrial Pharmacist
  • Informatics Pharmacist
  • Intern doctor (internship)
  • Junior Medical Officer (JMO/residency)
  • Kinesiologist
  • Locum Pharmacist
  • Managed Care Pharmacist
  • Maxillofacial Surgeon
  • Medical Administrator
  • Medical Practitioner
  • Medical Registrar
  • Military Pharmacist
  • Nephrologist
  • Neurologist
  • Neurophysiologist
  • Neurosurgeon
  • Nuclear Pharmacist
  • Obstetrician
  • Oncologist
  • Oncology Pharmacist
  • Ophthalmologist
  • Optometrist
  • Oral and Maxillofacial Surgeon
  • Oral Surgeon
  • Orthodontists
  • Orthopaedic Registrar
  • Orthopaedic Surgeon
  • Otolaryngologist
  • Paediatric Surgeon (Neonatal/perinatal)
  • Paediatric Surgeon (Neonatal/perinatal)
  • Paediatrician
  • Pathologist
  • Pharmacist
  • Pharmacist Clinical Pathologist
  • Pharmacist Clinical Toxicologist
  • Pharmacist prescriber
  • Physician
  • Physiotherapist
  • Plastic Surgeon
  • Psychiatrist
  • Radiation Oncologist
  • Radiologist
  • Reconstructive Surgeon
  • Regulatory-Affairs Pharmacist
  • Resident doctor (residency)
  • Resident Medical Officer (RMO/residency)
  • Respiratory Surgeon
  • Respiratory/Thoracic Surgeon
  • Rheumatologist
  • Specialist Physician
  • Sports chiropractor
  • Surgeon
  • Surgical Registrar
  • Thoracic Surgeon
  • Urologist
  • Vascular Surgeon
  • Veterinarian
  • Veterinary Pharmacist

Any list icon image may be returned based on referencing a 20px PNG file that matches the type attribute key (in the above example we created medical.png). To create an aviation-themed list we'll use type="aircraft". The result:

  • I feel the need...
  • The need for Speed

The shortcode function is simple. We explode the shortcode content into an array before imploding it into a list format with the appropriate style attached.

Required Modifications

You will have to create a directory called images somewhere and reference that in the shortcode, replacing BM_IMAGE_URL (a constant we use in our client plugin). Dump as many PNG image icons in that folder that floats your boat and reference them in the shortcode as described.

Note: Client should note that this feature is already part of their default BM Yabber plugin, so you can start using it now. Given that it's handy functionality it's likely we'll build an Elementor block to support the feature.

Once downloaded you are required to copy the code into your Custom Functions file.

Shortcode Attributes

We've only included attributes we required (which were basic) but it'll be easy enough to create your own if required. We included padding, margin_left, margin_bottom, and margin_top.

Download


Title: WordPress List Shortcode
Description: Create a list without HTML (add each item on a new line) and use custom icons in place of the default HTML bullets.
  Download • Version 0.1, 755.0B, zip, Category: WordPress Shortcodes
Featured Image: Wales House is a heritage-listed former newspaper office building, bank building and now hotel located at 64-66 Pitt Street, Sydney. The property is owned by Wales House Nominees Pty Ltd. It was added to the New South Wales State Heritage Register on 2 April 1999. Located on the junction of Pitt, Hunter and O'Connell Streets, the building served as offices for John Fairfax and Sons' The Sydney Morning Herald from 1927 to 1955 before being acquired by the Bank of New South Wales, commonly known as "The Wales", hence the building's name. The building has subsequently been converted into an international hotel, as part of the Radisson Blu hotel chain. [ View Image ]

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.

  AUS Eastern Standard Time (Connecticut)

  Want to have a chat?
 

Like this article?

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment