Alexis Kestler
The Genesis framework is a popular theme foundation used by over 300,000 WordPress sites. It provides a robust, SEO-optimized foundation on which to build a WordPress theme. One of the advantages of Genesis is the ability to easily customize aspects of your site‘s appearance. In this guide, I‘ll show you how to use Genesis to create smart-looking numbered lists to improve your list-based posts.
What Are Smart Lists?
Smart lists automatically convert your header tags into stylized numbered lists. Instead of your headers looking like this in a regular bulleted list:
- Header 1
- Header 2
- Header 3
They will transform into a numbered list with more visual interest:
- Header 1
- Header 2
- Header 3
This makes your lists look cleaner and more modern. The TagDiv Newspaper theme for WordPress popularized this style of list, but you can add it yourself quite easily in Genesis.
Why Use Smart Lists?
Smart lists improve the appearance of list posts in a few key ways:
- The numbers stand out better than bullets and make the structure more clear
- They add visual interest compared to plain bold headers
- The styling keeps your lists looking consistent and polished
For sites that regularly publish list-based content, smart lists can take your posts to the next level visually.
How to Create Smart Lists in Genesis Themes
Enabling smart lists requires adding a few code snippets to the key Genesis theme files functions.php and style.css. Don‘t worry, you don‘t need to be a developer to do this! Just follow these steps:
1. Add Smart List Functionality to functions.php
First, open your Genesis child theme‘s functions.php file in a text editor.
Then paste the following code block anywhere in the file:
// Smartlist metabox for post
add_action( ‘add_meta_boxes‘, ‘cd_meta_box_add‘ );
function cd_meta_box_add(){
add_meta_box(
‘smartlist_meta_field‘,
‘Smartlist Metabox‘,
‘smartlist_meta_field‘,
‘post‘,
‘side‘,
‘high‘
);
}
function smartlist_meta_field(){
global $post;
// Nonce name needed to verify where the data originated
echo ‘<input type="hidden" name="smartlistmeta_noncename" id="eventmeta_noncename" value="‘ . wp_create_nonce( plugin_basename(__FILE__) ) . ‘" />‘;
// Get the location data if its already been entered
$check = get_post_meta($post->ID, ‘smartlist_check‘, true);
// Echo out the field
?>
<p><input type="checkbox" id="smartlist_check" name="smartlist_check" <?php checked( $check, ‘on‘ ); ?> value="on" /><label for="smartlist_check"><?php _e(‘Smartlist‘,‘authority-pro‘)?></label></p>
<?php
}
// Save the Metabox Data
function wpt_save_smartlist_meta($post_id, $post) {
// verify this came from the our screen and with proper authorization,
// because save_post can be triggered at other times
if ( !wp_verify_nonce( $_POST[‘smartlistmeta_noncename‘], plugin_basename(__FILE__) )) {
return $post->ID;
}
// Is the user allowed to edit the post or page?
if ( !current_user_can( ‘edit_post‘, $post->ID ))
return $post->ID;
// OK, we‘re authenticated: we need to find and save the data
// We‘ll put it into an array to make it easier to loop though.
$smartlist_meta[‘smartlist_check‘] = $_POST[‘smartlist_check‘] ? $_POST[‘smartlist_check‘] : ‘‘;
// Add values of $smartlist_meta as custom fields
foreach ($smartlist_meta as $key => $value) { // Cycle through the $smartlist_meta array!
if( $post->post_type == ‘revision‘ ) return; // Don‘t store custom data twice
$value = implode(‘,‘, (array)$value); // If $value is an array, make it a CSV (unlikely)
if(get_post_meta($post->ID, $key, FALSE)) { // If the custom field already has a value
update_post_meta($post->ID, $key, $value);
} else { // If the custom field doesn‘t have a value
add_post_meta($post->ID, $key, $value);
}
if(!$value) delete_post_meta($post->ID, $key); // Delete if blank
}
}
add_action(‘save_post‘, ‘wpt_save_smartlist_meta‘, 1, 2); // save the custom fields
// Single Post Smart-List
add_action(‘wp_footer‘,‘Top10SM_single_smartlist‘);
function Top10SM_single_smartlist(){
if(is_single()){
global $wp_query;
$postid = $wp_query->post->ID;
$post_data = get_post_meta($postid);
$smartlist_check = !empty($post_data[‘smartlist_check‘][0]) ? $post_data[‘smartlist_check‘][0] : ‘‘;
if(!empty($smartlist_check)){
?>
<script>
var count = 1;
if(jQuery(‘.entry-content h2‘).length > 0){
jQuery(‘.entry-content h2‘).each(function(){
jQuery(this).prepend( ‘<span class="num-count">‘+count+‘</span>‘ );
count++;
});
}
</script>
<?php
}
}
}This adds a "Smartlist" checkbox to the side of the post editor. When enabled on a post, it will trigger the smart list formatting.
2. Add Styles to style.css
Next, open your Genesis child theme‘s style.css file.
Add the following CSS:
.num-count{
background:#ff4e00;
color:#fff;
padding: 0px 16px;
margin-right: 15px;
}This styles the auto-generated numbers. Customize the background, text color, padding, etc to match your branding.
3. Enable Smart Lists on a Post
To make a post use smart lists, edit it and check the "Smartlist" box in the sidebar of the post editor.
Publish or update the post, and it will now have the stylized numbered lists!
Before:
- Header 1
- Header 2
- Header 3
After:
- Header 1
- Header 2
- Header 3
And that‘s it! Now you can easily create smart-looking lists on your Genesis site.
Customizing Your Smart Lists Further
The code above covers the basic setup, but you can customize things further:
- Style the numbers differently for h2, h3, h4 tags
- Make nested lists numbered like 1.1, 1.2, etc
- Change the HTML structure around the numbers
- Optimize spacing, fonts, colors, etc for your brand
- Add the checkbox to other post types like pages
The possibilities are endless for making your smart lists fit your site perfectly. Refer to Genesis development guides for more details on customization.
I hope this guide has helped you learn how to elevate your list posts in Genesis with smart lists! Let me know if you have any other questions.
