latest version

Create Your First Customizer Option

In your project, activate theme plugin with Unyson and create a file which will contain all customizer options: /theme/framework-customizations/theme/options/customizer.php with the following content:

<?php if ( ! defined( 'FW' ) )   {
      die( 'Forbidden' );
}

$options = array(

  'page-head'  => array(
    'title'              => 'Page Header',
    'options'            => array(

      /** whether or not the page head should be visible */
      'head_display'            => array(
        'value' => 1, // always define a default value
        'type'  => 'checkbox',
        'label' => esc_html__( 'Display page header', 'ct_theme' ),
            'desc'  => esc_html__( 'Check to display page header in top of the page (customizable in options of every page)', 'ct_theme' ),
            'help'  => esc_html__( 'Do you want to display page header at the top of the page?', 'ct_theme' ),
          ),

      /** whether or not the breadcrumbs should be visible */
      'head_breadcrumbs_display' => array(
        'value' => 0, // always define a default value
        'type'  => 'checkbox',
            'label' => esc_html__( 'Display breadcrumbs', 'ct_theme' ),
            'desc'  => esc_html__( 'Check to display breadcrumbs in page header', 'ct_theme' ),
            'help'  => esc_html__( 'Do you want to display breadcrumbs at the top of the page?', 'ct_theme' ),

        /** additional wp-customizer attributes*/
            'wp-customizer-args' => array(

          /** show this option only when 'head_display' option is active */
          'active_callback' => function () {
            return !! fw_get_db_customizer_option( 'head_display' );
          },

        ),
      ),
    ),
  ),
);

Then, in your project’s theme/header.php file put the following code:

<?php

// check if the option has any value. if not ( eg. the default value was not set ) return true
if ( fw_get_db_customizer_option( 'head_display', true ) ) :

    get_template_part( 'page-templates/page-head' );

endif;

?>

Next, create a file /theme/page-templates/page-head.php with the following content:

PAGE HEADER HERE

<?php

// check if the option has any value. if not ( eg. the default value was not set ) return false
        if ( fw_get_db_customizer_option( 'head_breadcrumbs_display' ) ):

    echo 'BREADCRUMBS HERE';

        endif;

Also, make sure you have get_header() call in your theme/index.php file or whichever page you should test.

Go now to the Customizer and check the results.

../../_images/customizer-option.png
Further reading: