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

PHP How to Build a WordPress Theme Extending WordPress Template Functionality Finishing the Homepage Template

David Klotz
David Klotz
19,659 Points
Posted by David Klotz
David Klotz
19,659 Points

flexslider not working in wordpress

Everything has been working great for me in this lesson until I got to flexslider. I've followed step by step, and the slides remain stacked vertically as seen in the video. One difference between what I'm seeing and what is in the video is that the background colors for each slide are not the correct height, and are stacked at the top of the slider (maybe 30-40px tall) and they each have their li style showing. I checked the javascript console and got the following error:

Uncaught SyntaxError: Unexpected end of input

after changing my theme js to:

jQuery(document.ready(function($) { $('.flexslider').flexslider(); });

i receive the error that is in the video: Uncaught SyntaxError: Unexpected token ;

Even when i downloaded the project files and replaced my files with them, I experienced the same issue.

here is a link to a screenshot of my page:

https://dl.dropboxusercontent.com/u/97609687/Screen%20Shot%202015-01-08%20at%209.57.43%20AM.png

Any help on resolving this issue would be much appreciated! Thank you!

1 Answer

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

WordPress, and most content management systems, require that you use jQuery in no-conflict mode. This means you are not allowed to use the $ to as a short hand for jQuery, because other JS libraries also use "$" as a shorthand for their library. One way to get around this is to wrap all you jQuery in a closure, and pass jQuery into the closure as an argument. Try this:

(function($){
    $(document).ready(function(){
        //Put all the jQuery you want to use here
         $('.flexslider').flexslider();
    });
})(jQuery);
David Klotz
David Klotz
19,659 Points
David Klotz
David Klotz
19,659 Points

Thanks for the tip I just gave it a try, but still had the same issue. However I am noticing that I may have a problem with my local wordpress development, having issues with page refreshes. I'm going to try to upload to my ftp later and see if I can get it to work on there.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

You are getting the same error, "Uncaught SyntaxError: Unexpected token ;"? Could you post your theme.js file and your functions.php?

David Klotz
David Klotz
19,659 Points
David Klotz
David Klotz
19,659 Points

Getting "Uncaught TypeError: undefined is not a function"

theme.js file:

(function($){
    $(document).ready(function(){
        //Put all the jQuery you want to use here
         $('.flexslider').flexslider();
    });
})(jQuery);

and functions.php:

<?php

// Load the 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' );
    }

}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

// Load the Theme JS
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/theme.js', array('jquery'), '', true );


}
add_action( 'wp_enqueue_scripts', 'theme_js' );


// Enable custom menus
add_theme_support( 'menus' );


// Function for creating Widgets
function create_widget($name, $id, $description) {

    register_sidebar(array(
        'name' => __( $name ),   
        'id' => $id, 
        'description' => __( $description ),
        'before_widget' => ' ',
        'after_widget' => ' ',
        'before_title' => '<h5>',
        'after_title' => '</h5>'
    ));

}

// Create widgets in the footer
create_widget("Left Footer", "footer_left", "Displays in the left of the footer");
create_widget("Middle Footer", "footer_middle", "Displays in the middle of the footer");
create_widget("Right Footer", "footer_right", "Displays in the right of the footer");



?>
Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Check you console and make sure that jQuery is being sent to your browser.

David Klotz
David Klotz
19,659 Points
David Klotz
David Klotz
19,659 Points

Don't know why I didn't think of that Andrew.

I think I see where the problem is now:

the following is in the head:

<script type='text/javascript' src='http://localhost:8888/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

the following is in the footer:

<script type='text/javascript' src='http://localhost:8888/wp-includes/js/admin-bar.min.js?ver=4.1'></script>
<script type='text/javascript' src='http://localhost:8888/wp-content/themes/wpportfolio/js/theme.js?ver=4.1'></script>

HOWEVER...... "flexslider.js" is not showing up anywhere. The file is in the "js" folder with "theme.js" and is named properly. I'm at a loss as to why it is not sending "flexslider.js".

David Klotz
David Klotz
19,659 Points
David Klotz
David Klotz
19,659 Points

So I added flexslider.js and flexslider.css using "wp_enqueue_script" and "wp_enqueue_style" instead of "wp_register_script" and it is now loading and the slider works. So it looks like there is an issue with my wp_register_script in conjunction with the page "home".

I'll see if I can figure out that issue when I have some time! Thanks for your help in troubleshooting this Andrew!

Jenny Lane
Jenny Lane
6,468 Points
Jenny Lane
Jenny Lane
6,468 Points

Yay! This comment just saved me :)