In this post u can learn first steps in coding widgets and integrate them in WP

  • ADDING MENUS AND SUBMENUS
  • CREATING WIDGETS
  • STYLES, ICONS, ...
//Creating a Top - Level Menu
add_menu_page( page_title, menu_title, capability, menu_slug, function, icon_url, position );
 
/*
Plugin Name: WordPress Menu Examples Plugin
Plugin URI: http://example.com/wordpress-plugins/my-plugin
Description: A plugin to create menus and submenus in WordPress
Version: 1.0
License: GPLv2
*/
 
add_action( 'admin_menu', 'ssd_menuexample_create_menu' );
 
function ssd_menuexample_create_menu() {
 
    //create custom top-level menu
    add_menu_page( 'My Plugin Settings Page', 'Menu Example Settings', 'manage_options', __FILE__, 'ssd_menuexample_settings_page', plugins_url( '/images/wp-icon.png', __FILE__ ) );
 
    //create submenu items
    add_submenu_page( __FILE__, 'About My Plugin', 'About', 'manage_options', __FILE__.'_about', ssd_menuexample_about_page );
    add_submenu_page( __FILE__, 'Help with My Plugin', 'Help', 'manage_options', __FILE__.'_help', ssd_menuexample_help_page );
    add_submenu_page( __FILE__, 'Uinstall My Plugin', 'Uninstall', 'manage_options', __FILE__.'_uninstall', ssd_menuexample_uninstall_page ); 
 
}
 
//Adding a Menu Item to an Existing Menu
add_options_page( page_title, menu_title, capability, menu_slug, function);
add_action( 'admin_menu', 'ssd_menuexample_create_menu' );
 
function ssd_menuexample_create_menu() {
 
    //create a submenu under Settings
    add_options_page( 'My Plugin Settings Page', 'Menu Example Settings', 'manage_options', __FILE__, 'ssd_menuexample_settings_page' );
 
}

CREATING WIDGETS

< ?php
class My_Widget extends WP_Widget {
function My_Widget() {
// processes the widget
}
function form($instance) {
// displays the widget form in the admin dashboard
}
function update($new_instance, $old_instance) {
// process widget options to save
}
function widget($args, $instance) {
// displays the widget
}
}

First, make a new array to store your widget options called $widget_ops . This array can hold the classname and description options. The classname option is the class name added to the < li > element of the widget. Sidebars, by default, display all widgets in an nordered list. Each individual widget is a list item in that list, so by adding a custom classname and ID , you can easily create custom styles and designs for your widget. After building your options array, you then pass those values to WP_Widget: ID for the list item of your widget, widget name displayed in the Widgets screen, array of options you set earlier.

//example
// use widgets_init action hook to e xecute custom function
<?php 
/*
Plugin Name: Widget Example Plugin
Plugin URI: http://example.com/wordpress-plugins/my-plugin
Description: A plugin to create widgets in WordPress
Version: 1.0
License: GPLv2
*/
 
// use widgets_init action hook to execute custom function
add_action( 'widgets_init', 'ssd_widgetexample_register_widgets' );
 
 //register our widget
function ssd_widgetexample_register_widgets() {
    register_widget( 'ssd_widgetexample_widget_my_info' );
}
 
//ssd_widget_my_info class
class ssd_widgetexample_widget_my_info extends WP_Widget {
 
    //process the new widget
    function ssd_widgetexample_widget_my_info() {
        $widget_ops = array( 
            'classname' => 'ssd_widgetexample_widget_class', 
            'description' => 'Display a user\'s favorite movie and song.' 
            ); 
        $this->WP_Widget( 'ssd_widgetexample_widget_my_info', 'My Info Widget', $widget_ops );
    }
 
     //build the widget settings form
/*First, you create a $defaults variable to set the default values of each option. In this example, you set only the default title to My Info. Next pull in the instance values; that is, the widget settings that have been saved. If this is a new widget and was just added to a sidebar, there won ’ t be any settings 
saved, so this value will be empty*/
    function form($instance) {
        $defaults = array( 'title' => 'My Info', 'movie' => '', 'song' => '' ); 
        $instance = wp_parse_args( (array) $instance, $defaults );
        $title = $instance['title'];
        $movie = $instance['movie'];
        $song = $instance['song'];
        ?>
            <p>Title: <input class="widefat" name="<?php echo $this->get_field_name( 'title' ); ?>"  type="text" value="<?php echo esc_attr( $title ); ?>" /></p>
            <p>Favorite Movie: <input class="widefat" name="<?php echo $this->get_field_name( 'movie' ); ?>"  type="text" value="<?php echo esc_attr( $movie ); ?>" /></p>
            <p>Favorite Song: <textarea class="widefat" name="<?php echo $this->get_field_name( 'song' ); ?>" / ><?php echo esc_attr( $song ); ?></textarea></p>
        <?php
    }
 
    //save the widget settings
    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['movie'] = strip_tags( $new_instance['movie'] );
        $instance['song'] = strip_tags( $new_instance['song'] );
 
        return $instance;
    }
 
    //display the widget
    function widget($args, $instance) {
        extract($args);
 
        echo $before_widget;
        $title = apply_filters( 'widget_title', $instance['title'] );
        $movie = empty( $instance['movie'] ) ? '&nbsp;' : $instance['movie'];
        $song = empty( $instance['song'] ) ? '&nbsp;' : $instance['song']; 
 
        if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
        echo '<p>Fav Movie: ' . $movie . '</p>';
        echo '<p>Fav Song: ' . $song . '</p>';
        echo $after_widget;
    }
}
?>

Advanced Widget create a widget that retrieves an RSS feed and displays its results, also use different types of form elements for your widget options.

  • register your new widget
  • extend the WP_Widget class for new widget
  • create the widget options (form)
  • display the widget based on the set options -function widget($args, $instance)
// use widgets_init action hook to execute custom function
add_action( 'widgets_init', 'ssd_awe_register_widgets' );
 
//register our widget
function ssd_awe_register_widgets() {
    register_widget( 'ssd_awe_widget' );
}
 
//ssd_widget_my_info class
class ssd_awe_widget extends WP_Widget {
 
    //process the new widget
    function ssd_awe_widget() {
 
        $widget_ops = array( 
            'classname' => 'ssd_awe_widget_class', 
            'description' => 'Display an RSS feed with options.' 
            ); 
 
        $this->WP_Widget( 'ssd_awe_widget', 'Advanced RSS Widget', $widget_ops );
    }
 
     //build the widget settings form
    function form($instance) {
        $defaults = array( 
            'title' => 'RSS Feed', 
            'rss_feed' => 'http://strangework.com/feed', 
            'rss_items' => '2' 
        ); 
        $instance = wp_parse_args( (array) $instance, $defaults );
        $title = $instance['title'];
        $rss_feed = $instance['rss_feed'];
        $rss_items = $instance['rss_items'];
        $rss_date = $instance['rss_date'];
        $rss_summary = $instance['rss_summary'];
        ?>
            <p>Title: <input class="widefat" name="<?php echo $this->get_field_name( 'title' ); ?>"  type="text" value="<?php echo esc_attr( $title ); ?>" /></p>
            <p>RSS Feed: <input class="widefat" name="<?php echo $this->get_field_name( 'rss_feed' ); ?>"  type="text" value="<?php echo esc_attr( $rss_feed ); ?>" /></p>
            <p>Items to Display:
                <select name="<?php echo $this->get_field_name( 'rss_items' ); ?>">
                    <option value="1" <?php selected( $rss_items, 1 ); ?>>1</option>
                    <option value="2" <?php selected( $rss_items, 2 ); ?>>2</option>
                    <option value="3" <?php selected( $rss_items, 3 ); ?>>3</option>
                    <option value="4" <?php selected( $rss_items, 4 ); ?>>4</option>
                    <option value="5" <?php selected( $rss_items, 5 ); ?>>5</option>
                </select>
            </p>
            <p>Show Date?: <input name="<?php echo $this->get_field_name( 'rss_date' ); ?>"  type="checkbox" <?php checked( $rss_date, 'on' ); ?> /></p>
            <p>Show Summary?: <input name="<?php echo $this->get_field_name( 'rss_summary' ); ?>"  type="checkbox" <?php checked( $rss_summary, 'on' ); ?> /></p>
        <?php
    }
 
    //save the widget settings
    function update($new_instance, $old_instance) {
        $instance = $old_instance;
        $instance['title'] = strip_tags( $new_instance['title'] );
        $instance['rss_feed'] = strip_tags( $new_instance['rss_feed'] );
        $instance['rss_items'] = strip_tags( $new_instance['rss_items'] );
    $instance['rss_date'] = strip_tags( $new_instance['rss_date'] );
    $instance['rss_summary'] = strip_tags( $new_instance['rss_summary'] );
 
        return $instance;
    }
 
    //display the widget
    function widget($args, $instance) {
        extract($args);
 
        echo $before_widget;
 
        //load the widget settings
        $title = apply_filters( 'widget_title', $instance['title'] );
        $rss_feed = empty( $instance['rss_feed'] ) ? '' : $instance['rss_feed'];
        $rss_items = empty( $instance['rss_items'] ) ? 2 : $instance['rss_items'];
        $rss_date = empty( $instance['rss_date'] ) ? 0 : 1; 
        $rss_summary = empty( $instance['rss_summary'] ) ? 0 : 1; 
 
        if ( !empty( $title ) ) { echo $before_title . $title . $after_title; };
 
        if ( $rss_feed ) {
            //display the RSS feed
            wp_widget_rss_output( array(
                'url' => $rss_feed,
                'title' => $title,
                'items' => $rss_items,
                'show_summary' => $rss_summary,
                'show_author' => 0,
                'show_date' => $rss_date
            ) );
        }
 
        echo $after_widget;
    }
}

Creating Dashboard Widgets wp_add_dashboard_widget( widget_id, widget_name, callback, control_callback ); parameters:

  • widget_id — The CSS ID added to the widget DIV element
  • widget_name — The name displayed in heading
  • callback — Function to display your widget
  • control_callback — Function to be called to handle for elements and submission
add_action( 'wp_dashboard_setup', 'ssd_dashboard_example_widgets' );
 
function ssd_dashboard_example_widgets() {
 
    //create a custom dashboard widget
    wp_add_dashboard_widget( 'dashboard_custom_feed', 'My Plugin Information', 'ssd_dashboard_example_display' );
 
}
 
function ssd_dashboard_example_display()
{
    echo '<p>Please contact support@example.com to report bugs.</p>';    
}

Creating a Dashboard Widget with Options

<?php 
/*
Plugin Name: RSS Dashboard Widget Example Plugin
Plugin URI: http://example.com/wordpress-plugins/my-plugin
Description: A plugin to create dashboard widgets in WordPress
Version: 1.0
License: GPLv2
*/
 
add_action( 'wp_dashboard_setup', 'ssd_dashboard_example_widgets' );
 
function ssd_dashboard_example_widgets() {
 
    //create a custom dashboard widget
    wp_add_dashboard_widget( 'dashboard_custom_feed', 'My Plugin Information', 'ssd_dashboard_example_display', 'ssd_dashboard_example_setup' );
 
}
 
function ssd_dashboard_example_setup() {
 
    //check if option is set before saving
    if ( isset( $_POST['ssd_rss_feed'] ) ) {
        //retrieve the option value from the form
        $ssd_rss_feed = esc_url_raw( $_POST['ssd_rss_feed'] );
 
        //save the value as an option
        update_option( 'ssd_dashboard_widget_rss', $ssd_rss_feed );
    }
 
     //load the saved feed if it exists
    $ssd_rss_feed = get_option( 'ssd_dashboard_widget_rss ');
 
    ?>
    <label for="feed">
        RSS Feed URL: <input type="text" name="ssd_rss_feed" id="ssd_rss_feed" value="<?php echo esc_url( $ssd_rss_feed ); ?>" size="50" />
    </label>
    <?php
}
 
function ssd_dashboard_example_display()
{
    //load our widget option
    $ssd_option = get_option( 'ssd_dashboard_widget_rss ');
 
    //if option is empty set a default
    $ssd_rss_feed = ( $ssd_option ) ? $ssd_option : 'http://wordpress.org/news/feed/';
 
    //retireve the RSS feed and display it
    echo '<div class="rss-widget">';
 
    wp_widget_rss_output( array(
        'url' => $ssd_rss_feed,
        'title' => 'RSS Feed News',
        'items' => 2,
        'show_summary' => 1,
        'show_author' => 0,
        'show_date' => 1 
    ) );
 
    echo '</div>';    
}
?>

Adding a Custom Meta Box To create a custom meta box in WordPress, you use the add_meta_box() function. This function enables you to defi ne all aspects of your meta box. Following is how this function is used: < ?php add_meta_box( id, title, callback, page, context, priority, callback_args ); ? > Parameters:

  • id — The CSS ID added to the DIV element that wraps your meta box
  • title — The name of your meta box displayed in its heading
  • callback — Function to be called to display your meta box
  • page — The screen where your meta box should show
  • context — The part of the page where the meta box should be shown
  • priority — The priority in which your meta box should be shown
  • callback_args — Arguments to pass into your callback function
<?php 
/*
Plugin Name: Meta Box Example Plugin
Plugin URI: http://example.com/wordpress-plugins/my-plugin
Description: A plugin to create meta boxes in WordPress
Version: 1.0
License: GPLv2
*/
 
//hook to add a meta box
add_action( 'add_meta_boxes', 'ssd_mbe_create' );
 
function ssd_mbe_create() {
 
    //create a custom meta box
    add_meta_box( 'ssd-meta', 'My Custom Meta Box', 'ssd_mbe_function', 'post', 'normal', 'high' );
 
}
 
function ssd_mbe_function( $post ) {
 
    //retrieve the meta data values if they exist
    $ssd_mbe_name = get_post_meta( $post->ID, '_ssd_mbe_name', true );
    $ssd_mbe_costume = get_post_meta( $post->ID, '_ssd_mbe_costume', true );
 
    echo 'Please fill out the information below';
    ?>
    <p>Name: <input type="text" name="ssd_mbe_name" value="<?php echo esc_attr( $ssd_mbe_name ); ?>" /></p>
    <p>Costume: 
    <select name="ssd_mbe_costume">
        <option value="vampire" <?php selected( $ssd_mbe_costume, 'vampire' ); ?>>Vampire</option>
        <option value="zombie" <?php selected( $ssd_mbe_costume, 'zombie' ); ?>>Zombie</option>
        <option value="smurf" <?php selected( $ssd_mbe_costume, 'smurf' ); ?>>Smurf</option>
    </select>
    </p>
    <?php
}
 
//hook to save the meta box data
add_action( 'save_post', 'ssd_mbe_save_meta' );
 
function ssd_mbe_save_meta( $post_id ) {
 
    //verify the meta data is set
    if ( isset( $_POST['ssd_mbe_name'] ) ) {
 
        //save the meta data
        update_post_meta( $post_id, '_ssd_mbe_name', strip_tags( $_POST['ssd_mbe_name'] ) );
        update_post_meta( $post_id, '_ssd_mbe_costume', strip_tags( $_POST['ssd_mbe_costume'] ) );
 
    }
 
}
?>

WordPress features many different icons for each section head (the dashboard header icon is a house icon):

< div id=”icon-indexclass=”icon32> < /div >
< div id=”icon-editclass=”icon32> < /div >
< div id=”icon-uploadclass=”icon32> < /div >
< div id=”icon-link-managerclass=”icon32> < /div >
< div id=”icon-edit-pagesclass=”icon32> < /div >
< div id=”icon-edit-commentsclass=”icon32> < /div >
< div id=”icon-themesclass=”icon32> < /div >
< div id=”icon-pluginsclass=”icon32> < /div >
< div id=”icon-usersclass=”icon32> < /div >
< div id=”icon-toolsclass=”icon32> < /div >
< div id=”icon-options-generalclass=”icon32> < /div >

Messages

< ?php
function ssd_styling_settings() {
? >
< div class=”wrap” >
< h2 > My Plugin < /h2 >
< div id=”messageclass=”updated” > Settings saved successfully < /div >
< div id=”messageclass=”error” > Error saving settings < /div >
< /div >
< ?php
}
? >

Form Fields WordPress has a special table class just for forms called form - table. This class is used on all WordPress admin dashboard forms, including every Settings page. This is a useful class when creating any type of options in plugin.

Leave a Comment

Fields with * are required.

Please enter the letters as they are shown in the image above.
Letters are not case-sensitive.