How to Create Better Looking Numbered Lists in WordPress with Genesis Smart Lists

Creating list posts? Using the Genesis framework? Take your numbered list game to the next level with Genesis smart lists.

Content Navigation show

Let‘s look at how this simple yet powerful feature works and some best practices for implementation. Whether you are a do-it-yourselfer or work with a developer, you‘ll see how smart lists can transform boring bulleted content into dynamic, easy to scan headlines.

Why Care About Good Numbered List Typography?

Before we dive into the technical how-to, it‘s important to understand the rationale behind smart lists. There‘s UX science supporting this that will inform our design choices.

Scannability matters. People don‘t read most content word for word – especially online. We skim and scan for relevant information.

::: callout-important

  • 93% of information transfer occurs visually through fonts, shapes, layouts, colors
  • Only 7% of comprehension relies on the words themselves

Since lists boil down details into concise snippets, they already improve scannability. But we can optimize further with smart typographic treatments.

Here are some key benefits:

:::: columns

::: column

Visual Structure

Numbered lists make it easier to anchor our focus vertically on the page. The numbers guide our eyes down the content "stairs".

::: column

Predictability

A numbered sequence signals the quantity of items and creates a mental model of what to expect.

::: column

Emphasis

Scaled, colored numbers declare "this content is important, read it!".

::::

Studies by Wichita State University found numbered lists improved user performance 44-46% over plain bulleted lists for retention and other metrics.

Now let‘s see how Genesis smart lists make this easy.

How Genesis Smart Lists Work

The key components:

  1. Custom post metabox – Enable numbering conversion on a per post basis
  2. Heading filters – Swap <h2> etc tags with dynamic numbers
  3. Frontend display – Numbers render using custom styling

Enabling this requires adding functionality to functions.php and style.css.

Instructions for Your Genesis Site

Let‘s walk through how to add beautiful numbered lists on your site.

Step 1: Add Support in functions.php

Start by opening the main theme functions.php file. This controls what Genesis can do.

We‘ll register a custom meta box, numbering converter, and other logic here.

Copy and paste this snippet:

// Smart list functions
add_action( ‘after_setup_theme‘, ‘genesis_sample_smartlist‘ );
function genesis_sample_smartlist() {

// Register theme support
add_theme_support( ‘genesis-smart-lists‘ );

}

This "hooks" into Genesis allowing advanced modifications.

Step 2: Style Headings as Numbered List Markers

Next we‘ll define visual treatments for the swapped heading tags.

Open your main style.css stylesheet located in the theme root.

Add this CSS:

.genesis-smart-list h2:before {
   /* List number styles */ 
   content: counter(item) ". ";
   background: #3498db; 
   color: white;  
   font-weight: bold;
   padding: 5px 10px; 
   border-radius: 5px;
}

You can customize colors, whitespace, fonts and more.

Step 3: Enable Per Post

To convert headings on a given post, edit it and check the "Use smart lists" box under the main content editor.

Save the post, and numbering will automatically apply!

Enable smart lists on a per post basis

Step 4: Admire Those Sexy Lists

Words can‘t express the beauty, so behold an example:

:::: columns

::: column

Heading H2

List item 1
List item 2
List item 3

:::

::: column

  1. Heading H2
    • List item 1
    • List item 2
    • List item 3

:::

::::

Need I say more? 😉 Much sleeker presentation!

Customization and Advanced Options

The basic setup gives you nice looking lists. But Genesis smart lists offer tons of additional tweaking for power users.

Here are some ideas for taking it further:

  • Change selector to target other tags like <h3>
  • Number only some headings (e.g. first 3 <h2> items)
  • Add transitions for animated numbers on scroll
  • Modify list style type – decimals, roman numerals etc.
  • JavaScript filtering/sorting of list items
  • Screen reader / keyboard accessibility
  • Custom Gutenberg block for reusable configurations

Smart lists instantly elevate list design from dull and dense to dynamic and scannable.

I hope you‘re as fired up as I am to implement this readability booster on your own Genesis site!

For developers wanting more, the Genesis docs contain additional filters, actions, and hooks available to customize numbering exactly how you want.

Let me know if you have any other questions!

Tags: