Dropdown select to load single post into div, w/o page refresh. WordPress

Reland Pigte comments:

ohh snap! can't upload a zip file.

Reland Pigte comments:

Installation
1. add this script the the page you want to implement that functionality (eg. index.php)
<!-- This is the part You need -->
<?php if( class_exists('DisplayPost') ) { $form = new displayPost(); $form->display_form(); } ?>
<!-- end of the part you need -->
2. Create a php file and save it as "DisplayPost.php" and insert the code below.

<?php
/***********************************************
Plugin Name: Display Selected Post
Plugin URI: unavailable
Description: This plugin helps the user to blog
Version: 1.0
Author: Reland Pigte
Author URI: http://www.example.com
************************************************/

class DisplayPost
{
function __construct() {
add_action('wp_print_scripts', array($this, 'display_scripts'));

add_action("wp_ajax_nopriv_change_post", array(&$this, 'change_post' ));
add_action("wp_ajax_change_post", array(&$this, 'change_post' ));
}

# Function to initialize script
function display_scripts() {
if( !is_admin() ) {
wp_enqueue_script( array('jquery','jquery-ui-core') );
add_action( 'wp_footer', array($this, 'display_script') );
wp_localize_script( 'jquery', 'MyAJAX', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
}

# Function to change the display of post
function change_post()
{
update_option( 'display_single_post', $_POST['id'] );
$option = get_option('display_single_post');
$thepost = get_post($option); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p> <?php
exit;
}

# Function to display the form
function display_form() {
global $post;
$postTOdisplay = get_posts( array('post_type' => 'post', 'numberposts' => -1) );
$option = get_option('display_single_post'); ?>
<label for="postTOdisplay">Please select post to display</label>

<select id="postTOdisplay">
<option value="0">Please Select Post</option>
<?php foreach( $postTOdisplay as $post ): setup_postdata( $post ); ?>
<option <?php echo ($option == get_the_ID())?'selected':''; ?> value="<?php the_ID(); ?>"><?php the_title(); ?></option>
<?php endforeach; ?>
</select>
<div id="displayHere">
<?php $thepost = get_post($option); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p>
</div> <?php
}

# Function to add the script
function display_script() { ?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#postTOdisplay').change(function(){
$.ajax({
type: 'post',
url : MyAJAX.ajaxurl,
data: 'action=change_post&id='+this.value,
success: function(output){
$('#displayHere').html(output);
}
});
});
});
})(jQuery);
</script><?php
}
}
new DisplayPost();
?>


Cheers,
Reland

Reland Pigte comments:

3. Upload file "DisplayPost.php" to you plugin directory and activate it.

Chuck Wilson comments:

Quick test appears to be working, is it possible for me to choose the posts that show in the list, perhaps by id, rather than just showing all the posts? This way I could also control their order in the list.

Reland Pigte comments:

Yes of course, would you like it to appear at the admin section?

Chuck Wilson comments:

That would be fine.

Reland Pigte comments:

Please replace the old file to this.


<?php
/***********************************************
Plugin Name: Display Selected Post
Plugin URI: unavailable
Description: This plugin helps the user to blog
Version: 1.0
Author: Reland Pigte
Author URI: http://www.example.com
************************************************/

class DisplayPost
{
function __construct() {
add_action('wp_print_scripts', array($this, 'display_scripts'));
add_action('admin_menu', array($this, 'display_plugin_menu'));
add_action("wp_ajax_nopriv_change_post", array(&$this, 'change_post' ));
add_action("wp_ajax_change_post", array(&$this, 'change_post' ));

add_action("wp_ajax_nopriv_show_post", array(&$this, 'show_post' ));
add_action("wp_ajax_show_post", array(&$this, 'show_post' ));
}

# Function to initialize script
function display_scripts() {
if( !is_admin() ) {
wp_enqueue_script( array('jquery','jquery-ui-core') );
add_action( 'wp_footer', array($this, 'display_script') );
wp_localize_script( 'jquery', 'MyAJAX', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
}

# Function to change the display of post
function change_post()
{
update_option( 'display_single_post', $_POST['id'] );
$option = get_option('display_single_post');
$thepost = get_post($option); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p> <?php
exit;
}

# Function to display the form
function display_form() {
global $post;

$option = get_option('display_single_post');
$option2 = get_option( 'display_single_post_ids' );
if(!is_array($option2)) $option2 = unserialize($option2);
if($option2 == null) $option2 = array(); ?>
<label for="postTOdisplay">Please select post to display</label>
<select id="postTOdisplay">
<option value="0">Please Select Post</option>
<?php foreach($option2 as $key => $value ){
$thepost = get_post($value); ?>
<option <?php echo ($option == $thepost->ID)?'selected':''; ?> value="<?php echo $thepost->ID; ?>"><?php echo $thepost->post_title; ?></option>
<?php } ?>
</select>
<div id="displayHere">
<?php if($option2 != null): ?>
<?php $thepost = get_post($option); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p>
<?php endif; ?>
</div> <?php
}

# Function to add the script
function display_script() { ?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#postTOdisplay').change(function(){
$.ajax({
type: 'post',
url : MyAJAX.ajaxurl,
data: 'action=change_post&id='+this.value,
success: function(output){
$('#displayHere').html(output);
}
});
});
});
})(jQuery);
</script><?php
}

# Function to display plugin menu
function display_plugin_menu() {
add_options_page('My Plugin Options', 'Dropdown Options', 'manage_options', 'displaypost', array($this, 'display_plugin_options'));
}

# Function to display the content of options
function display_plugin_options()
{
global $post;
$postTOdisplay = get_posts( array('post_type' => 'post', 'numberposts' => -1) ); ?>

<div style="display:none;" class="updated" id="message"><p>Display Post option successfully Updated</p></div>

<form method="post" name="dpost" id="dpost">
<fieldset style="border:1px dotted #ccc;padding:0 5px 5px 10px;margin:10px 0 0">
<legend>Select Posts</legend> <?php
$option = get_option( 'display_single_post_ids' );
if(!is_array($option)) $option = unserialize($option);
if($option == null) $option = array();
foreach( $postTOdisplay as $post ): setup_postdata( $post ); ?>
<input <?php echo (in_array(get_the_ID(), $option))?'checked':'' ?> type="checkbox" class="displaypost" name="displaypost[]" id="displaypost-<?php the_ID; ?>" value="<?php the_ID(); ?>" />
<label for="displaypost-<?php the_ID; ?>"><?php the_title(); ?></label><br/> <?php
endforeach; ?>
</fieldset>
<input type="hidden" name="action" value="show_post" />
<p class="submit"><input type="submit" value="Save Changes" class="button-primary" id="submit" name="submit"></p>
</form>
<script type="text/javascript">
(function($){
$('.button-primary').click(function(e){
e.preventDefault();
$.ajax({
type: 'post',
url : '<?php echo admin_url( 'admin-ajax.php' );?>',
data: $('#dpost').serialize(),
success: function(){
$('.updated').show();
}
});
});
})(jQuery);
</script>
<?php
}

function show_post()
{
update_option( 'display_single_post_ids', serialize($_POST['displaypost']) );
exit;
}
}
new DisplayPost();
?>


Chuck Wilson comments:

Hi Reland, this is shaping up great. I have one last request. Is there a way to select a default post to display? At the moment, until I select a post from the dropdown no posts are showing. I appreciate your continued work on this and will increase the price I offered originally, once this wraps up. Thanks

Reland Pigte comments:

Yes there is, :)

Reland Pigte comments:

Here is the code:

<?php
/***********************************************
Plugin Name: Display Selected Post
Plugin URI: unavailable
Description: This plugin helps the user to blog
Version: 1.0
Author: Reland Pigte
Author URI: http://www.example.com
************************************************/

class DisplayPost
{
function __construct() {
add_action('wp_print_scripts', array($this, 'display_scripts'));
add_action('admin_menu', array($this, 'display_plugin_menu'));
add_action("wp_ajax_nopriv_change_post", array(&$this, 'change_post' ));
add_action("wp_ajax_change_post", array(&$this, 'change_post' ));

add_action("wp_ajax_nopriv_show_post", array(&$this, 'show_post' ));
add_action("wp_ajax_show_post", array(&$this, 'show_post' ));
}

# Function to initialize script
function display_scripts() {
if( !is_admin() ) {
wp_enqueue_script( array('jquery','jquery-ui-core') );
add_action( 'wp_footer', array($this, 'display_script') );
wp_localize_script( 'jquery', 'MyAJAX', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
}

# Function to change the display of post
function change_post()
{
update_option( 'display_single_post', $_POST['id'] );
$option = get_option('display_single_post');
$thepost = get_post($option); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p> <?php
exit;
}

# Function to display the form
function display_form() {
global $post;

$option = get_option('display_single_post');
$option2 = get_option( 'display_single_post_ids' );
if(!is_array($option2)) $option2 = unserialize($option2);
if($option2 == null) $option2 = array(); ?>
<label for="postTOdisplay">Please select post to display</label>
<select id="postTOdisplay">
<option value="0">Please Select Post</option>
<?php foreach($option2 as $key => $value ){
$thepost = get_post($value); ?>
<option <?php echo ($option == $thepost->ID)?'selected':''; ?> value="<?php echo $thepost->ID; ?>"><?php echo $thepost->post_title; ?></option>
<?php } ?>
</select>
<div id="displayHere">
<?php if($option2 != null): ?>
<?php $thepost = get_post($option); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p>
<?php else: ?>
<?php $thepost = get_post(get_option('display_single_default')); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p>
<?php endif; ?>

</div> <?php
}

# Function to add the script
function display_script() { ?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#postTOdisplay').change(function(){
$.ajax({
type: 'post',
url : MyAJAX.ajaxurl,
data: 'action=change_post&id='+this.value,
success: function(output){
$('#displayHere').html(output);
}
});
});
});
})(jQuery);
</script><?php
}

# Function to display plugin menu
function display_plugin_menu() {
add_options_page('My Plugin Options', 'Dropdown Options', 'manage_options', 'displaypost', array($this, 'display_plugin_options'));
}

# Function to display the content of options
function display_plugin_options()
{
global $post;
$postTOdisplay = get_posts( array('post_type' => 'post', 'numberposts' => -1) ); ?>
<div class="wrap">
<div class="icon32" id="icon-options-general"><br></div>
<h2>Chuck Wilson's Option</h2>
<div style="display:none;" class="updated" id="message"><p>Display Post option successfully Updated</p></div>

<form method="post" name="dpost" id="dpost" style="margin-top: 20px;">
<label for="defaultpost">Select Deafault Post</label>
<select name="defaultpost" id="defaultpost">
<option value="0">Select Post</option>
<?php foreach( $postTOdisplay as $post ): setup_postdata( $post ); ?>
<option <?php echo (get_option('display_single_default') == get_the_ID())?'selected':''; ?> value="<?php the_ID(); ?>"><?php the_title(); ?></option>
<?php endforeach; ?>
</select>

<fieldset style="border:1px dotted #ccc;padding:0 5px 5px 10px;margin:10px 0 0">
<legend>Select Posts</legend> <?php
$option = get_option( 'display_single_post_ids' );
if(!is_array($option)) $option = unserialize($option);
if($option == null) $option = array();
foreach( $postTOdisplay as $post ): setup_postdata( $post ); ?>
<input <?php echo (in_array(get_the_ID(), $option))?'checked':'' ?> type="checkbox" class="displaypost" name="displaypost[]" id="displaypost-<?php the_ID; ?>" value="<?php the_ID(); ?>" />
<label for="displaypost-<?php the_ID; ?>"><?php the_title(); ?></label><br/> <?php
endforeach; ?>
</fieldset>
<input type="hidden" name="action" value="show_post" />
<p class="submit"><input type="submit" value="Save Changes" class="button-primary" id="submit" name="submit"></p>
</form>
</div>
<script type="text/javascript">
(function($){
$('.button-primary').click(function(e){
e.preventDefault();
$.ajax({
type: 'post',
url : '<?php echo admin_url( 'admin-ajax.php' );?>',
data: $('#dpost').serialize(),
success: function(){
$('.updated').show();
}
});
setTimeout(function(){$('.updated').fadeOut();}, 5000);
});
})(jQuery);
</script>
<?php
}

function show_post()
{
update_option( 'display_single_post_ids', serialize($_POST['displaypost']) );
update_option( 'display_single_default', $_POST['defaultpost']);
exit;
}
}
new DisplayPost();
?>

Reland Pigte comments:

Here is the final plugin, I missed something on the above code.

Download the attached file please.

Reland Pigte comments:

Ohh, can't attached a zip file..

<?php
/***********************************************
Plugin Name: Display Selected Post
Plugin URI: unavailable
Description: This plugin helps the user to blog - final
Version: 1.0
Author: Reland Pigte
Author URI: http://www.example.com
************************************************/

class DisplayPost
{
function __construct() {
add_action('wp_print_scripts', array($this, 'display_scripts'));
add_action('admin_menu', array($this, 'display_plugin_menu'));
add_action("wp_ajax_nopriv_change_post", array(&$this, 'change_post' ));
add_action("wp_ajax_change_post", array(&$this, 'change_post' ));

add_action("wp_ajax_nopriv_show_post", array(&$this, 'show_post' ));
add_action("wp_ajax_show_post", array(&$this, 'show_post' ));
}

# Function to initialize script
function display_scripts() {
if( !is_admin() ) {
wp_enqueue_script( array('jquery','jquery-ui-core') );
add_action( 'wp_footer', array($this, 'display_script') );
wp_localize_script( 'jquery', 'MyAJAX', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));
}
}

# Function to change the display of post
function change_post()
{
update_option( 'display_single_post', $_POST['id'] );
$option = get_option('display_single_post');
$thepost = get_post($option); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p> <?php
exit;
}

# Function to display the form
function display_form() {
global $post;

$option = get_option('display_single_post');
$option2 = get_option( 'display_single_post_ids' );
if(!is_array($option2)) $option2 = unserialize($option2);
if($option2 == null) $option2 = array(); ?>
<label for="postTOdisplay">Please select post to display</label>
<select id="postTOdisplay">
<option value="0">Please Select Post</option>
<?php foreach($option2 as $key => $value ){
$thepost = get_post($value); ?>
<option <?php echo ($option == $thepost->ID)?'selected':''; ?> value="<?php echo $thepost->ID; ?>"><?php echo $thepost->post_title; ?></option>
<?php } ?>
</select>
<div id="displayHere">
<?php if($option2 != null): ?>
<?php $thepost = get_post($option); ?>
<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p>
<?php else: ?>
<?php if(get_option('display_single_default') != 0) { ?>
<?php $thepost = get_post(get_option('display_single_default')); ?>

<h3><a href="<?php echo get_permalink($thepost->ID);?>"><?php echo $thepost->post_title; ?></a></h3>
<p><?php echo $thepost->post_content; ?></p>
<?php } endif; ?>

</div> <?php
}

# Function to add the script
function display_script() { ?>
<script type="text/javascript">
(function($){
$(document).ready(function(){
$('#postTOdisplay').change(function(){
$.ajax({
type: 'post',
url : MyAJAX.ajaxurl,
data: 'action=change_post&id='+this.value,
success: function(output){
$('#displayHere').html(output);
}
});
});
});
})(jQuery);
</script><?php
}

# Function to display plugin menu
function display_plugin_menu() {
add_options_page('My Plugin Options', 'Dropdown Options', 'manage_options', 'displaypost', array($this, 'display_plugin_options'));
}

# Function to display the content of options
function display_plugin_options()
{
global $post;
$postTOdisplay = get_posts( array('post_type' => 'post', 'numberposts' => -1) ); ?>
<div class="wrap">
<div class="icon32" id="icon-options-general"><br></div>
<h2>Chuck Wilson's Option</h2>
<div style="display:none;" class="updated" id="message"><p>Display Post option successfully Updated</p></div>

<form method="post" name="dpost" id="dpost" style="margin-top: 20px;">
<label for="defaultpost">Select Deafault Post</label>
<select name="defaultpost" id="defaultpost">
<option value="0">Select Post</option>
<?php foreach( $postTOdisplay as $post ): setup_postdata( $post ); ?>
<option <?php echo (get_option('display_single_default') == get_the_ID())?'selected':''; ?> value="<?php the_ID(); ?>"><?php the_title(); ?></option>
<?php endforeach; ?>
</select>

<fieldset style="border:1px dotted #ccc;padding:0 5px 5px 10px;margin:10px 0 0">
<legend>Select Posts</legend> <?php
$option = get_option( 'display_single_post_ids' );
if(!is_array($option)) $option = unserialize($option);
if($option == null) $option = array();
foreach( $postTOdisplay as $post ): setup_postdata( $post ); ?>
<input <?php echo (in_array(get_the_ID(), $option))?'checked':'' ?> type="checkbox" class="displaypost" name="displaypost[]" id="displaypost-<?php the_ID; ?>" value="<?php the_ID(); ?>" />
<label for="displaypost-<?php the_ID; ?>"><?php the_title(); ?></label><br/> <?php
endforeach; ?>
</fieldset>
<input type="hidden" name="action" value="show_post" />
<p class="submit"><input type="submit" value="Save Changes" class="button-primary" id="submit" name="submit"></p>
</form>
</div>
<script type="text/javascript">
(function($){
$('.button-primary').click(function(e){
e.preventDefault();
$.ajax({
type: 'post',
url : '<?php echo admin_url( 'admin-ajax.php' );?>',
data: $('#dpost').serialize(),
success: function(){
$('.updated').show();
}
});
setTimeout(function(){$('.updated').fadeOut();}, 5000);
});
})(jQuery);
</script>
<?php
}

function show_post()
{
update_option( 'display_single_post_ids', serialize($_POST['displaypost']) );
update_option( 'display_single_default', $_POST['defaultpost']);
exit;
}
}
new DisplayPost();
?>

Chuck Wilson comments:

Hi Reland, just tried out the new script, I see the change in the admin panel, but it does not seem to be having the desired effect on the front end, the other thing I notice is that if on my computer I select a post, I can then go check the site on my wifes laptop and it will be set to the same post as I had switched to on my computer, if I switch the post on her laptop, that post will then load on my computer when I come back to it. It's as if it's defaulting to the last post viewed by the last site visitor.

Reland Pigte comments:

Can I talk to you via skype? - if you have time contact me through skype (relandpigte)