Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Steve Jenkins
17th April 2009

Web 2.0 widgets for WordPress

Extend the power of the basic WordPress configuration with the help of widgets and plugins

Web 2.0 widgets for WordPress
Extend the power of the basic WordPress configuration with the help of widgets and plugins. Customise existing elements to produce personalised posts and pages.

WORDPRESS IS UNDOUBTEDLY the best known and almost inevitably the most popular content management system (CMS) available to users around the world today. Why is this? Well, mainly because it bypasses the need for an indepth knowledge of programming while still giving users a comprehensive publishing platform to work with. Additionally, it’s nice and easy to install and like the best things in life, it’s absolutely free! WordPress comes equipped with its very own themes: the default WordPress theme based on the famous Kubrick (http://binarybonsai.com/kubrick/) and the WordPress Classic theme. Both these and many other WordPress themes come with a default selection of widgets, including Categories, Tags, Search, Archives and Meta, which can be added and removed as desired. To take a theme beyond the basics, there is a vast library of widgets and plug-ins that allows users to customise WordPress and all that resides in the sidebar. In this tutorial, we’ll show you where to find these widgets and plug-ins, as well as run through how to install a typical WordPress widget. To finish up, we have taken a couple of our favourites and shown them in action.

01 Pick the widget that works for you
Web 2.0 widgets for WordPress
The first step to working with WordPress widgets and plug-ins is to locate an item to work with. A good starting point is the WordPress website itself. Head to http:// wordpress.org/extend/plugins/ to view the Plugin Directory. Browse the directory and click a title to view more details, including a description, installation notes, an FAQ, screenshots and a Download link. Hit the Download link and download the folder to the desktop. The vast majority of plug-ins come as a ZIP file, so the first step is to extract the files. Once all the files have been extracted, make sure that the accompanying readme.txt file is viewed before proceeding. This typically gives instructions on how to install the plug-in and other useful information. A typical instruction would include the following (this refers to the Tabbed Widget plug-in): Upload the `tabbed-widgets` directory to the /wp-content/plugins/ directory. The final directory tree should look like: /wp-content/plugins/tabbed-widgets/ tabbed-widgets.php. Almost without exception, the plug-in will be uploaded to the wp-content/plugins directory.

02 Activate plug-in
Web 2.0 widgets for WordPress
Now log in to WordPress to view the Dashboard and click Plugins to open the Plugin Management page. This will display the plug-ins installed by default, ie Akismet, and any plug-ins installed by the user under the Inactive Plugins banner. To activate and start using a plug-in, simply click the Activate link related to the plug-in. WordPress will place the plug-in on its own section under the banner Currently Active Plugins. To deactivate the plug-in at any point, simply click Deactivate. This will place the plug-in into a new section named Recently Active Plugins. This will display the plug-in for seven days before returning it to the Inactive Plugins list. Alternatively, click Clear List to instantly add the plug-in back to Inactive.

03 Choosing the Category Cloud
Web 2.0 widgets for WordPress
When a plug-in or widget has been activated, it is accessible via Design>Widgets. To start using the widget, first click Add to place on the Current Widgets list. Press Save Changes and head back to the site to view the new widget in action. The first example we have used is a widget called Category Cloud, which can be found on the WordPress website. To change the default settings, click the related Edit link. By default, the widget doesn’t have a title and the font is set to a minimum of 50 per cent and a maximum of 150 per cent. Add a title and modify the font size by adding the appropriate numbers and choosing the desired font unit. For example, we have named the widget and set the minimum and maximum reasonably close together (minimum 80 per cent, maximum 120 per cent). This ensures that the Category Cloud doesn’t look too disproportionate. To complete the widget, choose alignment, the order of categories, how many are displayed, hide options and IDs to exclude. Category IDs can be found by placing the cursor over a category, which will be displayed in the status bar of the browser. When complete, press Change and Save Changes to apply. Now view via the website.

04 Tabbed Widgets
Web 2.0 widgets for WordPress
The Tabbed Widgets widget is again found via the WordPress website, and again is installed in the wp-content/plugins folder. After activating the widget, head to Design>Tabbed Widgets. This widget has its own dedicated section. There is the option to create up to eight separate widgets; realistically, though, users are only likely to use one or two at a time. To demonstrate the capabilities of Tabbed Widgets, this tutorial is going to concentrate on creating a single instance. All the techniques learnt here can be applied to the remaining widgets if so desired. The first step is to add a title to the widget. This is displayed on the page if the Show Title checkbox is ticked. By default, the title is not displayed on the page, but whatever title is chosen, this is the name displayed under Widgets. Now select the desired page, widget, etc, from the drop-down list for each of the tabs that are to appear in the widget. Give each one a relevant title and press Update Options. There is the option to add curved corners for each of the tabs. Simply click the Enable rounded corners tab checkbox. By default, the widget will be displayed as tabs. To display with the accordion effect, check the related radio button. To apply, press Update Options.

05 Widget in action
Web 2.0 widgets for WordPress
Creating the widget is the first step to getting the widget onto the page. Now head back to Widgets (Design>Widgets) and you will see that the new addition has appeared in the Available Widgets list. To add the widget to the sidebar simply click Add that resides next to the widget name. Now arrange the widgets accordingly and press Save Changes. Head to the top of the page and press Visit Site to view the widget in action. To remove the widget from the list simply head back to the Dashboard and Design. Press Edit next to the appropriate widget to place back in the Available Widgets list.

06 XML site map generator for WordPress
Web 2.0 widgets for WordPress
This plug-in (found via the WordPress Plugins Directory) helps create a Google Sitemapscompliant XML site map of a WordPress blog. The plug-in supports automatically generated pages, ie posts, and any custom pages the user creates themselves. The beauty of the plug-in is that it updates the site map every time the user edits or creates a new post. Plus, any search engine that supports the site map protocol, ie Google, MSN Search, Yahoo! and Ask, are notified about the update. The plug-in is installed in the wp-content/ plugins directory, and will be found via the Settings tab. The plug-in has an impressive array of options, which can be at the default setting if desired. Options worth noting include Limit the number of posts in the sitemap. This ensures that only the latest posts are displayed if activated. Additional Pages allows users to specify files or URLs that reside outside the WordPress folder location, eg, www.mysite. co.uk/blog. This would typically mean that the homepage needs to be added. Click Add New Page and fill out the details. Sitemap Content gives the option what to include in the site map, ie posts, categories, archives, tag pages, etc. Finally, Priorities allows users to dictate which pages should prioritise over others. There is a 0-1 number system for each page type, so select a number, eg, 0.3, 0.7, with 1 ensuring top priority.

07 Configurable Tag Cloud options
Web 2.0 widgets for WordPress
The tag cloud widget commonly found with the basic WordPress installation is a simple, nonconfigurable affair. It does what it does, but installing the Configurable Tag Cloud widget (http://leekelleher.com/wordpress) ensures far more control over the output. The widget is installed in the wp-content/plugins folder and can be found via the Settings tab. Alternatively, after the widget has been added to the sidebar via Design>Widgets, its options can be modified via its location. The widget is simple and intuitive to use, and the starting point is Title. Add an appropriate title before deciding on the number of tags to display. If the chosen number is less than the total number of tags, the widget decides which tags are to appear in the tag cloud. Choose the smallest and largest font size, trying to keep reasonably close to avoid unsightly gaps in the tag cloud. Next, there is the option to choose a colour range for the tags, so add the appropriate hexadecimal code. Cloud Format offers Flat for a standard tag cloud, while List presents the tags in a list, ascending or descending. There is the option to integrate categories in the cloud, including empty ones, and display the post count. The final options allow the tags to be sorted by name, count or random. Hit Change when finished and Save Changes to view on the page.

FIVE ESSENTIAL WORDPRESS WIDGETS

WordPress has a vast library of widgets available via the web. Here, we pick five of our favourites.

WordPress Automatic upgrade
http://wordpress.org/extend/plugins/ wordpress-automatic-upgrade/
This widget allows a user to automatically upgrade a WordPress installation to the latest one.

Video Widget
www.nikohk.com/plugin-wordpress-video-widget
Add one or more videos in the sidebar without the need for any HTML code. Support includes YouTube, Dailymotion, Google Video, Flash Video, Vimeo, Flickr and many more.

Dashboard Editor
http://anthologyoi.com
Take control of the WordPress dashboard. Get rid of the entire dashboard or remove individual unwanted components.

My Page Order
http://wordpress.org/extend/plugins/my-page-order/
Avoid the awkward default setup and set the order of pages through a drag-and-drop interface.

MobilePress
http://mobilepress.co.za
Take a WordPress blog and render it for mobile handsets, such as the iPhone and Windows Mobile.

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://globalspex.com Christina

      Nice complication, but I think you’ve duplicated #4 & #5 (Tabbed Widgets).

    • http://www.globalspex.com Christina

      Oops, I meant compilation.