by

Sophia Phillips

26 May 2015, 04:57 pm

about the author

Sophia Phillips has been working as a professional in WordPress plugin development company and loves sharing information about leveraging multiple benefits of WordPress CMS in the best possible manner. Currently, she has an impressive count of WordPress web development-related articles under her name.

About Sophia Phillips

Theme Customization API – Creating Custom Controls In WordPress

Custom Controls

At present, businesses are struggling to defend their market position and maintain an edge over their competitors. And a well-designed and feature-rich website can help site owners establish a strong foothold in the market. When it comes to website creation and maintenance, WordPress is the first name that strikes our mind. Theme customizer is an excellent feature that helps in creating custom controls in WordPress and changing the style and functionality of WordPress powered sites in real time. In addition, this feature even allows you to view the changes without the need to save your WordPress theme.

 

The WordPress theme customization API helps to create options to support the theme. However, the API only offers limited controls including checkbox, radio, select and other controls. But, what if you want to have custom controls in your theme? Well, you can create a custom control class to have more controls, such as, a page template selector, a range selector and a Google Font selector to name a few.

In this post, we’ll explore about creating two custom controls: simple text area and a post selector.

How to include custom controls?

All the custom controls in the theme customizer are generated using WP_Customize_Control class. And so, for putting up a standard text field, checkbox, etc. you aren’t required to use the class, as it is abstracted away. Let’s now have a look at an example that illustrates a simple control:


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

'label' => __( 'Sidebar Position', 'mynewtheme' ),

'section' => 'sidebar_settings',

'settings' => 'sidebar_position',

'type' => 'radio',

'choices' => array(

'left' => 'Left',

'right' => 'Right',

),

) );

You’ll notice that the above code doesn’t contain WP_Customize_Control. In fact, WordPress creates the object. Let’s now look at the code snippet that uses WP_Customize_Control directly.


$wp_customize->add_control(

new WP_Customize_Control(

$wp_customize,

'sidebar_position_control',

array(

'label' => __( 'Sidebar Position', 'mynewtheme' ),

'section' => 'sidebar_settings',

'settings' => 'sidebar_position',

'type' => 'radio',

'choices' => array(

'left' => 'Left',

'right' => 'Right',

),

)

)

);

How to Create Custom Controls?

1. Creating a Simple Text Box

Since WP_Customize_Control class is used for creating the controls, we can create more controls by extending the class, and by adding some of our own functions. For example, looking at the following snippet will help you make a simple text box.


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;

There is a question that is often asked by the users – how to determine the functions that have been defined? You can get a better understanding of the question by looking at a few examples that other users have written. Note that the complex ones require looking at the source code for the base class.

In the above example, you can see that the variable “$type” is defined as text in the base class. The code of the class doesn’t contain a method which helps in setting the task and value of this property. That’s why, we’ll have to define the method on our own when extending the class. In the the example above render_content() method helps define controls.

What’s more?

In order to make JavaScript work in the theme customizer, $this->link() is required. And for retrieving the setting value that we’ve manipulated, $this->value() is used.

Now that we’ve defined the type of our text area control, let’s use it in a control as follows:


$wp_customize->add_control( new WP_Customize_Textarea_Control(

$wp_customize,

'footer_credits_control',

array(

'label'    => __( 'Footer Credits', 'theme_name' ),

'section' => 'footer_settings',

'settings' => 'footer_credits',

)

));

2. Creating Latest Posts Dropdown

When opting for WordPress web development, one of the custom controls that will prove useful to you is the Latest Posts Dropdown. For example, let’s create a dropdown for listing some of the latest posts:


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;

Creating Custom Controls In WordPress

Though the process of creating dropdown is similar to the one used for creating custom controls. However, there is just one addition that is required: a custom loop is needed for displaying the posts. Here’s an example of code snippet that will tweak the way a control is added as well as updated:


$wp_customize->add_control(

new WP_Customize_Latest_Post_Control(

$wp_customize,

'featpost_control',

array(

'label' => __( 'Select A Featured Post', 'mynewtheme' ),

'section' => 'header_section',

'settings' => 'featured_post',

'post_type' => 'page'

)

)

);

In order to use the new post type control, we’ll have to define it as a public variable within the class. The base class, WP_Customize_Control works by looking at the defined variables, and parses the data from the given arguments into the variables. And so, we only need to make changes to lines in the class.

As a result we only need to modify two lines in our class.


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';

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;

Wrapping Up!

Though, creating custom controls might take a little bit of your time, but remember the better your controls are, the more time you’ll be able to save for your users in using them. But don’t forget that your main goal should be to build controls that adjusts to a specific setting. But in case you need to select a wide range of settings, it would be better to choose a jQuery range slider for the task.

by

Sophia Phillips

26 May 2015, 04:57 pm

about the author

Sophia Phillips has been working as a professional in WordPress plugin development company and loves sharing information about leveraging multiple benefits of WordPress CMS in the best possible manner. Currently, she has an impressive count of WordPress web development-related articles under her name.

About Sophia Phillips
Comment with Facebook

trending

Featured Posts

Editors Choice

Reviews