How to implement AJAX post navigation into WordPress?

I am developing a wordpress page template exactly like this. I have completed the design and have loaded the template once user goes to this page which using my template. I want to all posts in more article list open in this template without refreshing the page. but when i click on any post in the list it opens in a new page which is off course different from my page template. Please guide me how i can open the posts in the "more article" list open in my template. Here is my code i have till now.

<?php  if ( have_posts() ):
    while ( have_posts() ) :
        the_post(); ?>

  <div id="main" class="left-half" style="  background-image: url(<?php echo intrigue_get_attachment(); ?>);       width:50%; display: inline-block; float: right; position: fixed;  ">
      <h2 style="diplay:inline-block"><a href="<?php echo esc_url( home_url( '/' ) );?>"><?php bloginfo( 'name' );?></a></h2> 
  <input id="morearticlesbtn" class="button" type="button" onclick="openNav()" value="More Articles "> 
  <div class="row">
  <div class="post-meta col-md-6">
      <p>July 18, 2017</p>
      By: <a href="#">James Crock </a>
      <a href="#"> Transport</a> 
  </div>
      <div class="col-md-6">
          <div class="line"></div>
      </div>
  </div>


  <div class="title-div">
      <a href="<?php echo the_permalink() ?>"> <h1 class="title"><?php the_title() ?></h1></a>
  </div>

  <div class="row">
      <div class="col-md-9" >
          <div class="line bottom-line"></div>
      </div>
  <div class="col-md-3 bottom-line-text">
  <h4>Next</h4>
  </div>

    </div>
    </div>

  <div id="right" class="right-half" style="width: 50%; display: inline-block; float:right;">
      <div class=" content-div">
       <?php the_content();?>
      </div>
      <div class="tags content-div clear-fix">
           <h6>Tags:</h6> 
           <?php echo get_the_tag_list();?>
<!--      <a href="#"><h6>Promotional</h6></a><a href="#"><h6>Pop-Ups</h6></a>-->
      </div>
</div>


 <?php endwhile;   endif;              ?>               

<!--   
THE OFFCANVAS MENU
    -->



    <div id="mySidenav" class="sidenav menu">
    <div class="hidden-menu-div">
  <input class="button close-button" type="button" onclick="closeNav()" value="Hide List "> 
  <div>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
  <a href="#search">Search</a>
  </div>
  </div>

        <?php  
                $temp = $wp_query; $wp_query= null;
        $wp_query = new WP_Query(); $wp_query->query('posts_per_page=6' . '&paged='.$paged);
        while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

        <div class="col-sm-6 hiden-cat-post">
            <a href="<?php echo the_permalink(); ?>" class="hidden-cat-item">
                <div class="hidden-cat-thumbnail" ><?php the_post_thumbnail(array(340, 230))?> </div>
                <div class="hidden-cat-item-text">
                    <h1 class="hidden-cat-item-title"> <?php the_title(); ?> </h1>
                    <div class="excerpt"></div>
                    <div class="hidden-item-meta">jul 10,2017</div>
                </div>
            </a>
        </div> 

   <?php endwhile; ?>
  <?php if ($paged > 1) { ?>

        <nav id="nav-posts">
            <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
            <div class="next"><?php previous_posts_link('Newer Posts &raquo;'); ?></div>
        </nav>

        <?php } else { ?>

        <nav id="nav-posts">
            <div class="prev"><?php next_posts_link('&laquo; Previous Posts'); ?></div>
        </nav>

        <?php } ?>

        <?php wp_reset_postdata(); ?>


    </div>  






<!--

  SCRIPT
    -->

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "50%";
    document.getElementById("main").style.marginLeft = "50%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
ajax
Ashly Waelchi IV

Answers 2

Submit Answer
  • Miss Godfrey Ebert

    What you are looking for is AJAX navigation. It's not that complicated, however it's not very easy too. I've written a simple example for you, I hope it helps you in your case.

    An AJAX request has 2 steps, first a front-end request that is sent out by browser when for example a user clicks a link or an element, then a response from the server.

    If we need to use that response in our website, there is a third step, which is, well... which is using the response in our website!

    Creating an AJAX request on user's demand

    If our user clicks a link, we have to stop the browser to navigating to that page. We can achieve this by using a jQuery function, called preventDefault(). This will prevent the default action of any element that is bound to it, whether it's a form, or a link.

    We need to build some custom link, to make sure we don't interfere with other links such as social networks. We'll add a class and an attribute to our navigation links to use it in the AJAX request.

    To get the next post's data, we use get_next_post(); and get_previous_post();. We need the ID too. So:

    $next_post = get_next_post();
$prev_post = get_previous_post();
// Check if the post exists
if ( $prev_post ) { ?>
    <div class="prev ajax-link" data-id="<?php echo $prev_post->ID; ?>"><?php _e('&laquo; Previous Posts','text-domain'); ?></div><?php
}
if ( $next_post ) { ?>
    <div class="next ajax-link" data-id="<?php echo $next_post->ID; ?>"><?php _e('Newer Posts &raquo;','text-domain'); ?></div><?php
}

    Now, we'll write a jQuery function and disable the click event on our custom link:

    (function($){
    $('.ajax-link').on('click',function(e){
        e.preventDefault();
        // The rest of the code goes here, check below
    });
})(jQuery);

    By using $(this) we get the ID of the post which we saved previously in the data-id:

    var postId = $(this).attr('data-id');

    Okay now we have the ID, let's create an AJAX request to out yet not written REST endpoint, and put the response in a DIV that is used as the container of our content:

    $.get( 'http://example.com/prisma/ajax_navigation/', {
    ajaxid: postId
}).done( function( response ) {
    if ( response.success ) {
        $( '#content-div' ).innerHTML( response.content );
    }
});

    Which content-div is the ID of the DIV that holds your content. It's the element's ID, not the class, and must be unique in the entire page. Alright, time to write the server side endpoint.

    Creating a REST endpoint to return the post's data

    Creating a REST endpoint is as easy as the next lines:

    add_action( 'rest_api_init', function () {
    //Path to AJAX endpoint
    register_rest_route( 'prisma', '/ajax_navigation/', array(
            'methods' => 'GET', 
            'callback' => 'ajax_navigation_function' 
    ) );
});

    We've made an endpoint at http://example.com/prisma/ajax_navigation/. The path is accessible now, but we still need a callback function to return the post's data.

    function ajax_navigation_function(){
    if( isset( $_REQUEST['ajaxid'] ) ){
        $post = get_post( $_REQUEST['ajaxid'] );
        $data['content'] = $post->post_content;
        $data['success'] =  true;
        return $data;
    }
}

    That's it. Now whenever a user clicks the next post or previous post element, the content of the next or previous post will be fetched via AJAX, and inserted into the DIV element that has the ID of content-div.

    All done.

  •
    Hollis Harber

    You can simply put your code in single.php if you want all the posts to use this template style.

    Or if you want to restrict the use to a single post type, you can put the code in a file name single-{post-type}.php

    *replace {post-type} with your desired post type name.

Related Questions