Functions file does not seem to help load the page correctly. Looks plain with no styling applied...

Question

I'm having trouble loading the page correctly, the code appears to be correct in relation to the video tutorial?.

Can someone help view the code and provide some pointers to get me back on track?? ta

If I add the code below I cannot load the page altogether...

<?php

function wpt_theme_styles() {

    wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundations.css');
    wp_enqueue_style( 'normalize.css', get_template_directory_uri() . '/css/normalize.css');
    wp_enqueue_style( 'normalize.css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic');
    wp_enqueue_style( 'main_css', get_template_directory_uri() . 
        '/style.css');




}

    add_action('wp_enqueue_scripts', 'wpt_theme_styles' );

    function wpt_theme_js() {

        wp_enqueue_style( 'modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );
        wp_enqueue_style( 'foundation_js', get_template_directory_uri() . '/js/foundation.js', array('jquery)', '', true );
            wp_enqueue_style( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery, 'foundation_js'), '', true );
    }

    add_action( 'wp_enqueue_scripts', 'wpt_theme_js' );

?>

However if I add the change below we can load but with no styling applied to the page..

<?php

function wpt_theme_styles() {

    wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundations.css');
    wp_enqueue_style( 'normalize.css', get_template_directory_uri() . '/css/normalize.css');
    wp_enqueue_style( 'normalize.css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic');
    wp_enqueue_style( 'main_css', get_template_directory_uri() . 
        '/style.css');




}

add_action( 'wp_enqueue_scripts', 'deregister_script' );
function deregister_script() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', ('//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'), false, '', true );
}

    add_action( 'wp_enqueue_scripts', 'wpt_theme_js' );

?>

Any advice would be great?!

Thanks, NB

Answer 1 · 2015-08-14T04:30:54Z

August 14, 2015 4:30am

@Nathan Barlcay

You've hooked 'wpt_theme_styles' twice. You didn't hook 'wpt_theme_js' onto 'wp_enqueue_scripts'.

Also, inside the wpt_theme_js() function, you're calling wp_enqueue_style() instead of wp_enqueue_script()

Answer 2 · 2015-08-14T15:52:42Z

August 14, 2015 3:52pm

This is what I'm seeing from the final-theme project downloads:

<?php

function wpt_theme_styles() {

    wp_enqueue_style( 'foundation_css', get_template_directory_uri() . '/css/foundation.css' );
    //wp_enqueue_style( 'normalize_css', get_template_directory_uri() . '/css/normalize.css' );
    wp_enqueue_style( 'googlefont_css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic' );
    wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

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

function wpt_theme_js() {

    wp_enqueue_script( 'modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false );  
    wp_enqueue_script( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '', true );
    wp_enqueue_script( 'main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true );        

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

?>

Answer 3 · 2015-08-10T18:00:54Z

August 10, 2015 6:00pm

Couple of things to check:

You have a css folder with the files referenced
You have a style.css with styles in it

When you open your source code, what is the URL to the style.css file? Does this file load? Does the URL look correct?

Answer 4 · 2015-08-10T18:38:47Z

August 10, 2015 6:38pm

If I follow your lead here it appears the style.css file has a url that find a path through wp-includes and not wp-content. If this is the issue what would be the best solution to remedy this??

Any help would be greatly appreciated?

Thanks NB

Answer 5 · 2015-08-10T19:08:51Z

August 10, 2015 7:08pm

Hmmm, from what you posted it does not look like the style.css is in the source code at all.

What happens when you update your functions.php file to just this:

<?php
function wpt_theme_styles() {

    wp_enqueue_style( 'main_css', get_template_directory_uri() .  '/style.css');

}
add_action('wp_enqueue_scripts', 'wpt_theme_styles' );
?>

Then do you see a link to the style.css file in your source code?

What if you update your code to the following?

<?php
function wpt_theme_styles() {

    wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() .  '/style.css');

}
add_action('wp_enqueue_scripts', 'wpt_theme_styles' );
?>

Answer 6 · 2015-08-12T00:13:16Z

August 12, 2015 12:13am

I'm still having an issue running this script below:-

    ```wp_enqueue_style( 'foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery)', '', true );```

Seems to be part of the same problem and looking like a continuation of the original issue in this question?. Any ideas??

Thanks, NB

Answer 7 · 2015-08-12T23:39:50Z

August 12, 2015 11:39pm

At the moment I'm struggling to get the "The wp_nav_menu Function" to work and the JavaScript doesn't seem to be loading for me. I can get the page to load without the static template..

function wpt_theme_styles() {


    wp_enqueue_style( 'foundation_css', get_stylesheet_directory_uri() . '/css/foundation.css');
    wp_enqueue_style( 'googlefont.css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic');
    wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() .  '/style.css');

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

function wpt_theme_js() {


        wp_enqueue_style( 'modernizr_js', get_stylesheet_directory_uri() . '/js/modernizr.js', '', '', false );

    }

    add_action('wp_enqueue_scripts', 'wpt_theme_styles');


?>```

However I get a series of faults like below>>>
```[Warning] Invalid CSS property declaration at: * (foundation.css, line 78, 110, 130, 140, 1518, 2182, 2807, 3023 )```

 but when I use this code I get an error>>>

```<?php
function wpt_theme_styles() {


    wp_enqueue_style( 'foundation_css', get_stylesheet_directory_uri() . '/css/foundation.css');
    wp_enqueue_style( 'googlefont.css', 'http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic');
    wp_enqueue_style( 'main_css', get_stylesheet_directory_uri() .  '/style.css');

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

function wpt_theme_js() {


        wp_enqueue_style( 'modernizr_js', get_stylesheet_directory_uri() . '/js/modernizr.js', '', '', false );
        wp_enqueue_style( 'foundation_js', get_stylesheet_directory_uri() . '/js/foundation.min.js', array('jquery)', '', true );
        wp_enqueue_style( 'main_js', get_stylesheet_directory_uri() . '/js/app.js', array('jquery, 'foundation_js')', '', true );
    }

    add_action('wp_enqueue_scripts', 'wpt_theme_styles');


?>```

When checking the debugger for errors I get this message>>>

```[Error] Failed to load resource: the server responded with a status of 500 (Internal Server Error) (contact-us, line 0)```

I've a mac pro, MAMP, MySQL setup. What is the best route around this issue??

Answer 8 · 2015-08-13T16:15:14Z

August 13, 2015 4:15pm

Try switching the JS code to use

get_template_directory_uri()

Answer 9 · 2015-08-13T16:35:35Z

August 13, 2015 4:35pm

No that didn't work but wasn't this the code removed originally and replaced by your suggestion?! As indicated in this thread, we are struggling to move forward with the rest of the course as the js files don't seem to be loading.

Same question no answer as yet. I also note that your previous comments did not load onto this page which is why I made contact directly. It seems I get a prompt response that way and unable to get one via this forum. Is there an issue with the forum system??

Either way I realise you are not around tomorrow and I would really like to press on with the rest of your course as I have a project to start asap and it would be really helpful if you could help troubleshoot this with me.

I await your response...

Regards, NB

Answer 10 · 2015-08-13T16:41:30Z

August 13, 2015 4:41pm

Would you by chance be able to post this up somewhere could take a look at?

Answer 11 · 2015-08-14T15:50:22Z

August 14, 2015 3:50pm

Those look like correct fixes xenon thong

Answer 12 · 2015-09-14T14:30:51Z

September 14, 2015 2:30pm

my css doesnt work too :/

Welcome to the Treehouse Community

Looking to learn something new?

Nathan Barlcay

Nathan Barlcay

Functions file does not seem to help load the page correctly. Looks plain with no styling applied...

12 Answers

xenon thong

xenon thong

Zac Gordon

Zac Gordon

Zac Gordon

Zac Gordon

Nathan Barlcay

Nathan Barlcay

Zac Gordon

Zac Gordon

Nathan Barlcay

Nathan Barlcay

Nathan Barlcay

Nathan Barlcay

xenon thong

xenon thong

Zac Gordon

Zac Gordon

Nathan Barlcay

Nathan Barlcay

Zac Gordon

Zac Gordon

Zac Gordon

Zac Gordon

Karim Elkharraz

Karim Elkharraz

xenon thong

xenon thong