1. include_once(ABSPATH.'/wp-admin/includes/media.php');
2. include_once(ABSPATH.'/wp-admin/includes/file.php');
3. include_once(ABSPATH.'/wp-admin/includes/image.php');
5. // $id is the id of the post being inserted
6. // $name is actually the name of the form input that uploaded the file so WP can access it using $_FILE[$name]
7. media_handle_upload($name,$id);

If you are inserting a new post, it makes sense to have the line $id = wp_insert_post($post_data); before this.

Bookmark

The scripts could be a little smaller, but it would really kill readability.

“Get” AJAX Script

1. function a(l,d,u){
2. try{r = new XMLHttpRequest();}catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');}catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}
3. if(r){
4. r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML = r.responseText;}}
5. r.open('GET', l+'?'+d, true);r.send(d);
6. }
7. }

“Post” AJAX Script

1. function b(l,d,u){
2. try{r = new XMLHttpRequest();} catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');} catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}
3. if(r){
4. r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML=r.responseText;}}
5. r.open('POST', l, true);r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');r.send(d);
6. }
7. }

Combined AJAX Script

This combined script also accepts a fourth parameter ‘p’ that should evaluate true if the data is to be sent by post.

1. function a(l,d,u,p){
2. try{r = new XMLHttpRequest();}catch(e){try {r = new ActiveXObject('Msxml2.XMLHTTP');}catch(e){r = new ActiveXObject('Microsoft.XMLHTTP');}}
3. if(r){
4. r.onreadystatechange = function() {if (r.readyState == 4 && r.status == 200){document.getElementById(u).innerHTML = r.responseText;}}
5. if(p){r.open('POST', l, true);r.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');}else{r.open('GET', l+'?'+d, true);}
6. }
7. }

Demo: (Sorry but you will have to go to the full page so the JavaScript is loaded.)
Click here to see the POST HTML of the homepage
Click here to see the GET HTML of the homepage
(they are the same)

Bookmark

The first step is to add the following to your current theme’s index.php loop after the line that looks like <?php while (have_posts()) : the_post(); ?>, but before any other code.

1. <?php $cat_temp = cat_loop();?>
2. <?php if($cat_temp && is_numeric($cat_temp)){?>
3. <?php include('loops/cat_'.$cat_temp.'.php');?>
4. <?php }else{ ?>

Then add } just before the line endwhile.

The next step is to add the following to your theme’s functions.php file (you may have to create a file with the same name):

1. function cat_loop(){
2. global $blog_id,$post, $wp_version;
3. if($wp_version >= 2.3){
4. global $object_term_cache;
5. $array = $object_term_cache[$blog_id][$post->ID]['category'];
6. }else{
7. global $category_cache;
8. $array = $category_cache[$blog_id][$post->ID];
9. }
10. while (list($cat) = each($array)) {
11. if(file_exists(dirname(__FILE__).'/loops/cat_'.$cat.'.php')){
12. return $cat;
13. }
14. }
15. }
16. Use the following to copy and paste the code.
    function cat_loop(){ global $blog_id,$post, $wp_version; if($wp_version >= 2.3){ global $object_term_cache; $array = $object_term_cache[$blog_id][$post->ID]['category']; }else{ global $category_cache; $array = $category_cache[$blog_id][$post->ID]; } while (list($cat) = each($array)) { if(file_exists(dirname(__FILE__).'/loops/cat_'.$cat.'.php')){ return $cat; } } }

This can be modified to look at author’s also. Now the only thing you have to do is to create a folder named “loops” in your theme’s folder, and then create a new file with a new “loop” — excluding the while and endwhile parts — and name it cat_xxx.php where xxx is the id of the category the loops is for.

This can be repeated for single.php, archive.php, or anywhere else a custom loop is useful. You can even use something similar for individual posts or pages.

A post may be in multiple categories, but it will only use the first custom template it finds, so make sure the post is in only one specially styled category at a time.

Bookmark

To fix this you need to create the file and make sure that MySQL has access to it. (All commands need to be run as root)

Create the directory (if it doesn’t already exist).

Create the file by “touching” it.

Set the ownership of the mysqld.sock file and folder to mysql.

You can then start MySQL and breath easier.

Bookmark

For the “core”: I needed it to be able to queue effects to run one after another, but still be able to run effects synchronously with their own queues. Setting up the effects should take no more than a few lines, and the library should be easy adapted to the website or app it is currently running on. The library must also be cross browser, run well on lower end computers, and very very small (the main reason for creating it was as a replacement in a project for people who didn’t want to use jQuery or Scriptaculous just for the effects.) The core should be able to do everything with only being told the element’s ID, whether we are showing or hiding it (if applicable), and the effect to use. An added “feature” I wanted was something that could be used to create a tutorial, so no features could be used that were too fancy.

For the effects: I needed each individual effect to take no more than a few lines of setup, processing and finishing, so the framework needed to control everything, but each effect should be able to set its own duration using the framerate set. It should also be extremely simple to add new effects to the library.

The results: A library that is only 8KB in size (without compression or comments) or 2.9KB with natural (not gZip) compression and no comments with 4 built-in effects. While I’ll admit that the syntax to call effects isn’t as “pretty” as some of the other libraries, it is very simple, and queuing is powerful and easy to set up. If you want to jump ahead and see the finished product go here

This is just a demonstration post. The actual code will be explained in the future.

To test the effects library click here

The that group of effects was done with the following code:
AOI_eff.start('test_1', {'mode': 'show', 'eff': 'Expand', 'queue': ['hide::test_1::Fade','show::test_2::ScrollLeft::450','hide::test_2::ScrollLeft::50','show::test_1::Fade::25']} );

Something a little more interesting: here or the same thing, but with opposite displays here or the same thing, but the effects depend on the display. here

Bookmark

2. function find_path($loc,$dir=0){
3. for($i = 0; $i <10; $i++){
4. if($dir){
5. if(is_dir($ladder.$loc)){
6. return $ladder;
7. break;
8. }
9. }elseif(is_file($ladder.$loc)){
10. return $ladder;
11. break;
12. }
13. $ladder .='../';
14. }
15. }
16. Use the following to copy and paste the code.
    function find_path($loc,$dir=0){ for($i = 0; $i <10; $i++){ if($dir){ if(is_dir($ladder.$loc)){ return $ladder; break; } }elseif(is_file($ladder.$loc)){ return $ladder; break; } $ladder .='../'; } }

This code is NOT user-input safe: any checks you do should be hard coded otherwise you might as well just give out your passwords.

Bookmark

Time passed. People began realizing that XHTML wasn’t the save all and be all that it was supposed to be: some popular browsers (cough: IE) couldn’t even properly render its content type of application/xhtml+xml, so developers were stuck calling it XHTML and pretending that it was truly XHTML+XML, but they were really just dishing out HTML that was properly formatted.

This is not to say that the “XHTML rush” ™ was bad or that it didn’t advance technologies and the semantic nature of programming: it, with the help of CSS, helped to banish the hack and slash methods that were intrinsic in the 1990′s because people started realizing what each tag really meant and peer pressure abounded. In the end, however, all it did was make people aware of the rules that were already there, and in the process forced users to break other rules.

Finally the stigma of using semantically-correct HTML, inside the industry, is wearing off (although outside of it XHTML is still a buzz-word) and developers are realizing that XHTML wasn’t really the thing to use—instead it was just a good, clean language to use when it was needed, and some are slowly trickling back to serving just plain-ol’ HTML— albeit it this time with clean markup and remembering the lessons XHTML taught us.

Well it is on the verge of happening again: X/HTML 5.0 and XHTML 2.0 are both in development, and they both are trying to make their own mark on the browser space, but in the process they are just going to cause more trouble because the last time the (X)/HTML wars began XHTML 1.0 was, on the surface, HTML 4.0 with a few more rules. However, this time they are trying to go in separate directions, and the problem is that they both are doing some things correctly. (If you haven’t been keeping up with developments and want to read a comparison on what is and is not being done correctly read xhtml.com’s X/HTML 5 Versus XHTML 2)

While the competition will be good, in some ways, and the professionals will reason out the best language to use and why, the fame wars are going to start up again, so be ready for it and get out your favorite fan-boy insults because only one language is going to survive.

This rant was brought to you by the letter X and the number 3. Oh and in case you are wondering, this site is perfectly valid XHTML using the XHTML 1.1 DTD being served as text/html with .html extension.

Bookmark

Or specifically for the tags:

Bookmark

WordPress looks first for special files and then defaults to the index.php file (as shown in this diagram). We can take advantage of this by using only an index.php file and then using conditionals to modify it. While it seems that this method would render the code less readable, it is actually far more readable, and far easier to modify.

Your theme should start off a header.php, footer.php, sidebar.php and an index.php. These files are the “code” files and are fairly self-explanatory, and at this point the only question should be whether you add just the header portion of the file to the header.php or everything including the calls to get_sidebar()—the same goes for the footer.php depending on your theme. This depends on how you use your them, if you plan to integrate it with bbPress and use the same header and sidebars, you should add everything before the normal loop to the header. However, we will focus on things outside of the header (this includes the navigation menus and such) and just focus on the_loop.

A “normal” index page looks a little like this. (Taken from the default WordPress theme.)

1. <?php get_header(); ?>
3. <div id="content" class="narrowcolumn">
5. <?php if (have_posts()) : ?>
7. <?php while (have_posts()) : the_post(); ?>
9. <div class="post" id="post-<?php the_ID(); ?>">
10. <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
11. <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
13. <div class="entry">
14. <?php the_content('Read the rest of this entry »'); ?>
15. </div>
17. <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
18. </div>
20. <?php endwhile; ?>
22. <div class="navigation">
23. <div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div>
24. <div class="alignright"><?php previous_posts_link('Next Entries »') ?></div>
25. </div>
27. <?php else : ?>
29. <h2 class="center">Not Found</h2>
30. <p class="center">Sorry, but you are looking for something that isn't here.</p>
31. <?php include (TEMPLATEPATH . "/searchform.php"); ?>
33. <?php endif; ?>
35. </div>
37. <?php get_sidebar(); ?>
39. <?php get_footer(); ?>
40. Use the following to copy and paste the code.
    <?php get_header(); ?> <div id="content" class="narrowcolumn"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2> <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small> <div class="entry"> <?php the_content('Read the rest of this entry »'); ?> </div> <p class="postmetadata">Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p> </div> <?php endwhile; ?> <div class="navigation"> <div class="alignleft"><?php next_posts_link('« Previous Entries') ?></div> <div class="alignright"><?php previous_posts_link('Next Entries »') ?></div> </div> <?php else : ?> <h2 class="center">Not Found</h2> <p class="center">Sorry, but you are looking for something that isn't here.</p> <?php include (TEMPLATEPATH . "/searchform.php"); ?> <?php endif; ?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?>

For most themes, the page and single pages look the same: the only part that really changes is the_loop itself, and even then the changes are usually minor, so if you want to change something outside the_loop, you have to change it in all files. However, by operating the majority of display elements out of the main files, we can make it infinitely extensible without overloading the end-user with large amounts of code to sort through.

The index.php file for the theme I use is very short and easily read.

1. <?php get_header(); ?>
2. <div id="wrap">
4. <div id="content">
6. <?php if (have_posts()) : ?>
8. <?php
9. if(is_home()){
11. include (TEMPLATEPATH . '/index-loop.php');
13. }elseif(is_page() || is_single()){
15. include (TEMPLATEPATH . '/single-loop.php');
17. }else{
19. include (TEMPLATEPATH . '/archive-loop.php');
21. }
22. ?>
24. <?php else :?>
25. <h2 class="center">Not Found</h2>
26. <?php include (TEMPLATEPATH . '/not-found.php');?>
27. <?php endif; ?>
29. </div>
31. <?php get_sidebar(); ?>
33. </div>
35. <?php get_footer(); ?>
37. Use the following to copy and paste the code.
    <?php get_header(); ?> <div id="wrap"> <div id="content"> <?php if (have_posts()) : ?> <?php if(is_home()){ include (TEMPLATEPATH . '/index-loop.php'); }elseif(is_page() || is_single()){ include (TEMPLATEPATH . '/single-loop.php'); }else{ include (TEMPLATEPATH . '/archive-loop.php'); } ?> <?php else :?> <h2 class="center">Not Found</h2> <?php include (TEMPLATEPATH . '/not-found.php');?> <?php endif; ?> </div> <?php get_sidebar(); ?> </div> <?php get_footer(); ?>

If we break it down: it calls the header, adds the two structural divs, and checks to see if there are any posts (of any kind). If there are no posts it includes an error page before including the sidebar, closing the divs and calling the footer. This part of the page is fairly normal and is used in most themes—not only is it used in most themes, but most of the main files all have this same code–every single theme file calls the footer, sidebar and header, shows an error message if there are no posts to display. This is a lot of wasted space. If you suddenly want to change the name of something or move the sidebars, you have to change every file which is just pointless. The difference in my index.php file is that there isn’t a full loop. It checks if there are posts using have_posts(), but where you would normally see a loop it just has some conditional statements, and for each condition, a different loop is included.

Each of the loops is in a different included file. (The loops are shown below, but just notice the similarities and major differences.)

Index loop:

1. <?php while (have_posts()) : the_post(); ?>
2. <h2 id="post-<?php the_ID(); ?>" class="b">
3. <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?> </a>
4. </h2>
6. <div class="main main_border">
8. <small>
9. Posted on <?php /*backslashes escape chars*/ the_time('l \h\e jS \o\f F, Y \a g:i a ') ?> in <?php the_category(', ') ?> <?php edit_post_link('Edit','-');?>
10. </small>
12. <?php the_content('Continue reading "'.the_title('', '', false).'"')?>
14. <div class="small box">
15. //Some comment and UTW stuff
16. </div>
17. </div>
18. <?php endwhile; ?>
20. <div class="main" style="width:99%;">
21. <div class="main-nav-left" style="float:left;width:49%;"><?php posts_nav_link('','','« Previous Entries') ?></div>
22. <div class="main-nav-right" style="float:right;width:49%; text-align:right;"><?php posts_nav_link('','Next Entries »','') ?></div>
23. </div>
24. Use the following to copy and paste the code.
    <?php while (have_posts()) : the_post(); ?> <h2 id="post-<?php the_ID(); ?>" class="b"> <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?> </a> </h2> <div class="main main_border"> <small> Posted on <?php /*backslashes escape chars*/ the_time('l \h\e jS \o\f F, Y \a g:i a ') ?> in <?php the_category(', ') ?> <?php edit_post_link('Edit','-');?> </small> <?php the_content('Continue reading "'.the_title('', '', false).'"')?> <div class="small box"> //Some comment and UTW stuff </div> </div> <?php endwhile; ?> <div class="main" style="width:99%;"> <div class="main-nav-left" style="float:left;width:49%;"><?php posts_nav_link('','','« Previous Entries') ?></div> <div class="main-nav-right" style="float:right;width:49%; text-align:right;"><?php posts_nav_link('','Next Entries »','') ?></div> </div>

single-loop.php (handles both singles and pages because there is only a tiny difference between the two)

1. <?php while (have_posts()) : the_post(); ?>
3. <h2><?php the_title();?></h2>
6. <small>
7. <?php if(!is_page()){ /*Only difference between pages and singles*/?>
9. Posted on <?php /*backslashes escape chars*/ the_time('l \h\e jS \o\f F, Y \a g:i a ') ?> <!-- by <?php the_author() ?> -->in <?php the_category(', ') ?> <?php edit_post_link('Edit','-');?>
11. <?php }else{?>
13. <?php edit_post_link('Edit','-');?>
15. <?php } ?>
16. </small>
18. <div class="main">
20. <?php the_content('Read the rest of this entry »'); ?>
22. <?php wp_link_pages(); ?>
24. <div class="small box">
26. //some comment and UTW stuff
28. </div>
30. <?php posts_nav_link(' &#8212; ', __('« Previous Page'), __('Next Page »')); ?>
32. </div>
34. <?php endwhile; ?>
35. Use the following to copy and paste the code.
    <?php while (have_posts()) : the_post(); ?> <h2><?php the_title();?></h2> <small> <?php if(!is_page()){ /*Only difference between pages and singles*/?> Posted on <?php /*backslashes escape chars*/ the_time('l \h\e jS \o\f F, Y \a g:i a ') ?> <!-- by <?php the_author() ?> -->in <?php the_category(', ') ?> <?php edit_post_link('Edit','-');?> <?php }else{?> <?php edit_post_link('Edit','-');?> <?php } ?> </small> <div class="main"> <?php the_content('Read the rest of this entry »'); ?> <?php wp_link_pages(); ?> <div class="small box"> //some comment and UTW stuff </div> <?php posts_nav_link(' &#8212; ', __('« Previous Page'), __('Next Page »')); ?> </div> <?php endwhile; ?>

And the archive-loop.php which handles categories, date archives, tags, searches etc.

2. <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
4. <?php /* If this is a category archive */ if (is_category()) { ?>
6. <h2> Reading about <?php single_cat_title(); ?></h2>
8. <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
10. <h2>Archive for <?php the_time('F jS, Y'); ?></h2>
12. <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
14. <h2>Archive for <?php the_time('F, Y'); ?></h2>
16. <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
18. <h2>Archive for <?php the_time('Y'); ?></h2>
20. <?php /* If this is a search */ } elseif (is_search()) { ?>
22. <h2>The Search Results For "<?php echo $s;?>"</h2>
24. <?php /* If this is an author archive */ } elseif (is_author()) { ?>
26. <h2>Author Archive</h2>
28. <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
30. <h2>Archives</h2>
32. <?php } ?>
35. <div class="main" style="width:99%;">
36. <div class="main-nav-left" style="float:left;width:40%;"><?php previous_posts_link('« Previous Entries') ?></div>
37. <div class="main-nav-right" style="float:right;width:40%; text-align:right;"><?php next_posts_link('Next Entries »') ?></div>
38. </div>
41. <?php while (have_posts()) : the_post(); ?>
43. <h3 class="b"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link a <?php the_title(); ?>"><?php the_title(); ?></a></h3>
45. <div class="main main_border <?php echo anth::styles();?>">
47. <small>
48. <!-- Posted <?php the_time('j F Y') ?> by <?php the_author() ?> -->
49. <?php if(function_exists('UTW_ShowTagsForCurrentPost')){?>
50. <span class="utwtags">Keywords: <?php UTW_ShowTagsForCurrentPost("commalist") ?></span>
51. <?php } ?>
52. <?php edit_post_link('Edit','-');?>
53. </small>
55. <?php the_excerpt() ?>
57. </div>
59. <?php endwhile; ?>
61. <br/>
63. <div class="main" style="width:99%;">
64. <div class="main-nav-left" style="float:left;width:40%;"><?php previous_posts_link('« Previous Entries') ?></div>
65. <div class="main-nav-right" style="float:right;width:40%; text-align:right;"><?php next_posts_link('Next Entries »') ?></div>
66. </div>
67. Use the following to copy and paste the code.
    <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?> <?php /* If this is a category archive */ if (is_category()) { ?> <h2> Reading about <?php single_cat_title(); ?></h2> <?php /* If this is a daily archive */ } elseif (is_day()) { ?> <h2>Archive for <?php the_time('F jS, Y'); ?></h2> <?php /* If this is a monthly archive */ } elseif (is_month()) { ?> <h2>Archive for <?php the_time('F, Y'); ?></h2> <?php /* If this is a yearly archive */ } elseif (is_year()) { ?> <h2>Archive for <?php the_time('Y'); ?></h2> <?php /* If this is a search */ } elseif (is_search()) { ?> <h2>The Search Results For "<?php echo $s;?>"</h2> <?php /* If this is an author archive */ } elseif (is_author()) { ?> <h2>Author Archive</h2> <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?> <h2>Archives</h2> <?php } ?> <div class="main" style="width:99%;"> <div class="main-nav-left" style="float:left;width:40%;"><?php previous_posts_link('« Previous Entries') ?></div> <div class="main-nav-right" style="float:right;width:40%; text-align:right;"><?php next_posts_link('Next Entries »') ?></div> </div> <?php while (have_posts()) : the_post(); ?> <h3 class="b"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link a <?php the_title(); ?>"><?php the_title(); ?></a></h3> <div class="main main_border <?php echo anth::styles();?>"> <small> <!-- Posted <?php the_time('j F Y') ?> by <?php the_author() ?> --> <?php if(function_exists('UTW_ShowTagsForCurrentPost')){?> <span class="utwtags">Keywords: <?php UTW_ShowTagsForCurrentPost("commalist") ?></span> <?php } ?> <?php edit_post_link('Edit','-');?> </small> <?php the_excerpt() ?> </div> <?php endwhile; ?> <br/> <div class="main" style="width:99%;"> <div class="main-nav-left" style="float:left;width:40%;"><?php previous_posts_link('« Previous Entries') ?></div> <div class="main-nav-right" style="float:right;width:40%; text-align:right;"><?php next_posts_link('Next Entries »') ?></div> </div>

The actual loops in each of these files starts with <?php while (have_posts()) : the_post(); ?>, and you will notice that all the loops are similar with only a few cosmetic changes, the major difference is in the archive page which uses a large conditional block to set the title text, but this could have been done on the index.php page and used a completely different loop if you needed it.

Okay, so you get down to here and wonder why you haven’t heard anything new. well once we start using custom loops the possibilities are endless.

For example, as I posted about recently, on my index I use a special loop for items that are in the Asides category, but only on the index page, so inside of my is_home) conditional statement I also add the code:

1. <?php $in_cat = cat_loop();?>
2. <?php if($in_cat){?>
3. <?php include('cat_'.$in_cat.'.php');?>
4. <?php } ?>

Which calls the function: (added to the functions.php file)

1. function cat_loop(){
2. global $blog_id,$post, $wp_version;
3. if($wp_version >= 2.3){
4. global $object_term_cache;
5. $array = $object_term_cache[$blog_id][$post->ID]['category'];
6. }else{
7. global $category_cache;
8. $array = $category_cache[$blog_id][$post->ID];
9. }
10. while (list($cat) = each($array)) {
11. if(file_exists(dirname(__FILE__).'/cat_'.$cat.'.php')){
12. return $cat;
13. }
14. }
15. }
16. Use the following to copy and paste the code.
    function cat_loop(){ global $blog_id,$post, $wp_version; if($wp_version >= 2.3){ global $object_term_cache; $array = $object_term_cache[$blog_id][$post->ID]['category']; }else{ global $category_cache; $array = $category_cache[$blog_id][$post->ID]; } while (list($cat) = each($array)) { if(file_exists(dirname(__FILE__).'/cat_'.$cat.'.php')){ return $cat; } } }

Basically the function loops through all the categories a post is in and if there is a custom loop for a category it uses it. This can easily be extended for author ids, name or anything else that you can test.

Let’s review: use as little repeated code as possible because when you do lots of tricks are available to you.

Bookmark

Some things the remember: all lists are block level elements which means they can contain almost any other element and still retain validity.

Definition lists

Definition lists do not seem to be the appropriate element because a comment is not strictly a definition, however, if you take the W3C’s name for the dd element, (definition description) it appears that it could also be used for comment lists. Structurally, however, the definition list fits perfectly with the standard comment.

1. <dl>
2. <dt>John posted the following on 12/9/2007</dt>
3. <dd><p>Wow, what a great list example.</p></dd>
5. <dt>Aaron posted the following on 13/9/2007</dt>
6. <dd><p>Why thank you.</p></dd>
8. <dt>John posted the following on 12/9/2007</dt>
9. <dd><p>You are very welcome. The list is flawless.</p></dd>
10. </dl>

Wow, that is almost perfect. The commenter’s information is the term and the thoughts are described in the comment. it is almost too perfect, and here is where it breaks down.

1) Structurally, and semantically you can’t have the comment on top and the author’s information on the bottom. The following is just a pile of invalid tags. It has no semantic meaning, unless you are playing a game of jeopardy, and structurally it is invalid.

1. <dl>
2. <dd><p>Wow, what a great list example.</p></dd>
3. <dt>John posted the above on 12/9/2007</dt>
5. <dd><p>Why thank you.</p></dd>
6. <dt>Aaron posted the above on 13/9/2007</dt>
8. <dd><p>You are very welcome. The list is flawless.</p></dd>
9. <dt>John posted the above on 12/9/2007</dt>
10. </dl>

2) You can’t logically nest <dt>/<dd> combinations inside each other, so you can’t have threaded comments.

3) The use of <dt> tags to hold citation information is sketchy at best, although the <dd> tag is defined as a description, it is rather a stretch to ignore the definiton part of it.

4) Thee is nothing in the standards that require terms to be in a specific order.

So it isn’t possible to use <dl>’s and still retain both structural and semantic validity. However, we do know that comments are a list, so this just leaves unordered lists.

Ordered Lists

If your comments are “flat” (only one level of comments, no parent/children pairs) then the ordered list seems to make the most sense if you want numbers to be automatically generated. However, for sites that allow threading, like this one, the numbers must be hidden.

Now in a typical comment list we have:

1. <ol>
3. <li>
4. <div>John posted the following on 12/9/2007</div>
5. <div><p>Wow, what a great list example.</p></div>
6. </li>
8. <li>
9. <div>Aaron posted the following on 13/9/2007</div>
10. <div><p>Why thank you.</p></div>
11. </li>
13. <li>
14. <div>John posted the following on 12/9/2007</div>
15. <div><p>You are very welcome. The list is flawless.</p></div>
16. </li>
18. </ol>

The greatest strength of using the ordered list is it nests flawlessly:

1. <ol>
3. <li>
4. <div>John posted the following on 12/9/2007</div>
5. <div><p>Wow, what a great list example.</p></div>
7. <ol>
8. <li>
9. <div>Aaron posted the following on 13/9/2007</div>
10. <div><p>Why thank you.</p></div>
12. <ol>
13. <li>
14. <div>John posted the following on 12/9/2007</div
15. <div><p>You are very welcome. The list is flawless.</p></div>
16. </li>
17. </ol>
18. </li>
19. </ol>
20. </li>
21. </ol>

Although the markup by hand can appear to be a little convoluted, it is a perfect nested list and semantically it demonstrates inheritance and means exactly what we want it to mean. Now the problem with this, is that semantically the content of the <li>’s don’t have any meaning even though the relationship between the two items is defined by using an ordered list. To create a semantically valid ordered list we can replace the two divs with elements that are a little more semantic.

1. <ol>
3. <li>
4. <cite>John posted the following on 12/9/2007</cite>
5. <blockquote><p>Wow, what a great list example.</p></blockquote>
6. </li>
8. <li>
9. <cite>Aaron posted the following on 13/9/2007</cite>
10. <blockquote><p>Why thank you.</p></blockquote>
11. </li>
13. <li>
14. <cite>John posted the following on 12/9/2007</cite>
15. <blockquote><p>You are very welcome. The list is flawless.</p></blockquote>
16. </li>
18. </ol>

Now this version is better: The cite tag works because it is not only citing the person who said it but also when they said it, and no meaning is lost if you move the cite tag below the blockquote, but I think the blockquote may be inappropriate because while the person is saying it, we aren’t quoting them. However if in the example were quoted in the second, the blockquote would be appropriate (although we can ignore the fact that the <q> would have been more appropriate.)

Now because I hate to introduce presentational elements back into it, I think that if there needs to be an element wrapping the content of the comment, it should be a blockquote because yes technically it is a quote and if the page were to appear in a print edition it would be treated as a quote, but I don’t think it isn’t seen that way by most people.

However, we still need to format the content inside the li a little better. The previous example gets it almost correct, but the cite element really is being used incorrectly.

1. <ol>
3. <li>
4. <p><cite>John</cite> posted the following on 12/9/2007</p>
5. <p>Wow, what a great list example.</p>
6. </li>
8. <li>
9. <p><cite>Aaron</cite> posted the following on 13/9/2007</p>
10. <p>Why thank you.</p>
11. </li>
13. <li>
14. <p><cite>John</cite> posted the following on 13/9/2007</p>
15. <p>You are very welcome. The list is flawless.</p>
16. </li>
18. </ol>

Much better, theoretically we could be using a <span> tag instead of a <p> tag, but we would have to put the <span> inside of a &ltp> anyway, and with the addition to style information to the <p> tag containing the author information, the content will be both symantically and structurally valid. As a final note, although I ragged on using structural elements quite a lot, but they aren’t always bad. I do use them on this site to wrap single comments when needed (because comments are nested, so a style applied to one comment applies to all.)

So what did we learn here?

1. Ordered lists should always be used for comments (but dl lists may be valid for other types of dialog)
2. <div>’s and <span>’s should never be used to hold comment information because there are elements that are much better suited to it.
3. If you need a block level element to hold your comment text, use a <blockquote> it may require a little extra effort to style correctly, but it is always better to do things the right way.

Bookmark