Getting started with WordPress get_bloginfo()Enqueuing scripts Making network requests with HTTP API Enqueuing Styles home_url()Custom Post Types template_include The Loop (main WordPress loop)AJAX The $wpdb Object Actions and Filters wp_get_current_user()Add/remove contact info for users with user_contactmethods filter hook Creating a custom template Customizer Hello World Customizer Basics (Add Panel, Section, Setting, Control)The Admin Bar (aka "The Toolbar")Querying posts Alternating main loop (pre_get_posts filter)Shortcode Create a Post Programmatically get_template_part()Taxonomies get_template_part()Shortcodes Post Formats Custom exerpts with excerpt_length and excerpt_more Plugin development Security in WordPress - Escaping Template hierarchy Remove Version from Wordpress and Stylesheets Child Theme Basics add_action()get_template_part()Shortcode with attribute Sidebars Security in WordPress - Sanitization init Create Template for Custom Post Type Function: add_action()Add Shortcode How Can I integrate Markdown editor with Advance Custom Field's repeater Add-on.Installation and Configuration wp_get_current_user()WP-Cron Secure your installation Options API Function : wp_trim_words()WP_Query() Loop Update WordPress Manually Themes WP-CLI Debugging add_menu_page()add_submenu_page()get_option()get_permalink()get_the_category()the_title()get_the_title()add_editor_style()add_theme_support()WordPress Plugin creation Run WordPress local with XAMPP Admin Dashboard Widgets Site Migration Meta Box Remove Auto Line Breaks From Content and Excerpt get_home_path()Wordpress theme and child-theme development REST API

Customizer Hello World

Hello World Example

The fundamental concept of the customizer is that admins can live preview changes to their site, and then permanently add them.

The following can be copied and pasted into a theme's functions.php file to

Add a customizer section called My First Section
Add a customizer setting called Hello World Color allowing the admin to choose a color
Add a css rule for .hello-world that will corespond with the color chosen and default to #000000 if nothing is chosen. The setting will be put in a <style> tag at the end of the <head>.


function mytheme_customize_register( $wp_customize ) {

    $wp_customize->add_section( 'my_first_section_id' , array(
        'title'      => __( 'My First Section', 'mytheme' ),
        'priority'   => 30,
    ) );

    $wp_customize->add_setting( 'hello_world_color' , array(
        'default'     => '#000000',
        'transport'   => 'refresh',
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
        'label'        => __( 'Hello World Color', 'mytheme' ),
        'section'    => 'my_first_section_id',
        'settings'   => 'hello_world_color',
    ) ) );


}
add_action( 'customize_register', 'mytheme_customize_register' );


function mytheme_customize_css()
{
    ?>
    <style type="text/css">
        .hello-world { color: #<?php echo get_theme_mod('hello_world_color', '000000'); ?>; }
    </style>
    <?php
}
add_action( 'wp_head', 'mytheme_customize_css');

Parameters:

Parameter	Details
mytheme	A unique identifier for your theme (or child theme). This can be your theme slug

Contributors

Topic Id: 2875

Example Ids: 9747

This site is not affiliated with any of the contributors.