Customizer radio image control (ok)

http://justintadlock.com/archives/2015/06/04/customizer-radio-image-control

C:\xampp82\htdocs\wp4\wp-content\themes\auto\functions.php

<?php
add_action( 'customize_register', 'jt_customize_register' );
function jt_customize_register( $wp_customize ) {
	// Load the radio image control class.
	require_once( trailingslashit( get_template_directory() ) . 'customize/control-radio-image.php' );
	// Register the radio image control class as a JS control type.
	$wp_customize->register_control_type( 'JT_Customize_Control_Radio_Image' );
	// Add a custom layout section.
	$wp_customize->add_section( 'layout', array( 'title' => esc_html__( 'Layout', 'jt' ) ) );
	// Add the layout setting.
	$wp_customize->add_setting(
		'layout',
		array(
			'default'           => 'content-sidebar',
			'sanitize_callback' => 'sanitize_key',
		)
	);
	// Add the layout control.
	$wp_customize->add_control(
		new JT_Customize_Control_Radio_Image(
			$wp_customize,
			'layout',
			array(
				'label'    => esc_html__( 'Layout', 'jt' ),
				'section'  => 'layout',
				'choices'  => array(
					'content-sidebar' => array(
						'label' => esc_html__( 'Content / Sidebar', 'jt' ),
						'url'   => '%s/images/content-sidebar.png'
					),
					'sidebar-content' => array(
						'label' => esc_html__( 'Sidebar / Content', 'jt' ),
						'url'   => '%s/images/sidebar-content.png'
					),
					'content' => array(
						'label' => esc_html__( 'Content - One Column', 'jt' ),
						'url'   => '%s/images/content.png'
					)
				)
			)
		)
	);
}

C:\xampp82\htdocs\wp4\wp-content\themes\auto\customize\control-radio-image.php

C:\xampp82\htdocs\wp4\wp-content\themes\auto\css\customize-controls.css

C:\xampp82\htdocs\wp4\wp-content\themes\auto\js\customize-controls.js

Vấn đề 1: Xem dữ liệu của to_json()

code

Code

Vấn đề 2: Đăng ký WP_Customize_Control

Justin Tadlock

June 4, 2015

Customizer radio image control

Layout customizer control

In this tutorial, I’ll be writing about a radio image control for the WordPress customizer. This was a request, but I honestly don’t remember who asked for it. Sorry for forgetting. I hope you’re following the blog. :)

This type of control is also something I’ve needed for a long while. It’s now being used in the revamped layout setting in the Hybrid Core framework.

Basically, a radio image control replaces your standard <input type="radio" /> fields with selectable images. So, it’s pretty cool for things like selecting a layout or any other setting where it’d be nice to have a visual representation of the option.

Like other advanced customizer tutorials, I’ll be moving through this fast and not explaining each detail. You need to be at least somewhat familiar with building settings in the customizer before moving forward.

Building the radio image control class

The first thing we need to do is build a custom control class that extends WP_Customize_Class. So, create a new file called control-radio-image.php in your theme’s /customize folder (or whatever structure you prefer) and place the following code into it.

Fair warning for those of you studying the code: you may be used to seeing a render_content() method in custom control classes. I opted to go with a JS template via the content_template() method. See core ticket #30738 for the main reason why. Admittedly, I’m a bit out of my element working with JS templates, but the best way to learn is to simply do and to teach others by writing about it. Feel free to correct anything I screw up.

Loading scripts and styles

In the class above, you probably noticed that I enqueued a few scripts and styles. The jQuery UI buttonset() is the primary script that handles replacing the radio inputs with images. It’s included with WP, so we merely need to load it.

We also need a custom JS script to apply the buttonset() to our radio inputs and to handle the customizer setting when it changes. Place the following code in your theme’s /js/customize-controls.js file:

And, we need a little bit of custom CSS to handle styling the control. Place the following code in your theme’s /css/customize-controls.css file.

Actually using the radio input control

OK, so you’ve got everything in place now. Awesome. Yeah, there’s a bit of setup, but it’s pretty fun to play around with this thing.

At this point, you just have a final step before doing cool stuff.

The following code is an example of using the custom control to output a layout setting with images that represent the various layouts. Note that you’ll actually need to replace the image URLs in the code with something relevant to your theme.

Topics:#WordPress Tutorials#WordPress

PreviousHybrid Core dùng để thiết kế theme một cách nhanh và gọn (ok)NextMột ví dụ quan trọng Remove action from a plugin class (ok)

Last updated

Was this helpful?