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

Nathaniel Stephens
Nathaniel Stephens
6,071 Points
Posted by Nathaniel Stephens
Nathaniel Stephens
6,071 Points

Having trouble with Wordpress Theme Development enqueue style..

Hey everyone!

I am working on my first Wordpress Theme Project and following along with the Wordpress Theme Development course. I have ran into my first issue thought attempting to enqueue my styles into the main site. Any help would be greatly appreciated!

functions.php

<?php

function abstract_theme_styles() {

  wp_enqueue_style( 'foundation_css' , get_template_directory_uri() . 'css/foundation.css');
  wp_enqueue_style( 'foundation_min_css' , get_template_directory_uri() . 'css/foundation.min.css');
  wp_enqueue_style( 'main_css' , get_template_directory_uri() . '/style.css');

}

add_action('wp_enque_scripts', 'abstract_theme_styles');

function abstract_theme_js() {

  wp_enque_script('foundation_js', get_template_directory_uri(). 'js/vendor/foundation.js', array('jquery'), '', true);
  wp_enque_script('foundation_min_js', get_template_directory_uri(). 'js/vendor/foundation.min.js', array('jquery'), '', true);
  wp_enque_script('app_js', get_template_directory_uri(). 'js/app.js', array('jquery', 'foundation_js'), '', true);
}

add_action('wp_enque_scripts', 'abstract_theme_js');

?>

header.php

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php wp_title(); ?> </title>

    <?php wp_head();?>

  </head>
  <body>

<!-- Start Jumbotron -->
<div class="jumbotron">

<!-- Start Menu -->
    <div class="top-bar vertical medium-horizontal menu">

      <div class="top-bar-left">
        <h1 class="logo">abstract</h1>
      </div>

      <div class="top-bar-right">
        <ul class="menu" style="background-color: transparent;">
          <li class="top-btns">
            <a href="#" class="pull"><img src="img/menu-icon.png" class="menu-button"></a>
          </li>
        </ul>
      </div>

      <div id="nav" dislay="block;">
        <div id="nav-list" class="row expanded ">
          <div class="small-4 columns small-centered">
            <a href="#" class="pull"><p class="menu-items">home.</p></a>
            <p class="menu-items">studio.</p>
            <p class="menu-items">projects.</p>
            <a href="/contact.php"><p class="menu-items">contact.</p></a>
            <a href="#" class="pull"><img src="img/close-icon.png" class="close-button"></a>
          </div>
        </div>
      </div>

    </div>
<!-- End Menu-->
<!-- Start Content -->
<div class="jumbotron-content">

  <div class="row">
    <div class="small-8 small-centered columns">
      <h1 class="call-out">we are a cross disciplinary design studio.</h1>
    </div>
  </div>

  <div class="row expanded">
      <div class=" scroll-btn">
        <a href="#">
          <span class="mouse">
            <span>
            </span>
          </span>
        </a>
        <p></p>
      </div>
    </div>

</div>
<!-- EndContent -->
</div>
<!-- End Jumbotron -->

index.php

<?php get_header(); ?>

<h1>Main Content</h1>

<?php get_footer(); ?>

footer.php

<div class="row expanded blue-box">
  <div class="small-6 small-centered columns contact-content">
    <h1 class="contact-text">Get in Touch!</h1>
    <h3 class="contact-callout">Let's Create Something Amazing!</h3>
  </div>
</div>

<?php wp_footer(); ?>

    </body>
  </html>

5 Answers

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

What problem occurs exactly, Nathaniel?

Nathaniel Stephens
Nathaniel Stephens
6,071 Points
Nathaniel Stephens
Nathaniel Stephens
6,071 Points

Hey Dialte!

Thanks for the quick response.. The styles are not importing into the page, so when refreshing the page all I am getting is the html broken out into "Header, Main Content, Footer" un-styled, if that makes sense?

Link: http://69375f29.ngrok.io/

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

Hi Nathaniel,

Can you try removing all of the unnecessary spaces and see if it executes?

For example, swap:

wp_enqueue_style( 'foundation_css' , get_template_directory_uri() . 'css/foundation.css');

For:

wp_enqueue_style('foundation_css', get_template_directory_uri().'css/foundation.css');
Nathaniel Stephens
Nathaniel Stephens
6,071 Points
Nathaniel Stephens
Nathaniel Stephens
6,071 Points

Gave it a go and no such luck...

Nathaniel Stephens
Nathaniel Stephens
6,071 Points
Nathaniel Stephens
Nathaniel Stephens
6,071 Points

Looks like it was a simple spelling mistake! Thanks for the help!

I Dilate
I Dilate
3,983 Points
I Dilate
I Dilate
3,983 Points

Glad you found the problem Nathaniel, sorry I couldn't spot it!