Arthemia Featured Category Images

Hi again!

My friend Talisa from Malaysia asked me about Arthemia theme, the legendary theme from ColorLabs. What she asked for is about the featured category that available on the front page (below the headline section), a.k.a category bar.

If you check my previous post (several months ago), i’ve publish a post about the same subject that show you how to displaying an image at the category bar.

At those post, i use a manual technique to displaying the image. Upload the image to the image library, copy the image URL then put it to the category description. For her and for me,  that is quite odd to do.

But, don’t be worry about it anymore. At this post i will share you how about to generate the image automatically, displaying your latest post’s thumbnail under that category.

Untitled

 

On the picture above, you can see the result of the modification i made. It will displaying your post thumbnail including the video thumbnail.

To do it, you only have to modify 1 file, header.php. Find out the code below on your header.php file:

 <?php 
    for( $i = 1; $i <= 5; $i++ ) {
    $cp_pC=get_option('colabs_categories_'.$i);
    if( $cp_pC == 0 ) { $cp_pC= 1; }
    $category_bar = get_category( $cp_pC );
    ?>
    <div id="cat-<?php echo $cp_pC; ?>" class="categorybar" onclick="window.location.href='<?php echo get_category_link($cp_pC);?>';">
        <span class="cat_title"><?php echo $category_bar->name; ?></span>
        <?php $desc=$category_bar->description;
            if ($desc!=""){
        ?>
        <p><?php echo $desc; ?></p>
        <?php }?>
    </div>
    <?php } ?>

Modify that code become:

<?php 
    for( $i = 1; $i <= 5; $i++ ) {
    $cp_pC=get_option('colabs_categories_'.$i);
    if( $cp_pC == 0 ) { $cp_pC= 1; }
    $category_bar = get_category( $cp_pC );
		$args = array( 'posts_per_page' => 1, 'category' => $cp_pC );
    ?>
    <div id="cat-<?php echo $cp_pC; ?>" class="categorybar" onclick="window.location.href='<?php echo get_category_link($cp_pC);?>';">
		
		<?php
			$myposts = get_posts( $args );
			foreach ( $myposts as $post ) : setup_postdata( $post ); 
				colabs_image('width=161&height=121');
			endforeach; 
			wp_reset_postdata();
		?>
        <span class="cat_title"><?php echo $category_bar->name; ?></span>
        <?php $desc=$category_bar->description;
            if ($desc!=""){
        ?>
        <p><?php echo $desc; ?></p>
        <?php }?>
    </div>
    <?php } ?>

If you check that code, i made a loop within a loop (on this case, we use for each). The size of the image is 161 x 121 px.

And that’s it, have fun!

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s