If..Else Log

Feeding the masses using WordPress

When I decided to segregate the (sporadic but more substantial) main posts from the frequently updated shorts on If..Else, I’d neglected to pay adequate attention to the feeds.

Whilst you could choose to subscribe only to the shorts via the category feed, there was no opportunity to receive only the main articles in your feed reader. The main feed was an intermingled mess of both the shorts and the regular entries, which dampened the effectiveness of the arrangement.

If you take a look at the subscription page now, you’ll see that things are altogether more useful. The seperate feeds should make things more manageable for subscribers.

Seperating the feeds

Out of the box, WP supports category feeds. Accessing these ‘inclusive category’ feeds is fairly straightforward; just append /feed/ to the end of the category page. However, what it doesn’t offer is an ‘exclusive category’ feed , that is a feed that syndicates all posts except those from a particular category (in my case, excluding posts from the shorts category).

However, implementing an exclusive category feed is fairly simple. To exclude a category, what you’ll need to do is open up your root index.php and add the line $cat=-n (where n is the category id). Make sure that you’re editing the file in your blog root and not your theme’s index.php and that you add it before the import of wp-blog-header.php i.e. http://example.com/index.php and not http://example.com/wp-content/themes/your-theme/index.php

What you should have is something like this:
code

Whilst this works, you’ll find that in it’s present state, it’s not quite ideal. We’ll need to do a little more work before this is usable.

Mixing the feeds

The problem with the above technique are that:
a) the entries for this category will be excluded from the main blog loop (which may or may not be what you want)
b) you may still want to offer a full feed with all the works intermingled together.

One way in which you can do that is by passing a parameter to specify the type of feed required. We can then handle that as is appropriate.

Firstly, what we’ll need to do is try to work out if the user is requesting a feed instead of a page. In WordPress, all the work goes through the index.php file in your blog root. When a feed is requested, a parameter called feed is passed as part of the URI.

After we verify that it is a feed being requested, we can then check what type of feed is being requested. In my case, I’ll be offering main, shorts and a full feed. Turning this into code gives us the following
code

Icing the feeds

Now we don’t want to link to the feeds with unfriendly query strings. What we should be doing is making non crufty URI’s for the feed. That means it’s mod rewrite time.

I’ve decided on the following format:

All posts http://ifelse.co.uk/feed/
Main entries only http://ifelse.co.uk/feed/main/
Just the shorts http://ifelse.co.uk/feed/shorts/

Now to do this, you’ll need to open up your .htaccess file and add the following (ideally above the line ‘# BEGIN WordPress’).
code

Presenting the feeds

Finally, I’ve decided to not link to the feeds directly. Instead, I’ve given them their very own page. The reason for doing so are two fold.

Firstly, not everyone knows what a RSS feed is. I’ve borrowed some of the ideas from D Keith Robinson’s page on the matter to give a short blurb on what it does and how you can use them.

Secondly, by grouping them up in a single page, I can provide a bit more information on the different feeds.

Finally, the feeds are still linked in the page header. This means that it’s still discoverable by feed readers and browsers.

Tasting the feeds

Finally, I’ve got a question/favour to ask of you guys. I gather that a few of you are subscribed to the feeds. Unfortunately, whilst I can measure the popularity of web visitors, I don’t have any way of measuring how many people or how popular the feeds are.

So my questions are:

  • Which of the offered feeds are you currently subscribed to?
  • Do you prefer segregated feeds?
  • Which type of entries do you prefer/read? The shorts or the mains? (Don’t worry, i don’t mind:-))
  • What feed readers do you use?

If you don’t want to comment, feel free to drop me an email.

Also, any other thoughts/suggestions on the matter?

Quashing procrastination (and uncovering a bug)

Safari and unclosed tags

Here’s a rather annoying little bug that I’ve just fixed. A few people kindly pointed out that the whole body text would be underlined when you hover over it in Safari.

Not the nicest thing to view and definitely not an intended effect. Without a mac at hand, I had to use a bit of deductive reasoning to track down the issue. However, the markup validated, the CSS had nothing suspicious and the only time underlines were used were for anchor elements. Firefox and IE had exhibited no such symptoms so it was not the easiest thing to hunt down.

And then my eyes opened

And it then occured to me that I had used a self closing tag for an anchor elements. There should be nothing wrong with this of course. XHTML allows the provision of self closing elements and I’d used this for a quick link to the top and bottom sections as thus:

<a name="top" />

But not Safari. Safari would treat it as unclosed and thus apply the hover rule to the whole block. Explicitly closing it as thus fixed things.

<a name="top" ></a>

Let me know if anyone still experiences any problems.

Update: It turns out that I’m an idiot and this anchor was unnecessary.

Waking up to deadlines

Khaled recently wrote about the value of deadlines in focusing your attention so as to get things done. In his case, the impending close date has brought with it a sharp, wake up call for him into a 2 day crunch session to get things ready.

Deadlines are not bad things. Used properly, They provide a goal to work towards, and provide a measure with which we can prioritise things. By placing a constraint on what we’ve got to work with, it gives an incentive to start deciding what is important, and what is not.

In the absence of…

But not all things in life have deadlines, or at least not fixed in the ground ones. Tidying up the house, working on a personal project, learning a foreign language, revision; being of a personal nature, there isn’t the long and definite deadline that would provide the same sort of focus.

I’ve been guilty of this in the past. Attempting to set a deadline for these types of tasks is often self defeating. The very lack of an immediate and external grounding for that deadline means that they are easily and often ignored.

The only way to really overcome such procrastination is to keep moving. Everyday I do a little bit more than the last. Sometimes it’s a lot more; sometimes it’s a trivial amount. It might be stacking up a pile of books, learning one new phrase or tidying up a colour choice. Doesn’t need to be a big step, as long as it is a step.

With every little step, we’re getting a little further along.

AdSense annoyances

When Adsense was first unveiled, it was a bit of a revolution. Unlike banner ads, they were unobtrusive. However, lately I’ve been seeing a worrying trend. Now that Google have changed their T&C to allow you to place up to 3 ad blocks, far too many sites have gone ahead and done so.

I try to help out from time to time on various forums, as a way of giving back to the community but I’m increasingly finding that quite a few blogs (which I’ll leave unnamed) that are just starting out are filling up their sites with ads. Here, there, everywhere until it gets to the point that I have to try hard to look beyond to see the content itself.

What is going wrong?

I’m not adverse to well implemented ads. However, I wonder if people know what they’re doing.

Having more than one adsense block per page will not increase your click through success rate

In fact, in my case, it’ll do exactly the opposite. If I see that a site is polluted with ads, I will make a point of *not* clicking any ads. Why?

If I can’t see the content beneath the ads, why should I care about site? I’m just going to move on. More importantly however, is that this sort of stuff annoys the crap out of me. Pissing off your potential readers is not a good long term strategy.

Having more than one adsense block per page will not increase the successful targetting of the ads

Now if one ad block isn’t providing the appropriate information, what makes you think that adding two more will do the job? If anything, it’ll have a negative effect. In one distinct ad section, I can see if there are any appropriate exits. Add multiple sections and I’ll mentally blank them out.

Having more than one AdSense block per page will not result in regular visitors

Before you start putting up adsense, have a thought to what you’re doing with your blog. Is this a personal venture or are you doing this for financial gain?

If it’s a personal venture, think on this. Would you be prepared to be distracted by marketeers when you’re having a night out? Would you be prepared to wear adverts on your clothes if it gave you a discount? And would you be prepared to have a few adverts in your phone call if it meant cheaper calls?

Many of us would like people to read what we write. Many of us enjoy writing. Don’t annoy your readers. Remember why you’re doing this.

What about you? Aren’t you using AdSense

If this post is still on the front page, then chances are that there are no adsense blocks at all on this page. And there will not be any adblocks at all on the front page. My aim is not to annoy any regular readers; this was never about any financial gain. This site is here because I enjoy web publishing.

So back to the adsense. What I’ve done is only display ads after they’ve been alive for at least 2 weeks (14 days). This will mean that regular visitors will not see any ads at all. Only people who arrive after the 2 week period will see the ads and as the usual manner that occurs is via search engines, the ads will hopefully be more appropriate (by providing alternative exits).

To do this, add the following piece of code in your index.php:

This retrieves the post timestamp and compares it to the current time minus 14 days. Only then will it display the ads.

Update: For shorts, the delay period is 1 day as they’re more transient, less content heavy and for which the ads are more relevent/useful for readers coming from Search Engines.

Does this work?

The code obviously works but what has it done for my earnings? To be fair, I don’t care at all. I’d be happy to take off the ads completely, especially if they were annoying. Anyways, I’ve had adsense on this site for about half a year now and I’ve made, well nothing. I haven’t hit the first pay cheque limit yet.

In six months I made 60 dollars worth of clicks. At 10 dollars a month, that doesn’t even pay for my internet connection. The only reason I’m carrying on is that I want to hit $100 so that Google will send me a cheque. After I get the cheque, it’s going straight on my wall. Yep, I’m not even going to bank it.

Update: I’ve finally got the cheque and yep, it hasn’t been banked:) I’ll need to remember to take a photo and post it to this blog as soon as I get back.

So after reading this section, you’ve probably come to the conclusion that I’m the last person to go to if you want to make it big with adsense. If however, you want some common sense advice about using ads without annoying your readership, I hope some of what I said made sense.

Changing Firefox’s autoscroll icon

Styling FF’s middle button click icon

Here’s something I stumbled onto accidentally. As many people may be aware, clicking the middle button activates the autoscroll functionality. This allows you to scroll the page by positioning your mouse pointer away from the auto scroll icon.

FF Autoscroll icon

Now, the way the autoscroll icon is implemented is that FF creates an img element linking to the autoscroll image. This is created as a descendent of the html element which is where I accidentally encountered it.

Therefore, with this knowledge at hand, you might try to style this element via css as follows:

code

But this doesn’t work!

Hmmm, you’ll probably find that there are a few problems.Firstly, the image is covered by the general FF icon and is being tiled. In addition, the border is not being displayed. Fortunately, the second issue provides a clue to addressing the first.

Due to the display order rules, the border is not showing up. To force the border to show up, what we can do is take advantage of the CSS2 !important rule and force this to take precedance.

code

Aha, we’re now getting somewhere. Now, you’ve probably realised that I snuck the border in there to illustrate a point and that we didn’t really want it there. What we do want, however, is for the width and height to be taken into account and for FF to only display our custom icon.

To do this we’ll need to apply the !important rule along with a little hack but first, let’s have at the custom icon that we’re going to use. I’ve stuck the dimensions on there as well.

Our autoscroll icon

What we’ll do is set the width of the image to 0. This will “hide” the FF icon. We’ll then set the height to match our custom icon and then add a padding to exactly match our custom icon.

What we should then be left with is something like the following:
code

And there you have it; our own custom autoscroll icons for FF.

Not safe for general consumption

Now a few words of warning:

  1. This is obviously a hack and should be treated with all the usual warnings accompanying such techniques
  2. It’s not particularly useful nor usable. It should be treated in the same manner as colouring scroll bars. The fact that I’m not employing this technique myself should be revealing. I’ve written this post to illustrate what can be done rather than suggesting that you should.
  3. It’s perhaps even less useful than coloured scroll bars as the mechanics of it’s usage will mean that it’ll be seen less often. That said, it’s less annoying than coloured scroll bars.

So after all that, what we have is a useless hack. Ahem. Let’s move on now, shall we?

And so the weather turns

Moving swiftly on, it’s good to see that english weather is back to it’s usual best. For those that went to Glastonbury (and two of my friends did), I hope you packed appropriately.

Wet day in Glastonbury

This change of weather puts me in two minds. I like many of the things that happen as a result of warm summer days: being able to play football till late, drinking cold beverages in the shade, summer attire. What I hate is the sticky weather, being stuck in traffic and on public transport, insects and last but not least, pollen. So should I be pleased or annoyed?

I guess what I am is a typical brit. Can’t stop talking about the weather and forever complaining about it.

Styling semantically marked up blockquotes

Here’s an interesting technique that you can use when it comes to blockquotes. Generally most people would style a blockquote as thus:

<blockquote >
<p>I've got a plan so cunning you could put a tail on it
and call it a weasel!</p>
</blockquote>

If we were to semantically mark that up, you may end up with the following:

<blockquote cite="http://en.wikiquote.org/wiki/Blackadder">
<p>I've got a plan so cunning you could put a tail on it
and call it a weasel!</p>
<cite>Blackadder</cite>
</blockquote>

Now that we have the pieces in place, how about using css to present this information? First, let’s apply some basic formatting first.

blockquote
{
  padding:8px;
  margin:0;
  background:#eee;
  border:1px solid #d3d3d6;
}

Nothing particularly interesting yet. However, what we can do next is take advantage of two infrequently used css features: the after and hover psuedo-elements and the content property. We can instruct the browser to display the referred source of the blockquote when the user hovers their mouse over the blockquote.

blockquote:hover:after {display:block; content:attr(cite); }

We’ll then add a final sprinking of formatting.

blockquote {
  text-align:right;
}
blockquote p
{
  text-align:left;
}

And voila! CSS styled semantically marked blockquotes. Hover over the blockquote and you’ll be able to see the associated cite meta-information.

I’ve got a plan so cunning you could put a tail on it and call it a weasel!
Blackadder

Thoughts/suggestions?

Query_posts redux

As I’ve mentioned before, the query_posts() function can be used to repopulate the values of the query_object. However, as the codex entry for this function is currently empty, I’d thought it may be helpful to list some of the arguments that you can pass to it.

I’ll start with the one that I mentioned in the earlier post, category_name. This allows you to retrieve entries in the category named. However, there’s also another parameter that you can use for the same task; cat.

There are two differences between cat and category_name. The most immediately obvious difference is that cat works on the category_id rather than the name. You may be thinking at this point, “what’s the point then? I might as well use the more readable category_name.” However, there is another trick that you can do with cat. When passing in the catgory_id, if you instead stick a – in the front, this will instead have the effect of excluding that category.

For example, if you make the following call:

This will exclude all the posts that belong only to category 1. There is a proviso however, and it’s a fairly big one. Note that I said “that belong only to category 1″. Due to (what I believe is) a flaw in how the query is constructed, if a post belongs to another category as well, it will still be picked up.

You can also restrict the posts by author. If you’re running a multi-author blog and want only posts from a single author showing up on the front page, you can use the parameters author_name or author. author_name operates on the user_nicename field, whilst author operates on the author id.

You can also retrieve a single post or page. Why would you want to? Simple. As a consequence of the template hierachy, home.php executes first. This means that you can write a home.php which calls query_post to retrieve a particular page and set that to be your front page. Without any plugins or hacks, you’ve got a mechanism to run, show and maintain a non-bloggy front page.

To do this, you would use the following parameters. If you want a post to be your front page, you can either use p or name. p is the post-id whilst name would be the post-slug e.g.the following two are equivalent

More useful perhaps would be to take advantage of WP’s new page functionality and use that for you front page. You could perhaps set your about page to be the entry point or maybe your sites colophon. You might even do something a bit more dynamic and set a custom page that shows a list of the latest comments, posts, categories and archives but I digress. To retrieve a particular page, you would use the following:

How about returning all the posts from a particular time period? Well, in that case you can use the parameters hour, minute, second, day, monthnum and year.
These all take a number that represent the appropriate unit of measure. The only one which necessitates a bit of explanation would be day which is asking for the day of the month.

The paged parameter can be used to return all the posts for that given page number e.g. if you’ve configured WP to display 10 posts and you call paged=2, you would get the posts that would normally be on the second page e.g. posts after the first 10.

And finally, we come to the orderby parameter. This, not surprisingly, allows you to change the ordering of posts. By default, WP returns posts in the usual blog pattern: reverse chronological ordering i.e. latest posts first.

This is the same as calling

However, what you can also is order by the author or title:

Actually, I’ll mention one more parameter: posts_per_page. This one will allow you to set the number of posts you want to retrieve for a given page which means that you make WP only show the latest post on the front page.

What’s more, if you want to retrieve every single page (perhaps for a custom archive page or a full article listing), you can set this to -1.

Anyways, that’s it for today. This post was primarily written for my own benefit but it will hopefully be useful to others. Feel free, of course, to add any suggestions or feedback via the comments form. If you’re looking for an example on how to use the function, it may be helpful to look at the first post I made on the subject.

query_posts

One of the interesting things of WP 1.5 is the ability to rerun The_loop again in the same template. The main way to do this is to execute a rewind_posts(); after the_loop. This will reset the post counter so that you can make another loop round.

The slightly more interesting way to use multiple loops is to make use of query_posts(). What this basically does is reinitialises the query object. The clever thing about this function is that you can pass it parameters to make it a totally different query. We can, for example, make the second loop fetch back only posts in the ‘shorts’ category.

The following snippet illustrates one of the ways we can do this. The general format of index.php is the following

What we can do after going round the loop once, is execute query_posts. We’ll pass in a parameter to get it to fetch only posts from the site category. This will rebuild the posts collection and *implicitly* resets the post counter.

Hence, the page will be:

If you want more information on the arguments which you can pass to query posts, see part 2: query_post_redux

Redesigns and experimentations

Barely a month since the last redesign and what do you know, I’ve changed things again. This time round however, you will probably have noticed that the changes are much more substantial than the last redesign. After being inspired by Root and the work he’s been doing on Aphrodite as well as the ever impressive resource that is Doug Bowman, I too decided to embark on a theme design which pushed WP a bit further than my previous theme.

One of the differentiating features is the layout or rather how it changes. A not so well known fact about WP 1.5 is that it is home.php, and not index.php that is loaded first by the theme manager. The way I’ve utilised this is to make WP display a 3 column layout for the front page. Internally however, WP will instead use a 2 column layout that has a wider content area for easier reading.

If you’re viewing this post on the front page, you can see what I’ve used the three columns for. The main column is naturally used for displaying the content. However, as may have noticed, I’ve set it up to display only the latest post. Earlier posts are instead collated in a list at the bottom. No options needed to be set in the WP admin panel; This is entirely theme driven. I’d intended to use this system for a photo blog but it’s just as useful here.

The far right column is used for the usual sidebar entries; Internal links, blog roll and a little summary. However, the middle column is more interesting. The description says that this is used for ‘interesting links in bite size portions’ and that’s pretty much what it is. Similar to Photomatt’s asides and Kottke’s remainders, I use this to gather up the latest tidbits that are interesting but for which, I haven’t written a major entry on. Behind the scenese, these are handled in a similar way to how Matt does it. The entries have all been designated as belonging to a category called shorts. Posts in this category are excluded from retrieval in The_loop. The only proviso is that due to the way WP has been written, items that are assigned to this category must only belong to this category. This is an oversight in the SQL driving The_Loop and I’ll probably write and submit a fix for this issue when I have a bit of time.

And finally, the colour scheme and design. As always, it’s the fine tuning process that takes the bulk of the effort. I’ve decided to move away from the previous colour scheme and went for a monochramatic look. Hopefully it looks fine on everyone else’s machine and everyone finds that the individual elements complement each other.

I’m not yet finished and will continue to tinker around with the design but I’m happy with how enjoyable the experience has been. I’m indebted to Matt and the rest of the WP team for writing what is a phenomenal publishing system. I hope that what I’ve done here will help to inspire others to experiment with their designs.

Update: I’ve also reenabled the live comment preview. Feel free to test it out:-)

Release of the Gentle Calm theme

Gentle Calm Logo

Announcing the release of the Gentle Calm theme.

Gentle Calm is a clean, relaxing theme based on a design originally intended for private use. It’s something of a rarity amongst WP themes in that it is liquid design using em’s for placement rather than a fixed width, pixel based design

To download the Gentle Calm theme, head on over to the Gentle Calm theme page.

The time of day and wp-admin

I’m currently using the time of day plugin to modify the post times to a more human friendly format. However, users may have also noticed that the timestamps in the wp-admin interface are also modified. This is because, the plugin works via the filter hooks provided WP which processes output before displaying it to the user. The particular filter hook that I’m using (the_time) filters the output of the_time() functions.

Whilst this is used in most people’s index.php file, it is also used in the wp-admin/edit.php file, and thus the dates here will also be filtered.

There is however a workaround: WP 1.5 provides another function get_the_time() which has two slightly different properties. Instead of displaying the time, this function now returns it. The second (and for us, the more crucial) property is that it isn’t processed by the_time filter. Hence what we can do is to make the wp-admin/edit.php use this call instead and we’d have the best of both worlds.

In your wp-admin/edit.php, change the following line:
the_time('Y-m-d \<\b\r \/\> g:i:s a');
to
echo get_the_time('Y-m-d \<\b\r \/\> g:i:s a');

If you don’t feel comfortable making the changes yourself and you’re using WP 1.5, you can download my amended edit.php file. Rename your current wp-admin/edit.php to wp-admin/edit.php.old, upload this modified version and rename it as edit.php.