0

On my website I use bootstrap which I've implemented in functions.php. Now I am trying to implement my stylesheet after bootstrap, so that I can override its classes.

My stylesheet worksbut it's still overriden by bootstrap. Did I implement it wrong?

functions.php:

<?php
add_action( 'after_setup_theme', 'wpt_setup' );
    if ( ! function_exists( 'wpt_setup' ) ):
        function wpt_setup() {  
            register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
        } endif;


function wpt_register_js() {
    wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
    wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
    wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

wp_enqueue_style( 'my_template_name', get_stylesheet_uri() );

// Register custom navigation walker
    require_once('wp_bootstrap_navwalker.php');

add_theme_support( 'post-thumbnails' );     
?>

Edit

Well, now I see that wp_enqueue_style( 'my_template_name', get_stylesheet_uri() ); have changed actually my admin panel. So how should I write it to affect only my website?

0

Note

wp_enqueue_style()

should be placed inside a callback function to wp_enqueue_scripts

add_action( 'wp_enqueue_scripts', 'callback' );

Like your code in the question shows, so put your loading of the custom stylesheet with wp_enqueue_style() inside it.

Last but not least, CSS is processed in a way that the last style definition is used. So by loading your stylesheet after the default one you can override the default definition with your custom one. The definitions, the element targeting, must be equal to make this work.

2
  • Now it works, thank you! But instead of get_stylesheet_uri() I've used get_template_directory_uri(). Seems to me more logical when I have no stylesheet specified, or am I wrong? – Dandy May 18 '15 at 13:52
  • The former - get_stylesheet_uri() - uses get_stylesheet_directory_uri() and appends style.css, when using the latter - get_template_directory_uri() - you need to specify the file. Aside from that beware of the differences regarding parent and child theme location. @Dandy – Nicolai May 18 '15 at 14:00
1

Your line to enqueue your new style does come after the bootstrap style... as in this line is typed some time after the other one, but it is outside of any function and is in the regular flow of code... so it actually happens first.

Try putting it inside the wpt_register_css() function and keep it after the bootstrap style. This should make it actually get called after bootstrap.

0
1

Use the wp_enqueue_style's 3rd dependencies argument. that will make sure it is loaded after bootstrap. With a condition for front end it would look like this:

if(!is_admin()){
  function wpt_register_css(){
    wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'my_template_name', get_stylesheet_uri(), 'bootstrap.min' );
  }
  add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.