Thursday, 21st Apr 2016

«

»

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.

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..

3 comments

  1. Safi Sumra

    Very Helpful Information, Thanks Prasanna Bhai.

  2. Kim L

    Is there a way to also change the color and sizing? I don’t know how to use css to do this.

  3. Rain

    Hi Prasanna.
    It’s 2016, first time I’m using WordPress to create my own site. I have some limited HTML knowledge but I have some idea of coding as I learned a pretty ok level VBA all on my own over the last few years. I love your Graphene website and I love all the information here. I’m going through your posts one by one to learn more. I already managed to do the “delayed drop down menu opening” as per the other link using the separate .js file method. With bit of trial and error I was also able to implement the same method to to do this next and forward link mod. Just if anyone else want’s, the below is the enqueueing script to put in the child functions.php file to execute the .js script. Not ssure if its 100% correct but it seems to be working. You may have to clear the cache after implementing it.

    function graphene_jquery_next_previous_buttons() {
        if ( ! is_admin() ){
    	wp_enqueue_script(
    		'jquery-next-previous-buttons',
    		get_stylesheet_directory_uri() . '/next-previous-buttons.js',
    		array('jquery')
    	);
        }
    }
    add_action('wp_enqueue_scripts', 'graphene_jquery_next_previous_buttons');

    Thanks again Prasanna.
    I simply love what you have done with this site and the help you have provided here. So much more to learn and so much more work to be done on my own site.

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.