How to add thumbnail images to all posts within a category on the homepage?

Mayaz Alam
asked 10 years ago

Currently only the thumbnail image for the first article is available. Is it possible to change it so all the articles on the home page in the category widget are visible?

2 Answers

DominicStaff
answered 10 years ago

To add the thumbnails for each post, please follow the steps here:
1) Open up the dw-focus-categories.php file in themes/dw-focus/widgets folder, find the code below (around line 290):

<li><h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'dw_focus' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2></li>

.. and change it into this:

<li>
 <?php if( has_post_thumbnail( get_the_ID() ) ) { ?>
 <div class="entry-thumbnail">
 <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'dw_focus' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_post_thumbnail(array(50,50)); ?></a>
 </div>
 <?php } ?>
 <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'dw_focus' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 </li>

2) Go to Dashboard / Appearance / Customize / General Setting, and add the following code to the Header Code section:

<style>
.widget.news-category .other-entry li {clear:both;}
.other-entry .entry-thumbnail {float: left;}
.widget.news-category .other-entry h2 {margin-left: 60px;}
</style>

Hope this helps!

Jozsef Gitta
replied 10 years ago

Dominic. Would this be better done in a child theme? Won’t this be overwritten when there is an update?

Mayaz Alam
replied 10 years ago

Thank you Dominic!

Mohammed Chaudhry
replied 9 years ago

…now that i have upgraded to version 1.1.0 running on wordpress 4.1 – will the code above be the same, or are there any changes? if so, please provide exact details.thanks

DominicStaff
answered 9 years ago

@jgitta ! At the moment, in the latest version still does not yet support this issue.
@mohammed !
You can open the dw-focus-categories.php file. Find the line 442 & line 318 then Replace with the following code:

<li>
 <?php if( has_post_thumbnail( get_the_ID() ) ) { ?>
 <div class="entry-thumbnail">
 <a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'dw_focus' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_post_thumbnail(array(50,50)); ?></a>
 </div>
 <?php } ?>
 <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php echo esc_attr( sprintf( __( 'Permalink to %s', 'dw_focus' ), the_title_attribute( 'echo=0' ) ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 </li>

Then add the following code to the style.css file:

.widget.news-category .other-entry li {clear:both;}
.other-entry .entry-thumbnail {float: left !important;}
.widget.news-category .other-entry h2 {margin-left: 60px;}

Hope this helps !