proteusthemes/wp-customizer-utilities

Advanced WordPress customizer controls and settings for better user experience.

Tuesday, June 19, 2018
by primozcigler
Repository
5 Watchers
18 Stars
6,383 Installations

PHP
1 Dependents
0 Suggesters
7 Forks
1 Open issues
19 Versions
4 % Grown

The README.md

WP Customizer Utilities

Advanced WordPress customizer controls and settings for better user experience., _(*1)

Requirements

Requires PHP version 7.2.0 or greater., _(*2)

Installation

Install it via Composer and Packagist:, _(*3)

$ composer require proteusthemes/wp-customizer-utilities

Start using the classes and they will be autoloaded (PSR-4)., _(*4)

Documentation

Controls

Layout Builder

jQuery UI 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., _(*5)
Gradient

Control for the CSS gradient (WP has only support for solid colors by default)., _(*6)

Settings

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., _(*7)

Public methods

get_css_props()

Get entire css_props property of the class., _(*8)

get_single_css_prop( string $name, DynamicCSS\ModInterface|callable $modifier )

Return all variants of the CSS propery with selectors. Optionally filtered with the modifier., _(*9)

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., _(*10)

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., _(*11)

Example:, _(*12)

class MyModClass implements \ProteusThemes\CustomizerUtils\Setting\DynamicCSS\ModInterface {
public function modify( $in ) {
  return your_modify_function( $in );
}
}

Included modifiers

Some modifiers are already included with the package and you can use them stright away., _(*13)

ModDarken( $amount ) - darken hexdec color for $amount (using phpColors)
ModLighten( $amount ) - lighten hexdec color for $amount (using phpColors)
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.
ModPrependAppend( $prefix = '', $suffix = '' ) - adds the prefix or suffix (or both) to the value. Useful for adding !import or url('value').

Use

Example of the code you would most likely attach to the action customize_register:, _(*14)

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:, _(*15)

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 );

The Versions

19/06 2018

dev-master

9999999-dev

Advanced WordPress customizer controls and settings for better user experience.

library wp-customizer-utilities

Advanced WordPress customizer controls and settings for better user experience.

proteusthemes/wp-customizer-utilities

The README.md

WP Customizer Utilities

Requirements

Installation

Documentation

Controls

Layout Builder

Gradient

Settings

Dynamic CSS

Public methods

Modifier Interface ModInterface

Included modifiers

Use

The Versions

dev-master

The Requires

by Primoz Cigler

by Gregor Capuder

v2.7.0

The Requires

by Primoz Cigler

by Gregor Capuder

v2.6.0

The Requires

by Primoz Cigler

by Gregor Capuder

v2.5.0

The Requires

by Primoz Cigler

by Gregor Capuder

v2.4.0

The Requires

by Primoz Cigler

by Gregor Capuder

v2.3.2

The Requires

by Primoz Cigler

by Gregor Capuder

v1.x-dev

by Primoz Cigler

by Gregor Capuder

v1.1.2

by Primoz Cigler

by Gregor Capuder

v2.3.1

The Requires

by Primoz Cigler

by Gregor Capuder

v2.3.0

The Requires

by Primoz Cigler

by Gregor Capuder

v2.2.0

The Requires

by Primoz Cigler

by Gregor Capuder

v2.1.1

The Requires

by Primoz Cigler

by Gregor Capuder

v2.1.0

The Requires

by Primoz Cigler

by Gregor Capuder

v2.0.2

The Requires

by Primoz Cigler

by Gregor Capuder

v2.0.1

The Requires

by Primoz Cigler

by Gregor Capuder

v2.0.0

The Requires

by Primoz Cigler

by Gregor Capuder

Modifier Interface `ModInterface`