Download Plugin

Custom CSS Filter Hooks in DesignSetGo 1.1.1

Written by

admin

in

Take Control of Your Block Styles

We’re excited to announce a powerful new feature in DesignSetGo 1.1.1: Custom CSS filter hooks! This update gives developers unprecedented control over how custom CSS is generated and output for blocks.

What’s New?

DesignSetGo 1.1.1 introduces two new WordPress filter hooks that let you modify custom CSS output:

  • designsetgo/custom_css/attributes – Filter and modify CSS attributes before processing
  • designsetgo/custom_css/output – Filter the final generated CSS before it’s rendered

Why Use Filter Hooks?

These hooks allow you to:

  • Add vendor prefixes for better browser compatibility
  • Convert color formats
  • Inject theme-specific variables
  • Add media queries or pseudo-classes
  • Integrate with CSS-in-JS solutions
  • Implement custom optimization strategies

Hook 1: Filter CSS Attributes

Hook Name: designsetgo/custom_css/attributes

Use Case: Modify CSS property-value pairs before they’re converted to CSS strings.

Hook 2: Filter Final CSS Output

Hook Name: designsetgo/custom_css/output

Use Case: Modify the complete CSS string before it’s added to the page.

Example Usage

add_filter('designsetgo/custom_css/output', function($css, $block_id, $attributes) {
    // Wrap all custom CSS in a desktop-only media query
    if (!empty($css)) {
        $css = "@media (min-width: 768px) {\n" . $css . "\n}";
    }
    return $css;
}, 10, 3);

Get Started Today

Update to DesignSetGo 1.1.1 to start using custom CSS filter hooks:

  1. Go to Plugins → Installed Plugins
  2. Update DesignSetGo to 1.1.1 or higher
  3. Add your filter functions to your theme’s functions.php
  4. Test thoroughly in a staging environment

Learn more: View on GitHub | Support Forums

What will you build with custom CSS filter hooks? Share your creative implementations!

More posts