I have made a child theme of the Idyllic theme by Freesia, following WordPress’s tutorial. The parent theme’s style.css is loaded and working fine. One can see that, because the page look just as with the Idyllic theme.
However, thy child’s theme style.css is ignored. I have tried to put all sorts of stylings there, adding important! but with no result. In the code inspector, none of these styles can be seen.
I have tried several version of functions.php file.
From this webpage:
function my_theme_enqueue_styles(){
wp_enqueue_style("parent-style", get_parent_theme_file_uri("/style.css"));
}
add_action("wp_enqueue_scripts", "my_theme_enqueue_styles");
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent_theme_style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child_theme_style', get_stylesheet_uri() );
}
add_action("wp_enqueue_scripts", "my_theme_enqueue_styles");
I have tried different things to put lower priority to the child theme’s style.css (from stackoverflow.com), so that it is loaded at the end…with no result:
function idyllicChild() {
// enqueue style
wp_enqueue_style( 'parent', get_template_directory_uri().'/style.css' );
}
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'idyllicChild');
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
But THEN I inspected closely what is actually getting loaded in the <head> of my page. The child style sheet is loaded twice. Why is that?
<link rel="stylesheet" id="idyllic-style-css" href="https://kalvarka.sk/wp-content/themes/idyllic-child/style.css?ver=61eb87ceb07e28a0e01ea94ef625322c" type="text/css" media="all">
<link rel="stylesheet" id="idyllic-style-css" href="https://kalvarka.sk/wp-content/themes/idyllic-child/style.css?ver=61eb87ceb07e28a0e01ea94ef625322c" type="text/css" media="all">
And this file style.css is:
/* Theme Name: Idyllic - Child Description: Idylic Child Theme Author: Eva Miliczka Author URI: https://webdesign.miliczki.sk Template: idyllic Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Text Domain: idyllicchild */
While the file style.css I am editing and is visible in ftp:
/*
Theme Name: Idyllic - Child
Description: Idylic Child Theme
Author: Eva Miliczka
Author URI: https://webdesign.miliczki.sk
Template: idyllic
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags:
Text Domain: idyllicchild
*/
.italic{
color:#a8263d !important;
}
The parent style.css that is loaded https://kalvarka.sk/wp-content/themes/idyllic/style.css?ver=61eb87ceb07e28a0e01ea94ef625322c looks as expected (showing excerpt):
/*
Theme Name:Idyllic
Theme URI: https://themefreesia.com/themes/idyllic
Author: Theme Freesia
Author URI: https://themefreesia.com
Description: Idyllic is the next generation and Ultra Responsive, Multipurpose, Corporated, Fully Optimized For Agency, Business, Corporate, CV, Personal, Portfolio, Fashion, Fitness, Financial, Ecommerce, Event, Services, SEO, Video and Blog or any other type of business WordPress theme, containing all the features you need to create a stunning website. The theme consists of well organized components so it’s easy to edit and customize everything to create a specific website for your needs. It is designed for Business but this is competent for every kind of site which is designed and developed by Theme Freesia. With a focus on business sites, it features multiple sections on the front page as well as widgets, multiple navigation and social menus, a logo, Color Options and more. This theme supports popular plugins like Breadcrumb NavXT, WP-PageNavi, Contact Form 7, Jetpack by WordPress.com, Polylang, bbPress, wooCommerce and many more. It is 100% translation ready and you can easily customize with lots of options using Customizer. It consists contact us template, gallery template,Corporate Template, widgets and Sidebar. Get free support at https://tickets.themefreesia.com/ and View demo site at https://themefreesia.com/demos/idyllic-demos/
Version: 1.1.7
Requires at least: 5.8
Requires PHP: 5.6
Tested up to: 6.0
Text Domain: idyllic
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: threaded-comments, right-sidebar, four-columns, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-images, flexible-header, post-formats, footer-widgets, sticky-post, theme-options, translation-ready, e-commerce, education, portfolio
All files, unless otherwise stated, are released under the GNU General Public License
version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)
==================================================
*/
/* 1.0 Browser Reset
================================================== */
html {
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizelegibility;
}
So the problem with child theme’s style.css is in the version
I have found a suggestion in stackoverflow.com. Actually, this WordPress’s official recommendation.
And BINGO!!! That was the problem. Now the child theme is loaded with the following:
https://kalvarka.sk/wp-content/themes/idyllic-child/style.css?ver=1.0.0
Featured image by Image by pch.vector on Freepik
