1

I'm working on small component parts for a WordPress theme. I've placed several small template parts under template-parts/components/. Correspondingly, I've placed the CSS for each part under /assets/css/template-parts/components/.

First, is it common practice in WordPress theme development to create multiple small components? (I'm approaching this with a mindset similar to React components.) Additionally, in this scenario, what would be the best practice for loading the CSS for each part as it's loaded?

Improve this question
2
  • 1
    to one side, I think that putting all the css code in one file is not a good idea if there is a big part that is not used on every pages. but to the other side, having lots of files can slow a litle bit the page loading time. I think that you have to find the middle way in analysing which pages are the more visited on your site. Commented Aug 27, 2024 at 14:22
  • note that in a modern block theme WordPress will already conditionally load the assets for that block based on wether it appears on the page or not without any additional effort on your part. I'm mindful though that you should avoid this becoming a discussion which would get it closed as offtopic, you need a single specific question that can be answered factually and that you can mark an answer as the "correct" answer by accepting Commented Aug 27, 2024 at 14:33

1 Answer 1

Reset to default
0

I routinely build reusable components for WordPress plugins and then run a series of conditional checks on whether or not to load the components, so it's common practice for me and I've learned it over the years by looking at other plugins, so I'd say yes.

As for the CSS I'll register all of the CSS files but not actually enqueue them until they're needed.

wp_register_style( 'style-handle' ) is what I use to register them all in an enqueueing component, but then, within the component that requires one of the specialized/specific stylesheets, I run a conditional check to make sure it hasn't already been loaded, in case a component fires twice on a page, I only want the CSS loading once:

if( !wp_style_is( 'style-handle' ) ) :
    wp_enqueue_style( 'style-handle' );
endif;

This seems to work for me, keep things nice and origanized and only loading what's needed at any given time.

You can do the exact same with scripts using wp_script_is().

Improve this answer
4
  • 1
    You might not need that if() statement; if I'm reading it right, WP_Dependencies::enqueue() (which is what, ultimately, wp_enqueue_script() calls) already checks to make sure the style's handle isn't already in the queue. Commented Aug 27, 2024 at 15:28
  • 1
    I've had mixed results in the past with not checking first - now I do it to be sure. Sometimes when I work on something over the span of a couple of years or more I forget if I've called something somewhere else, so I've gotten extra careful with double checking. I even check if all of my functions exist before creating them with function_exists()... ;-) Commented Aug 27, 2024 at 19:29
  • You mean that wp_enqueue_style('style-handle'); should be written in the specific component's file, correct? I have quite a few small components, each with its own CSS. In this case, should I register all the component CSS files in functions.php? Would registering so many styles impact site optimization? // functions.php wp_register_style( 'style-handle'); // some-component.php if(!wp_style_is('style-handle')) : wp_enqueue_style( 'style-handle'); endif; @TonyDjukic Commented Aug 28, 2024 at 7:45
  • I register all of the CSS styles and all of the JS scripts in their respective front end and back end functions. Then as you have it in your comment, within each component, I enqueue its necessary styles & scripts. I haven't really seen any optimization issues with this method. Commented Aug 28, 2024 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.