Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Live site.

I've decided to incorporate javascript in my new theme; this is my first time doing so and have pieced together what I've down with help of blog posts and forums. I have the javascript within the tag instead of in functions.php. I've noticed the site ceases to load after the navigation which is controlled by javascript which leads me to believe that is where the problem is, I just don't know exactly how to pinpoint exactly what's causing the trouble. Any help sorting this out is greatly appreciate.

<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
        <meta name="generator" content="Wordpress <?php bloginfo('version'); ?>" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
        <link rel="pingback" href="<?php bloginfo('pingback url'); ?>" />
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
        <link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
        <?php wp_head(); ?>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>
            $(window).load(function(event) {
                $('#Nav a').click(function() {
                    $('#Nav li').removeClass();
                    $(this).parent().addClass("current");                                      
                });
        </script>
        <script type="text/javascript">
                var _gaq = _gaq || [];
                _gaq.push(['_setAccount', 'UA-32783537-1']);
                _gaq.push(['_trackPageview']);

                (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
                })();
        </script>
        <script>
                $(document).ready(function() {
                  function filterPath(string) {
                  return string
                    .replace(/^\//,'')
                    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
                    .replace(/\/$/,'');
                  }
                  var locationPath = filterPath(location.pathname);
                  var scrollElem = scrollableElement('html', 'body');

                  $('a[href*=#]').each(function() {
                    var thisPath = filterPath(this.pathname) || locationPath;
                    if (  locationPath == thisPath
                    && (location.hostname == this.hostname || !this.hostname)
                    && this.hash.replace(/#/,'') ) {
                      var $target = $(this.hash), target = this.hash;
                      if (target) {
                        var targetOffset = $target.offset().top;
                        $(this).click(function(event) {
                          event.preventDefault();
                          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
                            location.hash = target;
                          });
                        });
                      }
                    }
                  });

                  // use the first element that is "scrollable"
                  function scrollableElement(els) {
                    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
                      var el = arguments[i],
                          $scrollElement = $(el);
                      if ($scrollElement.scrollTop()> 0) {
                        return el;
                      } else {
                        $scrollElement.scrollTop(1);
                        var isScrollable = $scrollElement.scrollTop()> 0;
                        $scrollElement.scrollTop(0);
                        if (isScrollable) {
                          return el;
                        }
                      }
                    }
                    return [];
                  }

                });
        </script>
        <script>
                $(function() {
                    $.fn.scrollBottom = function() {
                        return $(document).height() - this.scrollTop() - this.height();
                    };

                    var $el = $('#nav>div');
                    var $window = $(window);
                    var top = $el.parent().position().top;

                    $window.bind("scroll resize", function() {
                        var gap = $window.height() - $el.height() - 10;
                        var visibleFoot = 340 - $window.scrollBottom();
                        var scrollTop = $window.scrollTop()

                        if (scrollTop < top + 10) {
                            $el.css({
                                top: (top - scrollTop) + "px",
                                bottom: "auto"
                            });
                        } else if (visibleFoot > gap) {
                            $el.css({
                                top: "auto",
                                bottom: visibleFoot + "px"
                            });
                        } else {
                            $el.css({
                                top: 0,
                                bottom: "auto"
                            });
                        }
                    }).scroll();
                });
        </script>
</head>
share|improve this question
    
Please refer to this tutorial mojowill.com/developer/… to see how to use Javascript with WordPress correctly. –  Box Mar 1 '13 at 3:10

1 Answer 1

  1. Start by putting your JS in an appropriate .js file in your theme directory.
  2. Use the wp_enqueue_scripts hook (this is where you will enqueue/load any of your custom javascripts).
  3. Within that hook, use wp_enqueue_script() to load your script(s).

Example:

add_action( 'wp_enqueue_scripts', 'enqueue_my_stuff' );
function enqueue_my_stuff () {
    wp_enqueue_script('slug_for_your_script' , get_template_directory_uri() . '/path/to/yourscripts.js', array('jquery') );
}
share|improve this answer
    
Thanks, Matt. Am I understanding you correctly in that for each function I have(there are 4) need their own .js file? function1.js, function2.js, etc? Sorry if this is an exceptionally basic question, as I mentioned in my OP, I'm kind of figuring this out as I go. –  user1255049 Mar 1 '13 at 4:27
    
Not necessarily. You can put all your JS in one file, you like. If you want to break up your JS into separate files for some reason or another, then yes, you would need to use one wp_enqueue_script() for each. The last argument allows you define prerequisites (for instance, my example will make sure jquery is loaded first). –  Matt Van Andel Mar 2 '13 at 19:01

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.