twentig-theme-custom-css should load with wp_enqueue_style

  • Resolved technicalx

    (@technicalx)


    4 years ago

    I think you should load your custom CSS the normal way.

    instead of injecting css as echo in head it should be enqueued like normal wordpress. I tried to override it from a child theme but it was just not working because wp_head comes after wp_enqueue_scripts so there’s no real way to modify it without editing core twentig code.

    injecting also messes with optimisation plugins and anyone who tries to manually override any twentig custom colours by loading their css after twentig, you just cannot do it without weird hacks.

    for twentig_twentytwenty_print_customizer_css

    change wp_head to wp_enqueue_scripts

    change from

    if ( $css ) :

		?>
	<style type="text/css" id="twentig-theme-custom-css">
		<?php echo twentig_minify_css( $css ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
	</style>

		<?php
	endif;

    to

    if ( $css ) :

		wp_register_style('twentig-theme-custom', false,['twentytwenty-style','twentig-twentytwenty','twentig-blocks']);
		wp_enqueue_style('twentig-theme-custom', null);
		wp_add_inline_style('twentig-theme-custom', $css);

	endif;
}
add_action( 'wp_enqueue_scripts', 'twentig_twentytwenty_print_customizer_css' );
    • This topic was modified 4 years ago by technicalx.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Twentig

    (@twentig)

    Hi @technicalx,

    Thanks for the feedback. Yes, we should use this method. We already use it for the Twenty Twenty-One theme.

    We’ll update the twentig_twentytwenty_print_customizer_css() function with the following code:
    wp_add_inline_style( 'twentig-twentytwenty', twentig_minify_css( $css ) );
    and hook it with wp_enqueue_scripts.
    This is the way both Twenty Twenty-One and Twenty Twenty themes add inline custom style.

    We’ll include it in the next release.

    Thanks again,
    Tom

    Thread Starter technicalx

    (@technicalx)

    You still need to register and enqueue it first with a null path or it wont work as far as I can tell.

    Plugin Author Twentig

    (@twentig)

    Thanks for your reply. Can you please explain why it won’t work? Have you tested the code and encountered an issue?

    The code wp_add_inline_style( 'twentig-twentytwenty', twentig_minify_css( $css ) );
    adds inline style after the ‘twentig-twentytwenty’ stylesheet which is already in the queue.

    I’ve tested it, both “your code” and “our code” do the same thing: they print the custom CSS just after the ‘twentig-twentytwenty’ stylesheet.

    The Twenty Twenty theme does it the same way:

    wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version );
// Add output of Customizer settings as inline style.
wp_add_inline_style( 'twentytwenty-style', twentytwenty_get_customizer_css( 'front-end' ) );
    Thread Starter technicalx

    (@technicalx)

    I think as long as that style is already registered by a real file it will appear as inline after the external file.
    <link abc.css>
    <style inline css>

    But if there is no external file it wont show up.
    Explained here, but might have changed? – https://wordpress.stackexchange.com/questions/265906/wp-add-inline-style-in-plugin-not-working

    Plugin Author Twentig

    (@twentig)

    ‘twentig-twentytwenty’ is a real stylesheet.
    We’ve released Twentig 1.2.7, which uses the wp_enqueue_scripts hook. Thanks again for your feedback.

    Tom

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘twentig-theme-custom-css should load with wp_enqueue_style’ is closed to new replies.