AutoBlog Theme

Before i start the step-by-step tutorial to change this Mimbo theme into wprobot friendly theme, let me describe about the theme it self first.

MIMBO is a clean, customizable magazine-style theme for WordPress. It’s also a simple framework which can be modified with child themes, discussed further down in the documentation. Read more about the latest features.

This Mimbo Theme is FREE theme, you can download Mimbo Theme here. The image below, is the screenshot what this Mimbo Theme looks like.

Lest assume that you already upload this theme into your WordPress Site, and activate it. I will not write it here (how to upload theme and activate) to make the tutorial TO THE POINT.

First things that should do is How To Make Thumbnail Show Automatically in MIMBO Theme
In this case, i will use Functions Method to help us show automatic thumbnail. So, first step to do is open the “Theme Functions” functions.php file inside mimbo, Scroll down till the last script. And you will see script like this :

Source code

return $classes;
}
add_filter('comment_class','comment_add_microid');
 
	?>

Add new code before “add_filter(” with this script below (Insert below number 2, and before number 3). You can read more detail about this Functions Script here

Source code

function autoblogtheme_dot_info() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}

After you save this modifications, next edit the “Main Index Template” (index.php) file. There is two area here (that show image), The Sticky Post area, and Recent Post area.

Script below, were parts of index.php file script.

Source code

<?php
$postCount = 0;
$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts( 'paged=$page&post_per_page=-1&cat=' . get_query_var('cat') );
while (have_posts()) { the_post();
if( $postcount == 0 ) {
//GETS LATEST OR STICKY POST
?>
<div id="lead">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php echo get_post_image (get_the_id(), '', '', '' .get_bloginfo('template_url') .'/scripts/timthumb.php?zc=1&amp;w=260&amp;h=230&amp;src='); ?></a>

The script that use to call the image (the original script) were this :

Source code

<?php echo get_post_image (get_the_id(), '', '', '' .get_bloginfo('template_url') .'/scripts/timthumb.php?zc=1&amp;w=260&amp;h=230&amp;src='); ?></a>

From that Script, we can read that the original script were using timthumb.php code to show the thumbnail. This code will only works (to show thumbnail) if the image were stored inside your own server. So, if you were using autoblog that using another website image, your thumbnail will not show (assume using amazon module, with thumbnail directly read from amazon web).

Still from that script above, we could see that the image size will be 260px width and 230px height. We must use the same size for our new automatic thumbnail, so the theme will not broken.

Change the script that used to call image (above) with this script :

Source code

<img src="<?php echo autoblogtheme_dot_info(); ?>" width="260" height="230" /></a>

The final script after modifications will be like this :

Source code

<?php
$postCount = 0;
$page = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts( 'paged=$page&post_per_page=-1&cat=' . get_query_var('cat') );
while (have_posts()) { the_post();
if( $postcount == 0 ) {
//GETS LATEST OR STICKY POST
?>
<div id="lead">
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<img src="<?php echo autoblogtheme_dot_info(); ?>" width="260" height="230" /></a>

Save that file, and see the result (open your site).

Second modifications, were to show automatic thumbnail for Recent Post
continued soon…..

demo : Early Childhood Education Journal