This week I’d like to show how to do exactly that, and the widget we will be writing is a simple one that picks out a single random post from your site, pulls the featured image, and displays it on the sidebar – a visual “check this out” widget that will help users to find more content on your site.

This is also an extension of a continuing series in which I show you how easy it is to href="http://www.makeuseof.com/tag/2-wordpress-plugins-understanding-theme-structure/">customize your WordPress template.

You may also be pleased to know that we’ve added a new href="http://www.makeuseof.com/service/wordpress-tutorials/">WordPress Tutorials category to MakeUseOf, so be sure to check that out for an ever growing archive of up to date tips and guides to the world’s favourite blogging platform.

Key Concepts: WordPress Queries and the Loop

Each page on your blog consists of a query to your database of posts. Depending on the page you are viewing, the query will change. Your blog homepage for instance, may use the query “get the latest 10 blog posts“. When you view the category archives, the query may change to “get the latest 20 posts for the category family photos only, order the results by date published“. Each query will return a set of results, and depending on the page template being used, each result will be run through the main “loop” of the template.

Each page can in fact consist of more than one query though, and you can even create your own queries to add functionality to various places in your template. You can see an example of this in use at the bottom of this article – we have a few additional queries that run on every page that aim to show you related articles you may be interested in, or articles which are trending this week.

To make our custom widget though, we will simply need to create an additional query that grabs X number of random posts plus their images, and displays them in some way on the sidebar. I already showed you last week the code to href="http://www.makeuseof.com/tag/jazz-wordpress-blog-adding-featured-images/">grab the featured image, so we really just need to know how to make a new WordPress widget and place it on the sidebar.

Basic Widget Code

Start by creating a new .php file in your wp-content/plugins directory. You could also follow the tutorial offline then upload it using the WordPress interface, but I find it’s easier to write as we go along in case you need to debug. Call your file whatever you like, but I’m going with random-post-widget.php

Paste the following into the file and save. Feel free to change the section at the top with my name in it, but don’t adjust the rest of the code yet. This is basically a skeleton empty widget, and you can see where it says //WIDGET CODE GOES HERE is where we will add our functionality in later.

class="wp_syntax"> class="code">

<?php
/*
Plugin Name: Random Post Widget
Plugin URI: http://jamesbruce.me/
Description: Random Post Widget grabs a random post and the associated thumbnail to display on your sidebar
Author: James Bruce
Version: 1
Author URI: http://jamesbruce.me/
*/
 
 
class RandomPostWidget extends WP_Widget
{
  function RandomPostWidget()
  {
    $widget_ops = array('classname' => 'RandomPostWidget', 'description' => 'Displays a random post with thumbnail' );
    $this->WP_Widget('RandomPostWidget', 'Random Post and Thumbnail', $widget_ops);
  }
 
  function form($instance)
  {
    $instance = wp_parse_args( (array) $instance, array( 'title' => '' ) );
    $title = $instance['title'];
?>
  <p><label for="<?php echo $this->get_field_id('title'); ?>">Title: <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo attribute_escape($title); ?>" /></label></p>
<?php
  }
 
  function update($new_instance, $old_instance)
  {
    $instance = $old_instance;
    $instance['title'] = $new_instance['title'];
    return $instance;
  }
 
  function widget($args, $instance)
  {
    extract($args, EXTR_SKIP);
 
    echo $before_widget;
    $title = empty($instance['title']) ? ' ' : apply_filters('widget_title', $instance['title']);
 
    if (!empty($title))
      echo $before_title . $title . $after_title;;
 
    // WIDGET CODE GOES HERE
    echo "<h1>This is my new widget!</h1>";
 
    echo $after_widget;
  }
 
}
add_action( 'widgets_init', create_function('', 'return register_widget("RandomPostWidget");') );?>

As it is, the plugin doesn’t do much apart from print out a large title with the words “This is my new widget!“.

class="aligncenter" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/05/new-sidebar-widget-step1.png" alt="how to create widgets">

It does however give you the option to change the title, which is kind of essential for any widget. Adding in other options is a bit beyond the scope of this article today, so for now let’s move on to give it a real purpose.

class="aligncenter" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/05/sidebar-options.png" alt="write your own widget">

A New Query & The Loop

To make a new query to your blog database, you need to use the query_posts() function along with a few parameters, then run through the output using a while loop. Let’s try this – a very basic query and loop to demonstrate. Replace the line of code that says:

class="wp_syntax"> class="code">

<h1>This is my new widget!</h1>

with the following:

class="wp_syntax"> class="code">

// WIDGET CODE GOES HERE
query_posts('');
if (have_posts()) :
	while (have_posts()) : the_post();
		the_title();
	endwhile;
endif;
wp_reset_query();

This is an absolutely basic query using default options and zero formatting of the output. Depending on how your blog is set up, the default will most likely be to grab the 10 latest posts – then all the above code does is to output the title of each post. It’s pretty ugly, but it works:

class="aligncenter" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/05/new-sidebar-widget-step2.png" alt="write your own widget">

We can make it a little better right away just by adding some HTML formatting to the output with the ECHO command, and creating a link to the post using get_the_permalink() function:

class="wp_syntax"> class="code">

 
query_posts('');
if (have_posts()) :
	echo "<ul>";
	while (have_posts()) : the_post();
		echo "<li><a href='".get_permalink()."'>".get_the_title()."</a></li>";
 
	endwhile;
	echo "</ul>";
endif;
wp_reset_query();

class="aligncenter" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/05/new-sidebar-widget-step3.png" alt="write your own widget">

Already, it’s looking much better. But we only want one post, picked at random. To do this, we specify some parameters in the query:

class="wp_syntax"> class="code">

 
query_posts('posts_per_page=1&orderby=rand');

Of course, you could change it to any number of posts – in fact, there’s a href="http://codex.wordpress.org/Function_Reference/query_posts">whole range of extra bits you can pass into the query in order to restrict, expand, or change the order of the results, but let’s stick with that for now. If you refresh, you should see just one post which is randomized each time you refresh.

Now for the featured thumbnail. Replace the code with this, hopefully you can see where we are grabbing the thumbnail and displaying it:

class="wp_syntax"> class="code">

query_posts('posts_per_page=1&orderby=rand');
if (have_posts()) :
	echo "<ul>";
	while (have_posts()) : the_post();
		echo "<li><a href='".get_permalink()."'>".get_the_title();
		echo the_post_thumbnail(array(220,200));
		echo "</a></li>";
 
	endwhile;
	echo "</ul>";
endif;
wp_reset_query();

You can see the finished results again on my development blog href="http://selfsufficiencyguide.org">Self Sufficiency Guide, though I might have moved things around by the time you read this.

class="aligncenter" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2011/05/final-complete-widget.png" alt="how to create widgets">

Conclusion:

See how easy it is to make your own custom widget that can do exactly what you want? Even if you don’t understand 90% of the code I’ve shown you today, you should still be able to customise it somewhat by just changing variables or outputting different HTML. We wrote a whole widget today, but you could easily use just the new query and loop code on any of your page templates.

Problems? Need some different WordPress related help? I’m always on hand to help in href="http://www.makeuseof.com/answers/">MakeUseOf Answers, so head on over and href="javascript:void((function(){try%20{toggle_form();}catch(err){document.location.href='http://www.makeuseof.com/answers/#expand';}}()));">post a new question there. />
/> Follow href="http://twitter.com/MakeUseOf" target="_blank" >MakeUseOf on Twitter. Includes cool extras.

/>

 

Read comments: href="http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/#disqus_thread">Loved it? Hated it? Join discussion here …

 

href="http://api.tweetmeme.com/share?url=http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/"> src="http://api.tweetmeme.com/imagebutton.gif?url=http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/"> href="http://digg.com/tools/diggthis/login?url=http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/"> src="http://www.makeuseof.com/images/rss-buttons/diggme.png"> href="http://www.facebook.com/sharer.php?u=http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/"> src="http://www.makeuseof.com/images/rss-buttons/fb.jpg"> href="http://www.google.com/reader/link?url=http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/&title=How To Create Your Own Basic WordPress Widgets&srcTitle=MakeUseOf.com"> src="http://www.makeuseof.com/images/rss-buttons/gbuzz-feed.png"> href="http://www.stumbleupon.com/submit?url=http://www.makeuseof.com/tag/how-to-create-wordpress-widgets/"> src="http://www.makeuseof.com/images/rss-buttons/stumble.png">

 

More articles about: href="http://www.makeuseof.com/tags/blogging/" title="blogging" rel="tag">blogging, href="http://www.makeuseof.com/tags/blogging-tips/" title="blogging tips" rel="tag">blogging tips, href="http://www.makeuseof.com/tags/coding/" title="coding" rel="tag">coding, href="http://www.makeuseof.com/tags/diy/" title="DIY" rel="tag">DIY, href="http://www.makeuseof.com/tags/how-to/" title="How-To Articles" rel="tag">How-To Articles, href="http://www.makeuseof.com/tags/widgets/" title="widgets" rel="tag">widgets, href="http://www.makeuseof.com/tags/wordpress/" title="wordpress" rel="tag">wordpress />

Similar articles:

class="st-related-posts">

href="http://www.makeuseof.com/tag/jazz-wordpress-blog-adding-featured-images/" title="How To Jazz Up Your WordPress Blog By Adding Featured Images (May 13, 2011)">How To Jazz Up Your WordPress Blog By Adding Featured Images (5 comments …)

href="http://www.makeuseof.com/tag/five-free-wordpress-templates-to-dress-up-your-blog/" title="The 5 Free WordPress Templates To Dress Up Your Blog (September 24, 2009)">The 5 Free WordPress Templates To Dress Up Your Blog (26 comments …)

href="http://www.makeuseof.com/tag/how-to-save-87-by-making-a-free-thesis-wordpress-theme-clone/" title="Save $87 By Making A Free ‘Thesis’ WordPress Theme Clone (December 6, 2009)">Save $87 By Making A Free ‘Thesis’ WordPress Theme Clone (25 comments …)

href="http://www.makeuseof.com/tag/people-love-show-wordpress-collision-testimonials/" title="People Love You? Show It Off On WordPress With Collision Testimonials (March 23, 2011)">People Love You? Show It Off On WordPress With Collision Testimonials (3 comments …)

href="http://www.makeuseof.com/tag/selfhosted-wordpress-blog-ipad-friendly-onswipe/" title="Make Your WordPress Blog iPad Friendly with Onswipe (April 7, 2011)">Make Your WordPress Blog iPad Friendly with Onswipe (4 comments …)

View full post on MakeUseOf

]]>

If you read class="vt-p" href="http://www.makeuseof.com/tag/build-basic-web-crawler-pull-information-website/">part 1 and followed along, you’ll know I set some homework to adjust the script to grab images instead of links.

id="more-60554"> /> I dropped some pretty big hints, but if you didn’t get it or if you couldn’t get your code to run right, then here is the solution. I added an additional line to output the actual images themselves as well, rather than just the source address of the image.

style="border: 1px solid; margin: 10px 0px; padding: 15px 10px 15px 50px; color: #00529b; background-color: #bde5f8; font-family: courier,lucida console,monospace;"><?php /> include_once('simple_html_dom.php'); /> $target_url = "http://www.tokyobit.com"; /> $html = new simple_html_dom(); /> $html->load_file($target_url); /> foreach($html->find('img') as $img) /> { /> echo $img->src."<br />"; /> echo $img."<br/>"; /> } /> ?>

This should output something like this:

style="text-align: center;"> class="aligncenter" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/12/homework-output.png" alt="build a webcrawler" width="580" height="332" />

Of course, the results are far from elegant, but it does work. Notice that the script is only capable of grabbing images that are on the content of the page in the form of <img> tags – a lot of the page design elements are hard-coded into the CSS, so our script can’t grab those. Again, you can run this through my server and if you wish class="vt-p" href="http://www.tokyobit.com/tutorial/homework.php">at this URL, but to enter your own target site you’ll have to edit the code and run on your own server as I explained in part 1. At this point, you should bear in mind that downloading images from a website is significantly more stress on the server than simply grabbing text links, so do only try the script on your own blog or mine and try not to refresh lots of times.

Let’s move on and be a little more adventurous. We’re going to build upon our original file, and instead of just grabbing all the links randomly, we’re going to make it do something more useful by getting the post content instead. We can do this quite easily because standard WordPress wraps the post content within a <div class=”post”> tag, so all we need to do is grab any “div” with that class type, and output them – effectively stripping everything except the main content out of the original site. Here is our initial code:

style="border: 1px solid; margin: 10px 0px; padding: 15px 10px 15px 50px; color: #00529b; background-color: #bde5f8; font-family: courier,lucida console,monospace;">

<?php /> include_once('simple_html_dom.php'); /> $target_url = "http://www.tokyobit.com";

$html = new simple_html_dom();

$html->load_file($target_url); /> foreach($html->find(‘div[class=post]‘) as $post) /> { /> echo $post.”<br />”; /> }

?>

You can see the output by class="vt-p" href="http://www.tokyobit.com/tutorial/example3.php" target="_blank">running the script from here (forgive the slowness, my site is hosted at GoDaddy and they don’t scale very well at all), but it doesn’t contain any of the original design – it is literally just the content.

Let me show you another cool feature now – the ability to delete elements of the page that we don’t like. For instance, I find the meta data quite annoying – like the date and author name – so I’ve added some more code that finds those bits (identified by various classes of div such as post-date, post-info, and meta). I’ve also added a simple CSS style-sheet to format the output a little. Daniel covered a class="vt-p" href="http://www.makeuseof.com/tag/top-5-sites-to-learn-some-css-programming/">number of great places to learn CSS online if you’re not familiar with it.

As I mentioned in part 1, even though the file contains PHP code, we can still add standard HTML or CSS to the page and the browser will understand it just fine – the PHP code is run on the server, then everything is sent to the browser, to you, as standard HTML. Anyway, here’s the whole final code: /> />

style="border: 1px solid; margin: 10px 0px; padding: 15px 10px 15px 50px; color: #00529b; background-color: #bde5f8; font-family: courier,lucida console,monospace;"><head> /> <style type=”text/css”> /> div.post{background-color: gray;border-radius: 10px;-moz-border-radius: 10px;padding:20px;} /> img{float:left;border:0px;padding-right: 10px;padding-bottom: 10px;} /> body{width:60%;font-family: verdana,tahamo,sans-serif;margin-left:20%;} /> a{text-decoration:none;color:lime;} /> </style> /> </head>

<?php /> include_once(‘simple_html_dom.php’);

$target_url = “http://www.tokyobit.com”;

$html = new simple_html_dom();

$html->load_file($target_url); /> foreach($html->find(‘div[class=post]‘) as $post) /> { /> $post->find(‘div[class=post-date]‘,0)->outertext = ”; /> $post->find(‘div[class=post-info]‘,0)->outertext = ”; /> $post->find(‘div[class=meta]‘,0)->outertext = ”; /> echo $post.”<br />”; /> }

?>

You can class="vt-p" href="http://www.tokyobit.com/tutorial/example4.php" target="_blank">check out the results here. Pretty impressive, huh? We’ve taken the content of the original page, got rid of a few bits we didn’t want, and completely reformatted it in the style we like! And more than that, the process is now automated, so if new content were to be published, it would automatically display on our script.

style="text-align: center;"> class="aligncenter" src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2010/12/example4.png" alt="build a webcrawler" width="580" height="530" />

That’s only a fraction of the power available to you though, you can class="vt-p" href="http://simplehtmldom.sourceforge.net/manual.htm">read the full manual online here if you’d like to explore it a little more of the PHP Simple DOM helper and how it greatly aids and simplifies the web crawling process. It’s a great way to take your knowledge of basic HTML and take it up to the next dynamic level.

What could you use this for though? Well, let’s say you own lots of websites and wanted to gather all the contents onto a single site. You could copy and paste the contents every time you update each site, or you could just do it all automatically with this script. Personally, even though I may never use it, I found the script to be a useful exercise in understanding the underlying structure of modern internet documents. It also exposes how simple it is to re-use content when everything is published on a similar system using the same semantics.

What do you think? Again, do let me know in the comments if you’d like to learn some more basic web programming, as I feel like I’ve started you off on level 5 and skipped the first 4! Did you follow along and try yourself, or did you find it a little too confusing? Would you like to learn more about some of the other technologies behind the modern internet browsing experience?

If you’d prefer learning to program on the desktop side of things, Bakari covered some great beginner resources for class="vt-p" href="http://www.makeuseof.com/tag/some-introductory-resources-for-learning-mac-programming/">learning Cocoa Mac OSX desktop programming at the start of the year, and our class="vt-p" href="http://www.makeuseof.com/dir/codefetch-code-searching-tool/">featured directory app CodeFetch is useful for any programming language. Remember, skills you develop programming in any language can be used across the board. />
/> Follow href="http://twitter.com/MakeUseOf" target="_blank" >MakeUseOf on Twitter. Includes cool extras.

/>

 

href="http://api.tweetmeme.com/share?url=http://www.makeuseof.com/tag/build-webcrawler-part-2/"> src="http://api.tweetmeme.com/imagebutton.gif?url=http://www.makeuseof.com/tag/build-webcrawler-part-2/"> href="http://digg.com/tools/diggthis/login?url=http://www.makeuseof.com/tag/build-webcrawler-part-2/"> src="http://www.makeuseof.com/images/rss-buttons/diggme.png"> href="http://www.facebook.com/sharer.php?u=http://www.makeuseof.com/tag/build-webcrawler-part-2/"> src="http://www.makeuseof.com/images/rss-buttons/fb.jpg"> href="http://www.google.com/reader/link?url=http://www.makeuseof.com/tag/build-webcrawler-part-2/&title=How To Build A Basic Web Crawler To Pull Information From A Website (Part 2)&srcTitle=MakeUseOf.com"> src="http://www.makeuseof.com/images/rss-buttons/gbuzz-feed.png"> href="http://www.stumbleupon.com/submit?url=http://www.makeuseof.com/tag/build-webcrawler-part-2/"> src="http://www.makeuseof.com/images/rss-buttons/stumble.png">

 

Similar MakeUseOf Articles

class="st-related-posts">

href="http://www.makeuseof.com/tag/build-basic-web-crawler-pull-information-website/" title="How To Build A Basic Web Crawler To Pull Information From A Website (Part 1)">How To Build A Basic Web Crawler To Pull Information From A Website (Part 1) (17 comments)

href="http://www.makeuseof.com/tag/top-10-professional-sample-code-websites-for-programmers/" title="Top 10 Professional Sample Code Websites For Programmers">Top 10 Professional Sample Code Websites For Programmers (35 comments)

href="http://www.makeuseof.com/tag/8-web-sites-every-microsoft-net-developer-should-know-about/" title="8 Websites Every Microsoft .NET Developer Should Know About">8 Websites Every Microsoft .NET Developer Should Know About (21 comments)

href="http://www.makeuseof.com/tag/invented-pascal-program-case-wondering/" title="Who Invented the Pascal Program? [In Case You Were Wondering]">Who Invented the Pascal Program? [In Case You Were Wondering] (15 comments)

href="http://www.makeuseof.com/tag/learn-to-code-at-any-level-with-google-code-university/" title="Learn To Code At Any Level With Google Code University">Learn To Code At Any Level With Google Code University (9 comments)

href="http://www.makeuseof.com/tag/learn-how-to-computer-program-with-microsofts-smallbasic/" title="Learn How To Write Computer Program with SmallBasic">Learn How To Write Computer Program with SmallBasic (19 comments)

href="http://www.makeuseof.com/tag/6-free-sites-to-learn-about-programming-in-php/" title="6 Free Sites To Learn About Programming in PHP">6 Free Sites To Learn About Programming in PHP (20 comments)

href="http://www.makeuseof.com/tag/5-windows-git-clients-git-job/" title="5 Windows Git Clients To ‘Git’ The Job Done">5 Windows Git Clients To ‘Git’ The Job Done (5 comments)

href="http://www.makeuseof.com/tag/3-handy-internet-based-clipboards-for-sharing-notes-and-programming/" title="3 Internet Clipboards for Sharing Notes & Code Snippets">3 Internet Clipboards for Sharing Notes & Code Snippets (7 comments)

href="http://www.makeuseof.com/tag/what-is-javascript-how-works/" title="What is JavaScript and How Does It Work? [Technology Explained]">What is JavaScript and How Does It Work? [Technology Explained] (20 comments)

View full post on MakeUseOf.com

]]>