Plugin Download: Local: Visual Categories Plugin | WordPress: Visual Categories Plugin
Current: Version 1.5.2
Required: PHP >= 4.3.0 & WordPress 2.7.x – 2.8

Take control over the way you display your categories: This plugin enables you to build “category entries” which contain a link to the category and which may contain a link to the category’s feed, an image, the timestamp of when the category was last updated, and the current count of posts in the category.

Versions

Version 1.5.2: Covered for WordPress quirks.
Version 1.5: Bugs fixed and WordPress 2.8 compatibility established.
Version 1.0: First public release.

Demo

To demo this plugin before you download it, email me at tester[at]thenappycat.org and request access. I’ll reply with a username and password.

To Do

• Allow multiples instance of widget, each with unique settings.

Vocabulary

There are a few terms used throughout this guide that require explanations: Continue reading »

Plugin Download: Local: Visual Categories Plugin | WordPress: Visual Categories Plugin
Current: Version 1.6.0
Required: PHP >= 4.3.0 & WordPress 2.7.x – 2.8.x

Take control over the way you display your categories: This plugin enables you to build “category entries” which contain a link to the category and which may contain a link to the category’s feed, an image, the timestamp of when the category was last updated, and the current count of posts in the category.

Versions

Version 1.6.0: Added ordering by timestamp of most recent post.
Version 1.5.5: Version number was not updated in 1.5.4. Oops!
Version 1.5.4: Stripper & PHP 4 compatibility issue resolved.
Version 1.5.3: Stripper & PHP 4 compatibility issue resolved (probably).
Version 1.5.2: Covered for WordPress quirks.
Version 1.5: Bugs fixed and WordPress 2.8 compatibility established.
Version 1.0: First public release.

To Do

• Allow multiples instance of widget, each with unique settings.

Vocabulary

There are a few terms used throughout this guide that require explanations:

• Output: The output is the entire structure. It is what’s displayed.
• Cluster: A cluster is a group of category entries. A cluster is created when a 1 or more category entries must be set apart from the others. For example, a children cluster is created when a category has 1 or more children categories. As well, a height cluster (otherwise referred to as a column cluster), is created when categories are to be divided based upon your chosen height value. By default, a cluster is wrapped in <ul> tags.
• Category Entry: A category entry is more than just a link to a category. A category entry has multiple components: A link to the category and may contain a link to the category’s feed, a feed (RSS) image, the timestamp of whent he category was last updated, and the current count of posts in the category. By default, a category entry is wrapped in <li> tags.
• Timestamp: A timestamp is a display of a date and/or time. Click here to learn how to format your timestap.

Installation and Setup

1. Put the visual-categories folder into your plugins directory.
2. Activate the plugin.
3. Configure your settings via the Visual Categories admin page under Settings.
4. Activate the widget or add get_visCats() to a template file. Or do both.

You can have multiple instances of the output. You can add get_visCats() to any theme template file and personalize the settings. The get_visCats(echo, settings_array()) template tag contains two parameters:

• 'echo' defaults to 1 (true). To return the the output, set to 0 (false), as in get_visCats(0);
• 'settings' is an array. It’s not necessary to include the array if you do not want to deviate from the options on your settings page. However, if you want an option to display differently, use get_visCats(1, array('name of setting' => 'value'); The name of every setting that may be personalized is in the next section and wrapped in array().

For example, your website has three columns. Your widgets reside in the right column. In the left column, you want to display the child categories of category 3 ordered by post count. In the appropriate template file, you would add <?php if (function_exists(get_visCats)) get_visCats(1, array('child_of' => 3, 'orderby'=> 'count')); ?>. The remaining settings are taken from the Visual Categories admin panel settings.

Admin Panel and Template Tag Settings

Please refer to this section for guidance on how to configure this plugin. There are a lot of options. I’ve grouped them by relevance in this guide and on the admin page.

Preliminary Settings

• Styling Options:
  • Wrap the entire Output?
    • If yes, the output will be wrapped in either <ul> or <div> tags, depending on your 'Style in List Tags?' setting.
    • Defaults to Yes
    • array('wrap' => 1 or 0)
  • Output Title:
    • The text that appears directly after the tag that follows the opening wrap tag.
    • This text may be wrapped in <span> tags. The allowed attributes are class, id, and style.
    • Defaults to 'Categories'
    • array('title_li' => 'Categories')
  • Style in List Tags?
    • If yes, clusters and category entries will be in the appropriate list tags.
    • If no, clusters will be wrapped in <div> tags.
    • Defaults to Yes
    • array('style_is_list' => 1 or 0)
  • Type of List:
    • Only works if 'Style in List Tags?' is yes.
    • 'Unordered' wraps the clusters of category entries in <ul> tags.
    • 'Ordered' wraps the clusters of category entries in <ol> tags.
    • Defaults to 'Unordered'
    • array('col_tag' => 'ul' or 'ol')
  • Order Categories By:
    • Defaults to 'Name'
    • When 'Timestamp of Most Recent Post' is selected, parent categories do not inherit the timestamp of its most recently posted in child category. Also, if categories with no posts are displayed, they are sorted by name in ascending order.
    • array('orderby' => 'name', 'ID', 'slug', 'count', or 'time')
  • Direction of Order:
    • Defaults to 'Ascending (1..4) (A..D)'
    • array('order' => 'ASC' or 'DESC')

• Class Names:
  • You may enter multiple class names in each class textbox. Class names must be separated by a space. All characters except alphanumeric characters (ABC123), the hyphen (-), the underscore (_), and the space ( ) will be removed.
  • Outer Class(es):
    • Defaults to 'categories'
    • array('outer_class' => 'categories')
  • Inner Class(es):
    • By default, this setting is blank
    • array('inner_class' => '')
  • Children Cluster Class(es):
    • Defaults to 'cat-children'
    • array('children_class' => 'cat-children')

The following is how these styling and class name options relate to the HTML:

[wrap tag][div or li class="outer class(es)"][output title]
	[div or ul class="inner class(es)"]
		[if list, li]<a href="...">Category 1</a>[/li]
		[if list, li]<a href="...">Category 2</a>[/li]
		[if list, li]<a href="...">Category 3</a>
			[div or ul class="children cluster class(es)"]
				[if list, li]<a href="...">Category 5</a>[/li]
				[if list, li]<a href="...">Category 8</a>[/li]
				[if list, li]<a href="...">Category 10</a>[/li]
			[/div or ul]
		[/li]
	[/div or ul]
[/div or ul][/wrap tag]

The following is the HTML that is outputted by default:

<ul><li class="categories">Categories
	<ul>
		<li><a href="...">Category 1</a></li>
		<li><a href="...">Category 2</a></li>
		<li><a href="...">Category 3</a>
			<ul class="cat-children">
				<li><a href="...">Category 5</a></li>
				<li><a href="...">Category 8</a></li>
				<li><a href="...">Category 10</a></li>
			</ul>
		</li>
	</ul>
</li></ul>

• Height Options:
  • Enable Height?
    • If yes, the category entries are split into column clusters based upon the value you enter below.
    • Defaults to 'No'
    • array('height_enabled' => 0 or 1)
  • Number of Categories in Height:
    • The number of category entries that each column cluster will contain. Depending on your amount of categories, the final column cluster may contain less than this value.
    • If you enable height and do not enter a value, this value become 3.
    • Defaults to 0
    • array('height' => 0 or 1)
  • Keep Child with Parent?
    • If yes, the 'height' value will be applied only to top level categories. As such, a child category is never without its parent. One column cluster may contain 8 column entries (2 top level categories and 6 children) and another may contain 3 ( 2 top level categories and 1 child).
    • If no, the 'height' value will be strictly applied. If a child category is the first category entry in a column cluster, it will begin at a level relative to its parent category that is contained within a previous column cluster.
    • Defaults to Yes
    • array('keep_family' => 1 or 0)
  • Height Cluster Class:
    • The class name that is applied to each column cluster.
    • %ID displays the column number.
    • Defaults to 'cat-height'
    • array('height_class' => 'cat-height')

• Categories Display Options:
  • Depth:
    • Unless -1, depth is the maximum level that your hierarchy of category entries descends.
    • If -1, all categories are displayed and parent and child categories are treated as the same level.
    • If 0, all categories are displayed in a hierarchical structure.
    • If 1, all top level categories are displayed and hierarchy is irrelevant.
    • If >1, all category levels up to this level are displayed in a hierarchical structure.
    • Defaults to 0
    • array('depth' => 0, -1, 1, or a number >1)
  • What’s your category depth?
    • If you have more than 5 category levels, enter your desired value here. The largest value that may be entered is 50.
    • Defaults to 5
    • array('depth_limit' => 5)
  • Display Categories with No Posts?
    • If yes, a category that has no posts assigned to it will be displayed.
    • If no, a category that has no posts assigned to it will not be displayed.
    • Defaults to No
    • array('hide_empty' => 1 or 0)
  • Display Only the Child Categories Of:
    • If you only want the child categories of a particular parent category displayed, choose a parent category.
    • By default, this setting is blank
    • array(child_of' => 0 or the category ID of a parent category)
  • Categories to Include:
    • If you only want particular categories to be displayed, enter their IDs here.
    • Use only commas to separate the category IDs (e.g. 1,44,6).
    • By default, this setting is blank
    • array('include' => '')
  • Categories to Exclude:
    • If you want particular categories to not be displayed, enter their IDs here.
    • Use only commas to separate the category IDs (e.g. 1,44,6).
    • If 'Categories to Include' contains one or more IDs, this setting is ignored.
    • By default, this setting is blank
    • array('exclude' => '')

Category Entry Display Settings

• Each option allows you to build a display that can be included in or around your feed and category links.
• You may add %count, %date, and %image to the link display textboxes in the next section. This plugin assumes that you want the component to display when you add its respective % tag to a textbox in the next section.
• You may enter multiple class names in each class textbox. Class names must be separated by a space. All characters except alphanumeric characters (ABC123), the hyphen (-), the underscore (_), the space ( ), and the ‘%’ will be removed.
• Standard-looking images taken from here. Trendy images taken from here

• Post Count Options (%count):
  • Span Class(es):
    • Defaults to 'cat-count'
    • array('count_class' => 'cat-count')
  • Text before the count:
    • This text may be wrapped in <span> tags. The allowed attributes are class, id, and style.
    • Defaults to '('
    • array('count_before' => '(')
  • The Count:
    • Either numerical [0] or textual [1]. Text is displayed in lowercase.
    • Defaults to 0 [numberical]
    • array('count_format' => 0 or 1)
  • Text after the count:
    • This text may be wrapped in <span> tags. The allowed attributes are class, id, and style.
    • Defaults to ')'
    • array('count_after' => ')')
  • Pad the count calculation with child categories?
    • If yes, a parent category’s child category’s post count is added to the parent category’s post count.
    • If no, a parent category’s child category’s post count is not added to the parent category’s post count.
    • For example, Category A has 2 posts assigned to it. Category A’s children categories, B and C, have 20 and 15 assigned posts, respectively. If the count is padded, Category A’s count will be 37. Otherwise, its count will be 2.
    • Defaults to Yes
    • array('pad_counts' => 1 or 0)

• Timestamp Display Options (%date):
  • Span Class(es):
    • Defaults to 'cat-date'
    • array('date_class' => 'cat-date')
  • The Timestamp:
    • Click here to learn how to format your timestap.
    • Defaults to 'm/d/Y'
    • array('date_format' => 'm/d/Y')

• Image Display Options (%image):
  • Span Class(es):
    • Defaults to 'cat-feed'
    • array('image_class' => 'cat-feed')
  • Image Width:
    • Defaults to 12
    • array('image_w' => 12)
  • Image Height:
    • Defaults to 12
    • array('image_h' => 12)
  • The Image:
    • You may use choose an image from the included images or upload your own. Upon saving, your uploaded image will be available in the dropdown box.
    • If you change from your own image to an included image, the width and height settings will change to the included image’s width and height.
    • If you can’t see the images in the dropdown box, refer to this handy-dandy image guide.
    • Defaults to 'Not Enabled'
    • array('image_src' => '')
    • The 'image_src' value must begin with your site url and include the full path to the image. The included images are likely located at http://www.mysite.com/wp-content/plugins/visual-categories/images/[directory]/[image].[ext]

• In this section, you may add %cat_name (displays the category name), %ID (displays the category ID), %count (displays the current count of posts), %date (displays the timestamp of when the category was last updated), and %image (displays an image) to any textbox but a class textbox. You can add the % tags as many times as you desire.
• If you want to display a link to each category’s feed, add %feed_link to the textbox with the red border, before or after %cat_link. Only %cat_link and %feed_link may be entered into the textbox. All other text will be removed.
• If you feed link display is enabled, add %feed_link to the textbox with the red border, before or after %cat_link. Only %cat_link and %feed_link may be entered in the textbox.
• Feed Link Display Options (%feed_link):
  • Text Before the Link:
    • This text may be wrapped in <span> tags. The allowed attributes are class, id, and style.
    • By default, this setting is blank
    • array('feed_link_before' => '')
  • Title Tag Text:
    • Text will be placed within the link’s title tag. %cat_name is replaced by the category name.
    • Defaults to 'Feed for all posts filed under %cat_name'
    • array('feed_link_title' => 'Feed for all posts filed under %cat_name')
  • Link Class:
    • Class name will be applied to the link.
    • Defaults to 'cat-feed'
    • array('feed_class' => 'cat-feed')
  • Link Text:
    • This text may be wrapped in <span> tags. The allowed attributes are class, id, and style.
    • Text will be placed within the anchor tags.
    • Defaults to RSS
    • array('feed_link_text' => 'RSS')
  • Text After the Link:
    • This text may be wrapped in <span> tags. The allowed attributes are class, id, and style.
    • By default, this setting is blank
    • array('feed_link_after' => '')

• Category Link Display Options (%cat_link):
  • Text Before the Link:
    • This text may be wrapped in <span> tags. The allowed attributes are class, id, and style.
    • By default, this setting is blank
    • array('cat_link_before' => '')
  • Title Tag Text:
    • Text will be placed within the link’s title tag. %cat_name is replaced by the category name.
    • Defaults to 'View all posts filed under %cat_name'
    • array('cat_link_title' => 'View all posts filed under %cat_name')
  • Use category description as title when it’s available?
    • If yes, the 'Title Tag Text' is replaced with the category’s description if you’ve entered a description for the category.
    • Defaults to Yes
    • array('use_desc_for_title' => 1 or 0)
  • Class Names:
    • These class names will be applied to each category link. The 'category item class' will be applied to every link. The application of the other four will depend on the category’s context.
    • You may enter only one class name for each. All characters except alphanumeric characters, the hyphen, and the underscore will be removed.
    • If you’ve chosen to style as a list, the category link classes will also be added to the <li> tags that wrap each category entry. You will need to use li.class and a.class in your stylesheet to differentiate.
    • Category Item Class:
      • Displayed as class="[class name] cat-id-[category ID]"
      • Defaults to 'cat-item cat-id-%ID'
      • array('category_class' => 'cat-item cat-id-%ID')
    • Current Category Class:
      • Applied to the category when it is the current category. Current category is decided by an internal WordPress mechanism.
      • Defaults to 'current-cat'
      • array('current_class' => 'current-cat')
    • Parent Category Class:
      • Applied to the category when it is a parent category.
      • Defaults to 'parent-cat'
      • array('parent_class' => 'parent-cat')
    • Current Category’s Parent Class:
      • If it has one, applied to the current category’s parent.
      • Defaults to 'current-cat-parent'
      • array('current_parent_class' => 'current-cat-parent')
    • Child Category Class:
      • Applied to the category when it is a child category.
      • Defaults to 'child-cat'
      • array('child_class' => 'child-cat')
  • Link Text:
    • Text will be placed within the anchor tags.
    • Defaults to %cat_name
    • array('cat_link_text' => '%cat_name')
  • Text After the Link:
    • This text may be wrapped in <span> tags. The allowed attributes are class, id, and style.
    • By default, this setting is blank
    • array('cat_link_after' => '')

Custom Categories

• Change the URL to which your category is linked.
• This is not where you set your permalink structure. Enter a custom link only if you, for whatever reason, need to override the URL to which your category is linked.
• You can change the URL to which each category is linked. This will override the category link’s title tag. For example, if category ‘A’ is set to http://google.com, the title tag will contain “Link To http://google.com”
• Additionally, you can set the category link’s target attribute, which will be applied to the category link whether or not you’ve entered a custom link, and the category entry’s image, which will be applied to the %image tag used in the Feed and Category Link Display Options section.
• Because these values are stored in a multi-dimensional array, it is recommended that you do not personalize these settings in get_visCats().
• Category Link URL:
  • Defaults to 'http://'
• Category Link Target:
  • Defaults to 'None'
• Category Image:
  • Defaults to 'Custom image not enabled'
• Category Image Width:
  • Defaults to 12
• Category Image Height:
  • Defaults to 12

Questions? Comments? Bugs?

If you have a question, a thought, or have a bug to report, reply to this post.

Plugin Download: Custom List Categories Plugin
Version: Version 2.8
Requirements: PHP 5 & Wordpress 2.7.x

Version 2.8: Child categories may be made orphans, keep_family and children_class parameters added, and documentation updated. Numerous bugs fixed.
Version 2.0: Hierarchical listing of categories enabled and documentation updated.
Version 1.0: No hierarchical listing of categories.

Plugin Download: Custom List Categories Plugin
Version: Version 2.0
Requirements: PHP 5 & Wordpress 2.7.x

Description

Plugin Download: Visual Categories Plugin
Current: Version 1.0
Required: PHP >= 4.3.0 & WordPress 2.7.x

Take control over the way you display your categories: This plugin enables you to build “category entries” which contain a link to the category and which may contain a link to the category’s feed, a feed (RSS) image, the timestamp of when the category was last updated, and the current count of posts in the category.

Versions

Version 1.0: First public release.
Version 1.5: This release will be WordPress 2.8 compatible.

Vocabulary

There are a few terms used throughout this guide that require explanations: Continue reading »

Plugin Download: Enhanced Javascript Comment Functionality Plugin
Version: Version 1.0
Requirements: PHP 5 & Wordpress 2.7.x

Based on the comment_form_title function, this plugin allows you to add the name of the comment author to the Leave a Reply title. Replaces the comment_reply_link function.

Caution:

Use this plugin at your own risk. It’s not going to blow up your website but it requires more knowledge than I can include here. Before using, you should read and understand this and this.

Important:

If you use this plugin, do not add the following to your template (from these instructions):

if ( is_singular() ) wp_enqueue_script( 'comment-reply' )

The Enhanced Javascript Comment Functionality plugin takes care of it for you.

To make this plugin work:

You must add a comment_author id to some element, preferably in your comments.php theme file. For example, in my comments.php, I use:

<h3 id="comment_author"><?php comment_form_title('Reply to Post', 'Reply to %s', false); ?></h3>

You must be using the callback parameter in wp_list_comments, likely in your comments.php theme file. For example, in my comments.php, I use:

<?php wp_list_comments('avatar_size=50&callback=style_the_comment'); ?>

You must use this plugin’s ejcf_comment_reply_link function instead of the Wordpress comment_reply_link or get_comment_reply_link. For example, in my style_the_comment function (located in my theme’s functions.php), I use:

$comment_reply_link = ejcf_comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth'], 'reply_text' => __('Reply to Comment'), 'noreplytext' => __('Reply to Post'), 'replytext' => __('Reply to %s'), 'echo' => 0)));

This is the full function:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function style_the_comment($comment, $args, $depth) {
	global $comment_count;
	$comment_count++;
 
	$GLOBALS['comment'] = $comment;
	$comment_reply_link = ejcf_comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth'], 'reply_text' => __('Reply to Comment'), 'noreplytext' => __('Reply to Post'), 'replytext' => __('Reply to %s'), 'echo' => 0)));
 
	$output = '<li '.comment_class(empty($args['has_children']) ? '' : 'parent', $comment_id, $post_id, false).'><div id="comment-'.$comment->comment_ID.'">
	<div class="left">'.(($comment->comment_author_url) ? '<a href="'.$comment->comment_author_url.'" rel="external nofollow" class="url" target="_blank" onmouseover="change_databordercolor_on('.$comment->comment_ID.')" onmouseout="change_databordercolor_off('.$comment->comment_ID.')">' : '').get_avatar($comment, $args['avatar_size']).(($comment->comment_author_url) ? '</a>' : '').'</div>
	<div class="right"><div class="response">
		<div class="data" id="data-'.$comment->comment_ID.'">
			<div class="author vcard">'.get_comment_author_link().' [<a href="'.get_edit_comment_link().'">Edit This</a>]</div>
			<div class="date"><a href="'.htmlspecialchars(get_comment_link($comment->comment_ID)).'">'.get_comment_date('n/d/y').' <strong>| #'.$comment_count.'</strong></a></div>
			<div style="clear: both;"></div>
		</div>
		'.(($comment->comment_approved == '0') ? '<p><em>Your comment is awaiting moderation.</em></p>' : '').'<p>'.get_comment_text().'</p>
		'.(($comment_reply_link) ? '<p class="replyto">'.$comment_reply_link.'</p>' : '').'
	</div></div>
	<div style="clear: both;"></div></div>
';
 
	echo $output;
}

Details, details:

The ejcf_comment_reply_link function replaces the comment_reply_link and get_comment_reply_link functions. As of the writing of this, the comment_reply_link codex page contains no details. So let me break it down for you:

• The reply_text parameter is what appears in every comment.
• The noreplytext parameter is what will appear as the title of the comment form if your commenter cancels his or her reply to the comment. For continuity, it should be the same as what you use in comment_form_title.
• The replytext parameter is what will appear as the title of the comment form if your commenter is replying to a comment. %s equals the name of the author of the comment.
• When set to one, the echo parameter echos the resultant string of the ejcf_comment_reply_link function. When set to zero, the resultant string is returned.

In my style_the_comment function, the resultant string is:

<a rel='nofollow' href='/2008/04-30/technology/wordpress-stuff/wordpress-list-categories-wp_list_categories-hack/?replytocom=125#respond' onclick='return addComment.moveForm("comment-<em>comment ID</em>", "<em>comment ID</em>", "<em>reply to comment div ID</em>", "<em>post ID</em>", "<em>Name of Comment Author</em>", "<em>noreplytext</em>", "<em>replytext</em>")'>Reply to Comment</a>

Update 1/30/09: If you don’t want to edit your Wordpress files, check out my custom list categories function.

If you’re a web designer/programmer like I pretend to be and you also use Wordpress, you eventually discover that, though it’s an awesome weblog platform, Wordpress suffers from inconsistently and poorly constructed functions that may hinder the implementation of your design goals.

Two such functions involve category construction. My categories are listed horizontally almost midway down the “top of the fold” section. In order to achieve my desired design, I had to hack two Wordpress files. Here’s what I did:

Open wp-includes/category-template.php

On line 277 find:

'echo' => 1, 'depth' => 0

Replace with:

'echo' =&gt; 1, 'depth' =&gt; 0, 'before' =&gt; '<li>', 'after' =&gt; '</li>',
'link_before' =&gt; '', 'link_after' =&gt; ''

These additions to the wp_list_categories function will increase your design flexibility so that, when your style variable is set to 0 or none, you can specify what comes before and after the anchor element and what comes before and after the text that is contained within the anchor element.

Next, we have put those variable somewhere. Open wp-includes/classes.php

On lines 625 and 626 find:

$link .= '>';
$link .= $cat_name . '';

Replace with:

if ( 'list' == $args['style'] )
$link .= '>' . $cat_name . '';
else
$link .= '>' . $link_before . $cat_name . $link_after . '';

On line 678 find:

$output .= "$link";

Replace with:

$output .= $before . $link . $after;

So, to get this working, to one of your theme display files (such as header.php or sidebar.php) add

The code that is outputted is

<a href="/path_to/category">» Category «</a>

That’s it! Don’t be afraid to play around with it and add your own variables.