WordPress Auto Refresh Content DIV with Jquery

Have you ever visit websites that always refreshing their page periodically? Well, I have and I think it’s annoying. The refresh feature is done with javascript and its main purpose is to show visitor the latest article. This is a common practice in a news portal. While I like the idea of showing visitor the newest story, I hate that it must reload the entire site just to see a portion of website getting updated.

What if we can refresh just some parts of a website where visitors would see the latest update? In WordPress we can do that easily with jquery. Let’s say you have a home page that show your latest posts like a typical blog. This would be your typical loop in index.php.

<div class="latest-wrapper">

	<!-- Main Content -->
	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="latest-row">
		<h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
		<?php the_content() ?>
	</div>
	<?php endwhile; else: ?>
	<h5>Sorry, no post here..</h5>
	<?php endif; ?>	
	<!-- /Main Content -->
	
</div>

What we need to do first is separate the code inside the div.latest-wrapper into another file. In your theme/yourtheme folder, create new file called main-content.php and then insert the code below into main-content.php.

<!-- Main Content -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="latest-row">
	<h1><a href="<?php the_permalink() ?>"><?php the_title() ?></a></h1>
	<?php the_content() ?>
</div>
<?php endwhile; else: ?>
<h5>Sorry, no post here..</h5>
<?php endif; ?>	
<!-- /Main Content -->

Open index.php and place code like this:

<div class="latest-wrapper" id="refresh">
	<?php get_template_part('main','content') ?>
</div>

What the get_template_part('main','content') function does is basically include code in main-content.php. Notice the id="refresh". We will use the id to identify div where we want to refresh our content.

Add jquery library in your header.php or footer.php. If you don’t know how to do this, you can Google wp_enqueue_script. Follow the WordPress codex to load jquery properly.

After that, in your theme/yourtheme folder create a file called latest.php. In latest.php insert

<?php 
// Load WordPress Engine
require('../../../wp-blog-header.php' );
get_template_part('main','content') 
?>

What the code does is load main-content.php and fetch the content. Since we load the latest.php from jquery load() function, we need to load wp-blog-header.php so latest.php will have access to wordpress API. Here, we use get_template_part().

After that, let’s add some simple jquery load() to refresh id="refresh" periodically.

<script type="text/javascript">
	var refreshId = setInterval(function() {
		$('#refresh').fadeOut("slow").load('<?php echo bloginfo('template_url')?>/latest.php').fadeIn("slow");
	}, 60000);
</script>

Notice the number 60000 will equal 60 seconds or 1 minute.
That’s it, try adding some posts and wait 1 minute to see if the content is refreshed and showing your latest posts.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s