WordPress.org

Make WordPress Core

Opened 16 months ago

Last modified 16 months ago

#39997 reopened defect (bug)

Bundled Themes: Pass theme version number to wp_enqueue_style()

Reported by: parsmizban Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.2
Component: Bundled Theme Keywords: has-patch dev-feedback
Focuses: template Cc:

Description

Hi,

I think there is a bug when WordPress loads style.css file of child theme using version of parent theme, It should load style of child theme using child version,

Example:

Parent version: 4.7.2 Child version: 1.0.0

<link rel='stylesheet' id='parent-style-css'  href='http://localhost/wordpress/wp-content/themes/twentyfifteen/style.css?ver=4.7.2' type='text/css' media='all' />

<link rel='stylesheet' id='twentyfifteen-style-css'  href='http://localhost/wordpress/wp-content/themes/child-theme/style.css?ver=4.7.2' type='text/css' media='all' />

It should be :

<link rel='stylesheet' id='parent-style-css'  href='http://localhost/wordpress/wp-content/themes/twentyfifteen/style.css?ver=4.7.2' type='text/css' media='all' />

<link rel='stylesheet' id='twentyfifteen-style-css'  href='http://localhost/wordpress/wp-content/themes/child-theme/style.css?ver=1.0.0' type='text/css' media='all' />

Attachments (1)

39997.patch (9.1 KB) - added by parsmizban 16 months ago.
Patch

Download all attachments as: .zip

Change History (16)

#1 @SergeyBiryukov
16 months ago

  • Keywords reporter-feedback added

Hi @parsmizban, welcome to WordPress Trac! Thanks for the ticket.

It looks like you're not passing the version argument to wp_enqueue_style(), so the WordPress core version is appended by default.

Could you share the lines of code where you're calling wp_enqueue_style()?

#2 follow-up: @parsmizban
16 months ago

Hi @SergeyBiryukov , I didn't use wp_enqueue_style() or any other functions to load the child style, WordPress loads the child style.css automatically

Regards

Last edited 16 months ago by parsmizban (previous) (diff)

#3 in reply to: ↑ 2 @pothi
16 months ago

  • Resolution set to invalid
  • Status changed from new to closed

How did you create the child theme?

By default, WordPress comes bundled with a few default themes, such as Twenty Fifteen, but not child theme/s.

Did you use any plugin? If yes, please post your concern in the relevant plugin support forum. You may know more at https://wordpress.org/support/ .

Either way, this WordPress Core Trac is meant for discussing and troubleshooting any issues relevant to WordPress core. Any support requests pertaining to a theme, plugin or any general requests can be posted at https://wordpress.org/support/ .

#4 @parsmizban
16 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

Hi @pothi,

This ticket is related to core WordPress codes, I don't use any plugins for testing this issue, You can check this issue by creating a simple child theme, That is not related to the child theme itself This is how core WordPress loads the style.css of child theme automatically And it attach wrong version to loaded style.css of child theme You can create a simple child theme using this guide and check it: Child_Themes

#5 @subrataemfluence
16 months ago

  • Resolution set to invalid
  • Status changed from reopened to closed

First, wp_enqueue_style is not a plugin. It is a WordPress core function used to introduce CSS style sheets to a theme with the ability to pass several values by help of function parameters in order make sure it renders exactly the way we want!

This function is usually written in theme's functions.php file. If no version is specified WordPress will auto assign parent theme's version.

/* Syntax: wp_enqueue_style( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, string $media = 'all' ) */
wp_enqueue_style('style', get_stylesheet_uri(), array(), '1.0', 'all');

I could not reproduce the issue when I created a child theme and assign a version number (in my case it is 1.0) to style.css like above. It renders like

<link rel='stylesheet' id='style-css' href='http://local.xyz.com/wp-content/themes/customizr-child/style.css?ver=1.0' type='text/css' media='all' />

#6 @parsmizban
16 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

Hi @subrataemfluence,

Friends please please attention!

When you use a child theme, WordPress loads the child style.css automatically without using any extra code! if you use wp_enqueue_style to include child style.css, It double loads this file

So please check the source exactly before commenting here, you can create a child theme using just 1 style.css file and activate it and check this issue! And please don't close this ticket again :)

Thank you for your time ! :)

Last edited 16 months ago by parsmizban (previous) (diff)

#7 @pothi
16 months ago

My apologies to close the ticket prematurely.

Can you please post the content of your child theme's style.css file and functions.php file?

If functions.php file is empty, well, you don't need to share it.

Btw, here's the live demo of a site that uses a child theme for TwentyFifteen theme... wp.tinywp.com

The content of my child theme's style.css is...

/*
 * Theme Name: TwentyFifteen Child
 * Template: twentyfifteen
 * Version: 1.0.0
 */

In my case, style.css file of the parent theme is correctly overridden by the child theme, as the parent theme's functions.php contains the following code...

/**
 * Enqueue scripts and styles.
 *
 * @since Twenty Fifteen 1.0
 */
function twentyfifteen_scripts() {
    // Add custom fonts, used in the main stylesheet.
    wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

    // Add Genericons, used in the main stylesheet.
    wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

    // Load our main stylesheet.
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

    // Load the Internet Explorer specific stylesheet.
    wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

    // Load the Internet Explorer 7 specific stylesheet.
    wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
    wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );

    wp_enqueue_script( 'twentyfifteen-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20141010', true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }

    if ( is_singular() && wp_attachment_is_image() ) {
        wp_enqueue_script( 'twentyfifteen-keyboard-image-navigation', get_template_directory_uri() . '/js/keyboard-image-navigation.js', array( 'jquery' ), '20141010' );
    }

    wp_enqueue_script( 'twentyfifteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20150330', true );
    wp_localize_script( 'twentyfifteen-script', 'screenReaderText', array(
        'expand'   => '<span class="screen-reader-text">' . __( 'expand child menu', 'twentyfifteen' ) . '</span>',
        'collapse' => '<span class="screen-reader-text">' . __( 'collapse child menu', 'twentyfifteen' ) . '</span>',
    ) );
}
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );

So, can you please share your style.css file and functions.php file (if it is not empty)?

#8 @parsmizban
16 months ago

@pothi و

Thank you for your investigation, As I see in your source of subdomain, You can find this line:

<link rel='stylesheet' id='twentyfifteen-style-css'  href='http://wp.tinywp.com/wp-content/themes/twentyfifteen-child/style.css?ver=4.7.2' type='text/css' media='all' />

Your child theme version is 1.0.0, And according to my reported issue, It loaded the style.css using version 4.7.2, But it should be 1.0.0

My function.php is empty My child style.css file is very simple, like your mentioned style

Regards

#9 @pothi
16 months ago

Thanks for checking my demo installation. In mine, TwentyFifteen didn't create the ID named "parent-style-css". How was it created on your localhost WP install?

#10 @pothi
16 months ago

You may use string location plugin to find the exact string/s, such as "parent-style", as "-css" is added by WordPress core.

#11 @pothi
16 months ago

If you understand how the child's theme's stylesheet is loaded, that'd help to track down where things went wrong. For example, the ID "twentyfifteen-style-css" was created by the following line...

wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

It exists in parent theme. It is simply overridden by child theme. So, naturally, the syntax is clear. The fourth parameter, if not set any value (or null), WP would attach its version number. Direct quote...

(string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added. Default value: false

#12 @parsmizban
16 months ago

  • Resolution set to invalid
  • Status changed from reopened to closed

I reviewed the code of twentyfifteen theme because my child theme is based on twentyfifteen theme... in file function.php I found this line:

<?php
// Load our main stylesheet.
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

So this will lead to load the style.css using default WordPress version and NOT the theme itself! I think this part should be fix in the theme twentyfifteen too (May be in other default theme too) ... First I changed the line to this:

<?php
wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri(), array( ), wp_get_theme()->get( 'Version' ) );

Using wp_get_theme()->get( 'Version' ) both child theme and parent theme get correct version when they load

I checked other default WordPress themes (2014,2015,2016,2017) , They all missed the version of theme So I think this is needed for them because of future update of style.css It is prefer to the default WordPress version, It should load the version of theme and not WordPress version

#13 @parsmizban
16 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

Core developers please check this ticket and review my posts :)

@parsmizban
16 months ago

Patch

#14 @parsmizban
16 months ago

  • Keywords has-patch dev-feedback added; reporter-feedback removed
  • Summary changed from Loads of child style.css using version of parent to Load correct version number of style.css for both parent and child theme

#15 @SergeyBiryukov
16 months ago

  • Component changed from Script Loader to Bundled Theme
  • Summary changed from Load correct version number of style.css for both parent and child theme to Bundled Themes: Pass theme version number to wp_enqueue_style()
Note: See TracTickets for help on using tickets.