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.
A smart list will convert all the heading into a great looking number, as below.
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.”
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.
