CODEWITHSUNDEEP
wordpresstwitter-bootstrap-3wordpress-theming
Bill
Bill

Reputation: 2352

Wordpress Child Theme with multiple css files

I am learning Wordpress. I want to create a child theme to start playing around with it.

I have chosen to use a free bootstrap 3 theme for Wordpress, Zerif Lite: https://themeisle.com/demo/?theme=Zerif%20Lite#

I have followed some tutorials online on how to create a child theme. I was able to create a new child theme, activate it, however, the parent css file and child css file are being rendered ABOVE bootstrap css file. I would like to load them just below that.

Also, the Zerif Lite theme uses a separate css file for responsive design. How shall I make a child of that too?

You can see a live demo of what I am working on here: https://www.dev.hitcontinue.eu

Thank you. /Bilal

Upvotes: 0

Views: 304

Answers (1)

Marty
Marty

Reputation: 162

The styles are likely enqueued in the themes functions.php file. Here is how my theme enqueues bootstrap css on the Law Firm site I work with.

wp_enqueue_style( 'bootstrap-style', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.5' );

The third parameter is a prerequisite array. In this case, bootstrap has no prerequisites so it is empty.

In your child theme directory, create a functions.php file.

If you enqueue your style using bootstrap as a prerequisite, then it should show up after bootstrap - here is how I do it:

wp_enqueue_style( 'btc-style', get_template_directory_uri() . '/style.css' , array ('bootstrap-style') );

Notice I use 'bootstrap-style' as the prerequisite to load before my custom CSS gets loaded and that is the handle (first parameter) used in the first declaration above.

As for overriding the responsive file in the parent theme - I would just use one CSS file in the child theme for all of your changes. Anything not overriden will remain working as intended by the theme author.

Upvotes: 1

Related Questions