Please help support the continued development of AZIndex, particularly if you are using the plugin in your work or as part of a for-profit website. All contributions, no matter what size, will be gratefully received.

Display Item Filter

The display item filter is called just before an item is inserted into an index page.  Using this filter allows you to affect the what shows up on the web page when this item is displayed.  Note, you cannot use this filter to influence the sorting of the index. That is what the item filter is for.

Note: this filter will only be called if the Group items with the same heading… option is not selected.

To add a filter for all indexes in your blog use the following code:

add_filter('azindex_display_item', 'my_display_item_filter');

Then add the display item filter function with the name you specified:

function my_display_item_filter($item) {
    /* My item modifying code here */
    return $item;

The $item parameter is an associative array containing all the information about the item being loaded into the index.  It has the following keys names:

Key Name Description
id Post id the id of the post linked to by this item
head The item’s heading string, as it will be displayed in the index
subhead The item’s subheading string, as it will be displayed in the index
desc The item’s description string, as it will be displayed in the index
sort-head The item’s sorted heading string – used only when sorting the index
sort-subhead The item’s sorted subheading string – used only when sorting the index
sort-desc The item’s sorted description string – used only when sorting the index
key Category/tag id of the item – only if category/tag is selected as the heading
output Empty when the filter function is called, but if you add your own HTML here, then it will be used for displaying the item.

The important values for this filter are:

  • head, subhead, and desc, which you can modify to change the content of the item display
  • id, which you can use in WordPress functions to query the information you need about the object
  • output, which you can use if you want to completely replace the HTML used for the item.  See below for more information

Note: modifying the other values in the array does not affect anything.

You can change the output in two different ways:

  1. by modifying the head, subhead, and desc values individually.  Each value will be wrapped in a <span> element before being output.  You can insert any HTML you like into the values, including <img> tags for thumbnails.  The permalink for the item will be added to the item by the plugin after the filter returns.  If you don’t want the default ‘‘ character between the head and subhead just type a space character into the Heading separator field in the settings page.
  2. by putting HTML to the output value.  If you add anything at all to output then it will be used instead of the usual output generated by the plugin.  You can use this field to create index items with exactly the look and feel you need, but remember, you will be responsible for adding the link to the post to the HTML, otherwise there will be nowhere for readers to click to get to your posts.  The item will be wrapped in a list item tag <li> when it is added to the index page,

If you use this filter to alter the way the items are displayed, you may well need to modify the default CSS stylesheet used by your index.  In the settings page, simply select the following option:

  • Use customized stylesheets for the index

and you can make the changes you need. The filter always uses the first set of CSS styles on the settings page, the one labeled Stylesheet for ungrouped index items.

Note: Remember, if you are using the output value to return your own HTML, the .head, .subhead, and .desc CSS classes will not be used unless you use them in your HTML.

More Display Item Filter Parameters

If you only want to use the item filter with one specific index, you need to know the id of the index your filter function is being called for.  You can do this by specifying that you want your filter to receive all the available parameters, which is 2:

add_filter('azindex_display_item', 'my_item_filter', 10, 2);

Note: the third parameter in the add_filter() call, 10, is the default filter priority, and must be present so you can specify the number of parameters you want to be passed to your filter.

Now you can modify the filter function to receive the index id, so you can add a test in your code to see if you need to filter this item.

function my_display_item_filter($item, $idindex) {
    if ($idindex = INDEX_ID) {
        /* My item modifying code here */
    return $item;

Note: in future versions for AZIndex, $idindex may be a string, as well as a number.

Example: Movie Stars Thumbnail Index

As an example of what you can do with this filter, this is how I created the thumbnail index of movie stars in the gallery section:

  1. Find a place to put a small amount of PHP code—I prefer to put it in another plugin (one I made myself) but you can also add it to somewhere like your functions.php file in your current theme’s directory.
  2. Add the following code to your PHP file:
    /* This call hooks the filter function into the plugin. Since
     * I only want to modify the content of one of my indexes, I
     * specify that I need both available parameters passed
     * to my filter function.
    add_filter('azindex_display_item', 'my_add_thumb', 10, 2);
     * This is the filter function.  It simply puts the post's  thumbnail into
     * the head field and moves the original contents of the head field
     * (the title of the post) into the subhead field.
     * @param $item array contains information about the item to be displayed
     * @param $idindex the id of the index being displayed
    function my_add_thumb($item, $idindex) {
        // Only use this filter to process one specific index.
        if ($idindex == 18) {
            // I stored the thumbnail for each post in a custom value called "Thumb"
            // If you are using a thumbnail plugin, you will need to replace this line
            // with the correct function to obtain the URL of the thumbnail image.
            // (Note: you're on your own with that!)
            $thumb = get_post_custom_values('Thumb', $item['id']);
            // Move the title of the post from the heading to the subheading.
            // I wrap the text inside a "div" element so that I can control exactly
            // where the text appears next to the thumbnail.  You may not have
            // to do this, depending on what you need.
            $item['subhead'] = '<div style="height:50px;padding-top:30px;">'.$item['head'].'</div>';
            // Wrap the thumbnail image inside an "img" tag and put it in the heading.
            $item['head'] = "<img src='{$thumb[0]}'/>";
        // Return the modified item back to the plugin.
        return $item;

    Please be aware that this code will not work as-is on your blog. You will need to make changes to use the correct index id, to fetch the correct thumbnail URL, and to adjust the positioning of the image and text, to get the index looking the way you want.

  3. In the index settings:
    • Make sure the Group items with the same heading… option is not selected
    • Select the Use customized stylesheets for the index option
    • Make the following change to the first line of the Stylesheet for ungrouped index items:
      .azindex .head {float:left;padding-right:10px}

      As mentioned above, the stylesheet changes required depend on the output you are generating for the item.

  4. Save the settings and the file with the filter code, and go have a look at your new index.

Additional Notes

There are some other things to be aware of when you are using a display item filter:

  • If you are only interested in altering the appearance of the index items (and not the way the index is sorted), then use this filter over the azindex_item filter as it will be faster, since it will be called much less often.
  • The filter will not be called if you have the Group headings… option set, so the grouping capabilities of the plugin will not be available when you use this filter.
  • The strings in head, subhead, and desc use the UTF-8 encoding, where some characters (like those unique to certain languages) are more than one byte long.  If you are going to manipulate text that contains these multi-byte characters, you should use the PHP multi-byte string library functions to do so.
  • Unless you have a good reason, it’s best not to use the contents of sort-head, sort-subhead, or sort-desc in this filter.
  • Other keys may be added to the $item array in future releases, so the number of keys and their order may change over time.
Continue to the next page »

Comments are closed.