Using Duotone outside singles

With WordPress 5.9 and its duotone updates, the CSS and SVG for duotone filters are indeed no longer output globally but only for the pages where they’re used. Since you’re using duotone in a custom hover effect on archive pages and this has broken after the update, you’ll need to ensure the duotone CSS and SVG are available globally (or for the relevant pages). Here’s how you can fix it:Steps to Fix Duotone in Archive Pages

1. Manually Add Duotone SVGs and CSS: You can manually add the duotone SVG filters to your theme, ensuring they are available on all pages (including archives). You can use the wp_get_duotone_filter_svg function to retrieve a specific duotone filter’s SVG and then output it where needed.Example:phpCopy code// Add to your theme's functions.php or appropriate file function mytheme_add_duotone_svg_to_footer() { // Replace 'duotone-class' with the specific duotone class you're using echo wp_get_duotone_filter_svg( 'duotone-class' ); } add_action( 'wp_footer', 'mytheme_add_duotone_svg_to_footer' ); This will ensure that the duotone SVG is available in the page’s footer.
2. Manually Enqueue Duotone CSS: Similarly, you can enqueue the specific duotone CSS globally or for the relevant pages. WordPress handles this dynamically for images, but if you need it specifically for your hover effects, you can enqueue the relevant styles yourself.phpCopy codefunction mytheme_enqueue_duotone_styles() { if ( is_archive() ) { wp_enqueue_style( 'mytheme-duotone-style', get_template_directory_uri() . '/css/duotone.css' ); } } add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_duotone_styles' ); In the CSS file (duotone.css), add the specific duotone class and filter rules for your hover effect.
3. theme.json Solution: If you’re managing styles through theme.json, you might need to ensure the duotone settings are correctly configured to output across your theme. You can try adding the duotone classes to the styles section in theme.json:jsonCopy code{ "styles": { "blocks": { "core/image": { "duotone": [ { "slug": "duotone-class", "colors": ["#333", "#fff"] } ] } } } }
4. Use wp_footer_assets Filter: Another approach is to hook into wp_footer_assets to ensure the duotone styles are loaded for all pages where you need them.phpCopy codefunction mytheme_output_duotone_styles() { if ( is_archive() ) { // Add specific duotone CSS or SVG here echo '<style>.wp-block-image img { filter: url(#your-duotone-filter); }</style>'; } } add_action( 'wp_footer_assets', 'mytheme_output_duotone_styles' );

By adding the SVG filter manually and making sure the correct CSS is applied to your hover effect, you should be able to restore the broken functionality in archive pages.

Hello @calc20 and thank you for your answer.

I managed to echo manually on desired pages (archives or other custom pages) the SVG responsible for the filter I need. Just applying filter:url(#wp-….. to image when hovering the parent link. Works like a charm.
I just copied it from what WP echoes when the given duotone filter is used in a single.

Note that the wp_get_duotone_filter_svg filter is deprecated, and there no new way to echo a duotone SVG manually using wordpress API.

Note also that in your solution 4, the action should be correctly named wp_footer.

Anyway, it’s fixed, thank again.