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:
    https://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; https://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.