Custom field from widget plugin not showing

Question

I created a custom post type and then I did the following: In the homepage I have a normal loop which I display the content of that post type like custom fields,thumbnail etc.

Then, via functions.php I created a widget that allows me to show 2 custom post types based on category. All works fine, but when I view the page the custom field does not show.

I used this code which works in my first loop of the homepage:

<?php echo get_post_meta($post->ID, 'game_offer', true); ?>

For some reason that does not work in the loop that I have in the functions for the widget.

Here the image where you can see that the custom field exists in the backend.

My code in the function looks like this in case needed:

class My_Widget extends WP_Widget {

    public function __construct() {
        $widget_ops = array( 
            'classname' => 'my_widget',
            'description' => 'Custom Post Type widget',
        );
        parent::__construct( 'my_widget', 'Cutom Post Type Widget', $widget_ops );
    }

    public function widget( $args, $instance ) {

        echo '<section id="custom_post_type_widget">';
        ?>
        <div class="top_bar">
            <h3 class="border-radius">Top Casino Offers</h3>
        </div>
        <?php
        $mypost = array( 
            'post_type' => 'game_reviews',
            'posts_per_page' => 2,
            'type'  => 'top-casino-offers',
        );

        $loop = new WP_Query( $mypost );
        while ( $loop->have_posts() ) : $loop->the_post();?>
        <div class="custom_post_widget_container flex outer">   
            <div class="left">
                <?php
                    $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); 
                    if ( has_post_thumbnail() ) {

                        echo '<div class="game_imag">';
                        echo the_post_thumbnail();
                        echo '</div>';
                    }  
                ?>
            </div>
            <div class="right">
                <div>
                    <div class="flex">
                        <div>
                            <p>
                                <span class="title"><?php the_title(); ?></span> | <span class="rating">
                                <?php
                                    $nb_stars = intval( get_post_meta( get_the_ID(), 'game_rating', true ) );
                                    for ( $star_counter = 1; $star_counter <= 5; $star_counter++ ) {
                                        if ( $star_counter <= $nb_stars ) {
                                            echo '<img src="'.get_template_directory_uri().'/images/icon.png"/>';
                                        } else {
                                            echo '<img src="'.get_template_directory_uri().'/images/grey.png"/>';
                                        }
                                    }
                                 ?>
                                </span>
                            </p>
                            <ul class="custom-field-list">
                                <li><?php echo get_post_meta($post->ID, 'game_offer', true); ?></li>
                            </ul>
                            <?php echo get_post_meta($post->ID, 'game_offer', true); ?>

                        </div>
                        <div class="right">
                            <ul class="play-reviews flex">
                                <li><a href="#" class="play_now">Play Now</a></li>
                                <li><a href="#" class="reviews">Reviews</a></li>
                            </ul>
                        </div>
                    </div>
                    <p><?php echo get_the_excerpt(); ?><a class="read-more" href="<?php the_permalink(); ?>">Read More</a></p>
                </div>

            </div> 
        </div> 
        <?php endwhile; ?>
    <?php wp_reset_query();

    echo '</section>';
    }
}

add_action( 'widgets_init', function(){
    register_widget( 'My_Widget' );
});

How can I show my custom field?

Answer 1

So after all I figured that all I needed was the global $post variable before the WP_Query instance:

global $post;

Answer 2

Use query_posts instead of WP_Query

 <?php
class My_Widget extends WP_Widget {

    public function __construct() {
        $widget_ops = array( 
            'classname' => 'my_widget',
            'description' => 'Custom Post Type widget',
        );
        parent::__construct( 'my_widget', 'Cutom Post Type Widget', $widget_ops );
    }

    public function widget( $args, $instance ) {

        echo '<section id="custom_post_type_widget">';
        ?>
        <div class="top_bar">
            <h3 class="border-radius">Top Casino Offers</h3>
        </div>
        <?php
        global $post;
        $game_reviews_args=array(
                                        'post_type'   => 'game_reviews',
                                        'post_status' => 'publish',
                                        'showposts'   => 2,
                                        'tax_query' => array(
                                                array(
                                                    'taxonomy' => 'type', //taxonomy name
                                                    'terms' => 'top-casino-offers', //category name slug
                                                    'field' => 'slug'
                                                )
                                            ),
                                        'orderby'   => 'date',
                                        'order'   => 'DESC'
                                    );

        query_posts($game_reviews_args);
        if (have_posts()) : 
            while (have_posts()) : the_post();
                ?>
                <div class="custom_post_widget_container flex outer">   
                    <div class="left">
                        <?php
                            $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); 
                            if ( has_post_thumbnail() ) {

                                echo '<div class="game_imag">';
                                echo the_post_thumbnail();
                                echo '</div>';
                            }  
                        ?>
                    </div>
                    <div class="right">
                        <div>
                            <div class="flex">
                                <div>
                                    <p>
                                        <span class="title"><?php the_title(); ?></span> | <span class="rating">
                                        <?php
                                            $nb_stars = intval( get_post_meta( $post->ID, 'game_rating', true ) );
                                            for ( $star_counter = 1; $star_counter <= 5; $star_counter++ ) {
                                                if ( $star_counter <= $nb_stars ) {
                                                    echo '<img src="'.get_template_directory_uri().'/images/icon.png"/>';
                                                } else {
                                                    echo '<img src="'.get_template_directory_uri().'/images/grey.png"/>';
                                                }
                                            }
                                         ?>
                                        </span>
                                    </p>
                                    <ul class="custom-field-list">
                                        <li><?php echo get_post_meta($post->ID, 'game_offer', true); ?></li>
                                    </ul>
                                    <?php echo get_post_meta($post->ID, 'game_offer', true); ?>

                                </div>
                                <div class="right">
                                    <ul class="play-reviews flex">
                                        <li><a href="#" class="play_now">Play Now</a></li>
                                        <li><a href="#" class="reviews">Reviews</a></li>
                                    </ul>
                                </div>
                            </div>
                            <p><?php echo get_the_excerpt(); ?><a class="read-more" href="<?php the_permalink(); ?>">Read More</a></p>
                        </div>

                    </div> 
                </div>
                <?php                   
            endwhile; 
        endif;
        wp_reset_query();                       
    echo '</section>';
    }
}

add_action( 'widgets_init', function(){
    register_widget( 'My_Widget' );
});
?>