Skip to content

Instantly share code, notes, and snippets.

@sniperwolf
Last active December 29, 2022 12:25
Show Gist options
  • Star 22 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save sniperwolf/5652986 to your computer and use it in GitHub Desktop.
Save sniperwolf/5652986 to your computer and use it in GitHub Desktop.
Super-Simple WordPress ajax post-popup with jQuery and Reveal plugin
<?php
/**
* Template Name: ajax
*/
?>
<?php
$post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<div class="something">
<h2 class="title"><?php the_title(); ?></h2>
<div class="content">
<?php the_content(); ?>
</div>
</div>
<?php endif; ?>
// We are using Wordpress' jQuery (in no-conflict mode)
// and the reveal plugin (http://zurb.com/playground/reveal-modal-plugin)
jQuery(document).on('ready', function () {
// Click on element with 'popup' class
jQuery('.popup').on('click', function () {
// Save ID in simple var
var id = jQuery(this)
.attr('rel');
// Hide entire div and load in it the Post ID
jQuery('<div id="wp-popup"></div>')
.hide()
.appendTo('body')
// Substitute 'ajax' with your wordpress template name,
// and 'EXAMPLE.com' with your real URL
.load('http://www.EXAMPLE.com/ajax/?id=' + id)
// Modal Window
.reveal({
// Optional parameters
animation: 'fadeAndPop', // fade, fadeAndPop, none
animationspeed: 300, // how fast animations are
closeonbackgroundclick: true, // if you click background will modal close?
dismissmodalclass: 'close-reveal-modal' // the class of a button or element that will close an open modal
});
return false;
});
});
Clicca <a href="#" rel="INSERISCI_POST_ID" class="popup">qui</a> per aprire il popup con l'articolo.
Click <a href="#" rel="INSERT_POST_ID" class="popup">here</a> to open post-popup.
@lostandfownd
Copy link

i should use that ajax.php as a template in my pages ?

@uiliw
Copy link

uiliw commented Oct 13, 2017

this wont work when user is logged out, any fix for that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment