add_section( 'social_newspaper', array( 'title' => __( '99THEME | Social', 'newspaper' ), //Visible title of section 'priority' => 1, //Determines what order this appears in 'capability' => 'edit_theme_options', //Capability needed to tweak ) ); $wp_customize->add_section( 'banner_right_newspaper', array( 'title' => __( '99THEME | Banner Right', 'newspaper' ), //Visible title of section 'priority' => 2, //Determines what order this appears in 'capability' => 'edit_theme_options', //Capability needed to tweak ) ); $wp_customize->add_section( 'banner_left_newspaper', array( 'title' => __( '99THEME | Banner Left', 'newspaper' ), //Visible title of section 'priority' => 3, //Determines what order this appears in 'capability' => 'edit_theme_options', //Capability needed to tweak ) ); $wp_customize->add_section( 'news_top_newspaper', array( 'title' => __( '99THEME | News Top', 'newspaper' ), //Visible title of section 'priority' => 4, //Determines what order this appears in 'capability' => 'edit_theme_options', //Capability needed to tweak ) ); $wp_customize->add_section( 'news_bottom_newspaper', array( 'title' => __( '99THEME | News Bottom', 'newspaper' ), //Visible title of section 'priority' => 5, //Determines what order this appears in 'capability' => 'edit_theme_options', //Capability needed to tweak ) ); $wp_customize->add_section( 'copyright_newspaper', array( 'title' => __( '99THEME | Copyright', 'newspaper' ), //Visible title of section 'priority' => 6, //Determines what order this appears in 'capability' => 'edit_theme_options', //Capability needed to tweak ) ); //Banner 1 $wp_customize->add_setting( 'banner_left_image_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => get_template_directory_uri().'/images/banner1.png', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_setting( 'banner_left_link_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'http://99theme.com', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_control( new WP_Customize_Image_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_banner_img_left', //Set a unique ID for the control array( 'label' => __( 'Image banner left:', 'newspaper' ), //Admin-visible name of the control 'section' => 'banner_left_newspaper', //ID of the section this control should render in (can be one of yours, or a WordPress default section) 'settings' => 'banner_left_image_newspaper', //Which setting to load and manipulate (serialized is okay) 'priority' => 1, //Determines the order this control appears in for the specified section ) ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_banner_link_left', //Set a unique ID for the control array( 'label' => __( 'Link banner left:', 'newspaper' ), 'section' => 'banner_left_newspaper', 'settings' => 'banner_left_link_newspaper', 'type' => 'text', 'priority' => 2, //Determines the order this control appears in for the specified section ) ) ); //Banner 2 $wp_customize->add_setting( 'banner_right_image_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => get_template_directory_uri().'/images/banner2.png', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_setting( 'banner_right_link_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'http://99theme.com', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_control( new WP_Customize_Image_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_banner_img_right', //Set a unique ID for the control array( 'label' => __( 'Image banner right:', 'newspaper' ), //Admin-visible name of the control 'section' => 'banner_right_newspaper', //ID of the section this control should render in (can be one of yours, or a WordPress default section) 'settings' => 'banner_right_image_newspaper', //Which setting to load and manipulate (serialized is okay) 'priority' => 3, //Determines the order this control appears in for the specified section ) ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_banner_link_right', //Set a unique ID for the control array( 'label' => __( 'Link banner right:', 'newspaper' ), 'section' => 'banner_right_newspaper', 'settings' => 'banner_right_link_newspaper', 'type' => 'text', 'priority' => 4, //Determines the order this control appears in for the specified section ) ) ); //News top right 2 $wp_customize->add_setting( 'news_top_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => '0', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); // Get id and name Category $args = array( 'type' => 'post', 'child_of' => 0, 'parent' => '', 'orderby' => 'name', 'order' => 'ASC', 'hide_empty' => 1, 'hierarchical' => 1, 'exclude' => '', 'include' => '', 'number' => '', 'taxonomy' => 'category', 'pad_counts' => false ); $categories = get_categories( $args ); foreach( $categories as $cate ){ $cate_use[$cate->cat_ID] = $cate->cat_name; } $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_news_top', //Set a unique ID for the control array( 'label' => __( 'Select category for news top right', 'theme_name' ), 'section' => 'news_top_newspaper', 'settings' => 'news_top_newspaper', 'priority' => 5, //Determines the order this control appears in for the specified section 'type' => 'select', 'choices' => $cate_use, ) ) ); $wp_customize->add_setting( 'news_top_numb_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => '3', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_news_top_numb', //Set a unique ID for the control array( 'label' => __( 'Number news top right:', 'newspaper' ), 'section' => 'news_top_newspaper', 'settings' => 'news_top_numb_newspaper', 'type' => 'text', 'priority' => 6, //Determines the order this control appears in for the specified section ) ) ); //News top right 2 $wp_customize->add_setting( 'news_bottom_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => '0', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); // Get id and name Category $args_2 = array( 'type' => 'post', 'child_of' => 0, 'parent' => '', 'orderby' => 'name', 'order' => 'ASC', 'hide_empty' => 1, 'hierarchical' => 1, 'exclude' => '', 'include' => '', 'number' => '', 'taxonomy' => 'category', 'pad_counts' => false ); $categories_2 = get_categories( $args_2 ); foreach( $categories_2 as $cate_2 ){ $cate_use_2[$cate_2->cat_ID] = $cate_2->cat_name; } $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_news_bottom', //Set a unique ID for the control array( 'label' => __( 'Select category for news bottom right', 'theme_name' ), 'section' => 'news_bottom_newspaper', 'settings' => 'news_bottom_newspaper', 'priority' => 5, //Determines the order this control appears in for the specified section 'type' => 'select', 'choices' => $cate_use_2, ) ) ); $wp_customize->add_setting( 'news_bottom_numb_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => '3', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_news_bottom_numb', //Set a unique ID for the control array( 'label' => __( 'Number news bottom right:', 'newspaper' ), 'section' => 'news_bottom_newspaper', 'settings' => 'news_bottom_numb_newspaper', 'type' => 'text', 'priority' => 7, //Determines the order this control appears in for the specified section ) ) ); //Facebook $wp_customize->add_setting( 'facebook_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'Facebook', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_setting( 'facebook_link_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'http://facebook.com', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_facebook', //Set a unique ID for the control array( 'label' => __( 'Social 1 title:', 'newspaper' ), 'section' => 'social_newspaper', 'settings' => 'facebook_newspaper', 'type' => 'text', 'priority' => 1, //Determines the order this control appears in for the specified section ) ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_facebook_link', //Set a unique ID for the control array( 'label' => __( 'Social 1 link:', 'newspaper' ), 'section' => 'social_newspaper', 'settings' => 'facebook_link_newspaper', 'type' => 'text', 'priority' => 2, //Determines the order this control appears in for the specified section ) ) ); //Digg $wp_customize->add_setting( 'digg_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'Digg', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_setting( 'digg_link_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'http://digg.com', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_digg', //Set a unique ID for the control array( 'label' => __( 'Social 2 title:', 'newspaper' ), 'section' => 'social_newspaper', 'settings' => 'digg_newspaper', 'type' => 'text', 'priority' => 3, //Determines the order this control appears in for the specified section ) ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_digg_link', //Set a unique ID for the control array( 'label' => __( 'Social 2 link:', 'newspaper' ), 'section' => 'social_newspaper', 'settings' => 'digg_link_newspaper', 'type' => 'text', 'priority' => 4, //Determines the order this control appears in for the specified section ) ) ); //Twitter $wp_customize->add_setting( 'twitter_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'Twitter', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_setting( 'twitter_link_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'http://twitter.com', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_twitter', //Set a unique ID for the control array( 'label' => __( 'Social 3 title:', 'newspaper' ), 'section' => 'social_newspaper', 'settings' => 'twitter_newspaper', 'type' => 'text', 'priority' => 5, //Determines the order this control appears in for the specified section ) ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_twitter_link', //Set a unique ID for the control array( 'label' => __( 'Social 3 link:', 'newspaper' ), 'section' => 'social_newspaper', 'settings' => 'twitter_link_newspaper', 'type' => 'text', 'priority' => 6, //Determines the order this control appears in for the specified section ) ) ); //Copyright $wp_customize->add_setting( 'copyright_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'Your Company', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_setting( 'copyright_link_newspaper', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record array( 'default' => 'http://99theme.com', //Default setting/value to save 'type' => 'theme_mod', //Is this an 'option' or a 'theme_mod'? 'capability' => 'edit_theme_options', //Optional. Special permissions for accessing this setting. 'transport' => 'refresh', //What triggers a refresh of the setting? 'refresh' or 'postMessage' (instant)? ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_copyright', //Set a unique ID for the control array( 'label' => __( 'Company:', 'newspaper' ), 'section' => 'copyright_newspaper', 'settings' => 'copyright_newspaper', 'type' => 'text', 'priority' => 7, //Determines the order this control appears in for the specified section ) ) ); $wp_customize->add_control( new WP_Customize_Control( //Instantiate the color control class $wp_customize, //Pass the $wp_customize object (required) 'newspaper_copyright_link', //Set a unique ID for the control array( 'label' => __( 'Company link:', 'newspaper' ), 'section' => 'copyright_newspaper', 'settings' => 'copyright_link_newspaper', 'type' => 'text', 'priority' => 8, //Determines the order this control appears in for the specified section ) ) ); //4. We can also change built-in settings by modifying properties. For instance, let's make some stuff use live preview JS... $wp_customize->get_setting( 'blogname' )->transport = 'refresh'; $wp_customize->get_setting( 'blogdescription' )->transport = 'refresh'; $wp_customize->get_setting( 'header_textcolor' )->transport = 'refresh'; $wp_customize->get_setting( 'background_color' )->transport = 'refresh'; // Delete section $wp_customize->remove_section( 'colors'); $wp_customize->remove_section( 'background_image'); $wp_customize->add_section( 'nav', array( 'title' => __( '99THEME | Menu' ), 'priority' => 8, ) ); $wp_customize->add_section( 'title_tagline', array( 'title' => __( '99THEME | Site Title & Tagline' ), 'priority' => 7, ) ); } /** * This will output the custom WordPress settings to the live theme's WP head. * * Used by hook: 'wp_head' * * @see add_action('wp_head',$func) * @since MyTheme 1.0 */ public static function header_output() { ?> 'postMessage' instead of the default 'transport' * => 'refresh' * * Used by hook: 'customize_preview_init' * * @see add_action('customize_preview_init',$func) * @since MyTheme 1.0 */ public static function live_preview() { wp_enqueue_script( 'newspaper-themecustomizer', // Give the script a unique ID get_template_directory_uri() . '/js/customizer.js', // Define the path to the JS file array( 'jquery', 'customize-preview' ), // Define dependencies '', // Define a version (optional) true // Specify whether to put in footer (leave this true) ); } /** * This will generate a line of CSS for use in header output. If the setting * ($mod_name) has no defined value, the CSS will not be output. * * @uses get_theme_mod() * @param string $selector CSS selector * @param string $style The name of the CSS *property* to modify * @param string $mod_name The name of the 'theme_mod' option to fetch * @param string $prefix Optional. Anything that needs to be output before the CSS property * @param string $postfix Optional. Anything that needs to be output after the CSS property * @param bool $echo Optional. Whether to print directly to the page (default: true). * @return string Returns a single line of CSS with selectors and a property. * @since MyTheme 1.0 */ public static function generate_css( $selector, $style, $mod_name, $prefix='', $postfix='', $echo=true ) { $return = ''; $mod = get_theme_mod($mod_name); if ( ! empty( $mod ) ) { $return = sprintf('%s { %s:%s; }', $selector, $style, $prefix.$mod.$postfix ); if ( $echo ) { echo $return; } } return $return; } } // Setup the Theme Customizer settings and controls... add_action( 'customize_register' , array( 'NewsPaper_Customize' , 'register' ) ); // Output custom CSS to live site add_action( 'wp_head' , array( 'NewsPaper_Customize' , 'header_output' ) ); // Enqueue live preview javascript in Theme Customizer admin screen add_action( 'customize_preview_init' , array( 'NewsPaper_Customize' , 'live_preview' ) );