Support » Fixing WordPress » How to show image before the text with the_post_thumbnail?

  • Hello my friends,
    I have read and create my own widget following this article:
    http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/

    But in my custo widget it show me the text (with link) before the thumbnail
    my code now is:

    /* Widget */
    query_posts('posts_per_page=4&cat=13&orderby=date');
    if (have_posts()) :
      echo "<ul>";
      while (have_posts()) : the_post();
        echo "<li><a href='".get_permalink()."'>".get_the_title();
        echo the_post_thumbnail($post_id, 'medium');
        echo "</a></li>"; 
    
      endwhile;
      echo "</ul>";
    endif;
    wp_reset_query();
    
        echo $after_widget;
      }

    I have try change something but it crash me wordpress, please can you help me? thank you in advance!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The 3 ‘echo’ lines do 3 things:

    echo "<li><a href='".get_permalink()."'>".get_the_title();
    Starts the
    <li> tag (list), the <a> tag (anchor) and gets the link

    echo the_post_thumbnail($post_id, 'medium');
    Get the post thumbnail (medium)

    echo "</a></li>";
    Closes the
    <li> tag (list) and the <a> tag (anchor)

    Since you want the image first, try:

    echo "<li>the_post_thumbnail($post_id, 'medium');
        echo <a href='".get_permalink()."'>".get_the_title();
        echo "</a></li>";

    (above code not tested, that is we re-ordered things logically only…)

    Some additional CSS work may be required…

    Thread Starter TecnoYounes

    (@tecnoyounes)

    No it doesn’t work, it show me instead of the image:

    the_post_thumbnail(, ‘medium’); echo text
    Title of the post

    🙁

    but also if it worked anyway i would that the image also has the link

    general, do not use query_posts() for secondary loops; use WP_Query() instead; http://wordpress.stackexchange.com/questions/1753/when-should-you-use-wp-query-vs-query-posts-vs-get-posts?rq=1

    example:

    /* Widget */
    $custom = new WP_Query('posts_per_page=4&cat=13&orderby=date');
    if ($custom->have_posts()) :
      echo "<ul>";
      while ($custom->have_posts()) : $custom->the_post();
        echo "<li><a href='".get_permalink()."'>";
        the_post_thumbnail($post_id, 'medium');
        echo get_the_title();
        echo "</a></li>";
      endwhile;
      echo "</ul>";
    endif; wp_reset_postdata();
    
        echo $after_widget;
      }
    Thread Starter TecnoYounes

    (@tecnoyounes)

    yes it works like a charm, thank you very much alchymyt!

    Thread Starter TecnoYounes

    (@tecnoyounes)

    ah i ask you another thing, as i have add a select menu:

    <label for="<?php echo $this->get_field_id('category1'); ?>"><?php _e('Category:'); ?></label>
          <select id="<?php echo $this->get_field_id('category1'); ?>" name="<?php echo $this->get_field_name('category1'); ?>" style="width:90%;">
            <option value="0">Choose category:</option>
            <?php
            $cats = get_categories('hide_empty=0');
    
            foreach ($cats as $cat) {
            $option = '<option value="'.$cat->term_id;
            if ($cat->term_id == $instance['category1']) { $option .='" selected="selected';}
            $option .= '">';
            $option .= $cat->cat_name;
            $option .= ' ('.$cat->category_count.')';
            $option .= '</option>';
            echo $option;
            }
          ?>
          </select>

    to select the category where to pickup the article, how i can integrate it instead of using this custom code:

    $custom = new WP_Query('posts_per_page=4&cat=13&orderby=date');
    ?

    Thread Starter TecnoYounes

    (@tecnoyounes)

    ah and would also add the number of post from the widget option either

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to show image before the text with the_post_thumbnail?’ is closed to new replies.