One of the most frustrating items I’ve come across recently is that alot of WordPress plugins include their own version of jQuery or similar JavaScript library. Please Stop!!!!

What you may not realize is that WordPress comes bundled with the jQuery library and to boot they provide a simple method to not only include it in your website but to ensure that it only gets included once. Please familiarize yourself with the wp_enqueue_script function as it will make your plugins cleaner and help to mitigate conflicts with other plugins and templates.

To include jQuery, Scriptaculous, or similar libraries is a simple 2 step process.

  1. Register a method for the init hook
    This is necessary as the wp_enqueue_script should be called upon the init stage of WordPress execution.
    add_action('init', 'plugin_init');
  2. Enqueue the jQuery library
    function plugin_init() {
        wp_enqueue_script('jquery');
    }

There you have it you have now included jQuery into the website that uses your plugin.

, , , , , ,

Ever find yourself wanting to create a custom feed of your WordPress managed website? Lucky for you they have the handy add_feed hook that allows you to define as many feeds as you want, Just be careful not to duplicate any existing feeds. I personally find myself using this feature to output xml of data that I then utilize in Flash presentations. The add_feed function works like all other WordPress hooks in that it calls the user defined function when the named feed is to be rendered.

For illustration purposes lets walk through the basic steps for creating a Custom Feed.

Define a function to output the xml

Before adding the feed you first need to define the function that will render the xml to be returned when the feed is called. Depending on your needs you can define this in a custom plugin or in the functions file of your theme. The below snippet outputs your posts in a basic xml structure.

function outputXMLFeed()
{
    $posts = query_posts('showposts=5');
 
    echo '<?xml version="1.0"?>';
    echo '<items>';
    foreach ($posts as $post) {
        echo '<item>';
        echo '<title>' . get_the_title($post->ID) . '</title>';
        echo '<link>' . permalink($post->ID) . '</link>';
        echo '<guid>' . get_permalink($post->ID) . '</guid>';
        echo '</item>';
    }
    echo '</items>';
}

Add the feed to WordPress

Now to add the feed we simply need to call add_feed where we pass in the name of the feed and the function that will output the feed contents (xml). One caveat exists however in that WordPress needs to be fully initialized before the add_feed function can be called. This forces us to wrap up the add_feed call behind another function that gets called on the WordPress init hook.

add_action('init', 'add_my_feed');
 
function add_my_feed(  ) {
  add_feed("myFeed", "outputXMLFeed");
}

Calling your Custom Feed

To access your feed you simply need to append ?feed=Name of your Feed to your site’s url. In this case the final url would be http://www.example.com/?feed=myFeed

That is all there is to creating your custom feeds. Depending on your needs you can create them in your theme functions or in a standalone plugin. If you are using additional plugins like Pods CMS then feeds can be extremely useful in rendering pods contents into xml for use by Flash, JavaScript or other applications.

, , , ,

Many if not all plugin and theme developers of the popular WordPress software are familiar with the wp_list_pages function. However very few individuals are aware of the Walker classes of WordPress and how they can be extended to customize your page lists with unique and custom functionality. The following article is going to attempt to familiarize you with the underlying Walker Classes and show a brief example of how to extend the Page Walker to output a custom sitemap.

What is the WordPress Walker Class?

To begin with the first question we need to answer is simply what is a Walker Class? In WordPress a Walker Class contains all the functionality needed to render an HTML representation of a collection of WordPress Objects. Where these objects could include Tags, Posts, Pages, Comments, and etc. To put it in plain english the walker is what creates the end HTML that will be displayed when calling a function. Without knowing it by calling the wp_list_pages function you are actually having the Walker_Page class render the final HTML based on your provided options.

A Walker class has 5 basic api methods that are used and will need to be extended based on your goal.

  • walk

    This function steps through the array of elements and calls the necessary start/end_lvl and start/end_el functions for each. The basic logic is as follows:

    1. If the element is a child of the previous element it calls start_lvl.
    2. For each element call start_el followed by end_el.
    3. If the element is no longer a child element then it calls end_lvl.
  • start_lvl

    concatenates the HTML element opening tag that will contain child elements to the output.

  • end_lvl

    concatenates the HTML element closing tag that contains the child elements to the output.

  • start_el

    concatenates the HTML representation of the object minus the closing HTML tag to the output.

  • end_el

    concatenates the HTML closing tag element of the object. to the output.

Creating your own Walker

The WordPress Walkers are contained in the core WordPress files and as a developer of a theme or plugin you want to define your walker in your own code base. For example if you are a theme developer you need to define your Walker in your Theme Functions file (functions.php). This way as new versions of WordPress come out your code does not get overwritten and you are also not asking users of your theme to modify WordPress core installation files.

To create a new Walker it is easiest and usually most time effective to extend a Walker already defined by WordPress. For our example of building a Sitemap Walker we will start by extending the Walker_Page class.

class Walker_Sitemap extends Walker_page {
  // code 
}

Now that we have created our Walker_Sitemap Walker class we need to override the display functions to display our sitemap. In this example we are adding a page description that will be outputted with the page title. Instead of utilizing the WordPress functionality to get a snippet of a page I chose to output a custom meta field called description.

function start_el(&$output, $page, $depth, $args, $current_page) {
		if ( $depth )
			$indent = str_repeat("\t", $depth);
		else
			$indent = '';
 
		extract($args, EXTR_SKIP);
 
		$output .= $indent . '<li><div class="link"><a href="' . get_page_link($page->ID) . '" title="' . esc_attr( wp_strip_all_tags( apply_filters( 'the_title', $page->post_title, $page->ID ) ) ) . '">' . $link_before . apply_filters( 'the_title', $page->post_title, $page->ID ) . $link_after . '</a></div>';
 
                $description = get_post_meta($page->ID, 'description', true);
 
                if( ! empty( $description ) ) {
			$output .= '<div class="description">' . $description . '</div>';
                }		
 
	}

As you can see in the code what we have done is simply overwritten the start_el function of the Walker_Page class with our desired HTML output. We have made it so that in addition to outputting the page link we are also outputting a div element that contains the pages description if it exists for the current page.
If wanted you could override the other Walker functions to change the container elements from a list (UL) to a DIV or any other desired HTML elements.

Using your newly created Walker

Now that you have created your Walker in your Theme Functions file the logical next step is to use it. This is done by calling the appropriate WordPress function passing in an instance of your Walker class. In our example we are outputting a sitemap which contains Pages and so we will be calling the wp_list_pages and passing in the parameter walker with an instance of Walker_Sitemap.

$sWalker = new Walker_Sitemap();
wp_list_pages( array( 'exclude' => $post->ID, 'title_li' => null, 'walker' => $sWalker ) );

You many want to note the exclusion of the current Page in the options. This is so that the sitemap page does not show up in the website’s sitemap as the visitor is already there and does not need a link to it.

Take Away

There are a million different uses that Walkers could be used for in WordPress. The next time you find yourself iterating through a collection of pages, posts, tags, or similar objects ask yourself if a Walker could save you time and effort by handling the iteration so you can focus on the output.

, , , , , , , , ,

As I often find myself comparing various plugins for the WordPress pwered site, I thought it would be handy to give a nod to my favorite plugins. Without futher ado here is my prefered tag cloud of choice: Configurable Tag Cloud.

If you have a tag cloud on your WordPress powered website or blog chances are you may be utilizing the built in Tag Cloud widget provided by WordPress. If so you may want to have a look at the Configurable Tag Cloud plugin.

Unlike the built in widget that you have no control over this handy plugin allows you to modify everything from color to font sizes in addition to being able to display the categories in the cloud if you so wish. Also if you are using a theme that does not have widget support then you can add a few simple lines of code to your template files to display your customized tag cloud. A simple and easy to use plugin for your site allowing you a little more control over what your site looks like.

, , , , ,