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
Links
Ressources
Wordpress Developers -> Customiser API
Smashing Magazines Developers guide
Old but still relevant introduction (Otto)
Colorscheme settings and controls
Adding more Customiser settings
Theme Customizer Boilerplate (slobodan)
Custom Customizer Controls (paulund)
Wordpress Theme Customiser 2015
By Steffen Gammelgaard
Wordpress Theme Customiser 2015
- 3,806