THEME CUSTOMISER

Introduction to the new and powerful live-preview options system for Wordpress

by Steffen Gammelgaard Brand Rocket

View live link

http://slides.com/brandrocket/deck/live

Why?
How?
Wow!

THE WORDPRESS THEME CUSTOMIZER ALLOWS YOU TO CHANGE THE STYLE AND FUNCTIONALITY OF YOUR WORDPRESS THEME AND SEE THE CHANGES YOU MAKE IN REAL TIME WITHOUT SAVING THE WORDPRESS THEME.

- PAUL UNDERWOOD

Why?

Now the only theme options system approved by wordpress.org

 

 

 

 

 

 

Easier with one standard instead of hundreds of different options systems to master

1

 

 

 

 

3

2

Live preview makes it a much easier to customise a theme and get the options right the first time

4.3

from

version

A gazillion usages!

Why learn the Customiser system?

Because it has

THE BULDING BLOCKS

How?

customiser.php

All the settings

customiser.js

The live preview

1

2

Get the option

3

Panels and sections

$wp_customize->add_section( 'custom_section', array(
  'title' => __( 'Section', 'theme-name' ),
  'description' => __( 'Add multiple settings here...' ),
) );

Setting and

control

$wp_customize->add_setting( 'brandrocket_logo', array(
    'sanitize_callback' => 'esc_url_raw',
) );

$wp_customize->add_control( new WP_Customize_Image_Control( 
$wp_customize, 'brandrocket_logo', array(
    'label'    => __( 'Logo', 'theme-name' ),
    'section'  => 'brandrocket_logo_section',
    'settings' => 'brandrocket_logo',
) ) );

Saving the settings

$wp_customize->add_setting( 'setting_id', array(
  'type' => 'theme_mod', // or 'option'
) );
    // Register the settings
    $wp_customize->add_setting( 'my_setting', array(
        'default'        => 'some-default-value',
        'type'           => 'theme_mod',
        'capability'     => 'edit_theme_options',
    ) );
    // Add the controls
    $wp_customize->add_control( 'my_setting', array(
        'label'       => __( 'My custom control', 'theme-name' ),
        'section'     => 'my_section',
        'settings'    => 'my_setting',
        'type'        => 'text',
        'priority'    => 10
    ) );

Wordpress customiser API

Kirki

    // Add the controls
    $fields[] = array(
        'label'       => __( 'My custom control', 'theme-name' ),
        'section'     => 'my_section',
        'settings'    => 'my_setting',
        'type'        => 'text',
        'priority'    => 10,
        'default'     => 'some-default-value',
        'option_type' => 'theme_mod',
        'capability'  => 'edit_theme_options',
    );

WOW!

Some thoughts...

- It can potentially replace a series of plugins

- A library of easy copy-paste customiser settings

- The enhanced UX will make WP even more popular

on the effects of the new customiser

THANKS!

Steffen Gammelgaard

www.brandrocket.dk

Links

Wordpress Theme Customiser 2015

By Steffen Gammelgaard

Wordpress Theme Customiser 2015

  • 3,806