Tabbed Widget

Place files in /wp-content/plugins/be-tabbed-widget/. Requires styling, and set total tabs to a reasonable number. Screenshot (using Display Posts Shortcode and BE Stats in the tab contents)

jQuery(document).ready(function($){
$('.widget_tabbed').tabs();
});
view raw be-tabbed-widget.js hosted with ❤ by GitHub
<?php
/**
* Plugin Name: BE Tabbed Widget
* Plugin URI: http://www.billerickson.net
* Description: Tabbed Widget
* Version: 1.0.0
* Author: Bill Erickson
* Author URI: http://www.billerickson.net
*/
class BE_Tabbed_Widget extends WP_Widget {
/**
* Constructor
*
* @return void
**/
function BE_Tabbed_Widget() {
$widget_ops = array( 'classname' => 'widget_tabbed', 'description' => 'Tabbed Widget' );
$this->WP_Widget( 'tabbed-widget', 'Tabbed Widget', $widget_ops );
add_action( 'wp_enqueue_scripts', array( $this, 'scripts' ) );
}
/**
* Scripts
*
*/
function scripts() {
wp_register_script( 'be-tabbed-widget', plugins_url( 'be-tabbed-widget.js', __FILE__ ), array( 'jquery', 'jquery-ui-tabs' ), '1.0', true );
}
/**
* How Many Tabs
*
*/
function total_tabs() {
return 2;
}
/**
* Outputs the HTML for this widget.
*
* @param array An array of standard parameters for widgets in this theme
* @param array An array of settings for this widget instance
* @return void Echoes it's output
**/
function widget( $args, $instance ) {
extract( $args, EXTR_SKIP );
echo $before_widget;
wp_enqueue_script( 'be-tabbed-widget' );
$tabs = $this->total_tabs();
echo '<ul>';
for( $i = 0; $i < $tabs; $i++ ) {
echo '<li><a href="#tabbed-widget-tab-' . $i . '">' . esc_attr( $instance['title_' . $i] ) . '</a></li>';
}
echo '</ul>';
echo '<div class="tabbed-widget-content">';
for( $i = 0; $i < $tabs; $i++ ) {
echo '<div id="tabbed-widget-tab-' . $i . '">' . apply_filters( 'the_content', $instance['content_' . $i] ) . '</div>';
}
echo '</div>';
echo $after_widget;
}
/**
* Deals with the settings when they are saved by the admin. Here is
* where any validation should be dealt with.
*
* @param array An array of new settings as submitted by the admin
* @param array An array of the previous settings
* @return array The validated and (if necessary) amended settings
**/
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$tabs = $this->total_tabs();
for( $i = 0; $i < $tabs; $i++ ) {
$instance['title_' . $i] = esc_attr( $new_instance['title_' . $i] );
$instance['content_' . $i] = wp_kses_post( $new_instance['content_' . $i] );
}
return $instance;
}
/**
* Displays the form for this widget on the Widgets page of the WP Admin area.
*
* @param array An array of the current settings for this widget
* @return void Echoes it's output
**/
function form( $instance ) {
$defaults = array();
$tabs = $this->total_tabs();
for( $i = 0; $i < $tabs; $i++ ) {
$defaults['title_' . $i] = '';
$defaults['content_' . $i] = '';
}
$instance = wp_parse_args( (array) $instance, $defaults );
for( $i = 0; $i < $tabs; $i++ ) {
echo '<p><label for="' . $this->get_field_id( 'title_' . $i ) . '">Tab Title: <input class="widefat" id="' . $this->get_field_id( 'title_' . $i ) .'" name="' . $this->get_field_name( 'title_' . $i ) . '" value="' . esc_attr( $instance['title_' . $i] ) . '" /></label></p>';
echo '<p>Tab Content:<br /><textarea style="width: 100%;" id="' . $this->get_field_id( 'content_' . $i ) . '" name="' . $this->get_field_name( 'content_' . $i ) . '">' . $instance['content_' . $i] . '</textarea></p>';
}
}
}
function be_register_tabbed_widget() {
register_widget('BE_Tabbed_Widget');
}
add_action( 'widgets_init', 'be_register_tabbed_widget' );
view raw be-tabbed-widget.php hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk