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]<br />
List Item 1<br />
List Item 2<br />
List Item 3<br />
[/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.
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.
