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:
- https://developer.wordpress.org/themes/advanced-topics/child-themes/
- https://www.hostinger.com/tutorials/how-to-create-wordpress-child-theme
- https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme
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.
Table of contents
Parent template
My parent theme was Nisarg, which contained the following part in its functions.php:
Hey, I've been using WordPress for years. In fact, I have learned about a lot of useful plugins and I have done plenty of customizations to build a great blogging tool. Would you be interested in launching own blogging platform on WordPress?
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:
Then the generated page contains the following styles:
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:
Then the generated page contains the following styles:
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:
Then the generated page contains the following styles:
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):
Then the generated page contains the following styles:
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:
Example 5
When the child’s functions.php is the same as in Example 2 with re-registration of Bootstrap:
Then the generated page contains the following styles:
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