Tuesday, 30th Sep 2014

«

»

Print this Post

Tweaking previous and next post links in Graphene Theme

Graphene Theme shows previous/next post links above the current post. It is a nice feature which makes it easier for your blog readers to read your previous or next post. But if the post titles are too long, they may span across two lines and give your site an uglier look.

Previous and Next Post links in Graphene Theme

Previous and Next Post links in Graphene Theme

It doesn’t look nice. Does it? So, I wrote a script to make previous and next post links look better. What it does is, it replaces the post titles with “Read Previous Post” and “Read Next Post“. But when you hover your cursor on them, it reveals the original post title. you can see the action in this page itself! Take your cursor on “Read Previous Post” and see what happens!

Okay, here is the script I wrote. If the jQuery is already loaded on your single posts, just go to Graphene Options –> Advanced –> Custom <head> tags and put the below code there.

<script type="text/javascript">
jQuery(document).ready(function($){
        var originalPrevious = $('.single .previous a').html();
 	var originalNext = $('.single .next-post a').html();
 
	$('.single .previous').ready(function(){
    		$('.single .previous a').text("Read Previous Post");
	});
 
	$('.single .next-post').ready(function(){
    		$('.single .next-post a').text("Read Next Post");
	});
 
	$('.single .previous').hover(function(){
    		$('.single .previous a').html(originalPrevious);
		}, function() {
    		$('.single .previous a').html("Read Previous Post");
	});
 
	$('.single .next-post').hover(function(){
    		$('.single .next-post a').html(originalNext);
		}, function() {
    		$('.single .next-post a').html("Read Next Post");
	});
});
</script>

You can also move the script to a separate .js file and enqueue it properly. I’ve explained enqueueing scripts on WordPress in this post. So, I’m not gonna repeat it here. Just follow that post. Note that if you’re going to move the script to a .js file, you have to remove <script type="text/javascript"> and </script> from the above script. If you ran into any issues, post your questions in the support forum.

zv7qrnb

Short Link:

About the author

Prasanna SP

Student | WordPress Dev | Tech Blogger | Interested in GNU/Linux, FOSS, PHP, Drupal, WordPress, Ethical hacking, Photography, Painting, Literature etc..

1 comment

  1. Safi Sumra

    Very Helpful Information, Thanks Prasanna Bhai.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please put your code snippet between <code> and </code>. Comment moderation is in use. Please do not submit your comment twice -- it will appear shortly.