WordPress – I created a child theme, but it looks different because of Bootstrap

WordPress – I created a child theme, but it looks different because of Bootstrap

I wanted to create a child WordPress theme. All online tutorials were as simple as create two files and add several lines of code:

To my surprise – it didn’t work. To be more specific, it almost worked, but the child theme did not look exactly the same as the parent – some margins, fonts and colors were different. After several experiments, it became apparent that these problems were caused by Bootstrap being loaded after the parent’s style.css file.

Let’s see what exactly is happening to the parent and child stylesheets.

Parent template

My parent theme was Nisarg, which contained the following part in its functions.php:

PHP
nisarg/functions.php

Please note the order of the styles: first Bootstrap, then Font Awesome and finally the styles.css. Although I think that Font Awesome could be loaded after styles.css, but Bootstrap cannot. Once this happens, the page is rendered badly. I haven’t investigated it, but probably Bootstrap and styles.css define styles for the same selectors, and the latter wins.

Let me remind you that all files from the child theme except functions.php, overwrite files with the same names from the parent theme. Because every child theme must (?) contain style.css file, the child theme has to load both parent’s and its own styles.css file.

Examples

Let’s consider several examples and observe the results.

Example 1

When the child’s functions.php is empty:

PHP
nisarg-child/functions.php

Then the generated page contains the following styles:

HTML
generated HTML

The parent’s style.css was not loaded, so the page is almost unstyled. This explains why the parent’s style.css has to be loaded. Let’s do it.

Example 2

When the child’s functions.php contains the most common simple function that can be found in tutorials:

PHP
nisarg-child/functions.php

Then the generated page contains the following styles:

HTML
generated HTML

Because the parent’s style.css file is loaded before Bootstrap, it makes the page to render wrong. Let’s try with another common example.

Example 3

When the child’s functions.php contains the second most common simple function:

PHP
nisarg-child/functions.php

Then the generated page contains the following styles:

HTML
generated HTML

The only difference from the previous example is the child’s style.css being loaded twice – right after the parent’s and after all styles of the parent theme. This would make sense if the child theme would like to provide defaults for other parent theme’s stylesheet files (I still don’t understand why it has to be loaded twice). Usually – this will be a worse case than the previous one.

Example 4

When the child’s functions.php is the same as previously except I’ll use the same stylesheet key as was used in the parent’s functions.php (nisarg-style):

PHP
nisarg-child/functions.php

Then the generated page contains the following styles:

HTML
generated HTML

The manual says that the keys must be unique. I can’t even explain what happened… it’s still wrong, though ;). This example explains why you see parent-style key – this is to ensure that key to be unique (nobody assumes a theme designer would publish it. Unless you are creating a child theme of a child theme…).

A more interesting thing happens when applying nisarg-style key to Example 2. The generated page will not contain the child’s style.css file at all! Any style customization we have in the child theme will disappear. Take a look:

HTML
generated HTML

Example 5

When the child’s functions.php is the same as in Example 2 with re-registration of Bootstrap:

PHP
nisarg-child/functions.php

Then the generated page contains the following styles:

HTML
generated HTML

Finally it looks perfect. There is only one child’s style.css file loaded, and Bootstrap is loaded before parent’s style.css, which is loaded before the child’s style.css. The page with the child theme is rendered correctly now.

Postscript

In case your child’s theme wants to overwrite Bootstrap or any other library with a different version – take a look at that hint.

Lessons learned

When the parent theme uses Bootstrap or other dependency, re-register it in the child theme

Leave a Reply

avatar
  Subscribe  
Notify of