WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] How to integrate jquery code into my blog

[Resolved] How to integrate jquery code into my blog

  • Hi All,

    I believe this is my first post here, so my apologies if this is in the wrong place.

    I just have what I think should be an easy question for all of you. I came across the following jquery code that’ll allow visitors to my site to navigate back and forth between posts using the left and right arrow keys on their keyboard. My site is set up for single post pages. Could someone please tell me what to do with this code to make it work? Thanks in advance!

    $(document).ready(function () {
    
        $(document).keydown(function(e) {
            var url = false;
            if (e.which == 37) {  // Left arrow key code
                url = $('.prev a').attr('href');
            }
            else if (e.which == 39) {  // Right arrow key code
                url = $('.next a').attr('href');
            }
            if (url) {
                window.location = url;
            }
        });
    
    });
Viewing 6 replies - 1 through 6 (of 6 total)
  • WPyogi

    @wpyogi

    Forum Moderator

    This is really Cool!

    Create a new folder in the themes folder: /js/
    Create a file in the new folder: jquery.navigate.js

    This works and was tested in a Twenty Eleven Child Theme, navigation classes .nav-previous and .nav-next

    Add this to jquery.navigate.js, note: the new start and ending lines!

    (function($){
    	$(document).ready(function () {
    		$(document).keydown(function(e) {
    			var url = false;
    			if (e.which == 37) {  // Left arrow key code
    				url = $('.nav-previous a').attr('href');
    			}
    			else if (e.which == 39) {  // Right arrow key code
    				url = $('.nav-next a').attr('href');
    			}
    			if (url) {
    				window.location = url;
    			}
    		});
    	});
    })(jQuery);

    In functions.php add!

    /* Add the Javascript */
    $path = get_stylesheet_directory_uri() .'/js/';
    wp_enqueue_script('post-navigation', $path.'jquery.navigate.js', array('jquery'));

    HTH

    If this is what you want, remember to mark the topic as Resolved!

    David

    You’re awesome, David! Thanks a million. Your instructions worked flawlessly.

    Resolved.

    It is a nice little bit of code.

    Can you set the topic status as resolved, there is a dropdown box on the right!

    This Topic is:
    [ Not Resolved ]
    ( Change )

    David

    Hmmm….when I made my last reply, I checked the “Mark this topic as resolved” checkbox below the reply window. Apparently that didn’t do it. I’ll try the dropdown on the side now. Apologies, and thanks again.

    I have written a post with this code, the twenty eleven child theme I tested with is a download in the post.

    It might help other readers of this topic, to add the code to their own themes.

    David

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] How to integrate jquery code into my blog’ is closed to new replies.
Skip to toolbar