Because (slight) interest has been expressed in the way I display replies to comments, and (slight) interest has been expressed in the method I used to set it up, I figured I should post the steps I took to make it how it is. All the code used here was made by other people; the only originality is the way I implemented the code. You don’t need to know much to implement it; you just need to know how to upload a file to your server.
Resources
I used a WordPress plugin called Get Custom Field Values by Scott Reilly from Coffee2Code.com and a few lines of Javascript code dubbed Nice Titles by Stuart Langridge from Kryogenix.org. You’ll also need to be able to upload files to your server and have a text editor such as Wordpad or Notepad.
1) Getting the files we’ll be using
Download the Get Custom Field Values plugin. Place it within wp-content/plugins in your WordPress folder and activate it from the Plugins page after logging into WordPress. If you also wish to use the Nice Titles code to display the entire link title and url on a transparent PNG file, download ntbg.png, nicetitle.js, and nicetitle.css. Place ntbg.png and nicetitle.js somewhere on your server (and remember the urls to access them) but don’t place nicetitle.css just yet. We’ll be modifying it later.
2) Creating a custom field
Towards the bottom of the Write page is a section called Custom Fields. Every post, you can create a custom field by typing the name of the field in the box Key, and the contents of the field in the box Value. From any other WordPress page, you can then retrieve those fields and much more, thanks to Get Custom Field Values. We’ll call the field for comments comments. I chose to embed my replies within the title of a link, the url of the link being the website of the person I’m responding to and the text holding the link being the person’s name. Use standard HTML inside the field, as you’d normally use on a post. Once you’ve added your comment, add the field. At any time you can edit the text in the box and either update or save the post, which will update the information being retrieved.
3) Retrieving the custom field
Scott has a more thorough explanation of how his plugin, Get Custom Field Values, works, but for simplicity’s sake we’ll just cover the implementation I used. Add the following code somewhere on your WordPress Index.php template:
<?php echo get_custom(‘comments’, ‘Mouseover to see replies: ‘, ”, ‘No replies.’, ‘, ‘); ?>
You can modify this code to whatever you want it to be. Edit the text within the apostrophes, but do not touch anything outside the apostrophes.
- ‘comments’ is what custom field is being retrieved.
- ‘Mouseover to see replies: ‘ is the text displayed before you start retrieving.
- ” is the text displayed after retrieving the field.
- ‘No replies.’ is the text displayed when there is nothing in the custom field.
- ‘, ‘ is the text displayed between each occurrence of the custom field. While I smush everything into a single custom field and place commas myself, you could very well create a custom field for each comment, and a comma and space would be placed between each.
You can place the code whereever you’d like on your Index.php file, or any WordPress file for that matter. I chose to place it right under the link to the comments on a particular entry:
<div class=”feedback”>
<?php wp_link_pages(); ?>
<?php comments_popup_link(__(‘Comments (0)’), __(‘Comments (1)’), __(‘Comments (%)’)); ?>
<br /><?php echo get_custom(‘comments’, ‘Mouseover to see replies: ‘, ”, ‘No replies.’, ‘, ‘); ?>
</div>
4) (Optional) Changing the way link titles are displayed
You should have downloaded three files in the first step and uploaded two of them. I implemented them after realizing that if I made a long reply, Firefox’s (and perhaps Internet Explorer’s) title display would only show a small portion of it. You’d have to look in the properties of the link to read the rest, and you’d have to read it on a single small, awkwardly scrollable line. Nice Titles removes that hassle, and it’s simple to implement.
Open nicetitle.css in any text editor, such as Wordpad or Notepad. Modify background: url(/images/ntbg.png); so that /images/ntbg.png is where you stored the PNG file. Note that /images/ntbg.png is the same url as http://www.alliterationabound.com/images/ntbg.png once it’s read by your browser. Upload it to your server.
Finally, add the following code to the top of your page:
<script type=”text/javascript” src=”/nicetitle.js”>
<link rel=”stylesheet” href=”/nicetitle.css”>
Again, modify the two urls so that they point to wherever you placed the files.
And you’re set! If you can improved (or have improved) this method, leave a comment or send me an email at SarcasticEccentric[a-t]Gmail[d-o-t]com. I’d be delighted to know about it. You may also wish to take a look at a plugin featuring Nested Comments a la Livejournal and Deadjournal. I haven’t tested it yet, but it looks promising, and easier to handle when there are lots of different people commenting on your posts. I still have a way to go before I reach that stage.
Hi Steven, Great effect. I followed the directions but it seems to fail at the last step: you mention putting the calls to nicetitle.css & .js in the head, but on my index page there IS no head; all of that info is on the header.php page (using the Kubrick theme). I tried but it still won’t work: I only get the text printed below each Post, but no nice rollover effect. Any thoughts? Thanks, Jess
I’m deeply sorry, but with the onset of WordPress’s theme system, I don’t even know how my own page is doing it. The system is flawed when holding a lengthy conversation or writing a lengthy reply, though, so I would suggest looking into the Nested Comments plugin I mentioned at the end of the post. I’ve had good results with it.
Again, sorry I couldn’t be of more help. I searched through the all the files where the nicetitles reference should have been…but to no avail. It decayed over time, I guess 😛 .
You can always try contacting Stuart of Kryogenix, the person who coded Nicetitles. I’m sure he can help you more than I can.