How to display blog images using wordpress in existing project

Question

I have developed a website using html and php. To display blog details i have used wordpress. But im able to display only the content without any Image. Plz guide me how to write code to display the blog images in the front page.

code used to display recent blog details which is in index.php
<?php 
define('WP_USE_THEMES', false);
require('blog/wp-blog-header.php');
?>




    <!-- Blog Section-->
<section id="blog"> 
<?php

$number_of_posts = 3;
$args = array( 'numberposts' => $number_of_posts );
$recent_posts = wp_get_recent_posts( $args );
foreach( $recent_posts as $recent_post ){
echo "<span>".$recent_post['post_date']."</span> <br>";
echo "<h3>".$recent_post['post_title']."</h3>";


echo  "<p>".$recent_post['post_content']."</p><br><br>";

}

?>
</section>

and output is

Answer 1

Short answer: DON'T DO IT! Even if yesterday you said tomorrow!

Including WordPress's core in some other files is the last thing you want to do. Instead, use an Ajax method and fill the content by using a REST endpoint.

You need to register a rest route first. To do so, add this piece of code into your theme's functions.php:

add_action( 'rest_api_init', function () {
    register_rest_route( 'vinay', '/ajax_blog/', array(
            'methods' => 'GET', 
            'callback' => 'blog_ajax_function' 
    ) );
});
// Now, you can do your query inside a callback function:
function blog_ajax_function(){
    $recent_posts = wp_get_recent_posts( $args, OBJECT );
    foreach ( $recent_posts as $post=>$value ) {
        $data[$post]['title'] = get_the_title( $value->ID );
        $data[$post]['date'] = get_the_date( 'Y-m-d H:i:s', $value->ID );
        $data[$post]['permalink'] = get_the_permalink( $value->ID );
        $data[$post]['thumbnail'] = get_the_post_thumbnail_url( $value->ID );
    }
    return $data;
}

Now, you can get a JSON response containing title, date and thumbnail of your recent posts by visiting wp-json/vinay/ajax_blog/. Time to add them to our page.

Let's bind an action to page load and fill the page with fancy bubbly posts, just like spongebob did! This goes in your static website's HTML file ( Replace the code from your question by removing it and using this ) Don't forget to change example.com to your domain!

<section id="blog"><div id="container-div"></div></section>
<script>
(function(){
    $.ajax({
        type: 'GET', 
        url: 'http://example.com/wp-json/vinay/ajax_blog', 
        dataType: 'json',
        success: function (data) {
            if (data != null) {
                $.each(data, function(index, element) {
                    $('#container-div').append('<a href="'+element.permalink+'"><img src="'+element.thumbnail+'" alt="'+element.title+'"/><span>'+element.title+'</span>' +element.date+ '</a>');
                });
            }
        }
    });
})(jQuery);
</script>

This will automatically append a list of clickable recent posts to the <div id="container-div"></div> that we create in our HTMl to contain the posts when the page loads.

All done.