How to Create a WordPress Widget
by Bandicoot Marketing on | Posted in Tutorials | 8 comments
While I was developing my Magazine Basic 2.0 backend interface, I decided to include a few widgets that I thought would be useful. The only problem was I had no clue how to do it.
I knew that I need to add the code to the functions.php file in the theme I was using but that was pretty much it. I ended up just looking at the widgets that are included with WordPress 2.7 and dissected how they functioned to figure out for myself how they were programmed. It is quite elaborate but if you understand PHP and really look at it you can easily figure out exactly what is going on.
Here is the code I used and some brief explanations.
First we need to initiate the widget and add it to the widgets admin page for people to be able to add it to their sidebars.
register_sidebar_widget( 'Featured Post', 'widget_myFeature');
Now we need to create the function called ‘widget_myFeature’.
function widget_myFeature($args) { extract($args); $options = get_option("widget_sideFeature"); echo $before_widget; echo $before_title; echo $options['title']; echo $after_title; widget_sideFeature(); echo $after_widget; }
Extracting the $args variable allows users to use the values they have set for $before_widget, $after_widget, $before_title and $after_title in their functions.php file (see How to Widgetize your WordPress sidebar). The $options variable gathers the options set through the widget control panel (see below). You will notice I have a reference to another function called ‘widget_sideFeature()’. That is the next step.
function widget_sideFeature() { $options = get_option("widget_sideFeature"); $numberOf = $options['number']; $category = $options['category']; $category = "&cat=" . $category; $showposts = "showposts=" . $numberOf . $category ; $featuredPosts = new WP_Query(); $featuredPosts->query($showposts); $i = 1; while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?> <h1 class="side"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1> <div class="meta"> By <?php the_author() ?> </div> <div class="storycontent <?php if($numberOf == $i) { echo "noline"; } $i++; ?>"> <?php the_excerpt(); ?> </div> <?php endwhile; }
First we gather our options created through our widget’s control panel (see below) and set up some variable to control our database query. Next we enter our loop and call the posts exactly how we usually do. This is actually what will appear in the front end of the website once the widget has been added to the sidebar.
The last step is setting up our widget controls.
function myFeature_control() { $options = get_option("widget_sideFeature"); if (!is_array( $options )) { $options = array( 'title' => 'Feature', 'number' => '1', 'category' => '0' ); } if ($_POST['sideFeature-Submit']) { $options['title'] = htmlspecialchars($_POST['sideFeature-WidgetTitle']); $options['number'] = htmlspecialchars($_POST['sideFeature-PostNumber']); if ( $options['number'] > 5) { $options['number'] = 5; } $options['category'] = htmlspecialchars($_POST['sideFeature-Category']); update_option("widget_sideFeature", $options); } ?> <p> <label for="sideFeature-WidgetTitle">Title: </label><br /> <input class="widefat" type="text" id="sideFeature-WidgetTitle" name="sideFeature-WidgetTitle" value="<?php echo $options['title'];?>" /> <br /><br /> <label for="sideFeature-PostNumber">Number of posts to show: </label> <input type="text" id="sideFeature-PostNumber" name="sideFeature-PostNumber" style="width: 25px; text-align: center;" maxlength="1" value="<?php echo $options['number'];?>" /><br /> <small><em>(max 5)</em></small> <br /><br /> <label for="sideFeature-Category">From which category: </label> <?php $options = get_option("widget_sideFeature"); $category = $options['category']; ?> <?php wp_dropdown_categories('name=sideFeature-Category&selected='.$category); ?> <input type="hidden" id="sideFeature-Submit" name="sideFeature-Submit" value="1" /> <p><small><em>(Note: The selected will be excluded from the main content on the index page)</em></small></p> </p> <?php }
Here we set up some default options and create some input fields so that users can choose their own options to customize how the widget functions. When the sidebar is saved, the options are added to the WordPress database.
All that is left is initiating the controls with the following code.
register_widget_control( 'Featured Post', 'myFeature_control');
There you have a break down of how to create a WordPress Widget.
I plan on creating a plugin to activate this widget shortly so check back.
8 comments for “How to Create a WordPress Widget”