<?php | |
class Ari_Customizer { | |
public static function register ( $wp_customize ) { | |
//1. Define a new section (if desired) to the Theme Customizer | |
$wp_customize->add_section( 'ari_options', | |
array( | |
'title' => __( 'Ari Options', 'ari' ), //Visible title of section | |
'priority' => 30, //Determines what order this appears in | |
'capability' => 'edit_theme_options', //Capability needed to tweak | |
'description' => __('Erlaubt einige Einstellungen.', 'ari'), //Descriptive tooltip | |
) | |
); | |
//2. Register new settings to the WP database... | |
$wp_customize->add_setting( 'accent_color', //No need to use a SERIALIZED name, as `theme_mod` settings already live under one db record | |
array( | |
'default' => '#88C34B', //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)? | |
) | |
); | |
// Add logo setting and sanitize it | |
$wp_customize->add_setting( 'ari_logo', | |
array( | |
'sanitize_callback' => 'esc_url_raw' | |
) | |
); | |
//3. Finally, we define the control itself (which links a setting to a section and renders the HTML controls)... | |
$wp_customize->add_control( new WP_Customize_Color_Control( //Instantiate the color control class | |
$wp_customize, //Pass the $wp_customize object (required) | |
'ari_accent_color', //Set a unique ID for the control | |
array( | |
'label' => __( 'Seitentitel', 'ari' ), //Admin-visible name of the control | |
'section' => 'colors', //ID of the section this control should render in (can be one of yours, or a WordPress default section) | |
'settings' => 'accent_color', //Which setting to load and manipulate (serialized is okay) | |
) | |
) ); | |
// Den User die Farben des Theme anpassen lassen | |
$colors = array(); | |
$colors[] = array( | |
'slug'=>'content_text_color', | |
'default' => '#333', | |
'label' => __('Text', 'Ari') | |
); | |
$colors[] = array( | |
'slug'=>'content_link_color', | |
'default' => '#88C34B', | |
'label' => __('Links', 'Ari') | |
); | |
foreach( $colors as $color ) { | |
// SETTINGS | |
$wp_customize->add_setting( | |
$color['slug'], array( | |
'default' => $color['default'], | |
'type' => 'option', | |
'capability' => | |
'edit_theme_options', | |
) | |
); | |
// CONTROLS | |
$wp_customize->add_control( | |
new WP_Customize_Color_Control( | |
$wp_customize, | |
$color['slug'], | |
array('label' => $color['label'], | |
'section' => 'colors', | |
'settings' => $color['slug']) | |
) | |
); | |
} | |
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'ari_logo', array( | |
'label' => __( 'Logo', 'ari' ), | |
'section' => 'ari_logo', | |
'settings' => 'ari_logo', | |
) ) ); | |
$wp_customize->add_section( 'ari_logo' , array( | |
'title' => __( 'Logo', 'ari' ), | |
'priority' => 40, | |
'description' => __('Logo hochladen und den Text des Blognahmens ersetzen','ari'), | |
) ); | |
// Sektion erstellen für den Werbeblock | |
$wp_customize->add_section("werbung", array( | |
"title" => __("Werbeblock", "customizer_werbung_sections"), | |
"priority" => 30, | |
)); | |
// Die Einstellungen erstellen | |
$wp_customize->add_setting("werbung_code", array( | |
"default" => "", | |
"transport" => "postMessage", | |
)); | |
// Die Eingabemöglichkeit erstellen | |
$wp_customize->add_control(new WP_Customize_Control( | |
$wp_customize, | |
"werbung_code", | |
array( | |
"label" => __("Werbecode einfügen", "customizer_werbung_code_label"), | |
"section" => "werbung", | |
"settings" => "werbung_code", | |
"type" => "textarea", | |
) | |
)); | |
// Sektion erstellen für das dunkle Theme | |
$wp_customize->add_section("darktheme", array( | |
"title" => __("Dunkles Theme", "customizer_dark_sections"), | |
"priority" => 40, | |
)); | |
$wp_customize->add_setting('darktheme_css', array( | |
'capability' => 'edit_theme_options', | |
"transport" => "refresh", | |
)); | |
// Die Eingabemöglichkeit erstellen | |
$wp_customize->add_control(new WP_Customize_Control( | |
$wp_customize, | |
"dark_theme_css", | |
array( | |
"label" => __("Das dunkle Theme aktivieren", "customizer_dark_theme_label"), | |
"section" => "darktheme", | |
"settings" => "darktheme_css", | |
"type" => "checkbox", | |
) | |
)); | |
//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 = 'postMessage'; | |
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; | |
} | |
public static function live_preview() { | |
wp_enqueue_script( | |
'ari-themecustomizer', // Give the script a unique ID | |
get_template_directory_uri() . '/theme-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) | |
); | |
} | |
} | |
// Setup the Theme Customizer settings and controls... | |
add_action( 'customize_register' , array( 'Ari_Customizer' , 'register' ) ); | |
// Enqueue live preview javascript in Theme Customizer admin screen | |
add_action( 'customize_preview_init' , array( 'Ari_Customizer' , 'live_preview' ) ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment