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

Linking JavaScript Issue (White Screen of Death)

Hey guys

So I'm currently doing How to Build a WordPress Theme - Linking JavaScript and I have come across a very annoying and frustrating issue that is preventing me from continuing on.

Basically the issue is the wpportfolio theme and /wp-admin have disappeared and have been replaced with white from when I entered in the code from the video, and yes I followed and triple checked the code with the video and it is pretty much word for word, I commented the JavaScript attachments in the functions.php out and it works again so I'm guessing that it is being caused from something within the *function theme_js() actions.

functions.php

<?php

    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' );
    }
}
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' );
add_action( 'wp_enqueue_scripts', 'theme_styles' );

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

?>

For safe measure I have also included the theme.js script

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

I'm pretty sure I may need a second pair of knowledgable eyes on this one and any help is greatly appreciated!

Thanks in advanced

Stu :)

8 Answers

Matt Campbell
Matt Campbell
9,767 Points

You get any errors in the console when you've got the script running?

One thing that may be worth a try is to get hold of jQuery Updater plugin. It can solve a lot of problems and help with fault finding.

Dave Cannon
Dave Cannon
3,932 Points

and for some humor...When you say my code is "pretty much" word for word..Uhhhhhhhh...you know :-) Glad it's joyous now !

Matt Campbell
Matt Campbell
9,767 Points

Where's your theme_styles function?

Dang it, I forgot to paste that one into the code section, was in a bit of a fluster when I posted this up, here's the theme_styles function within functions.php

function theme_styles() {
Matt Campbell
Matt Campbell
9,767 Points

Cool. So theme_styles is currently an empty function? Because it's not closed properly. Have you any blank lines after the closing php tag in your functions.php file? White space after closing php tag causes weird issues.

Hey Matthew,

What I have done to stop any confusion I'll re-post everything that I have currently in the functions.php file.

<?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' );
}

}

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' );


add_action( 'wp_enqueue_scripts', 'theme_styles' );

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

?>

I have noticed that when I comment out the whole theme_js() including add_action( 'wp_enqueue_scripts', 'theme_js' ); block it works again, so I'm guessing that the issue lays within this function block (if that makes sense).

I have removed all line breaks from the file and there is no change, same issue.

I hope I'm making sense :)

Awesome, I might give that a go, I am to update WordPress also. I'll have a go a bit later on and I'll get back to you on how I go :)

Matt Campbell
Matt Campbell
9,767 Points

Guessing you got it all up and running Stuart Cowley form your upvote?

There's an issue since jQuery UI 2.0 has been released in that WP sees the .0 instead of .9 and thinks it's an older version than it actually is. That's something I've read anyway.

Another good idea is to deregister WP's default jQuery libraries, register Google's online library and then enqueue as you would. Keeps it 100% up to date and saves using another plugin.

Hey Mattthew,

So I finally figured out what was wrong within the functions.php file and it was a stupid error on my behalf. I turned on WP_DEBUG in the wp-config.php file and as soon as I ran the template i pointed me straight to the error.

What happened was I declared );); of course this wasn't going to work thus crashing the template.

Thanks for you help anyway. I have made a note of the jQuery issue in-case something odd happens again.