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

Daniel Hernandez
Daniel Hernandez
13,437 Points
Posted by Daniel Hernandez
Daniel Hernandez
13,437 Points

Style.css is not working

I'm working on the design custom theme for WordPress course and I don't know why but my style.css file is not applying the styles to the page. This is what I have in functions.php 

<?php

function wpt_theme_styles() {
    wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'
    );
    wp_enqueue_style( 'bootstrap_css', 'https://fonts.googleapis.com/css?family=Roboto'
      );
      wp_enqueue_style( 'main_css', get_template_directory_uri() . 'style.css'  );

}

add_action(' wp_enqueue_scripts','wpt_theme_styles');

 ?>

Any help would be greatly appreciated.

Daniel Hernandez
Daniel Hernandez
13,437 Points
Daniel Hernandez
Daniel Hernandez
13,437 Points

Here is my index file

<?php  get_header(); ?>

<!--    jumbotron image-->
<header class="jumbotron jtron img-fluid">

    </header>

<!--    main container-->
    <button type="button" class="btn btn-info wide-btn">Click here for a free quote</button>

    <div class="container-fluid">


<!--        1st sub container-->
        <div class="container mb-4">
        <p class="pg1">DV Electric is a family-owned company from the Bay-Area that serves the electrical needs of the local community.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

        <button type="button" class="btn btn-info abt-btn ">About Page</button>


    </div>

<?php get_footer(); ?>

And here is my header 

<!DOCTYPE html>
<html>

  <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
  <title><?php wp_title(); ?></title>




<?php wp_head(); ?>
  </head>
<body>

        <!--navbar-->

    <nav class="navbar navbar-expand-lg navbar-light navbar-custom bg-light fixed-top">
  <a class="navbar-brand" href="#">DV Electric</a>
  <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Services</a>
      <a class="nav-item nav-link" href="#">Projects</a>
    </div>
  </div>
</nav>
        <!--navbar-->

5 Answers

Daniel Hernandez
Daniel Hernandez
13,437 Points
Daniel Hernandez
Daniel Hernandez
13,437 Points

Okay I went to the wordpress forum and asked there, apparently I had added a space in the hook for "wp_enqueue_styles". So the problem has been resolved!

Daniel Hernandez
Daniel Hernandez
13,437 Points
Daniel Hernandez
Daniel Hernandez
13,437 Points

I have tried 

<?php

function wpt_theme_styles() {
    wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'
    );
    wp_enqueue_style( 'googlefont_css', 'https://fonts.googleapis.com/css?family=Roboto'
      );
      wp_enqueue_style( 'style', get_stylesheet_directory_uri() . 'style.css'  );

}

add_action(' wp_enqueue_scripts','wpt_theme_styles');

 ?>

And 

<?php

function wpt_theme_styles() {
    wp_enqueue_style( 'bootstrap_css', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js'
    );
    wp_enqueue_style( 'googlefont_css', 'https://fonts.googleapis.com/css?family=Roboto'
      );
      wp_enqueue_style( 'style', get_stylesheet_directory_uri()  );

}

add_action(' wp_enqueue_scripts','wpt_theme_styles');

 ?>

Nether are working unfortunately. What else could I be doing wrong?

Daniel Hernandez
Daniel Hernandez
13,437 Points
Daniel Hernandez
Daniel Hernandez
13,437 Points

I appreciate your willingness to help Dale but still I unfortunately don't see differences to the page. I copy and pasted it exactly as you wrote it. And my CDN to bootstrap is only working when I place it at the head of the page. I don't know if this is bad practice as the video shows such files being enqueued.

Edgardo Tupiño
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Edgardo Tupiño
Front End Web Development Techdegree Graduate 32,244 Points
Edgardo Tupiño
.a{fill-rule:evenodd;}techdegree seal-36
Edgardo Tupiño
Front End Web Development Techdegree Graduate 32,244 Points

Hello Daniel try this:

<?php 
function custom_bootstrap () {

        wp_enqueue_style( 'lms-bootstrap4-css', get_stylesheet_directory_uri() . '/lib/bootstrap-4.1.0-dist/css/bootstrap.min.css' );
        wp_enqueue_script( 'lms-bootstrap4-js', get_stylesheet_directory_uri() . '/lib/bootstrap-4.1.0-dist/js/bootstrap.min.js',array('jquery'),false,true );

    add_action( 'wp_enqueue_scripts', 'custom_bootstrap ' );

Remember, add extra dir "lib" in your WordPree Theme root "wp-content/themes/my_theme/lib/...

Daniel Hernandez
Daniel Hernandez
13,437 Points
Daniel Hernandez
Daniel Hernandez
13,437 Points

Still nothing to show :( Do I need bootstrap loaded in my files to work Edgardo? And can you help me linking my main css file? My bootstrap loads with the cdn in the head so I am more concerned about the main css file.

Edgardo Tupiño
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Edgardo Tupiño
Front End Web Development Techdegree Graduate 32,244 Points
Edgardo Tupiño
.a{fill-rule:evenodd;}techdegree seal-36
Edgardo Tupiño
Front End Web Development Techdegree Graduate 32,244 Points

Daniel, you need sure have the files on your DIR, on the other hand, try this

1) Create some file css for example custom-style.css (body {background:red}) 2) Add this file to wp_enqueue_style 3) Check the changues

If you have some Cache, clear that with your CDN and shift + f5 or try with private navigation

Let me know about the results.