Italiano
Română
РусскийProblemas al encolar hojas de estilo en temas padre e hijo con el método revisado del Codex
This post brings up a few questions I've encountered pertaining to the recent changes around stylesheet enqueueing methods brought up in this thread and this thread.
The issues I encountered came up in a general use-case scenario, using a widely used and well-maintained parent theme that is specifically child-theme ready on a WP 4.0 install. My child theme's functions.php only contains the wp_enqueue_style function as detailed in the Codex.
Please note that while the code referenced below is specific to this theme, much of it uses current coding conventions used by parent themes. Additionally, my areas of concern are most likely duplicatable on a large number of established parent themes currently in the wild. Also, the questions these raise are applicable on a universal level, regardless of which parent theme is being used.
ISSUE 1: Twoqueueing
The Recommended Setup:
Parent theme is enqueueing styles and scripts using the wp_enqueue_scripts hook, the relevent portion being as follows:
add_action('wp_enqueue_scripts', 'parent_theme_function_name');
function parent_theme_function_name() {
wp_register_style( 'avia-style' , $child_theme_url."/style.css", array(), '2', 'all' );
wp_enqueue_style( 'avia-base');
if($child_theme_url != $template_url) { wp_enqueue_style( 'avia-style'); }
}
My child theme functions.php enqueues styles per recent codex changes:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
}
Note the following IDs as used by the referenced code:
id='dm-parent-style-css'is the parent theme's stylesheetid='avia-style-css'is my child theme's stylesheetid='dm-child-style-css'is my child theme's stylesheet
The Results:
On first glance, everything was fine, with the <head> showing the following order:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
After installing a plugin, the enqueue order now changed as follows:
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
Ultimately, I need my child theme's css to load after any plugins, so I was forced to add a priority number to the function in my child theme (see previous discussion regarding priority number).
Because my function only enqueues the parent theme's css, however, the result is that now the parent theme css gets moved to the end, leaving my child theme's css in an even worse predicament than before.
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
Now I am forced to resort to enqueueing my child theme style as well, to ensure it gets moved back to the front of the line, causing the aforementioned issue of twoqueueing (new term? lol) the child theme css.
The Deprecated Setup:
Revised function in child theme:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}
The Results:
Producing the following order in the <head>:
<!-- Multiple individual parent theme styles here -->
<link rel='stylesheet' id='avia-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
<!-- Pesky plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
My Shivm:
Though I would hardly suggest this be the recommended means (and I'm sure devs with more coding experience than myself will groan at this solution), I dequeued the parent theme's ID (used to enqueue my child theme's style) right above my own enqueue in my child theme's functions file as shown:
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style', 99 );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'dm-parent-style', get_template_directory_uri().'/style.css' );
wp_dequeue_style( 'avia-style' );
wp_enqueue_style( 'dm-child-style', get_stylesheet_directory_uri().'/style.css' );
}
The Results:
This solved the issues at hand, resulting in :
<!-- Multiple individual parent theme styles here -->
<!-- Plugin styles -->
<link rel='stylesheet' id='dm-parent-style-css' href='testinstall.dev/wp-content/themes/enfold/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dm-child-style-css' href='testinstall.dev/wp-content/themes/child-theme/style.css?ver=2' type='text/css' media='all' />
ISSUE 2: Relocated child stylesheets
To sum it all up...
- Is it safe to include the assumption that parent themes properly enqueue the child theme styles, from the standpoint of child theme standards?
- Removing the priority could potentially create more confusion for part of the WordPress community, when child theme styles start getting overwritten by a plugin. We expect themes to overwrite styles, but not so much with plugins.
- When using a custom stylesheet for the actual child theme styles (as supposed to putting them in the predefined
style.css), manually enqueueing that file becomes necessary. In terms of maintaining continuity across a wide spectrum of developers, wouldn't it make sense to encourage manually enqueueing the child stylesheet regardless of the possible duplicate?
Pieter, gracias por tu respuesta detallada. Hoy he estado muy ocupado pero tengo algunas ideas basadas en lo que dijiste que espero añadir más tarde esta noche.
dMcClintock
Por favor hazlo. Me gustaría mucho escuchar otras opiniones sobre esto. Mi respuesta es mi opinión basada en mis pruebas, así que esto definitivamente no es el alfa y omega. Espero con interés tu perspectiva :-)
Pieter Goosen