529 lines
18 KiB
PHP
529 lines
18 KiB
PHP
<?php
|
|
/**
|
|
* Pique Theme Customizer
|
|
*
|
|
* @package Pique
|
|
*/
|
|
|
|
/**
|
|
* Add postMessage support for site title and description for the Theme Customizer.
|
|
*
|
|
* @param WP_Customize_Manager $wp_customize Theme Customizer object.
|
|
*/
|
|
function pique_customize_register( $wp_customize ) {
|
|
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
|
|
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
|
|
$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
|
|
|
|
/**
|
|
* Add the Theme Options section
|
|
*/
|
|
$wp_customize->add_panel( 'pique_options_panel', array(
|
|
'title' => __( 'Theme Options', 'pique' ),
|
|
'description' => __( 'Configure your theme settings', 'pique' ),
|
|
) );
|
|
|
|
// General settings
|
|
$wp_customize->add_section( 'pique_general_settings', array(
|
|
'title' => esc_html__( 'Menu Settings', 'pique' ),
|
|
'panel' => 'pique_options_panel',
|
|
'description' => __( 'This replaces your custom menu—on the front page only—with an automatically-generated menu that links to each of your panels.', 'pique' ),
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_menu', array(
|
|
'default' => false,
|
|
'sanitize_callback' => 'pique_sanitize_checkbox',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_menu', array(
|
|
'label' => esc_html__( 'Add an anchor menu to the front page.', 'pique' ),
|
|
'section' => 'pique_general_settings',
|
|
'type' => 'checkbox',
|
|
) );
|
|
|
|
// Panel 1
|
|
$wp_customize->add_section( 'pique_panel1', array(
|
|
'title' => esc_html__( 'Panel 1', 'pique' ),
|
|
'active_callback' => 'is_front_page',
|
|
'panel' => 'pique_options_panel',
|
|
'description' => __( 'Add a background image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'pique' ),
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel1', array(
|
|
'default' => false,
|
|
'sanitize_callback' => 'pique_sanitize_numeric_value',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel1', array(
|
|
'label' => esc_html__( 'Panel Content', 'pique' ),
|
|
'section' => 'pique_panel1',
|
|
'type' => 'dropdown-pages',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel1_background', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'sanitize_hex_color',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel1_background', array(
|
|
'label' => esc_html__( 'Background Color', 'pique' ),
|
|
'section' => 'pique_panel1',
|
|
'type' => 'color',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel1_opacity', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'pique_sanitize_opacity',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel1_opacity', array(
|
|
'label' => esc_html__( 'Featured Image Opacity', 'pique' ),
|
|
'section' => 'pique_panel1',
|
|
'type' => 'select',
|
|
'description' => esc_html( 'Set the opacity of the featured image over the panel background.', 'pique' ),
|
|
'choices' => array(
|
|
'0.25' => esc_html__( '25%', 'pique' ),
|
|
'0.5' => esc_html__( '50%', 'pique' ),
|
|
'0.75' => esc_html__( '75%', 'pique' ),
|
|
'1' => esc_html__( '100%', 'pique' ),
|
|
|
|
),
|
|
) );
|
|
|
|
// Panel 2
|
|
$wp_customize->add_section( 'pique_panel2', array(
|
|
'title' => esc_html__( 'Panel 2', 'pique' ),
|
|
'active_callback' => 'is_front_page',
|
|
'panel' => 'pique_options_panel',
|
|
'description' => __( 'Add a background image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'pique' ),
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel2', array(
|
|
'default' => false,
|
|
'sanitize_callback' => 'pique_sanitize_numeric_value',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel2', array(
|
|
'label' => esc_html__( 'Panel Content', 'pique' ),
|
|
'section' => 'pique_panel2',
|
|
'type' => 'dropdown-pages',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel2_background', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'sanitize_hex_color',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel2_background', array(
|
|
'label' => esc_html__( 'Background Color', 'pique' ),
|
|
'section' => 'pique_panel2',
|
|
'type' => 'color',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel2_opacity', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'pique_sanitize_opacity',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel2_opacity', array(
|
|
'label' => esc_html__( 'Featured Image Opacity', 'pique' ),
|
|
'section' => 'pique_panel2',
|
|
'type' => 'select',
|
|
'description' => esc_html( 'Set the opacity of the featured image over the panel background.', 'pique' ),
|
|
'choices' => array(
|
|
'0.25' => esc_html__( '25%', 'pique' ),
|
|
'0.5' => esc_html__( '50%', 'pique' ),
|
|
'0.75' => esc_html__( '75%', 'pique' ),
|
|
'1' => esc_html__( '100%', 'pique' ),
|
|
|
|
),
|
|
) );
|
|
|
|
// Panel 3
|
|
$wp_customize->add_section( 'pique_panel3', array(
|
|
'title' => esc_html__( 'Panel 3', 'pique' ),
|
|
'active_callback' => 'is_front_page',
|
|
'panel' => 'pique_options_panel',
|
|
'description' => __( 'Add a background image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'pique' ),
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel3', array(
|
|
'default' => false,
|
|
'sanitize_callback' => 'pique_sanitize_numeric_value',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel3', array(
|
|
'label' => esc_html__( 'Panel Content', 'pique' ),
|
|
'section' => 'pique_panel3',
|
|
'type' => 'dropdown-pages',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel3_background', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'sanitize_hex_color',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel3_background', array(
|
|
'label' => esc_html__( 'Background Color', 'pique' ),
|
|
'section' => 'pique_panel3',
|
|
'type' => 'color',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel3_opacity', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'pique_sanitize_opacity',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel3_opacity', array(
|
|
'label' => esc_html__( 'Featured Image Opacity', 'pique' ),
|
|
'section' => 'pique_panel3',
|
|
'type' => 'select',
|
|
'description' => esc_html( 'Set the opacity of the featured image over the panel background.', 'pique' ),
|
|
'choices' => array(
|
|
'0.25' => esc_html__( '25%', 'pique' ),
|
|
'0.5' => esc_html__( '50%', 'pique' ),
|
|
'0.75' => esc_html__( '75%', 'pique' ),
|
|
'1' => esc_html__( '100%', 'pique' ),
|
|
|
|
),
|
|
) );
|
|
|
|
// Panel 4
|
|
$wp_customize->add_section( 'pique_panel4', array(
|
|
'title' => esc_html__( 'Panel 4', 'pique' ),
|
|
'active_callback' => 'is_front_page',
|
|
'panel' => 'pique_options_panel',
|
|
'description' => __( 'Add a background image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'pique' ),
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel4', array(
|
|
'default' => false,
|
|
'sanitize_callback' => 'pique_sanitize_numeric_value',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel4', array(
|
|
'label' => esc_html__( 'Panel Content', 'pique' ),
|
|
'section' => 'pique_panel4',
|
|
'type' => 'dropdown-pages',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel4_background', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'sanitize_hex_color',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel4_background', array(
|
|
'label' => esc_html__( 'Background Color', 'pique' ),
|
|
'section' => 'pique_panel4',
|
|
'type' => 'color',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel4_opacity', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'pique_sanitize_opacity',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel4_opacity', array(
|
|
'label' => esc_html__( 'Featured Image Opacity', 'pique' ),
|
|
'section' => 'pique_panel4',
|
|
'type' => 'select',
|
|
'description' => esc_html( 'Set the opacity of the featured image over the panel background.', 'pique' ),
|
|
'choices' => array(
|
|
'0.25' => esc_html__( '25%', 'pique' ),
|
|
'0.5' => esc_html__( '50%', 'pique' ),
|
|
'0.75' => esc_html__( '75%', 'pique' ),
|
|
'1' => esc_html__( '100%', 'pique' ),
|
|
|
|
),
|
|
) );
|
|
|
|
// Panel 5
|
|
$wp_customize->add_section( 'pique_panel5', array(
|
|
'title' => esc_html__( 'Panel 5', 'pique' ),
|
|
'active_callback' => 'is_front_page',
|
|
'panel' => 'pique_options_panel',
|
|
'description' => __( 'Add a background image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'pique' ),
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel5', array(
|
|
'default' => false,
|
|
'sanitize_callback' => 'pique_sanitize_numeric_value',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel5', array(
|
|
'label' => esc_html__( 'Panel Content', 'pique' ),
|
|
'section' => 'pique_panel5',
|
|
'type' => 'dropdown-pages',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel5_background', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'sanitize_hex_color',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel5_background', array(
|
|
'label' => esc_html__( 'Background Color', 'pique' ),
|
|
'section' => 'pique_panel5',
|
|
'type' => 'color',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel5_opacity', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'pique_sanitize_opacity',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel5_opacity', array(
|
|
'label' => esc_html__( 'Featured Image Opacity', 'pique' ),
|
|
'section' => 'pique_panel5',
|
|
'type' => 'select',
|
|
'description' => esc_html( 'Set the opacity of the featured image over the panel background.', 'pique' ),
|
|
'choices' => array(
|
|
'0.25' => esc_html__( '25%', 'pique' ),
|
|
'0.5' => esc_html__( '50%', 'pique' ),
|
|
'0.75' => esc_html__( '75%', 'pique' ),
|
|
'1' => esc_html__( '100%', 'pique' ),
|
|
|
|
),
|
|
) );
|
|
|
|
// Panel 6
|
|
$wp_customize->add_section( 'pique_panel6', array(
|
|
'title' => esc_html__( 'Panel 6', 'pique' ),
|
|
'active_callback' => 'is_front_page',
|
|
'panel' => 'pique_options_panel',
|
|
'description' => __( 'Add a background image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'pique' ),
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel6', array(
|
|
'default' => false,
|
|
'sanitize_callback' => 'pique_sanitize_numeric_value',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel6', array(
|
|
'label' => esc_html__( 'Panel Content', 'pique' ),
|
|
'section' => 'pique_panel6',
|
|
'type' => 'dropdown-pages',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel6_background', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'sanitize_hex_color',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel6_background', array(
|
|
'label' => esc_html__( 'Background Color', 'pique' ),
|
|
'section' => 'pique_panel6',
|
|
'type' => 'color',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel6_opacity', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'pique_sanitize_opacity',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel6_opacity', array(
|
|
'label' => esc_html__( 'Featured Image Opacity', 'pique' ),
|
|
'section' => 'pique_panel6',
|
|
'type' => 'select',
|
|
'description' => esc_html( 'Set the opacity of the featured image over the panel background.', 'pique' ),
|
|
'choices' => array(
|
|
'0.25' => esc_html__( '25%', 'pique' ),
|
|
'0.5' => esc_html__( '50%', 'pique' ),
|
|
'0.75' => esc_html__( '75%', 'pique' ),
|
|
'1' => esc_html__( '100%', 'pique' ),
|
|
|
|
),
|
|
) );
|
|
|
|
// Panel 7
|
|
$wp_customize->add_section( 'pique_panel7', array(
|
|
'title' => esc_html__( 'Panel 7', 'pique' ),
|
|
'active_callback' => 'is_front_page',
|
|
'panel' => 'pique_options_panel',
|
|
'description' => __( 'Add a background image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'pique' ),
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel7', array(
|
|
'default' => false,
|
|
'sanitize_callback' => 'pique_sanitize_numeric_value',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel7', array(
|
|
'label' => esc_html__( 'Panel Content', 'pique' ),
|
|
'section' => 'pique_panel7',
|
|
'type' => 'dropdown-pages',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel7_background', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'sanitize_hex_color',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel7_background', array(
|
|
'label' => esc_html__( 'Background Color', 'pique' ),
|
|
'section' => 'pique_panel7',
|
|
'type' => 'color',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel7_opacity', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'pique_sanitize_opacity',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel7_opacity', array(
|
|
'label' => esc_html__( 'Featured Image Opacity', 'pique' ),
|
|
'section' => 'pique_panel7',
|
|
'type' => 'select',
|
|
'description' => esc_html( 'Set the opacity of the featured image over the panel background.', 'pique' ),
|
|
'choices' => array(
|
|
'0.25' => esc_html__( '25%', 'pique' ),
|
|
'0.5' => esc_html__( '50%', 'pique' ),
|
|
'0.75' => esc_html__( '75%', 'pique' ),
|
|
'1' => esc_html__( '100%', 'pique' ),
|
|
|
|
),
|
|
) );
|
|
|
|
// Panel 8
|
|
$wp_customize->add_section( 'pique_panel8', array(
|
|
'title' => esc_html__( 'Panel 8', 'pique' ),
|
|
'active_callback' => 'is_front_page',
|
|
'panel' => 'pique_options_panel',
|
|
'description' => __( 'Add a background image to your panel by setting a featured image in the page editor. If you don’t select a page, this panel will not be displayed.', 'pique' ),
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel8', array(
|
|
'default' => false,
|
|
'sanitize_callback' => 'pique_sanitize_numeric_value',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel8', array(
|
|
'label' => esc_html__( 'Panel Content', 'pique' ),
|
|
'section' => 'pique_panel8',
|
|
'type' => 'dropdown-pages',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel8_background', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'sanitize_hex_color',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel8_background', array(
|
|
'label' => esc_html__( 'Background Color', 'pique' ),
|
|
'section' => 'pique_panel8',
|
|
'type' => 'color',
|
|
) );
|
|
|
|
$wp_customize->add_setting( 'pique_panel8_opacity', array(
|
|
'default' => 'default',
|
|
'sanitize_callback' => 'pique_sanitize_opacity',
|
|
'transport' => 'postMessage',
|
|
) );
|
|
|
|
$wp_customize->add_control( 'pique_panel8_opacity', array(
|
|
'label' => esc_html__( 'Featured Image Opacity', 'pique' ),
|
|
'section' => 'pique_panel8',
|
|
'type' => 'select',
|
|
'description' => esc_html( 'Set the opacity of the featured image over the panel background.', 'pique' ),
|
|
'choices' => array(
|
|
'0.25' => esc_html__( '25%', 'pique' ),
|
|
'0.5' => esc_html__( '50%', 'pique' ),
|
|
'0.75' => esc_html__( '75%', 'pique' ),
|
|
'1' => esc_html__( '100%', 'pique' ),
|
|
|
|
),
|
|
) );
|
|
}
|
|
add_action( 'customize_register', 'pique_customize_register' );
|
|
|
|
/**
|
|
* Sanitize a numeric value
|
|
*/
|
|
function pique_sanitize_numeric_value( $input ) {
|
|
if ( is_numeric( $input ) ) {
|
|
return intval( $input );
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Sanitize a true/false checkbox
|
|
*/
|
|
function pique_sanitize_checkbox( $input ) {
|
|
if ( ! in_array( $input, array( true, false ) ) ) {
|
|
$input = false;
|
|
}
|
|
return $input;
|
|
}
|
|
|
|
/*
|
|
* Sanitize our opacity values
|
|
*/
|
|
function pique_sanitize_opacity( $input ) {
|
|
|
|
$choices = array( 'default', 0.25, 0.5, 0.75, 1 );
|
|
|
|
if ( ! in_array( $input, $choices ) ) {
|
|
$input = 'default';
|
|
}
|
|
|
|
return $input;
|
|
}
|
|
|
|
/*
|
|
* Output our custom CSS to change background colour/opacity of panels.
|
|
* Note: not very pretty, but it works.
|
|
*/
|
|
function pique_customizer_css() {
|
|
?>
|
|
<style type="text/css">
|
|
<?php
|
|
// Get each panel and iterate to output the proper CSS styles
|
|
$panels = array( '1', '2', '3', '4', '5', '6', '7', '8' );
|
|
foreach ( $panels as $panel ) :
|
|
// Adjust the background colour if a custom colour is set
|
|
if ( get_theme_mod( 'pique_panel' . $panel . '_background' ) ) : ?>
|
|
.pique-frontpage .pique-panel.pique-panel<?php echo absint( $panel ); ?> {
|
|
background-color: <?php echo esc_attr( get_theme_mod( 'pique_panel' . $panel . '_background' ) ); ?>;
|
|
}
|
|
<?php endif;
|
|
// Adjust the opacity of featured image if set
|
|
if ( get_theme_mod( 'pique_panel' . $panel . '_opacity' ) ) : ?>
|
|
.pique-frontpage .pique-panel.pique-panel<?php echo absint( $panel ); ?> .pique-panel-background {
|
|
opacity: <?php echo esc_attr( get_theme_mod( 'pique_panel' . $panel . '_opacity' ) ); ?>;
|
|
}
|
|
<?php endif;
|
|
endforeach; ?>
|
|
</style>
|
|
<?php
|
|
}
|
|
add_action( 'wp_head', 'pique_customizer_css' );
|
|
|
|
/**
|
|
* Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
|
|
*/
|
|
function pique_customize_preview_js() {
|
|
wp_enqueue_script( 'pique_customizer', get_template_directory_uri() . '/assets/js/customizer.js', array( 'customize-preview' ), '20151117', true );
|
|
}
|
|
add_action( 'customize_preview_init', 'pique_customize_preview_js' );
|
|
|
|
function pique_panels_js() {
|
|
wp_enqueue_script( 'pique_extra_js', get_template_directory_uri() . '/assets/js/panel-customizer.js', array(), '20151116', true );
|
|
}
|
|
add_action( 'customize_controls_enqueue_scripts', 'pique_panels_js' );
|