Adding custom css to default style.css (Underscores _S Wordpress theme)?

1
votes

I'm currently building a custom theme on top of the _S Underscores Wordpress theme. One of the things I immediately did was remove all the content in the style.css file, as I want to create my own styling (largely using Bootstrap).

However, I can't seem to get certain attributes in the style.css to make changes to the html. For example, I'm trying to set the following <h1> tag to red. But it will not change.

<h1 id="testOfContent">Test</h1>

CSS (in the style.css file provided by Underscores):

#testOfContent {
    color: red;
}

However, the font remains black. How do you manipulate a wordpress theme (especially _S Underscores which is meant to be customizable) to use your own css? Any ideas as to why it won't register my own CSS?

Here's my functions.php file and how I'm loading the script:

function tlas_css() {
    // Enqueue bootstrap css
    wp_register_style('bootstrap-css', get_template_directory_uri() . '/bootstrap-3.3.4/css/bootstrap.min.css');
    wp_enqueue_style('bootstrap-css');

    // Enqueue custom stylesheet
    wp_enqueue_style( 'tlas-custom-style', get_template_directory_uri() . '/css/tlas.css' );
    wp_enqueue_style( 'tlas-style', get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'tlas_css' );
4
htmlcsswordpresswordpress-themingunderscores-wp
You can always use the developer tools of browsers to determine which styles get applied to a specific element (and which don't), and where they are located. For example Firefox: getfirebug.com/css – AnuragBabaresco
Try h1#testOfContent instead of #testOfContent. You need to make sure either - or both - of two things: Make your rule at least as specific as the one you want to override; and if it's not more specific, make sure it's loaded after the other rule. – connexo
@connexo, no luck there unfortunately. Even tried adding !important just to see if anything could get it to work. – carbon_ghost
You have a link to the site? Or to the template in action where such an element can be found in? – connexo
@connexo Unfortunately I don't. This site is only running locally right now. The code snippet with the <h1> tag I posted above is in my header.php. I've tried posting this snippet in other files and still to no avail. Clearly something is interfering with my CSS, since I tried this on another site (basic html/css file combo) and it worked fine. – carbon_ghost

4 Answers

0
votes

You should use wp_enqueue_style( 'your-style', get_stylesheet_uri() ); which retrieves the URI of the current theme stylesheet.

Read more on codex.wordpress.org

0
votes

The workflow I prefer to customize and add to the css for the _s theme is by editing the .scss Sass files. Be sure to select the Advanced Options so you can tick the _sassify! check box if using the _s theme Generator at https://underscores.me/#generator

Then you can import the Bootstrap Sass you want since Bootstrap 4 is written with Sass. If you prefer using Bootstrap 3, you can find it's Sass ports as well.

If you're not sure how to build the Sass, I put together a Webpack 4 development workflow for the Sassify option included with the underscores Wordpress starter theme. Hope this helps https://jimfrenette.com/2018/08/completely-blank-no-css-_s-wordpress-starter-theme/

0
votes

If you are working with Chrome, try to clear cache (ctrl+F5).
Or Open Dev tools > settings > preferences > network > disable cache (when dev tool is open)

-1
votes

You can try this one:

   add_action( 'wp_enqueue_scripts', 'yourstyle' );
    function yourstyle() {
      wp_enqueue_style( 'yourstyle', get_template_directory_uri() . '/css/yourstyle.css', array(), PARENT_THEME_VERSION );
    }