I'm getting User agent stylesheet instead of the ones I've linked through PHP

Question

For some reason it links me to the User agent stylesheet rather than the one I've linked to in my functions.php file.

The linking in the header also looks completely wrong when I check it in the browser.

My functions php file:

<?php
function cph_theme_style() {

    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_enqueu_style', 'cph_theme_style' );

function cph_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 );    
    //wp_enqueue_script( 'bootstrap_js', get_stylesheet_directory_uri() . '/js/bootstrap.js', array( 'jquery' ), '', true );
}

add_action( 'wp_enqueue_script', 'cph_theme_js' );
?>

Browser output I get in the head:

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>

    <meta name='robots' content='noindex,follow' />
        <script type="text/javascript">
            window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/mixelation.net\/websites\/sufbeta\/wordpress\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.3.1"}};
            !function(a,b,c){function d(a){var c=b.createElement("canvas"),d=c.getContext&&c.getContext("2d");return d&&d.fillText?(d.textBaseline="top",d.font="600 32px Arial","flag"===a?(d.fillText(String.fromCharCode(55356,56812,55356,56807),0,0),c.toDataURL().length>3e3):(d.fillText(String.fromCharCode(55357,56835),0,0),0!==d.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
        </script>
        <style type="text/css">
img.wp-smiley,
img.emoji {
    display: inline !important;
    border: none !important;
    box-shadow: none !important;
    height: 1em !important;
    width: 1em !important;
    margin: 0 .07em !important;
    vertical-align: -0.1em !important;
    background: none !important;
    padding: 0 !important;
}
</style>
<link rel='stylesheet' id='open-sans-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&#038;subset=latin%2Clatin-ext&#038;ver=4.3.1' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css'  href='http://mixelation.net/websites/sufbeta/wordpress/wp-includes/css/dashicons.min.css?ver=4.3.1' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://mixelation.net/websites/sufbeta/wordpress/wp-includes/css/admin-bar.min.css?ver=4.3.1' type='text/css' media='all' />
<link rel='stylesheet' id='woocommerce-layout-css'  href='//mixelation.net/websites/sufbeta/wordpress/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=2.4.7' type='text/css' media='all' />
<link rel='stylesheet' id='woocommerce-smallscreen-css'  href='//mixelation.net/websites/sufbeta/wordpress/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=2.4.7' type='text/css' media='only screen and (max-width: 768px)' />
<link rel='stylesheet' id='woocommerce-general-css'  href='//mixelation.net/websites/sufbeta/wordpress/wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=2.4.7' type='text/css' media='all' />
<script type='text/javascript' src='http://mixelation.net/websites/sufbeta/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<script type='text/javascript' src='http://mixelation.net/websites/sufbeta/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://mixelation.net/websites/sufbeta/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://mixelation.net/websites/sufbeta/wordpress/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 4.3.1" />
<meta name="generator" content="WooCommerce 2.4.7" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>
  </head>

It looks completely wrong right?

Answer 1 · 2015-10-07T22:17:31Z

October 7, 2015 10:17pm

Hi Lola,

I've just formatted the code in your question so it's a little easier to read in the post.

It looks to be the following line which will need to change from:

add_action( 'wp_enqueu_style', 'cph_theme_style' );

to:

add_action( 'wp_enqueue_scripts', 'cph_theme_style' );

You can find the reference on wp_enqueue_scripts in the WP Codex if you would like any further info.

Hope that helps :)

-Rich

Welcome to the Treehouse Community

Looking to learn something new?

Lola Jahn

Lola Jahn

I'm getting User agent stylesheet instead of the ones I've linked through PHP

1 Answer

Rich Bagley

Rich Bagley