Geekflare is supported by our audience. We may earn affiliate commissions from buying links on this site.
In WordPress Last updated: September 6, 2022
Share on:
Invicti Web Application Security Scanner – the only solution that delivers automatic verification of vulnerabilities with Proof-Based Scanning™.

Create a better looking list-based post in Genesis theme

Do you create a lot of list-based blog posts and using the Genesis Framework? If yes, then you may like this.

Example:

  • 10 WordPress themes for a creative agency
  • Top 5 SEO optimized Joomla templates
  • 5 ways to improve your site search engine ranking

These types of posts have one thing in common – number.

Sometime back, I bought a Newspaper theme by tagDiv, and I liked their smart list feature. But I love Genesis so much that I didn’t give up. After a while, I thought why not implement that feature in Genesis?

A typical list post will look like below.

blog-post-sample

A smart list will convert all the heading into a great looking number, as below.

blog-post-sample-smartlist

Looks better? Like it? You can see the live demo in one of my previous posts.

If this is something you are looking for then here is the code. I’ve tested this in the Authority Pro theme, but I don’t see any reason not to work with other themes.

Take a backup of a file before modifying or test in a staging site.

First, add the following in a functions.php file. This will convert all the h2 tag into smart list.

// 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;
// Noncename 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','geekflare_single_smartlist');
function geekflare_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
}
}
}

Next, add the following in a style.css file

.num-count{
        background:#ff4e00;
        color:#fff;
        padding: 0px 16px;
        margin-right: 15px;
}

Once added, go to post which you want to convert into a smart list and tick the checkbox  next to “Smartlist.”

smartlist-metabox

Save the post to see the result.

You can play around with CSS to design to fit your branding. I know its a little thing, but it certainly makes a post look better than the default one.

  • Chandan Kumar
    Author
    Chandan Kumar is the founder of Geekflare. He’s helped millions to excel in the digital realm. Passionate about technology, He’s on a mission to explore the world and amplify growth for professionals and businesses.
Thanks to our Sponsors
More great readings on WordPress
Power Your Business
Some of the tools and services to help your business grow.
  • Invicti uses the Proof-Based Scanning™ to automatically verify the identified vulnerabilities and generate actionable results within just hours.
    Try Invicti
  • Web scraping, residential proxy, proxy manager, web unlocker, search engine crawler, and all you need to collect web data.
    Try Brightdata
  • Monday.com is an all-in-one work OS to help you manage projects, tasks, work, sales, CRM, operations, workflows, and more.
    Try Monday
  • Intruder is an online vulnerability scanner that finds cyber security weaknesses in your infrastructure, to avoid costly data breaches.
    Try Intruder