Custom blog layout in Modernize theme for WordPress

I’m using the Modernize theme for WordPress for a client’s site:

http://themeforest.net/item/modernize-flexibility-of-wordpress/1264247

Its a very good theme but an annoying feature it lacks is the nice blog posts layout option that it gives to the portfolio items. By default you can either have very small blog thumbnails & titles only or half or full page post thumbnails with excerpts.

Reading their forums Goodlayers (the theme developers) simply suggest changing the posts to be portfolio items, but that wasn’t really going to work in this client’s case, so I put my thinking cap on.

I’ve come up with the following work around:

1) Edit the file: themes\modernize\include\page-option.php

At around line 177 change one of the ‘1/1’ options to be your new option – for some reason it wouldn’t allow me to add a new option to the end, and also it wouldn’t display the name when I overwrote it completely – so I just appended a bit of text to show it was different. It now reads:

 'options'=>array('0'=>'Widget Style', '1'=>'1/1 Medium Thumbnail (RH)','2'=>'1/1 Full Thumbnail'),

2) Remembering your new option name, make the following changes in
themes/modernize/include/plugin/blog-item.php

• Add your new blog thumbnail size as follows twice near the top (once for non-responsive & once for responsive layouts)

 "1/1 Medium Thumbnail (RH)" => array("index"=>"3" ,"class"=>"four columns", "size"=>"390x224", "size2"=>"390x224", "size3"=>"390x224"),

• Add the following within the if statement around line 80:

 }else if( $item_type == '1/1 Medium Thumbnail (RH)' ){
 print_blog_widget_rh($item_class, $item_size, $item_index, $num_excerpt);

Then create a new function called print_blog_widget_rh (or copy the original print_blog_widget function and rename & tweak as I did)

For posterity here is the new function below:

// print blog widget RH type
function print_blog_widget_rh( $item_class, $item_size, $item_index, $num_excerpt ){
global $gdl_admin_translator;
if( $gdl_admin_translator == 'enable' ){
$translator_continue_reading = get_option(THEME_SHORT_NAME.'_translator_continue_reading', 'Continue Reading →');
}else{
$translator_continue_reading = __('Continue Reading →','gdl_front_end');
}
while( have_posts() ){
the_post();

echo '
<div class="blog-item' . $item_index . ' gdl-divider ' . $item_class . ' mt0">

';

print_blog_thumbnail( get_the_ID(), $item_size );

echo '
<div class="blog-thumbnail-context">';
echo '
<h2 class="portfolio-thumbnail-title post-widget-title-color gdl-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2>
';
//echo '
<div class="blog-thumbnail-date post-info-color">' . get_the_time( GDL_WIDGET_DATE_FORMAT ) . '</div>
';
echo '

</div>
'; // blog-thumbnail-context
echo '
<div class="blog-thumbnail-content">' . mb_substr( get_the_excerpt(), 0, $num_excerpt ) . '</div>
';
echo '<a class="blog-continue-reading" href="' . get_permalink() . '"><em>' . $translator_continue_reading . '</em></a>';

echo '

</div>
'; // blog-item

}

}

Obviously you’ll need to tweak a few styles in your styles.css to make it play nicely with your particular site, but hopefully this will get you close enough to do that!

I will post a link to the working site when its live but heres a screen shot of what it looks like now:

http://www.minutemanbristol.com/

Any comments on a better way to achieve this will be welcomed!