Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

charlotte Hanly
charlotte Hanly
1,956 Points
Posted by charlotte Hanly
charlotte Hanly
1,956 Points

Moving JS from footer to functions.php on Mamp

I am building a onepager site that has a menu that gradually scrolls down the page when you click the navigation. At the moment the links to my javascript are currently in the footer of my site like so:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.min.js"></script>

<!-- Plugin JavaScript -->
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/classie.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/cbpAnimatedHeader.js"></script>

<!-- Contact Form JavaScript -->
<script src="<?php bloginfo('template_directory'); ?>/js/jqBootstrapValidation.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/contact_me.js"></script>

<!-- Custom Theme JavaScript -->
<script src="<?php bloginfo('template_directory'); ?>/js/agency.js"></script>

<script src="<?php bloginfo('template_directory'); ?>/js/custom.js"></script>

However, I want to move them to my functions.php files. I have added the following code into my functions.php file:

<?php 
function wpbootstrap_scripts_with_jquery()
{// Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) );
    // For either a plugin or a theme, you can then enqueue the script:
    wp_register_script( 'easinging-menu', get_stylesheet_directory_uri() . '/js/jquery.easing.min.js', array( 'jquery' ), true);
    wp_register_script( 'cbpAnimatedHeader', get_stylesheet_directory_uri() . '/js/cbpAnimatedHeader.js', array( 'jquery' ), true);
    wp_register_script( 'agency', get_stylesheet_directory_uri() . '/js/agency.js', array( 'jquery' ), true);
    wp_register_script( 'jqBootstrapValidation', get_stylesheet_directory_uri() . '/js/jqBootstrapValidation.js', array( 'jquery' ), true);
    wp_register_script( 'classie', get_stylesheet_directory_uri() . '/js/classie.js', array( 'jquery' ), true)

       wp_enqueue_script( 'custom-script' );
    wp_enqueue_script( 'easinging-menu' );
    wp_enqueue_script( 'cbpAnimatedHeader' );
    wp_enqueue_script( 'agency' );
    wp_enqueue_script( 'jqBootstrapValidation' );
    wp_enqueue_script( 'classie' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );

?>

However so far only the bootstrap.min file is actually working. Can you help?

2 Answers

Mark Truitt
Mark Truitt
17,230 Points
Mark Truitt
Mark Truitt
17,230 Points

Hi Charlotte,

I noticed at the end of 

<?php
wp_register_script( 'classie',  get_stylesheet_directory_uri() . '/js/classie.js', array( 'jquery' ), true);
?>

It is missing ;

You are also using get_stylesheet_directory_uri() function. I would assume as well that could be a possible issue depending on how you are setting this all up. As the one that is working uses get_template_directory_uri().

Mark Truitt
Mark Truitt
17,230 Points

Hi Charlotte,

I would assume you are working in a theme locally or on a site? If so would you mind providing me with a copy of it and I'll take a look. Can email me directly if you want matruitt30@gmail.com

charlotte Hanly
charlotte Hanly
1,956 Points
charlotte Hanly
charlotte Hanly
1,956 Points

Hi Mark,

Thank you for your response. I made those changes but I didn't see much change.

The only way I got it all to work was to put these two lines of code in the footer.php:

<script src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/agency.js"></script>

and to put this in the fucntions.php file:

function wpbootstrap_scripts_with_jquery()
{

    // Register the script like this for a theme:
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ) ); /*working*/
    wp_register_script( 'cbpAnimatedHeader', get_template_directory_uri() . '/js/cbpAnimatedHeader.js', array( 'jquery' ), '', true); /*working*/
    wp_register_script( 'agency', get_template_directory_uri() . '/js/agency.js', array( 'jquery', 'custom-script' ), '', false);
    wp_register_script( 'classie', get_template_directory_uri() . '/js/classie.js', array( 'jquery' , 'custom-script', ), '', true); /*working along with animated header*/
    wp_register_script( 'easing', get_template_directory_uri() . '/js/jquery.easing.min.js', array( 'jquery', 'custom-script' , 'agency' ), '', true);

    wp_enqueue_script( 'custom-script' );
    wp_enqueue_script( 'cbpAnimatedHeader' );
    wp_enqueue_script( 'agency' );
    wp_enqueue_script( 'classie' );
    wp_enqueue_script( 'easing' );
}
add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' );