WordPress: AJAX/Dynamic Content and Interactive Forms / Page 2

WordPress: AJAX/Dynamic Content and Interactive Forms [con't]

Getting Your Theme Ready for Plug-ins and Widgets

In this chapter, we'll take a look at what needs to be done to prepare your theme for plugins and widgets.

Plug-in Preparations

Most WordPress Plug-ins can be installed and will work just fine with your theme, with no extra effort on your part. You'll generally upload the plug-in into your wp_content/plugins directory and activate it in your Administration Panel. Here are a few quick tips for getting a plug-in displaying well in your theme:

1. When getting ready to work with a plug-in, read all the documentation provided with the plug-in before installing it and follow the developer's instructions for installing it (don't assume just because you've installed one plug-in, they all get installed the same way).
2. Occasionally, a developer may mention the plug-in was made to work best with a specific theme, and/or the plug-in may generate content with XHTML markup containing a specific CSS id or class rule. In order to have maximum control over the plug-in's display, you might want to make sure your theme's stylesheet accommodates any id or class rules the plug-in outputs.
3. If the developer mentions the plug-in works with say, the Kubrick theme, then, when you install the plug-in, view it using the Kubrick theme (or any other theme they say it works with), so you can see how the plug-in author intended the plug-in to display and work within the theme. You'll then be able to duplicate the appropriate appearance in your theme.

Installing the AJAX Comments Plug-ins

As I mentioned earlier, AJAX can really enhance the user's experience when it comes to forms. The most used form on a blog would be the comment form. Let's look at a plug-in that can really speed and tidy up the comment process. I'll be installing Mike Smullin's AJAX Comments Plug-in.

If you can't spare the dollar that ol' Mike is asking for, you can also use Regua's AJAX Comment Posting plug-in.

Regua's plug-in is good, but I just really like Mike Smullin's plug-in, it's very light and works quickly. Well worth the dollar I spent on it. Here's the best part installing it:

Time For Action:

1. Unzip and upload the ajax-comments directory into the wp-content/plugins directory.
2. Go to Administrator | Plug-ins panel and Activate it.
3. Use it. That's it! The user sees their comment updated immediately with a note that the comment is awaiting approval. It's nice for the moment and they feel 'heard', but you might not ever actually approve the comment depending on its content.

Widget Preparations

Some plug-ins, like the widget plug-in (again you don't have to install this if you're using version WordPress 2.2 and up), do require your theme to go through some more formal preparation. You'll need to do the following to make your theme compatible with widgets (a.k.a 'Widgetized').

Time For Action:

1. Your side bar should ideally be set up using an unordered list format. If it is, you can add this code within your side bar: (If your sidebar is not set up using an unordered list format, ignore this step, but pay attention in step 3.)
   <ul id="sidebar"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <li id="about"> <h2>About</h2> <p>This is my blog.</p> </li> </ul>
2. Because we deconstructed the default WordPress theme, based on the famous Kubrick theme, there is a funcitons.php file in our theme that already has the widgets registered for the sidebar. If by some chance you started completely from scratch or lost that file, you simply need to create a functions.php file in your themes folder and add this code to it:
   <?php if ( function_exists('register_sidebar') ) register_sidebar(array( 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', )); ?>
3. My problem is that my sidebar format is much customized and it's not in a simple unordered list. Plus, I have two sidebars. I'd want the second sidebar that holds my GoogleAdSense to contain a widget or two, but not my 'Table of Contents' sidebar. Not a problem! The code we entered above in the functions.php file helps us with our more traditional div-header-list structure. Add this code to your non-unordered list sidebar:
   <div id="sidebar"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?> <div class="title">About</div> <p>This is my blog.</p> <div class="title">Links</div> <ul> <li><a href="https://example.com">Example</a></li> </ul> <?php endif; ?> </div>
4. You've got two sidebars and you want them both to be dynamic? Instead of register_sidebar(), use register_sidebars(n), where n is the number of sidebars. Place them before the array bit of code if you're using a nonunordered list sidebar, like so:
   <?php if ( function_exists('register_sidebar') ) register_sidebar(n, array( 'before_widget' => '<li id="%1$s" class="widget %2$s">', 'after_widget' => '</li>', 'before_title' => '<h2 class="widgettitle">', 'after_title' => '</h2>', )); ?>

Then place the appropriate number in the dynamic_sidebar() function, starting with 1. For example:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?> <div class="title">About</div>

Your theme is now 'Widgetized'. For those of you who are looking forward to creating commercial themes be sure to tell everyone your theme is widget-friendly.

Like Widgets? Learn all about how to control their display in your theme and even develop your own. Check out AUTOMATTIC's Widget API Documentation.

Additional Considerations: There are no concrete standards for widgets as of yet (though, the W3C is working on it. Many WordPress widgets, like Google Reader, are flexible and can handle just about any size column. Some widgets may require a minimum column size! You may need to adjust your theme if the widget has an inflexible size. Some widgets (especially the ones that display monetized ads for your site) have display requirements and restrictions. Be sure to thoroughly investigate and research any widget you're interested in installing on your site.

Installing the Google Reader Widget

I do a lot of online reading, thank goodness for RSS feeds. I used to load-in all sorts of RSS feeds to my site to show people what I was reading, but that's not very accurate. It only shows what sites I usually go to, and what I might have read on that site. With all the new sites and blogs coming and going, I'd have old feeds left on my site, it got to be ugly, and I eventually stripped them all out.

Google Reader has a shared feed that lets people know exactly what I really have been reading and interested in. Thanks to this handy widget by James Wilson, I can share what I'm really reading, in real-time, quickly and easily. Once your theme is widget-compatible, it's pretty much just as simple to get a widget up and running as a plug-in. Get the Google Reader Widget.

Time For Action:

1. Unzip and drop googlereader.php file into the wp-content/plugins directory. (Depending on the widget, be sure to read the author's instructions. Some will want you to install to the wp-content/plugins directory and some will want you to install to the wp-content/plugins/widgets directory. You might have to create the widget directory.)
2. Go to Administration | Plug-ins and Activate it.
3. Go to Administration | Presentation | Widgets and drag the widget to your sidebar area.
4. View it on your site.

I ran into a snag with the Google Reader Widget

I had to read the FAQ for the Google Reader Widget to learn that my hosting provider doesn't approve of the file_get_contents() method. So I had to modify my googlereader.php file at line 57 with the following workaround the widget author recommended:

$ch = curl_init(); $timeout = 5; // set to zero for no timeout curl_setopt ($ch, CURLOPT_URL, $uri); curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt ($ch, CURLOPT_CONNECTTIMEOUT, $timeout); $stories = curl_exec($ch); curl_close($ch);

After making this tweak, the Widget worked fine.

Find a programming school near you

Zip Code:

Subject: - Select All Subjects - Computer Applications Computer Engineering Computer Science Computer Prog. - Software Dev. Computer Game Programming Web Design Web Development Internet Systems Internet Certification Database Design and Development Information Systems Management Information Technology Project Management Network Design - Development Systems Analyst

Degree: - Select All Degrees - Associate's Bachelor's Master's Doctoral Certificates Diplomas Coursework MBA

Online Campus Both