Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Custom built in widget WordPress


Hi all,
I am creating a built in widget for a theme.

The widget is extracting the recent posts from posts and taxonomy (portfolio) so it have an option to select the post-type from a drop down, for default is selected Posts, and bellow of the drop down are exposed all options for Posts, if you select from the drop down the taxonomy (in our case Portfolio) and click on save button, instead of all options from Posts you get the options only for Portfolio... but this is only if you click the save button...
What I need is to add some ajax code or something like this, so if I select from the drop down one of this - Posts or Portfolio, all of their options that are only for Posts or Portfolio to load after I sellect an them from the drop down - without pressing the save button each time!

Also when I am switching from post-types the settings inside the widget are not saving correctly...

[[LINK href=""]]Here[[/LINK]] I've attached the default twentyten theme with the built in widget and taxonomy, that are located in the functions folder.

If someone could help me with this pleas reply to this questions, also if you need more information please feel free to ask.

P.S. sorry for my bad english.

Answers (2)


Sébastien | French WordpressDesigner answers:

tu veux que le réglage de ton widget soit sauvegardé même si on ne clique pas sur le bouton de validation. c'est ça ?

Creative Dreams comments:

No, I just need after I select from the drop down to display the options for each of post type... and only after I set up all needed options after that if I click save button the options to be saved...

Now for example I can see the Portfolio options only after I click the save button, but I need them to see after I select from the drop down - without clicking the save...


Jatin Soni answers:

Okay cool I have created plugin for my theme where it will display normal post and custom post type recent posts and it is working completely fine without any trouble.

Here is the full code.

Please do not use mediaplus change to your theme name. That's my theme name :)


* Add function to widgets_init that'll load our widget.
* @since 0.1
add_action( 'widgets_init', 'custom_post_widget' );

* Register our widget.
* 'Custom_Post_Wiedget' is the widget class used below.
* @since 0.1
function custom_post_widget() {
register_widget( 'Custom_Post_Wiedget' );

* Example Widget class.
* This class handles everything that needs to be handled with the widget:
* the settings, form, display, and update. Nice!
* @since 0.1
class Custom_Post_Wiedget extends WP_Widget {

* Widget setup.
function Custom_Post_Wiedget() {
/* Widget settings. */
$widget_ops = array( 'classname' => 'mediaplust-cpt-widget', 'description' => __('MediaPlust custom post type widget for Video, Audio, Gallery and Portfolio recent posts', 'mediaplus') );

/* Widget control settings. */
$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'mediaplus-cpt-recent-widget' );

/* Create the widget. */
$this->WP_Widget( 'mediaplus-cpt-recent-widget', __('MediaPlus Recent CPT', 'mediaplus'), $widget_ops, $control_ops );

* How to display the widget on the screen.
function widget( $args, $instance ) {
extract( $args );

/* Our variables from the widget settings. */
$title = apply_filters('widget_title', $instance['title'] );
$count = $instance['count'];
$cpt = $instance['cpt'];

/* Before widget (defined by themes). */
echo $before_widget;

/* Display the widget title if one was input (before and after defined by themes). */
if ( $title )
echo $before_title . $title . $after_title;

/* Display name from widget settings if one was input. */
global $more;

$wp_query = new WP_Query();
$wp_query->query('post_type='.$cpt = $instance['cpt'].'' .'&posts_per_page=' . $count . '');

echo '<ul class="cpt-widget-list clearfix">';
while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>

<li class="clearfix">
<?php mp_thumb('widget-lst-thumb', 'widget-thumb', 'widget32'); ?>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
<?php wpe_excerpt('wpe_excerptlength_list', 'wpe_excerptmore'); ?>

<?php endwhile;
echo '</ul>';

/* After widget (defined by themes). */
echo $after_widget;

* Update the widget settings.
function update( $new_instance, $old_instance ) {
$instance = $old_instance;

/* Strip tags for title and name to remove HTML (important for text inputs). */
$instance['title'] = strip_tags( $new_instance['title'] );
$instance['count'] = strip_tags( $new_instance['count'] );

/* No need to strip tags for cpt and show_cpt. */
$instance['cpt'] = $new_instance['cpt'];

return $instance;

* Displays the widget settings controls on the widget panel.
* Make use of the get_field_id() and get_field_name() function
* when creating your form elements. This handles the confusing stuff.
function form( $instance ) {

/* Set up some default widget settings. */
$defaults = array( 'title' => __('MediaPlus CPT', 'mediaplus'), 'count' => __('5', 'mediaplus'), 'cpt' => 'portfolio', 'show_cpt' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>

<!-- Widget Title: Text Input -->
<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'hybrid'); ?></label>
<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />

<!-- cpt: Select Box -->
<label for="<?php echo $this->get_field_id( 'cpt' ); ?>"><?php _e('Post Type:', 'mediaplus'); ?></label>
<select id="<?php echo $this->get_field_id( 'cpt' ); ?>" name="<?php echo $this->get_field_name( 'cpt' ); ?>" class="widefat" style="width:100%;">
<option <?php if ( 'post' == $instance['format'] ) echo 'selected="selected"'; ?>>Post</option>
<option <?php if ( 'video' == $instance['format'] ) echo 'selected="selected"'; ?>>Video</option><!--[change your cpt here]-->
<option <?php if ( 'audio' == $instance['format'] ) echo 'selected="selected"'; ?>>Audio</option><!--[change your cpt here]-->
<option <?php if ( 'gallery' == $instance['format'] ) echo 'selected="selected"'; ?>>Gallery</option><!--[change your cpt here]-->
<option <?php if ( 'portfolio' == $instance['format'] ) echo 'selected="selected"'; ?>>Portfolio</option><!--[change your cpt here]-->

<!-- Number of Posts: Text Input -->
<label for="<?php echo $this->get_field_id( 'count' ); ?>"><?php _e('Number Of Posts:', 'mediaplus'); ?></label>
<input id="<?php echo $this->get_field_id( 'count' ); ?>" name="<?php echo $this->get_field_name( 'count' ); ?>" value="<?php echo $instance['count']; ?>" size="3" />



Only one thing forgot to mention that once you select any option from dropdown and after save it will selection will jump back to the first option. But at the front end it will display the option what you have selected and saved. If you find any solution for it pls share with me too.

Creative Dreams comments:

This is not what I need... My widget works cool with extracting the posts from post types, my problem is in the backend...

Is there anyone who can help me?

Jatin Soni comments:

Okay I got what you mean. You mean to display sub option forms as per selection into dropdown options. That also I have done for my metaboxes. Just provide me your code if possible so I can make it works for you or I can post the update in the evening.