After eight posts, I am ending the plugin killer series. It has been a nice run. Hopefully, I have given you an idea of how easy it is to customize WordPress yourself – without having to resort to third party plugins. Not that there is anything wrong with that. Its just that, its more satisfying when you do it yourself. The advantages and disadvantages of customizing a theme rather than installing a plugin is given in the introduction to the WordPress Plugin Killer Series.

The Posts

Avoid Duplicate Content – Use Canonical URL in WordPress

If you are on wordpress, the canonical tag can be integrated into your theme easily. There is a plugin to do the job for you – but you don’t need a plugin to do something as simple as this.

Show Popular Posts in WordPress – without a plugin

A list of the popular posts of the blog is a standard feature in many blogs. There are quite a few plugins that offer this feature. But it can also be implemented using a simple SQL query that counts the number of comments in a post.

Adding Social Bookmarking Button in WordPress – Without Plugins

Many blogs have links to add the current post to various social bookmarking site like Digg, Reddit, Delicious, etc. This blog don’t have it – but my LinDesk blog does. This effect is achieved using wordpress plugins. But when you take a look at the code, its just simple HTML.

Show Related Post in WordPress Without a Plugin

Related posts is a very popular feature. My default wordpress installation often includes a plugin that has this functionality. There are quite a few plugins that lets you have this feature. This can be implemented by listing other posts with the same category/tags as the current post.

Highlight Author’s Comments in WordPress without using a WordPress Plugin

Many blogs highlight the author’s comment in the comments section. You can use plugins to get this effect(For eg., the Highlight Author Comments Plugin) – but you don’t have to. You can get the get the same effect by adding a small bit of CSS code to your theme stylesheet.

A Tweet This Button for Each Post in WordPress – Without a Plugin

TweetThis is a WordPress Plugin that ‘adds a Twitter link to every post and page, so your readers can share your blog entries on their Twitter accounts with ease.’ And in the tradition of my WordPress Plugin Killer Series, this post will show you how to do it without a plugin.

Creating a Paypal Donate Widget in WordPress – Without a Plugin

Paypal donate plugins. This is extremely simple to implement – you don’t even have to edit the code to get this done. Just copy/paste the code provided by Paypal.

Create a Better 404 Page in WordPress – Without Plugins

Recently, one of my friends posted a list of plugins you can use to optimize your 404 page. In case you don’t know what a 404 page, its the page that shows up if the URL requested by the user don’t exist. He listed eight plugins to do this. And since I am working on the Plugin Killer series, it got me thinking – is it possible to do it without using any plugins?

Other People’s Posts

Many other people have written on this topic too. Here is a few posts I could find….

• Add Custom Status or Notes to a Post without a Plugin
• How to Display Any RSS Feed on WordPress Blog
• WordPress Maintenance Mode Without a Plugin
• How to: Show related posts without a plugin
• WordPress: Removing Nofollow Without A Plugin
• WordPress & jQuery Contact Form without a Plugin

If you know of any such articles, post a comment.

Many blogs highlight the author’s comment in the comments section. You can use many plugins to get this effect(For eg., the Highlight Author Comments Plugin) – but you don’t have to. You can get the get the same effect by adding a small bit of code to your theme.

The Changes

Just open up the style.css file in your active and add this at line at the end…

.bypostauthor { background-color:#aaa !important; }

Change the #aaa to the color you want as the author comment’s background. That’s it – you’re all done.

Note: This will only work on 2.7+ version of WordPress – if you are using an older version, please read the instructions in this post.

Keeping with tradition, this site will be baring all on 9th April 2009. If you haven’t heard about Naked day, this should be enlightening…

Where did my Design go?

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.

How to participate

Fill out the naked day signup form, then your website will be included in the official list within the next hour.

Then on April 9th, simply remove all CSS from your website, stripping it entirely of its design.

I have been doing this for a few years now…

• Preparations for Naked CSS Day
• Happy Naked CSS Day Everyone
• Naked Days are here again!
• Annual Naked (X)HTML Day

I know its kinda pointless – since I use a third party wordpress theme – but I still support the movement.

Yesterday, I published a new JavaScript Library – JSL. It borrows many ideas from the famous jQuery library.

Download

• Packed Version – 13 KB
• Source – 38 KB

Features

The Standard Stuff…

• CSS DOM Selectors
• Ajax Functions
• Event Handling is abstracted
• Ability to change style of an element.
• Extendable by Plugins
• Supports all Modern Browsers
• And more…

And then some…

• Function Chainability
• Entire Library is 13 KB(un-gzipped)
• Special handlers for Arrays, Numbers
• Extra Plugins for Unit Testing and Debugging
• Functional Programming Encouraged (map, reduce, filter, etc functions in JSL.array)

Missing Features

XPath Selectors

Does anyone use XPath to select elements in JavaScript? I use CSS selectors for this all the time.

innerHTML Alternatives

I like innerHTML – so I did not include the functions to create DOM elements.

Animations/UI Elements

You will not see any animation functions in this library. Also, no Drag and Drop, sliders, JS dialog boxes and the like. Of course, I may write a plugin for these elements – but right now, they are not supported.

JavaScript Monkey-patching

I don’t do any Prototype style addition to JavaScript standard objects. I hate that – and so should you.

Functions in the global namespace

Everything that I do is under the JSL namespace – except for two shortcut functions – jslib() and $(). So my library adds only three global variables to the namespace – JSL, jslib, and $.

The Kitchen Sink

JSL is a small library – if you want a library with everything, opt for Dojo or YUI.

Some Sample Code

Using Event Handler…

JSL.dom("a").click(function(e) { // Adds a click event handler to all links
	alert(this.href); //Shows the link URL
	JSL.event(e).stop(); //And stops the event from propagating any further
});

The $() Function…

$("div.content p.intro a").setStyle({
	"text-decoration":"underline",
	"color":"red"
});

And everything you expect to work with document.getElementById() works with $() as well…

$("element-id").innerHTML = "Hello World";
$("element-id").getElementsByTagName("a"); // Returns all the anchors under that element.

See More Sample Code

JSL Links

• Documentation
• Demos of JSL in Action
• Support Forum
• Code Repository

License

BSD, as always.

Web 2.0 – almost everyone have heard the term – but few are sure about its meaning. Unfortunately, it cannot be defined easily. People in different fields have their own unique definitions for the term. In this article, I will attempt to define the term at three different level – the Philosophy, the Technology and the Design.

Disclaimer: Before anyone reacts violently to the term Web 2.0, let me make myself very clear…
Web 2.0 is an ambiguous buzz word. It has been used and abused so many times that it does not have a consistent meaning – so people are free to interpret it as they see fit. And this is how I interpret it.

Philosophy

The design philosophy of a web site can make it a Web 2.0 site. This is perhaps the key difference between a Web 1.0 site and a Web 2.0 site…

Web 1.0 is a web site where there is a one way communication between the web master to the visitor. A Web 2.0 site is a site where the visitors can communicate with each other.

For example, compare the Encyclopedia Britannica to Wikipedia. In Encyclopedia Britannica, the web master creates the content and gives it to the visitor – the visitor has no way of talking back. But in Wikipedia, the visitor create the content for other visitors.

Technology

The keyword here is “Internet as a platform”. In Web 2.0, the net became the platform rather than just a data transfer mechanism. For a simple example, when you visit a site, the videos in it come from YouTube, the images from Flickr, the search is done using Google API and you can bookmark pages using the API from del.icio.us.

Some technologies that are described as Web 2.0…

• Ajax
• Valid Markup
• Microformats
• Tagging, Tag Clouds
• APIs
• Feeds
• Mashups

Some features that makes a technology Web 2.0…

Speed

For example, Ajax makes simple tasks much faster.

Ease of Use

A good example of this is Tagging. It is a much easier approach when compared to hierarchies.

Enabling Mashups

APIs, Feeds, etc. makes this possible.

Bringing Web Apps closer to the Desktop

Ajax, AIR, etc.

Design

This is perhaps the only area where the term Web 2.0 can be defined with a reasonable level of accuracy. A site with a Web 2.0 design is one that has at least some of these elements…

Simple Design

Lots of white space

Nice Icons

Violators/Badges/Star Flashes

Big Fonts

Gradients

Reflections

Shadows

And More…

Web 2.0 Design Style Guide

For More Information

• Web 2.0 Wikipedia
• Web 2.0
• What Is Web 2.0
• Not 2.0?
• Web 2.0 Design Style Guide

Before starting, I must say that CSS is not the most powerful solution for templating. Using a server side solution is much more recommended. But for my purposes, CSS was good enough.

(X)HTML Code

If you want to use CSS templating, your app must be semantically valid. In other words, there is no way you can theme a tag soup.

Make sure that the stylesheet used for templating appears at the last. This will make sure that all the rules in the above stylesheets can be overwritten easily. In Nexty, I have a base stylesheet, then the theme stylesheet and at the end the hacks stylesheet…

<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="images/themes/crystal/theme.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="css/style_ie.css" type="text/css" media="all" />
<![endif]-->

PHP Code

Very little PHP is involved to creating this system – I depend on it just to change the path of the CSS Stylesheet. The code used is…

<link href="images/themes/<?=$theme?>/theme.css" rel="stylesheet" type="text/css" />

The $theme variable will change if the user changes the theme.

Go to Nexty to see the icons

3 Types of Icons

I used 3 different classes for showing icons. They are..

icon

This class removes the text of the link and put the icon in its place. The icon is clickable.

You can see this technique used in the Projects page. See that ‘Edit’(Pencil) and ‘Delete’ icons? They use this class.

XHTML code

<a class="icon edit" href="edit.php?project=6">Rename<a>

CSS Code

.icon {
	font-size:0px; /*Hides the text*/
	padding:6px 8px;
}
.edit {
	background:url(edit.png) no-repeat left center;
}

with-icon

This class shows the icon left of the link text. Both the icon and the text are clickable.

The ‘Create new task’ link in the home page is an example of this.

XHTML code

<a class="with-icon tasks" href="tasks/new.php">Create New Task...</a>

CSS Code

.with-icon {
	padding-left:18px;
}
.tasks {
	background:url(tasks.png) no-repeat left center;
}

list-with-icon

This will insert the icon in every item for the given list.

The drop down menus – Sections, Projects and Contexts are created using this technique.

XHTML code

<ul class="menu-with-icon projects">
<li>...</li>
<li>...</li>
</ul>

CSS Code

.list-with-icon li,.list-with-icon dt {
	padding-left:18px;
}
.projects li {
	background:url(projects.png) no-repeat left center;
}

Icon Size

My icons were 16×16 pixels – if you are using icons with a different size, you will have to change the amount accordingly.