What is it, and why?

Conversation Viewer is a WordPress 1.2 2.5 plugin that pulls a external text file into a post and formats it into a defined list, keeping you from having to manually code the conversation into a defined list, ordered list, or Heaven forbid, a ghastly table. I wanted to be able to easily and quickly include conversations into posts, while still keeping the code nice and clean. I tried this manually once with a table, and while the result looked good, the code was rather sloppy and very cumbersome to compose.

How it works

Basically, you tell the plugin the path to your conversation text files, and to insert a conversation, you simply call the text file(s) containing the conversation(s), and it (they) will appear in the post. You can call as many different conversations in one post as you want, just name them uniquely. The nitty gritty of how the plugin works is commented in the plugin code.

Usage

You need three things to get this up and running: the plugin, a text file of a conversation (with proper syntax), and some CSS for styling. Get the plugin here. Change $default_conv_path to the absolute path of the directory you plan on storing your text files of conversations (mine is something like http://www.super-cooper.com/conversations/), then slap it into your plugins folder and activate it. Next, construct your conversation file, which should look something like this:

1. Me,Why did the chicken cross the road?
2. The Wife,Why?.
3. Me,To get to the other side.
4. The Wife,You're crazy.
5. Download this code: conversation-viewer-example-1.txt

Now let’s break this down. This is a conversation between the Wife and I where I am showing off my joke-telling prowess, and she is obviously very impressed. There a basically two parts to the conversation: who’s talking and what they are saying, which are separated by a comma. The plugin looks for the occurence of the first comma, assumes everything to the left of it is the person, and everything to the right of it is what that person is saying. Call the text file in your post like so:

<conversation src="http://www.super-cooper.com/snippets/conversation-viewer-example-1.txt" />

I like to arrange mine in subdirectories by date, and if you have more than one to include in a post, just add the numbers on the end and call them accordingly. Note that this path is relative, you set the root of this path in $default_conv_path in the plugin earlier. The above text conversation, parsed through the browser, would look like so with the plugin and my CSS:

Me:

Why did the chicken cross the road?

The Wife:

Why?.

Me:

To get to the other side.

The Wife:

You’re crazy.

And the code that produced it would look like so:

1. <dl class="conversation">
2. <dt>Me:</dt>
3. <dd>Why did the chicken cross the road?</dd>
4. <dt>The Wife:</dt>
5. <dd>Why?.</dd>
6. <dt>Me:</dt>
7. <dd>To get to the other side.</dd>
8. <dt>The Wife:</dt>
9. <dd>You&#8217;re crazy.</dd>
10. </dl>

The definition term is the person’s name, and what they said is the definition.

Mixing it up

Let’s say you want to emphasize what someone is saying. I like to do this with italics. Well, to style what the person is saying in italics, simply add a pound sign (#) before the person’s name, like so:

1. The Son,I'm having a horndog for dinner.
2. #Me,Really?
3. The Son,U-huh.
4. Me,Don't you mean a corndog?
5. The Son,That's what I said, a corndog.

Which, when called through the plugin and parsed, would look like this:

The Son:

I’m having a horndog for dinner.

Me:

Really?

The Son:

U-huh.

Me:

Don’t you mean a corndog?

The Son:

That’s what I said, a corndog.

And the code that produced it would look like this:

1. <dl class="conversation">
2. <dt>The Son:</dt>
3. <dd>I&#8217;m having a horndog for dinner.</dd>
4. <dt>Me:</dt>
5. <dd class="emphasis">Really?</dd>
6. <dt>The Son:</dt>
7. <dd>U-huh.</dd>
8. <dt>Me:</dt>
9. <dd>Don&#8217;t you mean a corndog?</dd>
10. <dt>The Son:</dt>
11. <dd>That&#8217;s what I said, a corndog.</dd>
12. </dl>

Finally, here’s my CSS that I use for styling my conversations:

1. dl.conversation dt {
2. clear:left;
3. float:left;
4. text-align:right;
5. width:9em;
6. line-height:1.8em;
7. font-weight:bold;
8. }
9. dl.conversation dd {
10. margin:0 7px 0 10em;
11. padding:0;
12. vertical-align:top;
13. line-height:1.8em;
14. }
15. dl dd.emphasis {
16. font-style:italic;
17. }
18. Download this code: conversation-viewer-example-css.txt

Some other examples of this plugin in use can be found here and here.

Other stuff

This plugin was designed for WP 1.2 (yeah, I know I should migrate to 1.5, but I don’t have the time or desire to do so anytime soon), so I have no idea if it will work in 1.5. If it does or doesn’t, please let me know. EDIT: This works in 2.5 as of 2008-04-22. Also works on 2.7 as of 2009-01-02 Any feedback is appreciated, but remember, most of the code I just hacked up from Code Viewer.

Another thing is adding the last modified date to the pages. In the old version, I used some JavaScript I found somewhere to accomplish this. I looks like so:

1. <script language="JavaScript">
2. <!--
3. function getLongDateString()
4. {   //method defined on class Date.
5. //Returns a date string of the form: Day DD Month,YYYY
6. //(e.g. Sunday 27 September, 1998)
7. monthNames = new Array("January","February","March","April", "May","June","July","August","September", "October","November","December");
8. dayNames = new Array("Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday");
9. dayOfWeek = this.getDay();
10. day = dayNames[dayOfWeek];
11. dateOfMonth = this.getDate();
12. monthNo = this.getMonth();
13. month = monthNames[monthNo];
14. year = this.getYear();
15. if (year < 2000)
16. year = year + 1900;
17. dateStr = day+", "+month+" "+dateOfMonth+", "+year;
18. return dateStr;
19. }
20. //register the  method in the class Date
21. Date.prototype.getLongDateString=getLongDateString;
22. function DocDate()
23. { //return the document modification date (excl.time)
24. //as a string
25. DateTimeStr = document.lastModified;
26. secOffset = Date.parse(DateTimeStr);
27. if (secOffset == 0 || secOffset == null) //Opera3.2
28. dateStr = "Unknown";
29. else
30. {
31. aDate = new Date();
32. aDate.setTime(secOffset);
33. //use method defined above
34. datestr = aDate.getLongDateString();
35. }
36. return dateStr;
37. }
38. document.write("<center> Last Updated: ");
39. document.writeln(DocDate(),"</center>");
40. //
41. -->
42. </script>

Kinda ridiculously long, eh? Then today I ran across this sweet little piece o’ PHP code that I actually inserted into my footer include file that all of my pages will call. This inserts the last modified date of the template neatly onto my pages, and the date format is, of course, customizable:

1. <?php
2. putenv("TZ=America/Chicago");
3. echo "Page last modified on " . date( "F d, Y", getlastmod() );
4. ?>
5. Download this code: php-vs-asp-2.txt

So what does all of this mean, and why am I seemingly on a soapbox? Well, I’m very pleased so far with PHP (any surprises there?), what it can do, and the ease of getting it do those tasks. Oh yeah, and what is even better is that I am getting paid to do this. Ain’t life grand?

1. #nav {
2. font-family: "trebuchet ms", verdana, sans-serif;
3. font-size: 11px;
4. margin: 0px 0px 0px 0px;
5. padding: 0;
6. text-align: center;
7. }
8. #nav ul {
9. border: 0;
10. margin: 0;
11. padding: 0;
12. list-style-type: none;
13. text-align: center;
14. clear: left;
15. }
16.  
17. #nav ul li {
18. display: block;
19. float: left;
20. text-align: center;
21. text-transform: none;
22. padding: 0;
23. margin: 0;
24. }
25.  
26. #nav ul li a {
27. background: #DCDCDC;
28. width: 139px;
29. height: 2em;
30. border-left:1px solid #9F9A75;
31. border-bottom:1px solid #9F9A75;
32. border-right:none;
33. padding: 0;
34. margin: 0 0 10px 0;
35. color: #666666;
36. text-decoration: none;
37. display: block;
38. text-align: center;
39. font-weight: normal;
40. letter-spacing: 1px;
41. line-height: 2em;
42. voice-family: "\"}\"";
43. voice-family: inherit;
44. }
45.  
46. #nav ul li a:hover {
47. color: #9F9A75;
48. background: #EEEEEE;
49. }
50.  
51. #nav a:active {
52. background: #EEEEEE;
53. color: #000;
54. }
55.  
56. #nav ul li#one a {
57. border-left:none;
58. }
59.  
60. #nav ul li#five a {
61. width:140px;
62. }

to looking like this:

1. #nav {  font-family: "trebuchet ms", verdana, sans-serif;   font-size: 11px;    margin: 0px 0px 0px 0px;    padding: 0; text-align: center;}#nav ul {   border: 0;  margin: 0;  padding: 0; list-style-type: none;  text-align: center; clear: left;}#nav ul li {   display: block; float: left;    text-align: center; text-transform: none;   padding: 0; margin: 0;}#nav ul li a {   background: #DCDCDC;    width: 139px;   height: 2em;    border-left:1px solid #9F9A75;  border-bottom:1px solid #9F9A75;    border-right:none;  padding: 0; margin: 0 0 10px 0; color: #666666; text-decoration: none;  display: block; text-align: center; font-weight: normal;    letter-spacing: 1px;    line-height: 2em;   voice-family: "\"}\"";      voice-family: inherit;   }#nav ul li a:hover {  color: #9F9A75; background: #EEEEEE;}#nav a:active {    background: #EEEEEE;    color: #000;}#nav ul li#one a { border-left:none;}#nav ul li#five a {   width:140px;}

Yeah, that’s right, from 62 lines to 1. Does anyone know what the hell causes this? It’s like it removes the line breaks or something. Is it something I’m doing? Probably. I need to start using Dreamweaver to edit my CSS files I guess. Thank God for backups. I’m taking this as a sign to step away from wp-layout.css for a while.