Adding next and previous button in wordpress post inside a modal

2 Views

I created a wordpress theme using bootstrap framework and when a user clicks on a post, instead of going to a single post page, the modal pops up and displays the post’s contents.

My problem is that I needed to add a next/previous button so when a user clicks on it, the modal closes and another one pops with the next post’s contents.

Read More

This is my code:

content.php 

<a href="#myModal-<?php the_ID(); ?>" data-toggle="modal" class="clickme readmore text-right">Read more</a>

    <div id="myModal-<?php the_ID(); ?>" class="modal fade"><?php include 'popup-modal.php'; ?>     </div>

popup-modal.php 

<div class="modal-dialog">
<div class="modal-content">

POST CONTENT HERE.......

<div class="nav-links">
<div class="nav-previous">
<a href="#" rel="prev" data-dismiss="modal" data-toggle="modal"></a>
</div>
<div class="nav-next">
<a href="#" rel="next" data-dismiss="modal" data-toggle="modal"></a>
</div>
</div>

</div>
</div>

Now I’m not sure what to put on the href of the navlinks so I can call the next posts and display it inside a modal. I hope someone can help me out with this.

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. Here is mine solution:

    <?php $next_post = get_adjacent_post(false,'',false);?>
<?php $previous_post = get_adjacent_post(false,'',true);?>

    and then, the navigation output:

    <div class="navigation row">
<div class="col-md-6">
    <?php if($next_post->ID != ''): ?>
        <a href="#myModal-<?php echo $next_post->ID; ?>" data-toggle="modal" >
            <button type="button" class="btn btn-default m-t-30">Previous</button>
        </a>
    <?php endif; ?>
</div>
<div class="col-md-6">
    <?php if($previous_post->ID != ''): ?>
        <a href="#myModal-<?php echo $previous_post->ID;  ?>" data-toggle="modal" >
            <button type="button" class="btn btn-default m-t-30">Next</button>
        </a>
    <?php endif; ?>
</div>

  2. try something like this

     <div class="next-page"><?php next_posts_link( 'Next Page<i class=""></i>' ); ?></div>

    I have used this in a website of my own, I hope it does what you require. You will need to add it directly into your template