WordPress.org

Ready to get started?Download WordPress

Forums

Add post thumbnail to div container above content (2 posts)

  1. singinglawlady
    Member
    Posted 8 months ago #

    I created a custom widget container above my content. (Picture here: http://i1282.photobucket.com/albums/a537/singinglawlady/ScreenCaptureatSunAug4074157CDT2013.png~original)

    What I want to do is add the post thumbnail in each of the categories. So when a new post in that category is posted, the thumbnail automatically updates.
    Here is the code in my functions file:

    genesis_register_sidebar( array(
            'id'            => 'x_widget',
            'name'          => __( 'Homepage Below Menu' ),
            'description'   => __( 'This is below the bottom menu of the homepage.' ),
    ) );
    
    	add_action( 'genesis_before_content', 'widget_before_content' );
    	function widget_before_content() {
     	   echo '<div id="x_widget">';
    		echo '<a href="/blogtest/category/review/" class="feat_img"><div class="promo_sect"><div class="promo_sect_img" style="background-image: url(<?php echo $thumb_src[0];?> ) !important;"></div>BOOK REVIEWS</div></a>';
    		echo '<a href="/blogtest/category/cover-reveal/" class="feat_img"><div class="promo_sect"><div class="promo_sect_img" style="background-image: url( get_post_thumbnail_id($post->ID);"></div>COVER REVEALS</div></a>';
    		echo '<a href="/blogtest/category/GIVEAWAYS/" class="feat_img"><div class="promo_sect"><div class="promo_sect_img" style="background-image: url( get_post_thumbnail_id($post->ID);"></div>GIVEAWAYS</div></a>';
    		echo '<a href="/blogtest/category/Book-News/" class="feat_img"><div class="promo_sect"><div class="promo_sect_img" style="background-image: url( get_post_thumbnail_id($post->ID);"></div>BOOK NEWS</div></a>';
    		echo '<a href="/blogtest/category/cover-reveal/" class="feat_img"><div class="promo_sect"><div class="promo_sect_img" style="background-image: url( get_post_thumbnail_id($post->ID);"></div>COVER REVEALS</div></a>';
        	echo '</div>';
    }

    Is there an easier or different way to do this? I have the CSS styling done, but I can't figure out how to make the post thumbnail show up without manually putting the image url inside the background-image: url ( field. I am clearly not a pro, so any and all help is appreciated.

  2. PinkishHue
    Member
    Posted 8 months ago #

    Hmm, I was going to suggest just using <?php the_post_thumbnail() ?> to display the image but now I see what you mean about having to do it manually, as you're not actually calling the latest posts from each category there, just linking to the category and manually adding the URL of the image in.

    There are ways to code it by hand but an easier way for you might be to use a plugin such as this one:

    http://wordpress.org/plugins/flexible-posts-widget/

    Add that in your widget area (in the admin panel, not by hand in your functions file) - you'll need one instance of it for each category and have it display one post for each.

    You can also customise the way the widget displays by adding a custom theme file like so:

    http://wordpress.org/plugins/flexible-posts-widget/installation/

    So where it would normally display the post title (the_title) you could change that to the category (the_category), and that should achieve what you need without having to manually add any information every time you make a post.

    (* You'd also have to remove the lines from your original code where you have echoed the links for each category, the surrounding div could stay as is though)

    Hope that helps!

Reply

You must log in to post.

About this Topic