inc2734/wp-customizer-framework

A library for WordPress Customizer.

WP Customizer Framework

, _(*1)

A Framework of WordPress Customizer API., _(*2)

Install

In your theme directory., _(*3)

$ composer require inc2734/wp-customizer-framework

How to use

Initialize

require_once( get_theme_file_path( '/vendor/autoload.php' ) );

new \Inc2734\WP_Customizer_Framework\Bootstrap(
  'handle' => 'main style sheet handle',
);

Customizer

use Inc2734\WP_Customizer_Framework\Framework;

Framework::panel( 'panel-id', [
  'title' => 'panel-name',
] );

Framework::section( 'section-id', [
  'title' => 'section-name',
] );

Framework::control( 'type', 'control-id', [
  'label'   => 'Header Color',
  'default' => '#f00',
] );

$panel   = Framework::get_panel( 'panel-id' );
$section = Framework::get_section( 'section-id' );
$control = Framework::get_control( 'control-id' );

$control->join( $section )->join( $panel );
$control->partial( [
    'selector' => '.blogname',
] );

Set styles

use Inc2734\WP_Customizer_Framework\Style;

add_action(
  'inc2734_wp_customizer_framework_load_styles',
  function() {
    $accent_color = get_theme_mod( 'accent-color' );

    Style::attach(
      'The handle of enqueued style',
      [
        [
          'selectors'  => [
            '.page-title',
            '.strong',
          ],
          'properties' => [
            "color: {$accent_color}",
            "border-bottom-color: {$accent_color}",
          ],
          'media_query' => '@media (min-width: 768px)', // Optional
        ],
      ]
    );
  }
);

Using placeholder

use Inc2734\WP_Customizer_Framework\Style;

add_action(
  'inc2734_wp_customizer_framework_load_styles',
  function() {
    /**
     * Extend "btn-base" placeholder
     *
     * Style::extend( 'btn-base', [ '.btn-a' ] );
     */
    include_once( get_theme_file_path( '/css/btn-a.php' ) );

    /**
     * Extend "btn-base" placeholder
     *
     * Style::extend( 'btn-base', [ '.btn-b' ] );
     */
    include_once( get_theme_file_path( '/css/btn-b.php' ) );

    /**
     * Extend "btn-base" placeholder
     *
     * Style::extend( 'btn-base', [ '.btn-c' ] );
     */
    include_once( get_theme_file_path( '/css/btn-c.php' ) );
  }
);

add_action(
  'inc2734_wp_customizer_framework_after_load_styles',
  function() {
    Style::placeholder(
      'btn-base',
      function( $selectors ) {
        $accent_color = get_theme_mod( 'accent-color' );

        Style::attach(
          'The handle of enqueued style',
          [
            [
              'selectors'  => $selectors,
              'properties' => [ "border-color: {$accent_color}" ],
            ],
          ]
        );
      }
    );
  }
);