Adding Widget form fields dynamically

Question

I am trying to add form field to a WordPress widget dynamically. So if the user want to add another date to an event they can click a button to get more fields.

The question is: How do save newly created input fields to my database? Do i need to write a custom update function? Any tips?

This is how the widget looks: enter image description here

This is my php code for the widget (so far):

 class Spillelister extends WP_Widget { public function Spillelister() { $widget_options = array ( 'classname' => 'spillelister-widget', 'description' => 'Widget for å illustrere spillelister.'); parent::WP_Widget('spillelister_widget', 'Spilleplan', $widget_options); } // The actual widget user interface public function widget($args, $instance) { extract( $args, EXTR_SKIP); $title = ( $instance['title'] ) ? $instance['title'] : 'Spilleplan'; $body = ( $instance['body'] ) ? $instance['body'] : 'Ingen flere forestillinger'; ?> <?php echo $before_widget; ?> <?php echo $before_title . $title . $after_title; ?> <p><?php echo $body; ?></p> <?php } public function update() { } public function form() { ?> <div class="date_stamp"> <p> <label>Dato</label> <input type="text" class="datepicker"> <br> <label>Tid</label> <input type="text"> <span class="remove">Remove</span> </p> </div> <p> <span class="add">Add fields</span> </p> <?php } } function spillelister_init() { register_widget('Spillelister'); } add_action('widgets_init', 'Spillelister_init');

Any tips, hints or answers are appreciated. :)

I know I'm late, but I bumped into this thread and found an answer in another: wordpress.stackexchange.com/questions/94617/… The trick seems to be to pass values back as an array. — alexanderfilatov
– alexanderfilatov, Commented Jul 16, 2014 at 13:58

Community · Accepted Answer · 2017-04-13 12:37:42Z

Interesting Question!
I've never seen repeatable fields used in Widgets. Giving a full Answer would require too much work/time, so I'll give you links to the resources I know, and hopefully you'll make this work and share the solution with us ;)

All this examples deal with Meta Boxes, you'll need to copy the jQuery scripts and adapt the post_meta to the Widgets case.

Create more Meta Boxes as needed - WPSE Q&A

Repeatable Custom Fields in a Metabox - Gist

/** * Repeatable Custom Fields in a Metabox * Author: Helen Hou-Sandi * * From a bespoke system, so currently not modular - will fix soon * Note that this particular metadata is saved as one multidimensional array (serialized) */

Repeatable Custom Fields in a Metabox - Another Gist example, no description given. This one is quite interesting as it has the code to sort the fields.

Thank you! I'll check it out and give an answer if i work out how to solve this. If you or any one else find any more resources on this please do not hesitate to share it :) — Ole Henrik Skogstrøm
– Ole Henrik Skogstrøm, Commented Mar 3, 2013 at 12:28
Never got to try this out, however if any one manages to build something like this please post your solution bellow. :) — Ole Henrik Skogstrøm
– Ole Henrik Skogstrøm, Commented May 1, 2013 at 11:11

HKandulla · Accepted Answer · 2016-08-09 12:41:35Z

This is an example of a dynamic widget that renders two fields (image-id and url). if you enter an image-id and press "update", two new fields are added. I build it to create a slick slilder with images and linked url's.

<?php class imp_image_slider extends WP_Widget { /** * imp_image_slider constructor. */ public function __construct() { parent::__construct(false, $name = "Impulse Image Slider", array("description" => "Creates Slick Image Slider")); } /** * @see WP_Widget::widget * * @param array $args * @param array $instance */ public function widget($args, $instance) { // render widget in frontend } /** * @see WP_Widget::update * * @param array $newInstance * @param array $oldInstance * * @return array */ public function update($newInstance, $oldInstance) { $instance = $oldInstance; $instance['images'] = array(); $instance['urls'] = array(); if (isset($newInstance['images'])) { foreach ($newInstance['images'] as $key => $value) { if (!empty(trim($value))) { $instance['images'][$key] = $value; $instance['urls'][$key] = $newInstance['urls'][$key]; } } } return $instance; } /** * @see WP_Widget::form * * @param array $instance */ public function form($instance) { $images = isset($instance['images']) ? $instance['images'] : array(); $urls = isset($instance['urls']) ? $instance['urls'] : array(); $images[] = ''; $form = ''; foreach ($images as $idx => $value) { $image = isset($images[$idx]) ? $images[$idx] : ''; $url = isset($urls[$idx]) ? $urls[$idx] : ''; $form .= '<p>' . '<label>Slides:</label>' . sprintf( '<input type="text" name="%1$s[%2$s]" value="%3$s" class="widefat" placeholder="Image ID">', $this->get_field_name('images'), $idx, esc_attr($image)) . '</p>' . '<p>' . sprintf( '<input type="text" name="%1$s[%2$s]" value="%3$s" class="widefat" placeholder="Url">', $this->get_field_name('urls'), $idx, esc_attr($url)) . '</p>'; } echo $form; } } add_action('widgets_init', create_function('', 'return register_widget("imp_image_slider");')); ?>

Hi, can you also add comments or some info as how it helps OP in addition to the code posted as code only answers are discouraged — bravokeyl
– bravokeyl, Commented Aug 9, 2016 at 12:14
@HKandulla Thank you sooo much. You and your code is my life saver once again Thank you. — Owaiz Yusufi
– Owaiz Yusufi, Commented Aug 3, 2017 at 15:16

Stack Exchange Network

Adding Widget form fields dynamically

2 Answers 2

Linked

Hot Network Questions

Adding Widget form fields dynamically

2 Answers 2

Linked

Related

Hot Network Questions