Modify Mimbo theme for WPRobot use

Modify Mimbo theme for WPRobot use

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.
mimbo theme for wprobot

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 :

  1. return $classes;
  2. }
  3. add_filter('comment_class','comment_add_microid');
  4.  
  5. ?>

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

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

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.

  1. <?php
  2. $postCount = 0;
  3. $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
  4. query_posts( 'paged=$page&post_per_page=-1&cat=' . get_query_var('cat') );
  5. while (have_posts()) { the_post();
  6. if( $postcount == 0 ) {
  7. //GETS LATEST OR STICKY POST
  8. ?>
  9. <div id="lead">
  10. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
  11. <?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 :

  1. <?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 :

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

The final script after modifications will be like this :

  1. <?php
  2. $postCount = 0;
  3. $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
  4. query_posts( 'paged=$page&post_per_page=-1&cat=' . get_query_var('cat') );
  5. while (have_posts()) { the_post();
  6. if( $postcount == 0 ) {
  7. //GETS LATEST OR STICKY POST
  8. ?>
  9. <div id="lead">
  10. <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
  11. <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

Facebook comments:

5 Responses to “Modify Mimbo theme for WPRobot use”

  1. That’s very helpful, thank you.

    [Reply]

  2. Dilip says:

    How do I use it with wp robot ?

    [Reply]

    cahyo Reply:

    if you do that modification, all thumbnail will show.
    as long as there is image inside your single post, it will be showed as thumbnail automatically

    [Reply]

  3. Gun says:

    Cahyo,

    How about recent post modification? When will you update the tutor?
    many thanks for your guide =)

    [Reply]

    cahyo Reply:

    I will do it soon. Maybe in the next few days.
    BTW, i got new tutorial that maybe you need to see : http://www.autoblogtheme.info/themes/books-store-theme-wprobot.html

    [Reply]

Leave a Reply

Your email address will not be published. Required fields are marked *


two − one =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

AutoBlog Theme located at Indonesia , Malang, East Java . Reviewed by 98 customers rated: 4.4 / 5