Customizer Repeater is a custom control for the WordPress Theme Customizer. It's designed to be super user-friendly not only for your customers but for you too.
To install Customizer repeater copy the folder in the root of your theme and add the following line in functions.php before you call your customizer.php file.
require get_template_directory() . '/customizer-repeater/functions.php';
After you did this there's only one step left. Replace 'your-textdomain' textdomain with yours.
That's all!
If you want to change its placement make sure you update files path in functions.php and class/customizer-repeater-control.php files.
There are twelve types of fields that you can add in a box:
customizer_repeater_image_controlcustomizer_repeater_icon_controlcustomizer_repeater_title_controlcustomizer_repeater_subtitle_controlcustomizer_repeater_text_controlcustomizer_repeater_text2_controlcustomizer_repeater_link_controlcustomizer_repeater_link2_controlcustomizer_repeater_shortcode_controlcustomizer_repeater_repeater_controlcustomizer_repeater_color_controlcustomizer_repeater_color2_control
To choose what your repeater will look, just enable fields in your control's oprions. Here's an example, add the following code in your theme's customizer.php:
function xxx_customize_register( $wp_customize ) {
if (class_exists( 'Customizer_Repeater' ) ){
$wp_customize->add_setting( 'customizer_repeater_example', array(
'sanitize_callback' => 'customizer_repeater_sanitize'
));
$wp_customize->add_control( new Customizer_Repeater( $wp_customize, 'customizer_repeater_example', array(
'label' => esc_html__('Example','customizer-repeater'),
'section' => 'my_section',
'priority' => 1,
'customizer_repeater_image_control' => true,
'customizer_repeater_icon_control' => true,
'customizer_repeater_title_control' => true,
'customizer_repeater_subtitle_control' => true,
'customizer_repeater_text_control' => true,
'customizer_repeater_text2_control' => true,
'customizer_repeater_link_control' => true,
'customizer_repeater_link2_control' => true,
'customizer_repeater_shortcode_control' => true,
'customizer_repeater_repeater_control' => true,
'customizer_repeater_color_control' => true,
'customizer_repeater_color2_control' => true,
) ) );
}
}
add_action( 'customize_register', 'xxx_customize_register' );
Customizer Repeater also supports default input. If you want to add default input for your repeater here's how you do it:
$wp_customize->add_setting( 'customizer_repeater_example', array(
'sanitize_callback' => 'customizer_repeater_sanitize',
'default' => json_encode( array(
/*Repeater's first item*/
array("image_url" => get_template_directory_uri().'/images/companies/1.png' ,"link" => "#"), //every item in default string should have an unique id, it helps for translation
/*Repeater's second item*/
array("image_url" => get_template_directory_uri().'/images/companies/1.png' ,"link" => "#"),
/*Repeater's third item*/
array("image_url" => get_template_directory_uri().'/images/companies/1.png' ,"link" => "#"),
) )
) );
To get the input from your control just call it in the normal way:
$customizer_repeater_example = get_theme_mod('customizer_repeater_example', json_encode( array(/*The content from your default parameter or delete this argument if you don't want a default*/)) );
/*This returns a json so we have to decode it*/
$customizer_repeater_example_decoded = json_decode($customizer_repeater_example);
foreach($customizer_repeater_example_decoded as $repeater_item){
echo $repeater_item->icon_value;
echo $repeater_item->text;
echo $repeater_item->text2;
echo $repeater_item->link;
echo $repeater_item->link2;
echo $repeater_item->image_url;
echo $repeater_item->choice;
echo $repeater_item->title;
echo $repeater_item->subtitle;
echo $repeater_item->shortcode;
echo $repeater_item->color;
echo $repeater_item->color2;
/*Social repeater is also a repeater so we need to decode it*/
$social_repeater = json_decode($repeater_item->social_repeater);
foreach($social_repeater as $social_repeater){
echo $social_repeater->link;
echo $social_repeater->icon;
}
}
In some cases you may want to rename labels for inputs. Let's say you use this control to display a testimonial section. It's pretty confusing for the user to see "Title" instead of "Member name" or something else. Or in some cases you need a textarea instead of a simple imput. Here's what you need to do:
/**
* Filter to modify input type in repeater control
* You can filter by control id and input name.
*
* @param string $string Input label.
* @param string $id Input id.
* @param string $control Control name.
* @modified 1.1.41
*
* @return string
*/
function repeater_input_types( $string, $id, $control ) {
if ( $id === 'testimonials_content' ) { // here is the id of the control you want to change
if ( $control === 'customizer_repeater_subtitle_control' ) { //Here is the input you want to change
return 'textarea';
}
}
return $string;
}
add_filter( 'customizer_repeater_input_types_filter','repeater_input_types', 10 , 3 );
**
* Filter to modify input label in repeater control
* You can filter by control id and input name.
*
* @param string $string Input label.
* @param string $id Input id.
* @param string $control Control name.
* @modified 1.1.41
*
* @return string
*/
function repeater_labels( $string, $id, $control ) {
if ( $id === 'testimonials_content' ) {
if ( $control === 'customizer_repeater_text_control' ) {
return esc_html__( 'Button Text','your-textdomain' );
}
}
return $string;
}
add_filter( 'repeater_input_labels_filter','repeater_labels', 10 , 3 );
Customizer Repeater is not perfect but it works! Do you want to make it better? Feel free to fork this and make changes on development branch.
Special thanks for making this awesome go to @abaicus.