Theme Customizer – setting in WordPress
To get started, to understand what Theme Customizer is, watch the video from youtube, think, much will become clear. After watching the video, you probably won't need a plugin OptionTree which I spoke about before.
I think after watching you will have a lot of ideas on how you can use this useful panel, and here is how it works, let's take a look below.
Existing Options
The first thing I think is important to consider is the existing theme customization methods., as many authors write them 3 the option, let's believe them and try to learn how to use these methods.
- There are mods, which are supported to work with the theme, You can control these mods using the functions set_theme_mod and get_theme_mod. These features are supported Settings API WordPress and work great.
- Individual settings for each theme. Not the best way to create topics, but it also has a place to be and is also supported in Theme Customizer.
- Serialized Settings – In fact, you store the settings in an array, and then save this array using set_option or get_option, as one row in the database. This is the most optimal method and we will consider it in this article..
We briefly mentioned the other two methods and if we need them, then we will consider them.
Firstly in Theme Customizer left side is divided into sections and it is worth paying attention! Everything works through a special action (a pig) customize_register.
|
1 2 3 |
add_action( 'customize_register', 'themename_customize_register' ); function themename_customize_register($wp_customize) { // ... do stuff ... |
The function receives as a parameter $wp_customize this is the main object. We will work with it when adding sections, controls and the like.
Sections in Theme Customizer
So, first, what should be done, is to add a section. Here is one way to do it:
|
1 2 3 4 5 6 7 8 |
function themename_customize_register($wp_customize){ $wp_customize->add_section('themename_color_scheme', array( 'title' => __('Color Scheme', 'themename'), 'priority' => 120, )); } |
While there are no controls in the section and they are not configured, the new section will not be displayed, we'll talk about controls a bit later., and now let's look at the code that we described above.
themename_color_scheme – the first parameter is the unique id to display, we will need this identifier later when we place controls in the section.
The second parameter is an array. This array has two indexes. Index title to specify a section title and description. Index priority this is the partition priority, which determines their order.
Section Settings
Further, let's tweak some settings. We propose parameters for our section and consider 3 the option.
We declare the settings like this:
No. 3 setting option. On saving, an array will be created with the name, including the theme name and index, which will be the name of our option.
|
1 2 3 4 5 |
$wp_customize->add_setting( 'themename_theme_options[color_scheme]', array( 'default' => 'some-default-value', 'type' => 'option', 'capability' => 'edit_theme_options', ) ); |
No. 2 setting option. When saving, a variable will be created. Variable name will include theme name and option name, which we will keep.
|
1 2 3 4 5 |
$wp_customize->add_setting( 'themename_color_scheme', array( 'default' => 'some-default-value', 'type' => 'option', 'capability' => 'edit_theme_options', ) ); |
#1 setting option. When saving, a variable will be created, which in its name will store only the name of the option.
|
1 2 3 4 5 |
$wp_customize->add_setting( 'color_scheme', array( 'default' => 'some-default-value', 'type' => 'theme_mod', 'capability' => 'edit_theme_options', ) ); |
We will use option #3.
In addition to the fact that we have set the settings for the theme WordPress and with help add_setting put them in the database, still need to set controls. Let's try to add one of them, after adding, a section with controls such as radio buttons will appear in your Theme Customizer.
|
1 2 3 4 5 6 7 8 9 10 11 |
$wp_customize->add_control( 'themename_color_scheme', array( 'label' => __( 'Color Scheme', 'themename' ), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[color_scheme]', 'type' => 'radio', 'choices' => array( 'value1' => 'Choice 1', 'value2' => 'Choice 2', 'value3' => 'Choice 3', ), ) ); |
Consider displaying a checkbox control in Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 |
$wp_customize->add_setting('themename_theme_options[checkbox_test]', array( 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('display_header_text', array( 'settings' => 'themename_theme_options[checkbox_test]', 'label' => __('Display Header Text'), 'section' => 'themename_color_scheme', 'type' => 'checkbox', )); |
Consider an example of displaying a select control in Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$wp_customize->add_setting('themename_theme_options[header_select]', array( 'default' => 'value2', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( 'example_select_box', array( 'settings' => 'themename_theme_options[header_select]', 'label' => 'Select Something:', 'section' => 'themename_color_scheme', 'type' => 'select', 'choices' => array( 'value1' => 'Choice 1', 'value2' => 'Choice 2', 'value3' => 'Choice 3', ), )); |
Consider an example of displaying a text input control in Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[text_test]', array( 'default' => 'Arse!', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('themename_text_test', array( 'label' => __('Text Test', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[text_test]', )); |
Consider an example of displaying an image upload control in Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[image_upload_test]', array( 'default' => 'image.jpg', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Image_Control($wp_customize, 'image_upload_test', array( 'label' => __('Image Upload Test', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[image_upload_test]', ))); |
Consider an example of displaying a control of the File Upload type in Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[upload_test]', array( 'default' => 'arse', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Upload_Control($wp_customize, 'upload_test', array( 'label' => __('Upload Test', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[upload_test]', ))); |
Consider an example of displaying a control of the Color Picker type in Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$wp_customize->add_setting('themename_theme_options[link_color]', array( 'default' => '000', 'sanitize_callback' => 'sanitize_hex_color', 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'link_color', array( 'label' => __('Link Color', 'themename'), 'section' => 'themename_color_scheme', 'settings' => 'themename_theme_options[link_color]', ))); |
Consider an example of displaying a control of the Page Dropdown type in Theme Customizer
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$wp_customize->add_setting('themename_theme_options[page_test]', array( 'capability' => 'edit_theme_options', 'type' => 'option', )); $wp_customize->add_control('themename_page_test', array( 'label' => __('Page Test', 'themename'), 'section' => 'themename_color_scheme', 'type' => 'dropdown-pages', 'settings' => 'themename_theme_options[page_test]', )); |
We are done with types., in general, as it turned out, not everything is so complicated and even object-oriented, which, to be honest, made me very happy WordPress, are gradually being corrected ). Think, to start developing your own themes with this tool will be enough.
Viewing and Displaying Options, which were saved in Theme Customizer
Live Preview
Oh yeah I almost forgot, options we have created, but we still need to display them in the template and allow the user to view our options before saving them, and only that person will be able to see the changes., who makes them in real time and a regular user will not be able to until the save button is pressed.
Most likely, many of the smart programmers who sit on my site have already guessed that to display the preview of the options, we will use the tricky JQUERY script.
At the very end of our function themename_customize_register, before closing, paste code:
|
1 2 3 |
$wp_customize->get_setting( 'themename_theme_options[text_test]' )->transport = 'postMessage'; $wp_customize->get_setting( 'themename_theme_options[link_color]' )->transport = 'postMessage'; if ( $wp_customize->is_preview() && ! is_admin() ) { add_action( 'wp_footer', 'themename_customize_preview', 21); } |
This action will display the function in the footer of the site after executing the code, which will show the changes with JQUERY, changing the content of the element $( ‘#logo a’ ).html( newval ). Attention, my logo is marked ‘#logo a’ you may be different.
Code $wp_customize->get_setting( ‘…’)->transport = ‘postMessage’ as far as I understand, it is needed to pass the name of the option so that it can be further used to display a preview, I tried without this code but it didn't work. ), I didn't find the answer in English either.. If anyone has an answer, write in the comments. Even though the code works.
Here is the jquery plugin code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function themename_customize_preview() { ?> <script type="text/javascript"> ( function( $ ) { // Update the site title in real time... wp.customize( 'themename_theme_options[text_test]', function( value ) { value.bind( function( newval ) { $( '#logo a' ).html( newval ); } ); } ); //Update site title color in real time... wp.customize( 'themename_theme_options[link_color]', function( value ) { value.bind( function( newval ) { $('a').css('color', newval ); } ); } ); } )( jQuery ); </script> <!--?php }</pre> <p>Как видно из кода выше наш плагин jquery первым параметром передает название опции <u>themename_theme_options[text_test]</u>, а вторым функцию которая будет в режиме реального времени изменять содержимое тега <u>$( '#logo a' ).html( newval );</u>.</p> <p>Если вы все сделали правильно, то у вас при изменении содержимого опции <em>themename_theme_options[link_color]</em> и до нажатия кнопки <u>Сохранить и опубликовать</u> на вашем экране справа будет меняться текст логотипа.</p> <h3>Вывод сохраненных опций</h3> <p>Все что мы делали в предварительном просмотре работает пока мы не нажмем кнопку <u>Сохранить и опубликовать</u> или <u>обновим страницу</u>. Для того чтобы данные не исчезали необходимо заменить стандартный код в шаблоне на вывод нашего содержимого из опции.<br ?--><strong>Открываем шаблон и находим код который нужно поправить:</strong> |
|
1 |
Replace the code with this:
|
1 |
<!--?php $themename_theme_options = get_option( "themename_theme_options" ); ?--> |
|
1 |
Yes, thought the article would be shorter, but almost a complete guide to working with Theme Customizer. Looks like I got carried away with the topic. ).
Since the topic is not simple, I decided to lay out some sources for you.
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.
When copying a lesson, please leave a link back to the author's article, that is me!
