0

I have a simple Wordpress Custimizer section being added. The section shows and the controls are rendered and can be seen if you click it before it vanishes or if you stop the page load before it vanishes (Which leads me to believe it is JavaScript related). I can't figure out why?

UPDATE - The section disappears as soon as the preview loads and the JavaScript for the preview is loaded

Here's a video of all three above described actions: https://drive.google.com/file/d/16lJqbwCMDUanFlp1C1WsVHcTeyAS6MLu/view

Here's the class responsible for modifying the customizer:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}/**
 * Kickstarter Theme Customizer Class (class-kickstater-customizer.php)
 *
 * @package WordPress
 * @subpackage OGZ_Kickstarter
 * @since 1.0
 * @version 1.0
 */

require_once 'customizer/class-kickstarter-cutomizer-controls.php';
require_once 'customizer/class-kickstarter-cutomizer-sections.php';
require_once 'customizer/class-kickstarter-cutomizer-settings.php';

class Kickstarter_Customizer {

    /**
     * OGZ Kickstarter Theme Mods
     *
     * @since 1.0.0
     * @var array $theme_mods
     */
    private $theme_mods;

    /**
     * Instance of WordPress core WP_Customize_Manager object
     *
     * @since 1.0.0
     * @var WP_Customize_Manager $customizer
     */
    private $customizer;

    /**
     * Kickstarter customizer controls class
     *
     * @since 1.0.0
     * @var Kickstarter_Customizer_Controls $controls
     */
    private $controls; 

    /**
     * Kickstarter customizer sections class
     *
     * @since 1.0.0
     * @var Kickstarter_Customizer_Sections $sections
     */
    private $sections; 

    /**
     * Kickstarter customizer settings class
     *
     * @since 1.0.0
     * @var Kickstarter_Customizer_Settings $settings
     */
    private $settings;

    /**
     * Kickstarter_Customizer constructor.
     *
     * @since 1.0.0
     * @param array $theme_mods
     */
    public function __construct( $theme_mods ) {
        global $wp_customize;
        $this->customizer = $wp_customize;
        $this->theme_mods = $theme_mods;
        $this->settings = new Kickstarter_Customizer_Settings( $this->customizer );
        $this->controls = new Kickstarter_Customizer_Controls( $this->customizer );
        $this->sections = new Kickstarter_Customizer_Sections( $this->customizer );
    }

    public function init() {
        add_action( 'customize_register', [ $this, 'kickstarter_customizer' ] );
    }

    /**
     * Adds Kickstarter theme customizer settings
     *
     * @since 1.0.0
     * @return void
     */
    public function kickstarter_customizer() {
        $this->settings->init();
        $this->sections->init();
       $this->controls->init();
    }

}

The Settings class:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}/**
 * Kickstarter Theme Customizer Settings Class (class-kickstater-customizer-settings.php)
 *
 * @package WordPress
 * @subpackage OGZ_Kickstarter
 * @since 1.0
 * @version 1.0
 */

require_once 'settings/boolean/class-kickstarter-boolean-setting.php';

class Kickstarter_Customizer_Settings {

/**
 * WordPress Customize Manager
 * 
 * @var WP_Customize_Manager $customizer
 */
private $customizer;

/**
 * Kickstarter_Customizer_Settings constructor.
 * 
 * @param WP_Customize_Manager $customizer
 */
public function __construct( $customizer ) {
    $this->customizer = $customizer;
}

/**
 * Register the kickstarter theme settings
 *
 * @since 1.0.0
 * @return void
 */
public function init() {
    /*
     * Theme Settings Section Settings
     */

    // Theme Layout Choice
    $this->customizer->add_setting( 'kickstarter_theme_layout', [
        'default'           => 0,
        'sanitize_callback' => 'absint',
        'transport'         => 'refresh'
    ] );

    // Mobile Menu Layout Choice
    $this->customizer->add_setting( 'kickstarter_mobile_menu_layout', [
        'default'           => 0,
        'sanitize_callback' => 'absint',
        'transport'         => 'refresh'
    ] );


    // Header Layout Choice
    $this->customizer->add_setting( 'kickstarter_header_layout', [
        'default'           => 0,
        'sanitize_callback' => 'absint',
        'transport'         => 'refresh'
    ] );

}

The sections class:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}/**
 * Kickstarter Theme Customizer Sections Class (class-kickstater-customizer-sections.php)
 *
 * @package WordPress
 * @subpackage OGZ_Kickstarter
 * @since 1.0
 * @version 1.0
 */

class Kickstarter_Customizer_Sections {
    /**
     * WordPress Customize Manager
     *
     * @var WP_Customize_Manager $customizer
     */
    private $customizer;

    /**
     * Kickstarter_Customizer_Settings constructor.
     *
     * @param WP_Customize_Manager $customizer
     */
    public function __construct( $customizer ) {
        $this->customizer = $customizer;
    }

    /**
     * Register the kickstarter customizer sections
     *
     * @since 1.0.0
     * @return void
     */
    public function init() {

        //Add Kickstarter customizer sections
        $this->customizer->add_section( 'kickstarter_theme_settings', [
            'title'    => __( 'Theme Settings', 'ogz_kickstarter' ),
            'priority' => 1,
        ] );

    }

}

The controls class:

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}/**
  * Kickstarter Theme Customizer Controls Class (class-kickstater-customizer-controls.php)
 *
 * @package WordPress
 * @subpackage OGZ_Kickstarter
 * @since 1.0
 * @version 1.0
 */

class Kickstarter_Customizer_Controls {
    /**
     * WordPress Customize Manager
     *
     * @var WP_Customize_Manager $customizer
     */
    private $customizer;

    /**
     * Kickstarter_Customizer_Settings constructor.
     *
     * @param WP_Customize_Manager $customizer
     */
    public function __construct( $customizer ) {
        $this->customizer = $customizer;
    }

    /**
     * Registers the Kickstarter Customizer controls
     *
     * @since 1.0.0
     * @return void
     */
    public function init() {
        // Theme Layout Select Control
        $this->customizer->add_control( 'kickstarter_theme_layout', [
            'type'     => 'select',
            'priority' => 5,
            'section'  => 'kickstarter_theme_settings',
            'label'    => __( 'Theme Layout Style', 'ogz_kickstarter' ),
            'choices'  => [
                __( 'Boxed Layout', 'ogz_kickstarter' ),
                __( 'Full Width Layout', 'ogz_kickstarter' ),
            ],
        ] );

        // Mobile Menu Layout Select Control
        $this->customizer->add_control( 'kickstarter_mobile_menu_layout', [
            'type'     => 'select',
            'priority' => 10,
            'section'  => 'kickstarter_theme_settings', // Required, core or custom.
            'label'    => __( 'Mobile Menu Layout Style', 'ogz_kickstarter' ),
            'choices'  => [
                __( 'Slide Down', 'ogz_kickstarter' ),
                __( 'Slide Up', 'ogz_kickstarter' ),
                __( 'Slide In From Left', 'ogz_kickstarter' ),
                __( 'Slide In From Right', 'ogz_kickstarter' ),
                __( 'Off Canvas Menu - Slide In From Left', 'ogz_kickstarter' ),
                __( 'Off Canvas Menu - Slide In From Right', 'ogz_kickstarter' ),
            ],
        ] );

        // Header Layout Select Control
        $this->customizer->add_control( 'kickstarter_header_layout', [
            'type'     => 'select',
            'label'    => __( 'Header Layout', 'ogz_kickstarter' ),
            'section'  => 'kickstarter_theme_settings', // Required, core or custom.
            'priority' => 5,
            'choices'  => [
                __( 'Left Logo With Right Side Navigation', 'ogz_kickstarter' ),
                __( 'Centered Logo With Bottom Navigation', 'ogz_kickstarter' ),
                __( 'Sidebar Like Header Layout', 'ogz_kickstarter' ),
                __( 'Half Screen Hero With Bottom Navigation', 'ogz_kickstarter' ),
                __( 'Full Screen Hero', 'ogz_kickstarter' ),
            ],
        ] );

    }

}

Does anybody have any thoughts or suggestions? I appreciate it.

0

You have conflicting Javascript between the customizer and the customizer preview. Your solution is to deregister the stock jquery

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.