2

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

blog details

3

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.

  • 2
    This is a better way. – Stender Jul 26 '17 at 12:21
  • Thank u sir... a small doubt.. callback function-> where i need to add.. and should i create wp-json folder containing vinay and ajax-blog folders?????????? and where i have to add last code.. Plz i need full details where to add the code.. – vinay Jul 26 '17 at 12:33
  • 1
    You're welcome! All the PHP goes in your WordPress theme's functions.php file, and the JavaScript goes in the bottom of your HTML template (not WordPress). – Jack Johansson Jul 26 '17 at 20:00
  • 1
    1) After adding the code to your theme's functions.php, try to access http://example.com/wp-json/vinay/ajax-blog. if you see the result in text without errors, then it's good. 2) remove the code in your HTML file and only add this <section id="blog"><div id="container-div"></div></section> to it (also the jQuery script I wrote). The jQuery script will automatically fetch your posts from WordPress and add it to the <div id="container-div"></div>. don't forget to change example.com to your domain :) – Jack Johansson Jul 27 '17 at 5:39
  • 1
    Yes, you should do it in blog/wp-content/themes/superior/functions.php. You should never modify any file outside wp-content (except wp-config.php in some situations) – Jack Johansson Jul 27 '17 at 6:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.