Talk In Code

A tag cloud is a name for a collection of keywords that are displayed as a big block of text. Usually the most commonly occurring keyword is the largest, and the least commonly occurring keyword is the smallest. Tag clouds are a neat way of allowing your users to navigate your content in a different way, simply be letting them look over the cloud and linking each keyword to sections of your site that contain that word.

Wordpress comes with this function built in and is already available as a widget. However, after adding a few hundred posts this tag cloud can get rather large and this widget can stretch your sidebar to stupid proportions. A way around this is to create a page that can be used to display this large tag cloud. The first step is to create a page template that will be used to run the correct Wordpress function to display the tags. This is done by making a copy of your normal page template (call it tagpage.php) and adding the following code at the top.

<?php
/*
Template Name: Tags
*/
?>

When you go to create a page you will see a list of available templates to select from, one of these will be called Tags. Add in your title and some descriptive text and select this template.

Next, we need to add a call to the wp_tag_cloud() function, this basically prints out a small tag cloud. Add the following code into your page template so that is fits in with the rest of your design.

<?php wp_tag_cloud(); ?>

As with most Wordpress functions, wp_tag_cloud() allows you to add lots of parameters to change the output of the function. There are lots of different options available, but the main ones that will be used are as follows:

• smallest - This designates the font size to be used for the least commonly occurring tag. The units are by default in 'pt' or points, but this can be changed via the unit parameter.
• largest - This designates the font size to be used for the most commonly occurring tag.
• unit - Unit of measure as pertains to the smallest and largest values. This can be any CSS length value, e.g. pt, px, em, %; default is pt (points).
• number - This tells the function how many tags to include in the tag cloud. The default is 45, but to print out all tags just use 0.

These parameters are given as an encoded string, for example, to change the number of tags printed from the default of 45 to 20 use the following code.

<?php wp_tag_cloud('number=20'); ?>

Multiple parameters are separated by the & character.

<?php wp_tag_cloud('number=20&largest=200'); ?>

Take a look at the Wordpress manual for more information about the wp_tag_cloud() function

To demonstrate I have created a tag cloud page on Talk In Code, using the following code to create the cloud.

<?php wp_tag_cloud('smallest=7&largest=50&number=500'); ?>

Finally, there is also a function called wp_generate_tag_cloud() that has the same functionality as wp_tag_cloud() but will always return the HTML string that makes the tag cloud.

Wordpress has a couple of rarely used functions that allow author information to be displayed for the current post and a list of all of the authors on the blog.

Adding a written by message to your posts is not difficult at all. Just use the the_author_posts_link() function inside the post loop.

<?php the_author_posts_link(); ?>

This function shouldn’t be confused with the the_author_link() function that prints out the link in the author’s profile.

The second way of printing out author information is by using the wp_list_authors() function. This can take a number of arguments, but the simplest use of it is as follows:

<ul>
<?php wp_list_authors(); ?>
</ul>

This should print out a list of the authors on your blog. There is one very important thing I should mention here. This function will only print out an authors name if they have written a post and are not the default admin account. I tried to print out the authors on a test blog and after a few minutes of frustration I looked at the function call itself on line 460 of the file author-template.php in the directory wp-includes. The function specifically excludes authors that haven’t written any posts but you can turn this on if you give it the right parameter.

The wp_list_authors() function takes a number of arguments in the form of a string of arguments. The available arguments are as follows:

• optioncount: Print out the number of posts for each author. The default is 0 (false).
• exclude_admin: Print out the blog admin user. The default is 1 (true)
• show_fullname: Use the full name of the author instead of their nickname. Default is 0 (false).
• hide_empty: Show users who don’t have any posts. The default is 1 (true). Note that even if a user with no posts is printed they will not be linked.
• echo: Immediately echo the list of authors or return as a variable. The default is 1 (true).
• feed: If set then a link to an RSS feed for that author is printed, along with the text given. The default is not to print anything.
• feed_image: This is a link to a RSS icon, it works in the same way as the feed parameter, but will override it.

To use the arguments you need to pass them to the function in the form of a string or arguments like this.

<?php wp_list_authors('exclude_admin=0&hide_empty=0&feed=Feed'); ?>

Now that you have a link of authors being printed out it is time to look at where the links go to. Each author has an ID associated with them, and this is appended to the URL using the author tag. If you have permalinks turned on then the authors name is used.

When clicked on Wordpress will attempt to display the author information using a template file called author.php. If this is not present then it will display a list of the posts using the archive.php template file. Finally, if this is not present then Wordpress will default to the index file.

Your author.php file should contain the following lines so that you can access the author informaiton.

<?php
if(isset($_GET['author_name'])) :
 $curauth = get_userdatabylogin($author_name);
else :
 $curauth = get_userdata(intval($author));
endif;
?>

The $curauth variable now contains an author object that can be used to access the various different data fields associated with authors. The following snippet will print out the authors name, profile and homepage, if this information is not filled in then nothing will be printed.

<h2><?php echo $curauth->first_name . ' ' . $curauth->last_name; ?> (<a href="<?php echo $curauth->user_url; ?>"><?php echo $curauth->user_url; ?></a>)</h2>
<p><?php echo $curauth->user_description; ?></p>

You can also include a normal loop on this page to print out every post that the user has written.

For more information on the author templates (and a full list on the attributes available in the author object) take a look at the author templates section on the Wordpress site.

Wordpress has a nice little revisions feature that will allow you to revert to a previous version of a post if you don’t like the current edit. However, the drawback of this feature is that it is not always needed and it fills the post table full of stuff you will never need. Fortunately, turning this feature off isn’t too much of a pain. All you need to do is add the following line of code to your wp-config file, just below the DB_COLLATE line.

define('WP_POST_REVISIONS', 0);

You can also set the autosave interval here to something greater than the default of 60 seconds. It is possible to do this in the wp-config file since version 2.5.0.
define('AUTOSAVE_INTERVAL', 123);

If you want to get rid off all of the post revisions from your post table then you can use the following SQL query.

DELETE FROM wp_posts WHERE post_type = 'revision';

A sortable list is simply a list of items that can be dragged and dropped to alter the order of those elements.

There are two sortable lists available in Wordpress, one from the JQuery framework and one from the Scriptaculous framework. For a sortable list you will need a list, so here is a simple one.

<ul id="sortcontainer">
<li class="sortable">Item 1</li>
<li class="sortable">Item 2</li>
<li class="sortable">Item 3</li>
<li class="sortable">Item 4</li>
</ul>


JQuery Sortable

The JQuery sortable control is actually a plugin and not part of the standard JQuery framework. The first thing we need to do is add in the correct JavaScript libraries that we need to use. We do this with the wp_enqueue_script() Wordpress function. The are quite a few different things that are needed so you can use an array to pass in all of the options.

wp_enqueue_script( array("jquery", "jquery-ui-core", "interface", "jquery-ui-sortable", "wp-lists", "jquery-ui-sortable") );

Here is the JavaScript code that is needed to create the sortable list.

<script type="text/javascript">
 jQuery(function($) {
 
 var smpSortable;
 var smpSortableInit = function() {
  try { // a hack to make sortables work in jQuery 1.2+ and IE7
   $('#sortcontainer').SortableDestroy();
  } catch(e) {}
  smpSortable = $('#sortcontainer').Sortable( {
  accept: 'sortable',
  onStop: smpSortableInit
  } );
 }
 
 // initialize sortable
 smpSortableInit();
});
</script>

For more information on the sort of options available have a look at the JQuery Sortables documentation.

Scriptaculous Sortable

To use the Scriptaculous sortable list we add in the scriptaculous-dragdrop library using the wp_enqueue_script() Wordpress function.

wp_enqueue_script("scriptaculous-dragdrop");

Here is the code you need to create the sortable list, you need to include this on the page below the list.

<script type="text/javascript">
  Position.includeScrollOffsets = true;
  Sortable.create('sortcontainer',{
   tag: 'li',
   scroll: window
  });
</script>

For more information on the sort of options available have a look at the Scriptaculous Sortables documentation.

If you only want to run the wp_enqueue_script() function in the admin section of Wordpress you can use the is_admin() function. This returns true if the code is run in the admin section, and false if run on the front end. Using this function you can stop JavaScript libraries being included when you don’t use them.

I recently talked about adding code to blogs and comments to Wordpress and making sure that certain characters are encoded properly. So to simplify things I thought I would create a little set of regular expressions that takes a sample of code and convert it into a Wordress friendly format. It consists of the following function, which takes the value of a text area called tochange and runs some regular expression replace functions on it. I have kept the expressions as simple as possible so they are quite easy to understand. The g argument for each expression means that the replace will be done for all of the text.

<script type="text/javascript">
function changeIt(){
  var text = document.getElementById('tochange').value;
  text = text.replace(/&/g,'&amp;');
  text = text.replace(/"/g,'&quot;');
  text = text.replace(/'/g,'&#39;');
  text = text.replace(/</g,'&lt;');
  text = text.replace(/>/g,'&gt;');
  text = text.replace(/^\s+/mg,'&nbsp;&nbsp;');
  document.getElementById('changed').value = text;
  document.getElementById('preTag').innerHTML = text;
}
</script>

The only one which might cause an issue is the last one with the expression ^\s+. This simply matches for 1 or more white space characters at the beginning of a line. The m argument means that the ^ symbol will be used to mean the start of a line. You can test this function with the following HTML tags.

  <textarea id="tochange" cols="50" rows="10"></textarea>
  <input type="submit" onclick="changeIt()" />
  <textarea id="changed" cols="50" rows="10"></textarea>
  <pre id="preTag"></pre>

The first textarea is what you want to alter, the second is the altered text and the pre tag displays what the altered text will look like in your browser.