I'm teaching myself how to build my own themes on WordPress. I'm using the latest version, and using the underscores starter theme. My question is, how can I make the default Latest Posts widget show post thumbnails too?

I'm trying to create a tube site style "latest uploads" page - without using plugins since they have too many features that I don't need and I don't want to bloat my website with unnecessary code. I've been trying to edit the core code for 2 days but no luck so far.

I'm teaching myself how to build my own themes on WordPress. I'm using the latest version, and using the underscores starter theme. My question is, how can I make the default Latest Posts widget show post thumbnails too?

I'm trying to create a tube site style "latest uploads" page - without using plugins since they have too many features that I don't need and I don't want to bloat my website with unnecessary code. I've been trying to edit the core code for 2 days but no luck so far.

• widgets

• Do not edit the core code – Vishwa Commented Apr 8, 2019 at 10:57

1 Answer 1

1) editing core files is not a good idea You should only work/modify files within wp-content or below that folder

2) Instead of tweaking the core widget, it is much easier to create a custom widget class with for your own needs. You can simply build your own plugin, which only uses a lightweight setup. Create a folder, do the basic setup of a plugin,

Put this in a file called "stack-overflow-example-widget.php", name the folder the same, and tadaa.. there you have your plugin. CSS should simply go into your theme css, or add a custom stylesheet later. I haven't tested this code, but it should be working.

<?php
/*
Plugin Name: Stack Overflow Example Widget
Plugin URI:  https://wordpress.stackexchange/questions/333724/making-the-default-latest-posts-wordpress-widget-show-thumbnails
Description: A widget to show the latest posts with a thumbnail.
Version:     1.0.0
Author:      user
Author URI:  https://www.example
License:     GPL2
License URI: https://www.example/imprint
Text Domain: yourtextdomain
Domain Path: /languages
*/

if(!defined('ABSPATH')) {
    exit('NaNa nAnA NaNa nAnA NaNa nAnA Batman!');
}

$dir = plugin_dir_path(__FILE__);

/* Init the plugin Textdomain, you have to google that, it's easy */
require $dir . 'textdomain.php';

// Register the Widget in WordPress
function so_wp_register_widgets() {
    // Give it an ID
    register_widget('My_custom_widget');
}
add_action('widgets_init','so_wp_register_widgets');

//Widget Class for all custom post type items
class My_custom_widget extends WP_Widget {

// Widget Construct
function __construct() {
    parent::__construct(
        'so-example-widget', // Id
        __('Custom Latest Posts', 'yourtextdomain'), // Name
        array('description' => __( 'A widget to show the latest posts with a thumbnail.', 'yourtextdomain'))
    );
}

// Widget Init
function widget($args, $instance) {
    extract( $args );
    // these are the widget options
    $title = apply_filters('widget_title', $instance['title']);
    echo $before_widget;
    // Check if title is set
    if ( $title ) {
        echo $before_title . $title . $after_title;
    }
    $this->so_latest_posts_with_image(); // Call current Class, request Method
    echo $after_widget;
}

// Update Instance
function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    return $instance;
}   

// Widget Backend Form
function form($instance) {

    // Check values
    if( $instance) {
        $title = esc_attr($instance['title']);
    } else {
        $title = '';
    } ?>
    <p>
        <label for="<?php echo $this->get_field_id('title'); ?>">
        <?php _e('Title', 'yourtextdomain'); ?></label>
        <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
    </p><?php
}

// HTML Widget Output
function so_latest_posts_with_image() {

    // Custom WP Query Arguments
    $custom_args = array(
        'post_type' => 'posts',
        'posts_per_page' => '96',
        'orderby' => 'taxonomy, name',
        'order' => 'ASC'
    );
    $loop = new WP_Query( $custom_args );
    // Setup Layout und Loop
    $html = '<div class="so-wp-widget-wrap">';
        $html .= '<ul class="so-wp-posts-all">';
        while ( $loop->have_posts() ) : $loop->the_post();

            $html .= '<li class="so-wp-posts-item">';
                $html .= '<a href="'.get_the_permalink()'" class="preview-image">'.get_the_post_thumbnail().'</a>';
                $html .= '<a href="'.get_the_permalink().'" class="so-wp-posts-permalink" title="'.get_the_title().'">'.get_the_title().'</a>';
            $html .= '</li>';

        endwhile;
        $html .= '</ul>';
    $html .= '</div>';

    echo $html;
    wp_reset_postdata();
    }
}