I just type 'F' an it presents Firefox.

Get Your Files Setup

There’s a few Javascript files you’ll need to setup before we can start editing our WordPress theme. Here are the files you’ll need to save and upload to your theme’s folder:

• Quicksilver.js — This processes the input and gives back a value based on matches with the search area (our posts).
• Livesearch jQuery Plugin by John. This is what makes everything work together, with the live input and the search area.
• And of course, you’ll need to go get jQuery.

Now set those files up in header.php like this:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/quicksilver.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/scripts/jquery.livesearch.js"></script>

Once that’s setup, it’s time to get going on the real stuff.

Archive.php vs. Archives.php

Before we continue, I’m just going to clear something up. There are always these two files in your theme’s directory, but what’s the difference? Basically, one is a page template and the other is the display for the archived posts, like dated archives and the like.

• Archive.php is the archive that shows posts based on date, author, category, etc… This is the file we will be editing!
• Archives.php is the page template, which in the end just links off to pages that use the former page to display.

If you go to the archives link at the top of this page in my navigation, it will take you to my Archives.php page. If you click a link on that page, it will take you to my QS Livesearch enabled Archive.php.

Modifying the Loop

What we’re going to do is basically put all the posts we have in a list so the JS we downloaded can do it’s magic. Find the loop in your archive.php file and we’re going to change it to the code below. I’ll explain it after.

<?php if (have_posts()) : ?>
<div class="post">
<form method="get">
<div class="livesearch">
<input type="text" value="" name="q" id="q" />
		</div>
</form>
<ul id="posts">
	<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
 
	<?php endwhile; ?>
	</ul>
</div>
 
<?php else : ?>
 
Oops, no posts!
 
<?php endif; ?>

This is going to display the form and text input that users can use to refine the posts on the page. It’s also going to take all the posts and put each one in an LI. The reason we only display the title is because the script searches through all the text in each LI. Besides that, it’s nothing fancy. Get the posts, display the posts to work with the JavaScript.

Potential Problems

The first thing I ran into with this was that if you have a low number of posts per page, you won’t get many items to search through. You can try writing different queries for each option, but in the end, there is a plugin that can fix this. It’s called Different Posts per Page.

A word of warning — you will need to sign up for their stupid newsletter to activate their plugin. It’s worth the trouble, though. Just block the letter if you don’t want it, because this is the easiest solution to the problem.

Next, it’s always possible that you might have uploaded your JS files into a different directory than the /scripts/ that I provided in the code. Make sure the files are included properly before asking any questions, because this is the number problem that users have when doing something involving JavaScript.

If you have any questions that don’t fall into those two common errors, then feel free to leave a comment and I’ll help you out. You can see the example as I mentioned above, right here an my site. For instance, go check out my Design category page.

Some people are naturally drawn to certain things. I’m obviously drawn to my computer chair, but I have an equal passion for sports. An odd combination, but I digress. I remember the first day I had the Internet, and just the awe it induced. Shortly after that I was instantly interested in creating my own website and learned bare bones HTML. It might have been a black page with giant white text saying “My First Website” but it was an accomplishment.

Sometime after that, and all HTML forgotten, I managed to get into graphic design. And by graphic design I mean making cool looking abstract wallpapers in Photoshop. I think sometime around 2002 I had a trial copy of Photoshop 7. I wasn’t exactly net savvy at this point, so it expired. The pinnacle of Photoshop tutorials at this time was Good Tutorials. I’d spend hours just finding cool effects and recreating them on my crappy little PC.

Eventually the whole Kazaa thing got to the harddrive and after reformatting I once again got my trial back. Of course I had no idea that you could just grab a serial key of the ‘net and have it forever, so it expired again. This is where the seed was planted. What I was doing wasn’t particularly creative, but it was fun an produced a myriad of effects I could be proud of at that time.

Fast forward a couple years, I had already designed my first website, but still had no idea to get it from Photoshop to Internet Explorer (oh, yeah). In fact, when I found out that Photoshop is what you used to design them in the first place was a revelation. Go figures that I would learn to code HTML right before the whole CSS uprising. The Slicing Guide taught me how to use sliced Photoshop images and use Dreamweaver to turn them into websites.

Sooner or later I took to finding a way to make things easier, more dynamic and bigger. I came to the conclusion that PHP was what I needed, and shortly found out after I needed MySQL to go with it. At this time I was on a free host with a “blog” that I maintained with static HTML pages. Imagine updating that! Coming into programming showed me a whole new community of tutorial sites.

This got me into paying for hosting and actually having a domain name. I’ll spare the details but I basically got really good at PHP by taking other people’s code and learning to modify it to my needs. Sooner or later I could just write it myself with MySQL to boot. During the development of this theme it was nice to get some MySQL queries in amongst the WordPress stuff just to know I could still do it.

The unfortunate bit of this is that these coding focused tutorial sites were rampant with immiture kids looking for new systems for their Habbo Hotel fansites. It wears on you if you’re serious about getting better and developing websites, and it did. I remember when the main site I learned pretty much everything from was sold for $1000 and I was amazed. It went in the tank from there, but not without starting my freelance “career”.

The Point

I’m going somewhere with this, trust me.

I had basically abandoned these sites because I was focused more on designing and getting myself established and my blog afloat. I did eventually go back for a while but that ended ugly. When you have temperamental kids running your sites, someone as honest as I am can get on your nerves. I went from a forum moderator to a disgruntled member because I spoke my mind. Live and learn - actually, don’t learn. I’m still going to be honest if you ask for my opinion.

The amazing thing about that whole scene is that it’s huge in the form of blogs. Gone are the forums, shoutboxes and poorly designed websites. The TUTS network (PSD, Vector, Net, Audio, etc…) has given me faith in the web’s educational programming.

I’m not about to start a copycat site like the many that have sprung up, but what these sites allow is for newcomers to learn properly. If you read any of the above, it’s obvious I didn’t learn properly, starting off with tables and Dreamweaver. I had no idea what a standard was or how to write CSS on my own. I had to figure all that out on my own by asking stupid questions, but now it’s all out there.

It still kills me how I can have a teacher try to teach like HTML 3 with no CSS at school, yet anyone nowadays can pick up a laptop and be a client side expert in a matter of days.

WordPress is more than just a blogging tool. It can be used as a Content Management System (CMS) for many different purposes. It has a built in system for most things you would have to code yourself, or pay for an expensive custom application. With a little creativity, you can use basic features to power almost anything you want.

Go check it out!

Not much to say besides the Red Sox got defiled 11-0. Awesome. On Flickr »

RSS Readers — Come check out the new design!

It’s been a couple months, eh? Oh well. One thing I’ve always said is after a long time without posting to try and avoid referencing it. So I won’t.

That being said, the reason I didn’t write anything since early April was due to a lack of ideas and the will to write them. A year ago I was posting twice a day and going strong, but after a while I guess I had a dip in the passion.

The New Design

I’ve always had troubles designing for myself in a way that represents my own style. It seems odd that I can put a personal touch on a design for someone else more than on my own site. I probably just over think it to the point where I doubt the design.

So, with this I get across a few things that I like to have in a design. It’s simple, linear and sits on somewhat of a grid. Also, there isn’t any blue. Hard to believe for me, but the last couple things I’ve designed have been devoid of blue. I’ve been trying to put a brown/orange/white scheme together for a while now, and finally it got developed far enough where I can actually use it.

I wouldn’t call this my best work, or even the best design I’ve made for this site (one in particular that will never get developed comes to mind- too much going on in there), but it suits my cause.

Overall Changes

I’m going to continue writing about web design, WordPress and all the other things I was focusing on before. I have a bunch of new WordPress stuff I worked into this theme that I’ll write up tutorials on, but I’ll touch on that later.

I didn’t post for ages because I didn’t have anything write about web design. Considering that’s not my only interest, I’m going to write about pretty well whatever I want now. I’m going to clean up the categories and try to keep them around 10.

This will make the whole site more personal in a way, but at the same time more interesting because the focus will constantly shift.

Another reason I couldn’t put fingers to keyboard early on in the ‘drought‘ had to do with my infatuation for numbers/statistics. Seeing everything going up like I was trying to make it is a good feeling, but website statistics are eternally unreliable. Something I should have learned years ago when I got my first hit on a free host, but inevitably did not.

A couple months of not checking stats (actually took a while for me to stop) and I built up a solid wall of apathy. Hopefully it holds.

Nifty Things

While developing this theme I created some extra features which will go totally unused, but it was a good learning experience for me to do it. Before I was doing my own WordPress themes I had coded my own blogs and tutorial sites, so I was fairly proficient with PHP.

Over a year and a half of exclusively developing on WordPress has dwindled that. But, I did get to use some of those old skills in creating these new features. “Features” is a little powerful, actually.

These all basically revolve around being logged in, so you’ll have to sign up for my blog to see these.

• Login Overlay. I made an overlay using a modified Lightbox script I found and some of my own code to make a login form overlay. I did this because I wanted to take out the inconvenience of logging into WordPress if you want to comment (and have an account).
• See all your comments on a page and where you posted them. This is a logged in only thing, though.

That’s actually it. Anti-climatic, eh? Seemed like more as I was coding them. But it was fun (yes, fun) for me to write my own MySQL queries again without using query_posts().

That was a bit wordy. I’ll work some of the new blockquotes and stuff in the future

Because I am happy with it, doesn’t mean it looks even close to perfect to me. There are many flaws that mostly involve consistency.

Realign, Refresh, Reuse and Recycle

I don’t know if the “Three Rs” were hammered into your head to help save the environment (or something like that) while your were young, but in essence the ideas were a pretty solid foundation to web design.

Once the design is done, in the sense that you are happy, I like the start thinking of different approaches right away. With this site it is hard, because not much really sees a canvas in Photoshop. Most is just created live, while everything is running.

• Familiarity. With designs that stay reasonably consistent in theme and colour, it keeps readers happy to see something similar, but different at the same time.
• Simplicity. I like to make things easier to get to and overall simpler every time I revise the design. This never has to mean less images or flashy elements, just improved usability. In fact, if you don’t improve on usability with a new version, that’s never very good, is it?
• Less boring. Having the same design for years at a time is alright if it has changed the web (for the better), but otherwise it’s best to keep readers awake with a little change every now and then.

Refresh Frequency

Depending on how often you post, the amount of traffic you get and how good your design is, there are numerous factors factoring into when you should change it up.

Every couple of months might be a little much for anyone, but every 6 months something new is always nice. I’m going to clean this design up next month, and though it hasn’t been long, this would be a sort of a beginning to a more regular schedule.

A Chance to Improve

A design can only get better, so there is no use in being timid about changing things. If you have a shot at it and you decide the attempt has failed, you can always revert quickly or try again. The key is not to waste your time with coding something you don’t fully believe in.

Not only on the screen can you improve, but also in the XHTML and CSS you use. Use the best structure, validate code and format it. All those things you were putting off till next time, it’s time to get those going.

Who knows? Maybe after a couple good refreshing realigns to your site it actually will be perfect.

Overall, there we a few new followers, but not much. I still liked the ideas. Plus, this way I can fill my lonely ad space. I’ve been thinking about scrapping it for a while, and this will give me an excuse to keep it for at least another month.

The Winners

To tickle my brain, I wrote a script to put out two random numbers between 1 and 83 (amount of followers) that were different. From there I just counted down on the page that lists all those people to find the two winners.

Coincidentally, one winner had just entered this morning, and the other had already been following my Twitter updates when this mini contest began. Because I know you’ve already skipped past this part, I’ll get right to it.

The winners are Alex (@epicalex) and Malin (@infektia).

Alex was actually the last entry, I believe. The Twitter page I used in conjuction with my random numbers (17 and 15, in case you were wondering) doesn’t order by date, though.

Claim Your Prize

Just email the advertisment (125 by 125) to me (hit the contact page for my email), preferably from the email you’ve commented with before. I’ll give you a week or so before I start proding you for one. If you want to pass the prize on for some reason, I can always draw another number.

Real content starts again this weekend, hopefully. It’s be a busy two days, that’s for sure.

How to Enter

Entering this contest is simple. If you follow me on Twitter, you are eligible to win. That simple!

If you don’t currently use Twitter, it is a great service that after a while can become very useful and fun. Give it a try if you’re mildly interested, and follow me to enter!

The Prize

Two (2) winners will be selected, for one 125*125 ad spot in my sidebar. Value is $50 for one month, and the ad will run for one month. Contest ends Friday April 4th, 5PM EST. Winners will be selected at random.

Fine Print

Can’t say there is any catch here. I’m not requesting anything from you except for following me on Twitter to enter. If you want to link to this post I’ll give you an extra entry, but it is not a recquirment.

Also, this is not an April Fool’s day joke. On that note I haven’t seen a good one yet. Maybe next year.

Cliché? Yep. However, will I do these things? Eventually, yes, I hope to implement all these ideas.

1. Improve Comments

This is a multifaceted feature of every blog that always has a ton of room for improvement. First, here’s what I’m already doing:

• Separate trackbacks and comments. I show comments first, then the form to reply, and if there are any trackbacks, they are shown below.
• Gravatars. Every comment has the respective avatar showing, if they’ve signed up for Gravatar.
• Highlight author comments and alternate colours. This is so my comments stand out and there’s an aesthetic order with the alternating colours.
• AJAX editing. I just added this today. Try it out and tell me how it goes, because I can’t test it as a regular user (or at least I’m too lazy).

I’ve spent quite a bit of time tweaking my CSS and comment.php file, but especially in this part of any site there is a vast space to improve reader experience and encourage mroe comments. Here are some things I’d like to implement:

• Threaded comments. By default, these are ugly. But if I could fully integrate them into my own stylings, then I’d love to have two levels of comments. Any more gets a little out of hand, especially at the width I have for content.
• Add more incentive. There are many plugins that allow to show the latest headline for their blog, add their link to your sidebar, etc… But I’m tired of adding plugins by now. I’d want to write something my self to cut down on my already heavy server load.
• Change styling. I like the structure I have my comments in right now, but I’m always thinking it would look much better with a few major tweaks. I could even inject some colour to get rid of the grey.

There are always more things you can do to improve this area, but I’ve found you are more successful when taking a few things at once.

2. Display More Information

The DOMtab JavaScript is nice, but it can be a pain to setup while maintaining a certain structure, like that of my sidebar. I found a jQuery plugin equivilent that offers more flexibility and options (plus it’s on jQuery, so that’s even more possibilties). It also allows for multiple instances on once page with ease.

I just think that there are some things in my sidebar that don’t need to be displayed at all times. Here’s a rough draft on what could go in (bolded would be default shown if tabbed):

1. About text. Sort of necessary at the top.
2. Sponsors/Search/Stats. Two things that need to be near the top but don’t get a lot of love. Combine them! Plus that neat little stats plugin at the bottom right now.
3. Top  Commentators/Categories/Blogroll. This way the commenters get their links front and center as usual. The tabs might even draw more users th their sites.
4. Twitter/Flickr/Other Stuff lik that. Twitter is updated the most, and I could grab another feed, like Digg or something if I thought it would work well.
5. Recent posts/Popular posts. Something I really need but am lacking.

One problem here is that there would be all those tabs, which may annoy some people. I think it would be a great opportunity for me to get more useful things into my sidebar without making it run longer than all my posts.

3. Write More

When I’m busy I tend to put certain things ahead of others. This site is something that can always fall to the bottom because it’s just me. I’ve always got client’s sites that need designing and coding, and even other writing ventures.

Considerring I don’t make a single cent from this site, posting a couple times a week is pretty good in my books. Once summer comes around I’ll probably be back to once a day, maybe more. The summer schedule allows for a lot more time for me to write, which explain the awesome quantity of posts from last summer.

This is the instant way to improve your site when all else seems to be going nowhere.

I wonder what would be a better usage of time then: numbers 1 and 2, or 3?

Those who add something, and those who do not.

How do you know?

You may think your comments provide an extra insight or a quick thought, but in reality it likely doesn’t. I read every comment I get, and a trend I’m starting to notice is a slight pickup in relatively worthless comments.

Don’t get me wrong, if a (real) person takes time away from something better they could be doing and spends it on my site, I’m more than grateful, but this is about you. How your comments can benefit you.

What will happen if I delete your comment?

Will anything change? If the answer is no (or you are unsure), then you have left a worthless comment. Not lacking of any value to the author, necessarily, but lacking of value to you and the other commenters.

Every time I get a comment I imagine the thread without that comment. Every time I read a comment on another blog I imagine the same thing.

Imaging you have a friend that during a conversation (of multiple people) chimes in with something everyone either ignores, or it’s just what someone else said. I know people that do this, and I know everyone else does too.

Don’t be that person.

Comment Marketing

I’m aware of people that only comment for links, traffic and stuff like that. It’s a good method of building a name in your niche. Unfortunately, these people are usually the culprits of such comments. You’ll also find that the more popular a post, the more of these comments you’ll get.

This is something I should probably do more of, but if I read a post there are a few things I think about before leaving a comment.

1. After reading the comments, there is something I can add. Contributing to the discussion is important. Spammy comments get deleted in the way of a real discussion.
2. I disagree. I disagree with a lot of things, but if I read something and passionately oppose it, I’ll leave a comment.

Otherwise, I just don’t feel I’d be doing their comment section justice. Because of this, my comments aren’t deletable (it’s a word- I looked it up ).

You want people to read your comment. Let that be a reflection on you and your brand every time you leave a comment. You are representing a brand that will make a first impression on whoever reads it.

In the end, do yourself justice, and give the writer the respect you believe they deserve. That will provide you with more traffic from comments than 10 times the amount of worthless spam.