PHPackages proteusthemes/wp-customizer-utilities - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. proteusthemes/wp-customizer-utilities ActiveLibrary[Utility & Helpers](/categories/utility) proteusthemes/wp-customizer-utilities ===================================== Advanced WordPress customizer controls and settings for better user experience. v2.7.3(4y ago)329.9k↑231.7%91GPL-2.0+PHPPHP ^7.2|^8.0 Since Apr 28Pushed 4y ago5 watchersCompare [ Source](https://github.com/proteusthemes/wp-customizer-utilities)[ Packagist](https://packagist.org/packages/proteusthemes/wp-customizer-utilities)[ RSS](/packages/proteusthemes-wp-customizer-utilities/feed)WikiDiscussions master Synced 2d ago READMEChangelogDependencies (1)Versions (22)Used By (1) WP Customizer Utilities ======================= [](#wp-customizer-utilities) Advanced WordPress customizer controls and settings for better user experience. Requirements ------------ [](#requirements) Requires PHP version 7.2.0 or greater. Installation ------------ [](#installation) Install it via [Composer](https://getcomposer.org/) and [Packagist](https://packagist.org/packages/proteusthemes/wp-customizer-utilities): ``` $ composer require proteusthemes/wp-customizer-utilities ``` Start using the classes and they will be autoloaded (PSR-4). Documentation ------------- [](#documentation) ### Controls [](#controls) - #### Layout Builder [](#layout-builder) [jQuery UI slider](https://jqueryui.com/slider/) with an option how many handles you want to control in that slider. Useful for creating dynamic layouts, for example for the footer, where user can congigure how many columns they want and how wide each of these columns will be. - #### Gradient [](#gradient) Control for the CSS gradient (WP has only support for solid colors by default). ### Settings [](#settings) - #### Dynamic CSS [](#dynamic-css) Create Dynamic CSS by declaring the selectors (for example for background colors etc.) when defining a setting. Has build-in support for modifiers of that color and media queries. ##### Public methods [](#public-methods) - `get_css_props()` Get entire css\_props property of the class. - `get_single_css_prop( string $name, DynamicCSS\ModInterface|callable $modifier )` Return all variants of the CSS propery with selectors. Optionally filtered with the modifier. - `render_css()` Render the entire CSS for this setting in the inline style (each group of selectors in its own line). Useful for caching the output of the setting and echoing it on the WP frontend. ##### Modifier Interface `ModInterface` [](#modifier-interface-modinterface) The modifer classes must implement the `DynamicCSS\ModInterface`. It has only one method `modify( $in )` which takes input value and returns the modified value. Example: ``` class MyModClass implements \ProteusThemes\CustomizerUtils\Setting\DynamicCSS\ModInterface { public function modify( $in ) { return your_modify_function( $in ); } } ``` ##### Included modifiers [](#included-modifiers) Some modifiers are already included with the package and you can use them stright away. - `ModDarken( $amount )` - darken hexdec color for `$amount` (using [phpColors](https://github.com/mexitek/phpColors#available-methods)) - `ModLighten( $amount )` - lighten hexdec color for `$amount` (using [phpColors](https://github.com/mexitek/phpColors#available-methods)) - `ModLinearGradient( ModInterface $modifier, $orientation = 'to bottom' )` - creates CSS linear-gradient. First color is instact, second color is modified using `$modifier`. `$orientation` can be any valid [CSS orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Syntax). - `ModPrependAppend( $prefix = '', $suffix = '' )` - adds the prefix or suffix (or both) to the value. Useful for adding ` !import` or `url('value')`. ##### Use [](#use) Example of the code you would most likely attach to the action `customize_register`: ``` function your_func( $wp_customize ) { $darken5 = new \ProteusThemes\CustomizerUtils\Setting\DynamicCSS\ModDarken( 5 ); $wp_customize->add_setting( new \ProteusThemes\CustomizerUtils\Setting\DynamicCSS( $wp_customize, 'nav_bg', array( 'default' => '#bada55', 'css_props' => array( // list of all css properties this setting controls array( // each property in it's own array 'name' => 'background-color', // this is actual CSS property 'selectors' => array( 'noop' => array( // regular selectors in the key 'noop' 'body', '.selector2', ), '@media (min-width: 900px)' => array( // selectors which should be in MQ '.selector3', ), ), 'modifier' => $darken5, // optional. Separate data type, with the modify() method (via implemented interface) which takes value and returns modified value OR callable function with 1 argument ), ), ) ) ); } add_action( 'customize_register', 'your_func' ); ``` You must also enqueue the JS file which handles the live preview changes via `postMessage`: ``` function enqueue_customizer_js() { wp_enqueue_script( 'mytheme-live-customize', get_template_directory_uri() . '/vendor/proteusthemes/wp-customizer-utilities/assets/live-customize.js', array( 'jquery', 'customize-preview' ), false, true ); wp_localize_script( 'mytheme-live-customize', 'ptCustomizerDynamicCSS', array( array( 'settingID' => 'nav_bg', 'selectors' => 'body, .selector1, .selector2', 'cssProp' => 'background-color', ) ) ); } add_action( 'customize_preview_init', 'enqueue_customizer_js', 31 ); ``` ### Health Score 42 — FairBetter than 88% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity36 Limited adoption so far Community20 Small or concentrated contributor base Maturity77 Established project with proven stability Bus Factor1 Top contributor holds 80% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~128 days Recently: every ~360 days Total 21 Last Release 1519d ago Major Versions v1.1.1 → v2.0.02015-10-08 v1.1.2 → v2.3.22017-03-27 ### Community Maintainers ![](https://www.gravatar.com/avatar/87e491278b98de1334b7deb37b35382ed738cc9e4ecfc23f4bf64e37041debce?d=identicon)[rkon\_pt](/maintainers/rkon_pt) ![](https://www.gravatar.com/avatar/6467c9ba9dd68dcf91cb14ca615783b0013a464f3c0e7155aac2e1b1f0fbbefb?d=identicon)[ngalt\_pt](/maintainers/ngalt_pt) --- Top Contributors [![primozcigler](https://avatars.githubusercontent.com/u/4201548?v=4)](https://github.com/primozcigler "primozcigler (40 commits)")[![capuderg](https://avatars.githubusercontent.com/u/9714134?v=4)](https://github.com/capuderg "capuderg (8 commits)")[![ryankon](https://avatars.githubusercontent.com/u/1301802?v=4)](https://github.com/ryankon "ryankon (2 commits)") --- Tags wordpresswpthemecontrolcustomizerproteusthemes ### Embed Badge ![Health badge](/badges/proteusthemes-wp-customizer-utilities/health.svg) ``` [![Health](https://phpackages.com/badges/proteusthemes-wp-customizer-utilities/health.svg)](https://phpackages.com/packages/proteusthemes-wp-customizer-utilities) ``` ### Alternatives [tgmpa/tgm-plugin-activation TGM Plugin Activation is a PHP library that allows you to easily require or recommend plugins for your WordPress themes (and plugins). 1.8k230.2k13](/packages/tgmpa-tgm-plugin-activation)[aristath/kirki Extending the WordPress customizer 1.3k73.1k4](/packages/aristath-kirki)[afragen/git-updater A plugin to automatically update GitHub, Bitbucket, GitLab, or Gitea hosted plugins, themes, and language packs. 3.3k1.7k](/packages/afragen-git-updater)[balbuf/composer-wp Manage WordPress core, plugins, and themes with composer. 173.6k](/packages/balbuf-composer-wp)[typisttech/wp-admin-notices A simplified OOP implementation of the WordPress admin notices 141.2k](/packages/typisttech-wp-admin-notices) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)