I’ve created a wordpress little widget (a form with 2 fields) and display it on the back office..
Everything works fine, And I can using it to create only one record and display it in the front, but what I really want to do is to be able to create many records from the back-office using it (like posts) and display them to the front office of the website.
Published Records on the front-office : (what I want)
Record1 | Record2 | Record3
-------------------------------------------------------------------------------
Title: Title1 | Title: Title2 | Title: Title3
Price: Price1 | Price: Price2 | Price: Price3
Published Record on the front-office : (what I actually Have)
Record
----------------------
Title: Title
Price: Price
Here’s my code :
class wp_ikbal extends WP_Widget {
// constructor
function wp_ikbal() {
parent::WP_Widget(false, $name = __('Ikbal Widget', 'wp_ikbal') );
}
// widget form creation
function form($instance) {
// Check values
if( $instance) {
$Title = esc_attr($instance['text']);
$Price = esc_textarea($instance['textarea']);
} else {
$Title = '';
$Price = '';
}
?>
<p>
<label for="<?php echo $this->get_field_id('Title'); ?>"><?php _e('Nom Produit:', 'wp_ikbal'); ?></label>
<input class="widefat" id="<?php echo $this->get_field_id('Title'); ?>" name="<?php echo $this->get_field_name('Title'); ?>" type="text" value="<?php echo $Title; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('Price'); ?>"><?php _e('Price:', 'wp_ikbal'); ?></label>
<textarea class="widefat" id="<?php echo $this->get_field_id('Price'); ?>" name="<?php echo $this->get_field_name('Price'); ?>"><?php echo $Price; ?></textarea>
</p>
<?php
}
// widget update
function update($new_instance, $old_instance) {
$instance = $old_instance;
// Fields
$instance['Title'] = strip_tags($new_instance['Title']);
$instance['Price'] = strip_tags($new_instance['Price']);
return $instance;
}
// widget display
function widget($args, $instance) {
extract( $args );
// these are the widget options
$text = $instance['Title'];
$textarea = $instance['Price'];
echo $before_widget;
// Display the widget
echo '<div class="widget-text wp_widget_plugin_box">';
// Check if text is set
if( $Title ) {
echo '<p class="wp_widget_plugin_text">'.$Title.'</p>';
}
// Check if textarea is set
if( $Price ) {
echo '<p class="wp_widget_plugin_textarea">'.$Price.'</p>';
}
echo '</div>';
echo $after_widget;
}
}
// register widget
add_action('widgets_init', create_function('', 'return register_widget("wp_ikbal");'));
How can I do this ? Thank you.
You need Repeatable Fields, the answer here would be verbatim of this one in WPSE. Basically:
In the Widget constructor add an
admin_enqueue_scripts
to load the needed jQuery (or you can put it inline inform()
).In
form()
add the markup to have a “template” for the inputs and that’s used by jQuery to duplicate the fields.In
update()
, iterate through the posted fields and save accordingly.Resources:
Create more Meta Boxes as needed – WPSE Q&A
Custom Meta Boxes: Store two values in one repeatable field – WPSE Q&A
Repeatable Custom Fields in a Metabox – Gist
Repeatable Custom Fields in a Metabox – Another Gist. This one has the code to sort the fields.
PS: you’ll probably find that jQuery don’t work when the Widget is firstly dropped into a sidebar. The solution is here.