It's not that hard to implement a simple jquery ajax call in your wordpress to get a post by its id for instance. In the following we will make this functionality from scratch, to implement this we will need to create a new file in our theme root folder: ajax.php, then, in this file we will get the post by its id and we will send it back to jquery ajax script and append it to the body.

First we will create the php file, so in your root theme's folder create: ajax.php this file should be on the same level with functions.php, header.php and so on.

First lines of code which need to be added in the top of the ajax.php file are the one which call wordpress's core. Without the following two lines of code you won't be able to use wordpress features. Simple functions as: "get_posts()" will be available only after we will add the following code:

define('WP_USE_THEMES', true);
  
/** Loads the WordPress Environment and Template */
include('../../../wp-load.php');

Now, we can move on to the javascript part, as you probably saw in the video from youtube, or if you didnt' see the video you can scroll a little and see the video where we made this functionality. It is nothing complicated about our js script, only few lines of jquery where we sent a POST message to our ajax.php with post id, when the message arrives in the ajax file, it will find the post with the given id and return it back to our js script and then we will apend the HTML code to frontend.

This is our ajax script:

jQuery('.posts_links a').on('click', function(e){
  e.preventDefault();
  var id = jQuery(this).attr('post_id'),
    base_url = window.location.protocol + "//" + window.location.host + "/"
  console.log(base_url);
  jQuery.ajax({
    type:"POST",
    url:base_url+'wp-content/themes/storefront/ajax.php',
    data:{
      'id':id
    },
    success:function(result){
      jQuery('.append_post_here').html(result);
    },
    error:function(error){
      console.log(error);
    }
  });
});

In the above code you can see the path for ajax.php file, if you create the ajax.php elsewhere you need to change the URL parameter from ajax script to the right path. And finally the following is the last part from this video tutorial the HTML part:

<?php
  $posts_args = array(
    'post_type' => 'post',
    'posts_per_page' => -1
  );
  $posts = get_posts($posts_args);
  //echo '<pre>';var_dump($posts);die();
?>
<section class="links_container">
  <div class="container">
    <div class="posts_links">
      <ul>
        <?php foreach($posts as $k => $v):?>
          <li><a href="" post_id="<?=$v->ID;?>"><?=$v->post_title;?></a></li>
        <?php endforeach;?>
      </ul>
    </div>
    <div class="append_post_here">
      
    </div>
  </div>
</section>

That's it.

Here is Video Tutorial for this post: