Wednesday, February 23, 2011

Show post with next previous links with jquery wordpress

First you need to download three images and upload it to your theme/images directory..
Here is the images..


second copy this code and paste it in the function.php in your theme directory.

function my_init_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}    
add_action('init', 'my_init_method');

if(!function_exists('limit_post')) {
function limit_post($content) {
 $content = get_the_content($more_link_text, $stripteaser, $more_file);
      $content = apply_filters('the_content', $content);
      $content = str_replace(']]>', ']]>', $content);
      $content = substr(strip_tags($content), 0, 50).'…';
      echo $content;
}
}

if(!function_exists('content')) {
function content($id=''){
    $single = new WP_Query;
    $single->query("p=$id&showposts=1");
    while ($single->have_posts()) : $single->the_post(); ?>
               <div class="meta">             
               <a href="<?php the_permalink() ?>"><?php limit_post('the_content()'); ?></a>
               </div>
<?php endwhile;
}
}

And place this code where you want to show post links.

<?php if(!is_page()) { ?>
<style>
#postPagination {float:left; padding: 3px;}
#postPagination label { color: #a68a5a;}
#contentInner {float: left;  padding: 3px;}
#contentInner a{color:#333333; text-decoration: none; }
#contentInner a:hover {color: #ff4b33; }
</style>
<div id="postPagination">
   <label>latest on blog</label>
   <a href="<?php echo get_permalink(get_adjacent_post(false,'',true)); ?>" title="Previous"><img src="<?php bloginfo('template_directory') ?>/images/previous.gif" border="0" /></a>
   <a href="<?php echo get_permalink(get_adjacent_post(false,'',false)); ?>" title="Next"><img src="<?php bloginfo('template_directory') ?>/images/next.gif" border="0" /></a>
</div>
<div id="contentInner">
   <?php 
if($_POST['id']) {
content($_POST['id']);
} else {
content();
} ?>
</div>
  
<script type="text/javascript" charset="utf-8">
  jQuery(document).ready(function(){

jQuery('#postPagination a').live('click', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
var id = link.split("=");
jQuery('#contentInner').html(function(){
return "<img src='<?php bloginfo('template_directory') ?>/images/loading.gif' />"
});
jQuery('#contentInner').load(link+' #contentInner', {id:id[1]});
jQuery('#postPagination').load(link+' #postPagination');
});
});
</script>
<?php } ?>

No comments:

Post a Comment