Creating Custom Controls For WP Theme Customization Screen

If you’re a WordPress user, then probably you would have heard of – Theme Customizer – a new exciting development that was introduced with the release of WordPress 3.4 version. Theme customizer enables users to make alterations to the theme settings via a WYSIWYG interface, resulting in a customized theme which consists of different color schemes, fonts, text and many other options. In nutshell, integrating theme customizer help make your theme visually more alluring to both website owners and developers, without depending upon a theme options page.

What’s more, a theme developer can use the “Theme Customization API” to inject more interactive customization options to a WP theme. But the API offers a limited set of controls to be included in a theme like textarea, category dropdown, layout picker and a few others. But, what if you want to create more custom controls?

In this post we’ll discuss about how you can create two custom controls: one is a simple textarea control and the second one is a complicated dropdown post selector for your WordPress theme. But before, let’s first discuss about some basic aspects of a custom control.

Creating a Custom Control Using The WP_Customize_Control Class

In order to generate all the controls that are displayed in the theme customizer, the WP_Customize_Control class is used. However, you don’t need to use this class when using a basic set of custom controls like checkboxes, text etc., as the class is abstracted. Let’s take a look at an example that verifies the same:

$wp_customize->add_control('your_control_id', array(

	'label' => __( 'Control Label', 'mycustomtheme' ),
	'section' => 'your_section_id',
	'settings' => 'your_setting_id',
	'type' => 'radio',
	'choices' => array(
		'left' => 'left',
		'right' => 'right',
		),
	)

);

As you can see in the above code snippet, a WP_Customize_Control object doesn’t need to be instantiated. Besides, WordPress will inspect to ensure whether you’re passing an object. If not, then WordPress will create a new WP_Customize_Control object and pass it along with the arguments passed in the above snippet.

$wp_customize->add_control(
	new WP_Customize_Control(
		$wp_customize,
		'your_setting_id',
		array (

		'label' => __( 'Dark or light theme version?', 'theme_name' ),
		'section' => 'your_section_id',
		'settings' => 'your_setting_id',
		'type' => 'radio',
			'choices' => array(
			'dark' => __( 'Dark' ),
			'light' => __( 'Light' )
			)

		)

	)

);

Creating Our Own Custom Controls

For creating our own choice of custom controls, we’ll have to create our class that requires extending the WP_Customize_Control class. Additionally, we’ll need to add a few of our functions as well. Let’s elucidate this process by taking an example, wherein we will create a simple text box (if it’s not available by default).

if( class_exists( 'WP_Customize_Control' ) ):
	class WP_Customize_Textarea_Control extends WP_Customize_Control {

		public $type = 'textarea';
		public function render_content() { ?>

		<label>
			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<textarea rows="5" style="width:100%;" <?php $this->link(); ?>><?php echo esc_textarea( $this->value() ); ?></textarea>
		</label>

		<?php
		}
	}

endif;

In the above snippet, $type, a public variable in the base class is assigned a value of text. However, you won’t find any setter method that sets the value of the type property. And so, we will have to define that property on our own, when extending the class.

Note: Keep in mind that you will need to use $this->link(), so that the theme customizer feature can work for the Javascript code; $this->value() helps to fetch the theme’s setting value we’re tweaking. Now that we’ve specified “textarea” as our new control type, let’s append it on a control that will look something like:

$wp_customize->add_control( new WP_Customize_Textarea_Control(
	$wp_customize,
	'footer_credits_control',
		array(
		'label' => __( 'Footer Credits', 'themename' ),
		'section' => 'footer_settings',
		'settings' => 'footer_credits',
		)
));

Our newly created control once added to the Theme Customizer page will enable admins to tweak the textarea setting, and even let them view those changes in real-time.

Dropdown To Display List of Latest Posts

Now that you’ve got a basic understanding of how to create a custom control, let us create another control for your WordPress theme. Let’s consider an example, wherein we will create a dropdown:

if( class_exists( 'WP_Customize_Control' ) ):
	class WP_Customize_Latest_Post_Control extends WP_Customize_Control {
			public $type = 'latest_post_dropdown';

			public function render_content() {

			$latest = new WP_Query( array(

				'post_type' => 'post',
				'post_status' => 'publish',
				'orderby' => 'date',
				'order' => 'DESC'

			));

			?>

			<label>
					<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
					<select <?php $this->link(); ?>>
						<?php
						while( $latest->have_posts() ) {
						$latest->the_post();
						echo "<option " . selected( $this->value(), get_the_ID() ) . " value='" . get_the_ID() . "'>" . the_title( '', '', false ) . "</option>";
						}
						?>
					</select>
			</label>
			<?php
			}
	}
endif;

In the above code snippet, nothing much is different except for that a custom loop is added for displaying the posts. Remember that in order to use the new dropdown control, it is imperative to define it as a public variable. For doing so, we only need to make changes to two lines of code in the above snippet. And our final code snippet will look as follows:

if( class_exists( 'WP_Customize_Control' ) ):

		class WP_Customize_Latest_Post_Control extends WP_Customize_Control {
		public $type = 'latest_post_dropdown';
		public $post_type = 'post';

		// this will make out post type control public

		public function render_content() {
		$latest = new WP_Query( array(
			'post_type' => $this->post_type,
			'post_status' => 'publish',
			'orderby' => 'date',
			'order' => 'DESC'
		));

		?>

		<label>

			<span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
			<select <?php $this->link(); ?>>
				<?php
				while( $latest->have_posts() ) {
				$latest->the_post();
				echo "<option " . selected( $this->value(), get_the_ID() ) . " value='" . get_the_ID() . "'>" . the_title( '', '', false ) . "</option>";
				}
			?>
			</select>
		</label>
		<?php
		}
	}

endif;

Conclusion

Even though, creating custom controls for a WP theme may take some of your time, be sure that the controls you’re creating must perform efficiently. This will help you save a lot of time of your users in tweaking a theme’s settings, and will provide a great user experience.However, your main focus should be on creating controls that easily adjusts to any one of your theme’s settings. Hopefully, reading this post will help you understand the process of creating your own custom controls in a best way possible.

Author Bio: Being a well-known wordpress developer from Designs2HTML Ltd., Sarah gives valuable and best tips on context of  HTML to WordPress theme conversion and design technique. Also, she is enthusiast of sharing his innovative ideas related to web design technologies. 
  • So useful to me that’s why I’m thank you for that. I’m so happy that I see your blog and I apply to my wordpress right away and everythings look great.

  • I’m so happy that I see your blog and I apply to my wordpress right away and everythings look great.