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

Posted by Darcy Paterson
Darcy Paterson
Courses Plus Student 1,971 Points

Javascript linking won't work

Hello,

I am can't seem to get my javascript to link through the functions.php file like it's been shown in the Build a Wordpress Theme video. Here is my functions.php file.

<?php

// Load theme CSS

function theme_styles () {

    wp_enqueue_style ( 'normalize', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style ( 'grid', get_template_directory_uri() . '/css/grid.css' );
    wp_enqueue_style ( 'googlefonts', 'http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' );
    wp_enqueue_style ( 'main', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style ( 'social', get_template_directory_uri() . '/css/webfonts/ss_social.css' );


    wp_register_style ( 'flexslider', get_template_directory_uri() . '/css/flexslider.css' ); 
        if ( is_page ( 'home' ) ) {
            wp_enqueue_style ( 'flexslider' );
    }

}

// Load theme javscript

function theme_js() {
    wp_register_script ( 'flexslider', get_template_directory_uri() . '/js/flexslider.js', array( 'jquery', '', true) );    
        if ( is_page ( 'home' ) ) {
            wp_enqueue_script ( 'flexslider' );
    }
    wp_enqueue_script ( 'theme_js', get_template_directory_uri() . '/js/flexslider.js', array( 'jquery', '', true) );
}

add_action ( 'wp_enqueue_scripts', 'theme_js' );
add_action ( 'wp_enqueue_scripts', 'theme_styles');
add_theme_support( 'menus' );

?>

Any insight would be appreciated - thanks!

3 Answers

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

The first thing I notice is that the file path is exactly the same for the flexslider and theme_js enqueue. Probably not what you meant to do. Solving that will probably fix this.

Darcy Paterson
PLUS
Darcy Paterson
Courses Plus Student 1,971 Points
Darcy Paterson
Darcy Paterson
Courses Plus Student 1,971 Points

Tried that - still doesn't work.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Are you looking in the footer for your JS file? Or the head?

Darcy Paterson
Darcy Paterson
Courses Plus Student 1,971 Points

In the footer:

<!DOCTYPE html>

<html>

<head>
    <title>
        WordPress Portfolio        </title>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0">
    <meta name='robots' content='noindex,nofollow' />

<link rel="alternate" type="application/rss+xml" title="WordPress Portfolio &raquo; Home Comments Feed" href="http://localhost/darcypaterson/?feed=rss2&#038;page_id=4" /> <link rel='stylesheet' id='admin-bar-css' href='http://localhost/darcypaterson/wp-includes/css/admin-bar.min.css?ver=3.5.1' type='text/css' media='all' /> <link rel='stylesheet' id='normalize-css' href='http://localhost/darcypaterson/wp-content/themes/wpportfolio/css/normalize.css?ver=3.5.1' type='text/css' media='all' /> <link rel='stylesheet' id='grid-css' href='http://localhost/darcypaterson/wp-content/themes/wpportfolio/css/grid.css?ver=3.5.1' type='text/css' media='all' /> <link rel='stylesheet' id='googlefonts-css' href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy%3A400%2C400italic&#038;ver=3.5.1' type='text/css' media='all' /> <link rel='stylesheet' id='main-css' href='http://localhost/darcypaterson/wp-content/themes/wpportfolio/style.css?ver=3.5.1' type='text/css' media='all' /> <link rel='stylesheet' id='social-css' href='http://localhost/darcypaterson/wp-content/themes/wpportfolio/css/webfonts/ss_social.css?ver=3.5.1' type='text/css' media='all' /> <link rel='stylesheet' id='flexslider-css' href='http://localhost/darcypaterson/wp-content/themes/wpportfolio/css/flexslider.css?ver=3.5.1' type='text/css' media='all' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/darcypaterson/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/darcypaterson/wp-includes/wlwmanifest.xml" /> <link rel='prev' title='Sample Page' href='http://localhost/darcypaterson/?page_id=2' /> <link rel='next' title='About' href='http://localhost/darcypaterson/?page_id=5' /> <meta name="generator" content="WordPress 3.5.1" /> <link rel='canonical' href='http://localhost/darcypaterson/' /> <style type="text/css" media="print">#wpadminbar { display:none; }</style> <style type="text/css" media="screen"> html { margin-top: 28px !important; } * html body { margin-top: 28px !important; } </style> </head>

<body>

    <div class="container clearfix">
        <header>
            <div class="grid_12 omega none">
                <hgroup>
                    <h1><a href="index.html">Allison Grayce</a></h1>
                    <h2>Web Designer, Teacher, & Writer</h2>
                </hgroup>
            </div>
            <div class="grid_12 omega">
                <nav>
                    <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-28"><a href="http://localhost/darcypaterson/">Home</a></li>

<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://localhost/darcypaterson/?page_id=5">About</a></li> <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost/darcypaterson/?page_id=7">Blog</a></li> <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost/darcypaterson/?page_id=8">Work</a></li> <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/darcypaterson/?page_id=10">Contact</a></li> </ul></div> </nav> </div> </header>

<p>This in the front page.</p>

<h3>Home</h3> <hr />

        <footer>
        <div class="grid_12 omega clearfix">
            <div id="twitter" class="grid_4">
                <h5>Twitter</h5>
                <p>We're accepting submissions for the next episode of Treeviews! Submit your website/app for feedback! <a href="#">trhou.se/treeviews</a></p>

                <a href="#" class="post-link">Follow me on Twitter &rarr;</a>
            </div>
            <div id="dribbble" class="grid_4">
                <h5>Dribbble</h5>
                <p>Dribbble Shots</p>
            </div>
            <div id="treehouse" class="grid_4 omega">
                <h5>Treehouse</h5>
                <p>Treehouse Badges</p>
            </div>
        </div>
                    <div id="copyright">
                <p>&copy; Copyright 2013 <a href="#">Treehouse</a>. All Rights Reserved.</p>
            <div class="grid_12 ss-icon omega">
                    <a href="#">&#xF610;</a>
                    <a href="#">&#xF611;</a>
                    <a href="#">&#xF612;</a>
                    <a href="#">&#xF613;</a>
                    <a href="#">&#xF660;</a>
                    <a href="#">&#x2709;</a>
            </div>
            </div>
        </footer>
        <script type='text/javascript' src='http://localhost/darcypaterson/wp-includes/js/admin-bar.min.js?ver=3.5.1'></script>
<script type="text/javascript">
    (function() {
        var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');

        request = true;

        b[c] = b[c].replace( rcs, ' ' );
        b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    }());
</script>
        <div id="wpadminbar" class="nojq nojs" role="navigation">
        <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
        <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
            <ul id="wp-admin-bar-root-default" class="ab-top-menu">
    <li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://localhost/darcypaterson/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
    <li id="wp-admin-bar-about"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/about.php">About WordPress</a>        </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
    <li id="wp-admin-bar-wporg"><a class="ab-item"  href="http://wordpress.org/">WordPress.org</a>      </li>
    <li id="wp-admin-bar-documentation"><a class="ab-item"  href="http://codex.wordpress.org/">Documentation</a>        </li>
    <li id="wp-admin-bar-support-forums"><a class="ab-item"  href="http://wordpress.org/support/">Support Forums</a>        </li>
    <li id="wp-admin-bar-feedback"><a class="ab-item"  href="http://wordpress.org/support/forum/requests-and-feedback">Feedback</a>     </li></ul></div>        </li>
    <li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://localhost/darcypaterson/wp-admin/">WordPress Portfolio</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
    <li id="wp-admin-bar-dashboard"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/">Dashboard</a>       </li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
    <li id="wp-admin-bar-themes"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/themes.php">Themes</a>       </li>
    <li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/customize.php?url=http%3A%2F%2Flocalhost%2Fdarcypaterson%2F">Customize</a>       </li>
    <li id="wp-admin-bar-menus"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/nav-menus.php">Menus</a>      </li></ul></div>        </li>
    <li id="wp-admin-bar-updates"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/update-core.php" title="1 Plugin Update, 2 Theme Updates"><span class="ab-icon"></span><span class="ab-label">3</span><span class="screen-reader-text">1 Plugin Update, 2 Theme Updates</span></a>      </li>
    <li id="wp-admin-bar-comments"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a>     </li>
    <li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://localhost/darcypaterson/wp-admin/post-new.php" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
    <li id="wp-admin-bar-new-post"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/post-new.php">Post</a>     </li>
    <li id="wp-admin-bar-new-media"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/media-new.php">Media</a>      </li>
    <li id="wp-admin-bar-new-page"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/post-new.php?post_type=page">Page</a>      </li>
    <li id="wp-admin-bar-new-work"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/post-new.php?post_type=work">Project</a>       </li>
    <li id="wp-admin-bar-new-testimonials"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/post-new.php?post_type=testimonials">testimonial</a>       </li>
    <li id="wp-admin-bar-new-user"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/user-new.php">User</a>     </li></ul></div>        </li>
    <li id="wp-admin-bar-edit"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/post.php?post=4&#038;action=edit">Edit Page</a>        </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
    <li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://localhost/darcypaterson/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><input type="submit" class="adminbar-button" value="Search"/></form></div>        </li>
    <li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item"  aria-haspopup="true" href="http://localhost/darcypaterson/wp-admin/profile.php" title="My Account">Howdy, darcypaterson<img alt='' src='http://0.gravatar.com/avatar/c2d26a4134446a74fae102518bd6a2a8?s=16&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&amp;r=G' class='avatar avatar-16 photo' height='16' width='16' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
    <li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://localhost/darcypaterson/wp-admin/profile.php"><img alt='' src='http://0.gravatar.com/avatar/c2d26a4134446a74fae102518bd6a2a8?s=64&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>darcypaterson</span></a>     </li>
    <li id="wp-admin-bar-edit-profile"><a class="ab-item"  href="http://localhost/darcypaterson/wp-admin/profile.php">Edit My Profile</a>       </li>
    <li id="wp-admin-bar-logout"><a class="ab-item"  href="http://localhost/darcypaterson/wp-login.php?action=logout&#038;_wpnonce=a17f633135">Log Out</a>      </li></ul></div>        </li></ul>          </div>
        <a class="screen-reader-shortcut" href="http://localhost/darcypaterson/wp-login.php?action=logout&#038;_wpnonce=a17f633135">Log Out</a>
    </div>

        </body>

</html>

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

What I was trying to ask was when you were viewing your page source, where you looking for your JS files to be in the footer instead of the head, because that is where they will be.

In your footer.php file make sure you have <?php wp_footer(); ?> because wordpress is going to use that hook to put your enqueued scripts there.