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=" echo $this->get_field_name( 'title' ); " type="text" value=" echo esc_attr( $title ); " /></p> <p>Favorite Movie: <input class="widefat" name=" echo $this->get_field_name( 'movie' ); " type="text" value=" echo esc_attr( $movie ); " /></p> <p>Favorite Song: <textarea class="widefat" name=" echo $this->get_field_name( 'song' ); " / > echo esc_attr( $song ); </textarea></p> } //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'] ) ? ' ' : $instance['movie']; $song = empty( $instance['song'] ) ? ' ' : $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=" echo $this->get_field_name( 'title' ); " type="text" value=" echo esc_attr( $title ); " /></p> <p>RSS Feed: <input class="widefat" name=" echo $this->get_field_name( 'rss_feed' ); " type="text" value=" echo esc_attr( $rss_feed ); " /></p> <p>Items to Display: <select name=" echo $this->get_field_name( 'rss_items' ); "> <option value="1" selected( $rss_items, 1 ); >1</option> <option value="2" selected( $rss_items, 2 ); >2</option> <option value="3" selected( $rss_items, 3 ); >3</option> <option value="4" selected( $rss_items, 4 ); >4</option> <option value="5" selected( $rss_items, 5 ); >5</option> </select> </p> <p>Show Date?: <input name=" echo $this->get_field_name( 'rss_date' ); " type="checkbox" checked( $rss_date, 'on' ); /></p> <p>Show Summary?: <input name=" echo $this->get_field_name( 'rss_summary' ); " type="checkbox" checked( $rss_summary, 'on' ); /></p> } //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
/* 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=" echo esc_url( $ssd_rss_feed ); " size="50" /> </label> } 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
/* 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=" echo esc_attr( $ssd_mbe_name ); " /></p> <p>Costume: <select name="ssd_mbe_costume"> <option value="vampire" selected( $ssd_mbe_costume, 'vampire' ); >Vampire</option> <option value="zombie" selected( $ssd_mbe_costume, 'zombie' ); >Zombie</option> <option value="smurf" selected( $ssd_mbe_costume, 'smurf' ); >Smurf</option> </select> </p> } //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-index” class=”icon32” > < /div > < div id=”icon-edit” class=”icon32” > < /div > < div id=”icon-upload” class=”icon32” > < /div > < div id=”icon-link-manager” class=”icon32” > < /div > < div id=”icon-edit-pages” class=”icon32” > < /div > < div id=”icon-edit-comments” class=”icon32” > < /div > < div id=”icon-themes” class=”icon32” > < /div > < div id=”icon-plugins” class=”icon32” > < /div > < div id=”icon-users” class=”icon32” > < /div > < div id=”icon-tools” class=”icon32” > < /div > < div id=”icon-options-general” class=”icon32” > < /div >
Messages
< ?php function ssd_styling_settings() { ? > < div class=”wrap” > < h2 > My Plugin < /h2 > < div id=”message” class=”updated” > Settings saved successfully < /div > < div id=”message” class=”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