PHP code example of proteusthemes / wp-customizer-utilities

1. Go to this page and download the library: Download proteusthemes/wp-customizer-utilities library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

proteusthemes / wp-customizer-utilities example snippets


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

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

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