Rest API works perfectly with default theme twenty sixteen, but when I change the theme the post on site does not appear. Anyone have the exact problem?

<script type="text/javascript">
$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: ';per_page=3',            

        success: function (data) {
            var posts_html = '';
            $.each(data, function (index, post) {
              //posts_html += '<a href="' + post.link + '"><h2>' + post.title.rendered + '</h2></a>';
              //posts_html += '<p>' + post.excerpt.rendered + '</p>';
              posts_html += '<div class="blogpost">';
              posts_html += '<div class="post-item">'
              posts_html += '<div class="post-item-image">';
              posts_html += '<a href="' + post.source_url + '"></a>';
              posts_html += '<img src="' + post.images.large + '" alt="'+ post.title.rendered + '"</div>';
              posts_html += '<div class="post-item-header">';
              posts_html += '<span class="date">' + moment(post.date).format("Do MMM YY") + '</span>';
              posts_html += '<span class="user">';
              posts_html += '<a href="' + post.link +'">';
              posts_html += '<img src=".png" alt="P2Pbench logo" >P2Pbench</a></span></div>';
              posts_html += '<div class="post-item-body">';
              posts_html += '<a href="' + post.link + '" style="text-decoration: underline;"> '+ post.title.rendered + '</a>';
              posts_html += '<div class="post-short-text"> ' + post.excerpt.rendered + '</div></div></div></div></div>';
            });
            $('#posts').html(posts_html);
        },
        error: function (request, status, error) {
            alert(error);
        }
    });
});

HTML:

     <div class="blogs-post-list">
    <div id="posts">Loading posts...
   </div>
    </div>

Rest API works perfectly with default theme twenty sixteen, but when I change the theme the post on site does not appear. Anyone have the exact problem?

<script type="text/javascript">
$(document).ready(function () {
    $.ajax({
        type: 'GET',
        url: 'https://mywebsite/blog/wp-json/wp/v2/posts?_embed&per_page=3',            

        success: function (data) {
            var posts_html = '';
            $.each(data, function (index, post) {
              //posts_html += '<a href="' + post.link + '"><h2>' + post.title.rendered + '</h2></a>';
              //posts_html += '<p>' + post.excerpt.rendered + '</p>';
              posts_html += '<div class="blogpost">';
              posts_html += '<div class="post-item">'
              posts_html += '<div class="post-item-image">';
              posts_html += '<a href="' + post.source_url + '"></a>';
              posts_html += '<img src="' + post.images.large + '" alt="'+ post.title.rendered + '"</div>';
              posts_html += '<div class="post-item-header">';
              posts_html += '<span class="date">' + moment(post.date).format("Do MMM YY") + '</span>';
              posts_html += '<span class="user">';
              posts_html += '<a href="' + post.link +'">';
              posts_html += '<img src="https://mywebsite/img/p2plogo.png" alt="P2Pbench logo" >P2Pbench</a></span></div>';
              posts_html += '<div class="post-item-body">';
              posts_html += '<a href="' + post.link + '" style="text-decoration: underline;"> '+ post.title.rendered + '</a>';
              posts_html += '<div class="post-short-text"> ' + post.excerpt.rendered + '</div></div></div></div></div>';
            });
            $('#posts').html(posts_html);
        },
        error: function (request, status, error) {
            alert(error);
        }
    });
});

HTML:

     <div class="blogs-post-list">
    <div id="posts">Loading posts...
   </div>
    </div>

• themes
• rest-api
• api

Share Improve this question edited Jul 15, 2019 at 8:27 Roga Men asked Jul 15, 2019 at 7:19 Roga MenRoga Men 12955 bronze badges 6

• Does the id "posts" exist on the page? Did you reset the permalinks? – fja3omega Commented Jul 15, 2019 at 8:23
• 2 "does not work" is not a useful description of a problem. What specifically is not working? Are there errors in the console? What do you see for the request in the Network tab for the request? Are you getting an alert from your error function? – Jacob Peattie Commented Jul 15, 2019 at 8:24
• No, I didn't reset the permalinks – Roga Men Commented Jul 15, 2019 at 8:28
• I added the HTML code. I don't get any error. Just loading posts.... are displayed. But when I change the WP theme to tweenty sixteen the post appear from blog to website. – Roga Men Commented Jul 15, 2019 at 8:29
• 1 WordPress uses jQuery.noConflict I think, meaning it doesn't define $ by default: you'll have to use jQuery instead. Could that be it? However I'd be surprised if twentysixteen loaded jQuery as $, and you would see errors in your browser's JavaScript console for this. Can you answer the rest of Jacob's questions: if you open your browser's debug tools and reload the page, then look at the 'console' do you see any errors? If you look at the network tab do you see the request to the /v2/posts endpoint, and did it complete successfully? – Rup Commented Jul 15, 2019 at 10:27

 |  Show 1 more comment

1 Answer 1

Sorted by: Reset to default 0

I manage to solved it by adding this code (at the bottom) to the YOUR BLOG THEMES my path : wp-content/themes/MYWPTHEME/function.php

    function ws_register_images_field() {
    register_rest_field( 
        'post',
        'images',
        array(
            'get_callback'    => 'ws_get_images_urls',
            'update_callback' => null,
            'schema'          => null,
        )
    );
}

add_action( 'rest_api_init', 'ws_register_images_field' );

function ws_get_images_urls( $object, $field_name, $request ) {
    $medium = wp_get_attachment_image_src( get_post_thumbnail_id( $object->id ), 'medium' );
    $medium_url = $medium['0'];

    $large = wp_get_attachment_image_src( get_post_thumbnail_id( $object->id ), 'large' );
    $large_url = $large['0'];

    return array(
        'medium' => $medium_url,
        'large'  => $large_url,
    );
}