Widgets For Dummies?

[chipbennett]

So, I'm working through Justin Tadlock's very nice widget tutorial, but I'm wondering if there isn't something out there that's even more basic.

I have a bit of code (php/html/javascript) that I want to widgetize. I don't need any options, just need to turn it into a widget.

What's the most basic way to do so?

[Otto]

All widgets have at least one option: a title.

So, about the most basic possible widget:

 <?php

class WP_Widget_Basic extends WP_Widget {

    function WP_Widget_Basic() {
        $widget_ops = array('classname' => 'widget_basic', 'description' => 'Basic Widget, no options except title' );
        $this->WP_Widget('basic', 'Basic', $widget_ops);
    }

    function widget( $args, $instance ) {
        extract($args);
        $title = apply_filters('widget_title', empty($instance['title']) ? 'Basic' : $instance['title']);

        echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;
?>
<p> BASIC! </p>
<?php
        echo $after_widget;
    }

    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);

        return $instance;
    }

    function form( $instance ) {
        $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
        $title = strip_tags($instance['title']);
?>
            <p><label for="<?php echo $this->get_field_id('title'); ?>">Title:</label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
<?php
    }
}  

Replace the BASIC! with whatever you like.

You'll still need to call register_widget() at widgets_init and such.

Okay, technically, you could simplify it by hardcoding a title and such, but the interface would look weird. And having a configurable title is a good thing anyway.

[andrea_r]

Like this?

http://wpmututorials.com/plugins/build-your-own-widget/

Actually, that has the old widget stuff in it but still technically works. the fact it's on a WPMU site is irrelevant, the process is exactly the same. :D

[chipbennett]

All widgets have at least one option: a title.

So, about the most basic possible widget:

 <?php

class WP_Widget_Basic extends WP_Widget {

    function WP_Widget_Basic() {
        $widget_ops = array('classname' => 'widget_basic', 'description' => 'Basic Widget, no options except title' );
        $this->WP_Widget('basic', 'Basic', $widget_ops);
    }

    function widget( $args, $instance ) {
        extract($args);
        $title = apply_filters('widget_title', empty($instance['title']) ? 'Basic' : $instance['title']);

        echo $before_widget;
        if ( $title )
            echo $before_title . $title . $after_title;
?>
<p> BASIC! </p>
<?php
        echo $after_widget;
    }

    function update( $new_instance, $old_instance ) {
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);

        return $instance;
    }

    function form( $instance ) {
        $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
        $title = strip_tags($instance['title']);
?>
            <p><label for="<?php echo $this->get_field_id('title'); ?>">Title:</label> <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
<?php
    }
}  

Replace the BASIC! with whatever you like.

You'll still need to call register_widget() at widgets_init and such.

Okay, technically, you could simplify it by hardcoding a title and such, but the interface would look weird. And having a configurable title is a good thing anyway.

Can I step through this, and ask a few questions?

 function WP_Widget_Basic() {
        $widget_ops = array('classname' => 'widget_basic', 'description' => 'Basic Widget, no options except title' );
        $this->WP_Widget('basic', 'Basic', $widget_ops);
    } 
  

What is "classname"? Can it be anything, or is there some standard nomenclature?

What are the arguments for $this->WP_Widget? Particularly, what are the first two?

 <p> BASIC! </p> 
  

When replacing BASIC! with my code, can it be anything, including PHP, HTML, and (especially) javascript?

If it can be PHP, can I use an include, to include a PHP file that contains the code, or is it better to copy/paste the contents directly into the function here?

Thanks, Otto!

[chipbennett]

Like this?

http://wpmututorials.com/plugins/build-your-own-widget/

Actually, that has the old widget stuff in it but still technically works. the fact it's on a WPMU site is irrelevant, the process is exactly the same. :D

Ooh, I like that, too!

I want to try to learn the 2.8 code, but good to know that I have a seemingly simple fallback, too.

[dancole]

Here is some info on how to edit the code above:

• Replace "WP_Widget_Basic" with the name of your widget code, but also state that it is a widget. No spaces or dashes. Try to keep it short and descriptive. This is often the name of your widget "in code form", i.e the average person will never see it.
• Replace "widget_basic" with the name of your widget code, but also state that it is a widget. This will be used as a style ID. No spaces, keep it short and descriptive. People often replace the underscores with dashes, because it a CSS thing.
• Replace "Basic Widget, no options except title" with a short description of what the widget is or does. This will be seen by people.
• Replace "basic" with the name of the widget, do not state that it is a widget. This is not seen by the average person.
• Replace "Basic" with the name of the widget, do not state that it is a widget. This will be seen through the WordPress backend and is the main title of the widget.
• Each option that the widget has will have a name, the value of that option can be accessed by putting the name in "$instance['title']", in this case the name was "title".
• The line "<p> BASIC! </p>" is the actual output of the widget on the web page. You can use any type of code here as long as it follows the coding rules, e.g. don't use PHP outside of the <?php ?> tags. It's often best to define CSS and JavaScript else where, i.e. the header and footer respectively. As for including files, you can do it here, but remember that all widgets can be used multiple times, but a PHP function can only be defined once.
• The update function in most cases doesn't need anything other than "return $new_instance;", but this example has some advanced stuff.

If I was to make a "Dan Cole" widget, it's PHP Class name would be "Dan_Cole_Widget". It's viable name would be "Dan Cole". It's classname (CSS name) would be "dan-cole" and in other places I would refer to it as "dan_cole".

[Ryan]

This is great stuff! I haven't tried making a widget since the new interface was introduced and I hadn't yet gotten around to figuring out what all the changes are.

[andrea_r]

The one I linked to above literally has a spot to paste any php code/javascript and returns the value, that's it. Nothing fancy but output. :D

[JohnM]

Another step by step tutorial:

http://jessealtman.com/2009/06/08/tu...28-widget-api/

In this tutorial, I will teach you how to create a Hello World sidebar widget using the WordPress 2.8 widget API. I will provide the code throughout this post, and also provide the examples for download at the end of the post. This example will be demonstrated on the Default WordPress theme and provide two configurable lines of text that can be modified.

[Rarst]

I also found widgets (and existing guides) somewhat confusing. I am widgetizing some code as well (for next theme).

Made this very downsized template, doesn't even use titile option (is that bad? :).

 class Name extends WP_Widget {
    function Name() {
        $widget_ops = array('classname' => 'name', 'description' => __("Widget does...") );
        $this->WP_Widget('name', __('Widget does...'), $widget_ops, $control_ops);
    }
 
    function widget($args, $instance) {
        extract($args);
        echo $before_widget;
        
        echo $before_title . '' . $after_title;
        
        //stuff goes here
            
        echo $after_widget;
    }
 
    function update($new_instance, $old_instance) {return $old_instance;}
    function form($instance) {}
}