Comment Feature Back Again (Revised for WordPress 3.2)

When I first created this theme, I contemplated between having or not having the comment function implemented. In the end I went with a blog without the comment feature; Only the trackback function was enabled.

I initially thought the contact form was good enough as a means of communication, and that if no one knows how to use it, they don’t deserve to be using the internet. But I was told that to use the contact form for a simple comment would be overkilled. In addition to that someone asked for me to put up the comment section again. So I set out to think of ways to make my comment section different from the default layout yet fool-proof.

I thought for awhile and decided to make the comment page a separate page, meaning one whole page just for posting comments. The idea sounded easy, but it was actually more work then I expected it to be. For someone who had absolutely no prior knowledge to PHP, it was almost like making James Bond follow the law; Not impossible, just hard.

I searched online and came across a site that explained exactly what I wanted to do, but the instructions were pretty messy and static, so hopefully my version of instructions will be of use to anyone who wish to do the same.

In my version, you will be editing 5 files instead of the original posts’ 3 files, and with the link to the comments page left untouched. Files from your current theme folder will be:

  • single.php
  • functions.php
  • comments.php

The 2 other files will be from your /wp-includes directory. If you’ve just updated your WordPress script, these will be the only 2 files you need to edit. Click here to skip the themes section.

  • comment-template.php
  • link-template.php

Theme Folder

  1. First step is to go into your themes folder and open up the folder of your current theme.
  2. Open up single.php and wrap the following code around your single post syntaxes, within the loop
< ?php if (!isset($_GET['show'])) { ?>
	[single post codes here]
<?php } ?>
  1. Next, look for <?php comments_template(); ?> and replace it with the following code
<?php if (isset($_GET['show']) && $_GET['show'] == "comments") { ?>
	<?php comments_template(); ?>
<?php } ?>
  1. You can now go ahead and close your single.php file after saving your changes.
  2. Now open up your functions.php file and add the following function.
function curPageURL() {
	$pageURL = 'http';
	if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
		$pageURL .= "://";
		if ($_SERVER["SERVER_PORT"] != "80") {
			$pageURL .= $_SERVER["SERVER_NAME"].":" .$_SERVER["SERVER_PORT"] .$_SERVER["REQUEST_URI"];
		} else {
	$pageURL .= $_SERVER["SERVER_NAME"] .$_SERVER["REQUEST_URI"];
	}
	return $pageURL;
}
  1. Save your changes and open up your comments.php file and add the following code before the </form> tag, which is usually near the end of the file
<?php if (function_exists('curPageURL')) { ?>
	<input type="hidden" name="redirect_to" value="<?php echo curPageURL() ?>" />
<?php } ?>

You’re done editing your theme files. Next we’ll move on to the wp-includes directory.

/wp-includes

  1. Open up your comment-template.php file
  2. scroll to line 507. Replace #comment- with:
?show=comments#comment-
  1. Scroll to line 519. Replace #comments with:
?show=comments#respond
  1. Scroll to line 1001. Replace #respond with:
?show=comments#respond
  1. Scroll to line 1062. Replace # with:
?show=comments#
  1. Scroll to line 1113. Replace #$respond_id with:
?show=comments#$respond_id
  1. Scroll to line 1206. Replace #comment- with:
?show=comments#comment-

You’re now done with comment.template.php. Moving on…

  1. Now open up link-template.php
  2. Scroll to line 1767. Replace #comments with:
?show=comments
  1. Scroll to line 1881. Replace #comments with:
?show=comments

If everything went well and accordingly, the <?php comments_popup_link(); ?> function should now link to your comments page by appending ?show=comments#respond to your single post permalink rather than just #respond.

If any of you noticed, the trackback link that was previously under every post has been taken away. The reason for that is because I still have yet to figure out how to put trackbacks on a page by itself because posting it as a comment will be a mess and in addition to that, trackbacks have no avatars, therefore ruining my whole comment section design.

Optimizing Websites

This question has been on my mind for quite some time already: “What makes a website a good website?” Besides that, there are other related questions that I’ve been thinking about too lately; Questions like “Why is it loading so slow?” and “Is it possible to make it load faster?” I’m no expert in anything web related, but I would like to voice out what I think and I hope that my thoughts and suggestions will be helpful to current web designers/developers, as well as those who plan to start making their own websites.

What

For now, I would just like to focus on blogs. Factors that immediately came to mind are:

  • Pictures or cute girls
  • Pictures of hot girls
  • Pictures or wannabe cute girls
  • Pictures of wannabe hot girls
  • Pictures of food (with girls posing)
  • Pictures of uncommon places (with girls posing)
  • Pictures of uncommon objects (with girls posing)
  • Childish writings by cute girls
  • Childish writings by hot girls
  • Childish writings by wannabe cute girls
  • Childish writings by wannabe hot girls
  • Fancy website designs

On the contrary, these are the factors that usually repulse readers from one’s site:

  • Pictures or males
  • Childish writings by males
  • Boring website designs

So as you can see, 7 out of the 12 factors of success I’ve just mentioned consists of pictures with girls in them, and 11 out of 12 of them are related to girls, which is pretty safe to say that pictures and girls are the main source of attraction. I like blogs with pretty pictures of girls too! Abso-fucking-lutely no doubt about that! But althought blogs with pretty pictures are somewhat aesthetically pleasing, they can come at a cost, mainly the cost of losing your readers with crappy connections, especially impatient ones with crappy connections like myself. I can’t remember the number of times I quit my web browser just because a site is taking too long to load.

Why

But occasionally when I do wait until a blog completes loading, I normally find out the reason why it’s taking forever to load just by taking a quick glance at it. These blogs have a plethora of pictures in just a single post, and vary from 5 to 10 posts on the front page. In addition to that, some of them have other fancy features like Flash headers, oversized picture headers, Flash twitter widgets, JavaScript navigational bars, videos and Flash ads to name a few.

A quick benchmark of one of these bloated sites (I shall call it blog-X) show a shocking number of items being loaded:

  • 7 Cascading Style Sheets (CSS)
  • 212 Images
  • 16 JaveScripts
  • 2 application objects

How

Blog-X has a total of 7MB+ of data to be loaded, which is fine if you have a connection of 5Mbps or more. Which means people with shitty connections, mainly Malaysia, with connection speeds that don’t justify their advertised speed of <insert fake speed here>, will suffer, and not to mention delay times and queue times, which adds up to approximately 2-3 minutes of your life drifting away, slowly, waiting for Blog-X to finish loading.

Over the years, i’ve learnt that in web designing, the most important thing to remember is loading time. Try to reduce the number of items your site loads when someone visits it. I like to assume that everyone has a slow connection; It helps to eliminate unnecessary items being loaded, mainly flash and JavaScript objects. Other ways that i’ve learnt are:

  1. Compress Cascading Style Sheets (CSS)
  2. Compress JavaScripts
  3. Optimize images

Referring back to blog-X, 7 style sheets!? Why not just put them all into 1 file? Wouldn’t it be easier to go through 1 file instead of 7 different files to find the CSS property you’re looking for?

And c’mon, 212 images?!? Do you really have to load that many? Change the number of posts that show on your front page! If you know you’re going to write a shit load of trash and upload tons of unoptimized images, then reduced it to a post, or 2 at most. No one wants to wait forever for your site to load while it’s hogging every last drop of connection speed they have. It’s just downright depressing.

Not to forget, 16 JavaScripts, consisting of a few Twitter scripts, a few web counter scripts, and a few more random widget scripts. We don’t need to know how many people visited your site, keep the numbers to yourself. We also don’t need to know when you’re going to bed, when you woke up, what you’re eating or if you’re in the shower or not. These are the type of things that your readers can live without, if not less.

One good compression script for JavaScripts and CSS I found to be very effective and easy to use is Minify. I love how you can combine like files into a single link.

If you’re using WordPress, a possible way of reducing load times is to modify your theme’s single.php file so that it displays a single post per page, while retaining the number of posts shown in your archives per page. The way to do this is to first duplicate your single.php file and rename the duplicated one to home.php. In your index.php file, paste the following code under your get_header(); line.

< ?php $wp_query->is_single = true; ?>

So it should end up looking something like this:

< ?php get_header(); ?>
< ?php $wp_query->is_single = true; ?>

Next is to open up your home.php file and paste the following code under your get_header(); line too.

< ?php
      $i=0; // Initialize to Zero;
      if (have_posts()) :
        while (have_posts()) : the_post();
            if ($i==0) {$recentpostid = $post->ID; $i=$i+1;}
        endwhile;
      endif;
      //get only the latest post
      $posts = query_posts( 'p='.$recentpostid."'");
?>

You’re done. Right now your main page should show 1 post per page in the format of single.php.

If you’re wondering why I didn’t just change the reading settings in the admin panel, it’s because if I did, the main page will indeed show 1 post per page, but if I click into my archives, it’ll also show only 1 post per page, which is really annoying if I’m trying to go through my old posts.

When it comes to uploading pictures, I like to first optimize it with Smush.itTM and post thumbnails instead of the full size, which saves on loading time and lets readers have the choice of choosing which picture they prefer to view in full size.

CSS has become so powerful now that it is capable of replacing images. If you’re using Safari 4 or Google Chrome, you should be seeing a blue gradient in my header. It’s done using CSS, not images. Same goes for the calendar on the left of this post. As mentioned in my first post, the only image I’m using for this theme is the “leafy” divider at the end of this post.

Therefore

This article my not be entirely true, but it is based on what I’ve noticed and learnt. Besides methods mentioned above, I’m sure there are other better ones available out there. If anyone would be kind enough to share, please feel free to contact me using the contact form.