Untitled. By Nick Hance

Nicholas Hance McElroy (aka Nick Hance) is a photographer living in the American West. You can find his works on Flickr, as well as on his site.

I adore his work because they have a very subtle vintage look to them. The landscapes are stunning, the portraits are beautiful and inanimate objects are breathing life through his photos.

Random

Related posts that might interest you:

• FBI wasted millions on ‘Virtual Case File’
• Stupid People With Stupid Surfing Habits
• Stubborn Little Brother

It took me awhile to acknowledge the fact, but I felt that it is terribly unfair for me to unload the entire financial burden onto my parent’s shoulder when studying in my university (NTU) during that period is just as good as going to Sweden instead.

Sweden is good, sans the whole Julian Assange rape smearing case which Sterling succinctly pointed out to me on Twitter earlier today. The weather there is nice. The people there are very hospitable, welcoming and eco-friendly. Their meatballs are awesome. If all these don’t cut it, at least I know that it is where my favourite furniture chain IKEA was conceived. Okay, but I still hated IKEA for using Verdana.

I just returned from a one-day trip to and from Singapore to attend this talk about the exchange program and how we should navigate ourselves around those miles and miles of crazy bureaucracy red tape. I’m not going to moan, whine, whimper, cry baby about this wasted trip – I did get lots of information about the lovely country from a senior who had just returned from the very country I’ve been yearning to travel, live and study in, and learning more about the exchange program isn’t exactly something half bad.

The gist of the problem lies with the money. I don’t live in a upper-middle class, or a high class family. We don’t rake in money by the five or more figures monthly. My dad works as a project manager cum architect in a small medium enterprise, while my mom spends most of her days cooping in the tuition class handling kids that are so wild I thought nobody could ever get hold of them. Well, at least my mom did.

The entire exchange program will set me back by around S$10,000 to S$12,000, which is a lot. Probably a few times of our household income. My brother still has one more year to see before he finishes college, and God knows what he’ll do after that. S$10,000 might not sound a lot to you (it converts to around US$7,350), but it does mean a lot to a small family like mine.

Because of my academic achievements, I’ve been studying in Singapore, a country 400km south of my hometown, for the past 8.5 (and counting) years, relying solely on scholarships. The first 6 years I was on a government scholarship since graduating from elementary school, and for the next 2.5 I’m on a university-sponsored scholarship that pays for the rest of my tuition fees.

For a very tiny instant moment I felt that all these should count in my advantage because I’ve been saving tons of money for my parents – instead of channeling that money into funding my education, they have stashed them in all forms of investments, bank accounts (probably not a good idea), fixed deposits and anything that has to do with money without actually spending them.

Immediately my conscience came riding on this moral high horse and giving me a mental lecture about how dare I conjunture such a thought – saving my parents that much money doesn’t mean I’m entitled to spend them right now, even if that S$10,000 is going to be just a fraction of it. Who do I think I am, for being so selfish, to think that I should make my parents pay for my exchange program that is so incredibly expensive?

An instant sense of shame overcame myself. I couldn’t possibly think what my parents have been through after I told them that I have set my eyes on Sweden for the exchange programs. Their jaws were left somewhat agape when I broke the news about the overall costs, and I hate myself even the more now for allowing such a lapse of judgement to take place.

So I make sure that I got it clear today – I told them that they shouldn’t care about what I would think. Even if I would feel disappointed and probably be all sad panda when I couldn’t go to Sweden, I know that the lump sum of money could be better spent elsewhere. I’ll give them the choice to choose – and I very well know that it doesn’t lie with me.

I’ll still be matching my courses for the exchange program, but that doesn’t meant that I’m getting my hopes high for parental approval. I’m not bitter about this, and in fact I feel a little embarrassed that I have been engaged in this endless soliloquy with myself throughout the entire day.

Wise up, Terry.

p/s: For once, I’m ecstatic about me being so honest with myself.

Related

Related posts that might interest you:

• On comes the panic light
• If ten million fireflies lit up the world as I fell asleep
• Some people wait a lifetime

The <label> tag can be used as is, but it has an extremely useful attribute – the for attribute. This attribute allows one to associate a form control with the element, when its value matches the ID of the form control. Here’s a sample of a usable, but not the best, form, without the use of the <label> tag:

<form id="form-1">
	<p>
		<span>Name</span>
		<input type="text" name="author" tabindex="1" />
	</p>
	<p>
		<span>Email</span>
		<input type="text" name="email" tabindex="2" />
	</p>
	<p>
		<span>URL</span>
		<input type="text" name="url" tabindex="3" />
	</p>
	<p>
		<span>Comment</span>
		<textarea name="comment" tabindex="4" />
	</p>
	<p>
		<input type="submit" name="submit" tabindex="5" value="Submit" />
	</p>
</form>

When we add the the for attribute to the <label> element and assign it a value that is identical to the id attribute of the form control, we will improve the usability of the form. For visually-impaired users, the speech browsers are able to draw a link between a form control and it’s label, which will provide important information and even instructions in filling up the form. For those using visual browsers are, in turn, able to focus on a specific form control when its associated label is clicked on.

Here is the improved form:

<form id="form-1">
	<p>
		<label for="author">Name</label>
		<input type="text" name="author" tabindex="1" id="author" />
	</p>
	<p>
		<label for="email">Email</label>
		<input type="text" name="email" tabindex="2" id="email" />
	</p>
	<p>
		<label for="url">URL</label>
		<input type="text" name="url" tabindex="3" id="url" />
	</p>
	<p>
		<label for="comment">Comment</label>
		<textarea name="comment" tabindex="4" id="comment" />
	</p>
	<p>
		<input type="submit" name="submit" tabindex="5" value="Submit" />
	</p>
</form>

What does jQuery have to do with this?

You must be puzzled – afterall, what you need to do so far is to manually inject the for and id attributes into the <label> and <input> elements respectively. In fact, I was actually doing these manual changes to my theme files and other web-based projects because it will only take me at most a few minutes’ worth of time.

However, I recently faced a problem that I felt using jQuery as a workaround wasn’t a bad idea afterall. Many people would advice against using JavaScript in cases like this for two reasons: some users, albeit a minority, don’t allow JavaScript to run on their browser; and on a related note, with the possibility that JavaScript being disabled in mind, we shouldn’t use it to implement essential features.

The problem was that I was working with some WP plugins that generates HTML forms dynamically and on the fly. Although some would dive into the realm of PHP and make the necessary changes such that the generated forms are more user-friendly, I would prefer using the jQuery way, which is easier and does not require muddling with the source code of the plugin files.

There are a few steps that we have to do:

1. Retrieve the value of the name attribute of the <input> element.
2. Assign a unique ID to the <input> element.
3. Assign the same value (the unique ID) to the for attribute of <label>.

For those copy-happy folks, here’s the code:

jQuery(function ($) {
 	$("#form-1 > p").each(function(count) {
		var input_id = $(this).children("input").attr("name") + (count + 1);
		$(this).children("input").attr("id", input_id);
		$(this).children("label").attr("for", input_id);
	});
});

Dissecting the code

$("#form-1 > p").each(function(count) {

This line searches the document for the paragraphy element, <p> that is a direct descendant of an element with an ID of #form-1. The .each() function makes sure that we look the subsequent function across all elements that satisfy the selection criteria. The count variable is declared and it will be used in each iteration.

var input_id = $(this).children("input").attr("name") + (count + 1);

This line defines the variable input_id, and assigns it the value of that is the that of the name attribute of the <input> element combined with a unique number. The number is increased by a value of 1 after each iteration of the loop so that we will generate unique IDs, even in face of an unprobably scenario that two input fields on the same page share the same value of the name attribute.

$(this).children("input").attr("id", input_id);
$(this).children("label").attr("for", input_id);

These two lines do the same thing – the finds the <input> and <label> elements in the same parent element, and assigns the generated value to the id of the former and for attribute of the latter.

Note

Note that this technique only works if each <label> and <input> pair is located in the same parent element, and each parent element has only one pair of label and input field in it. Of course, there is a solution for those forms that do not wrap each pair in a parent element, but I will not dwell into it.

Related

Related posts that might interest you:

• WP Widget: Load posts in a category
• 35 Stylish And Modern Wordpress Plugins Using jQuery UI
• WP theme: teddy-risation Theta

Gotham, a typeface used in the film, Inception

I have watched Inception last weekend and I have to say it’s a really mind-blowing film. People are saying that Chris Nolan invaded everyone’s dream and planted the idea that the film is great *laughs* but that’s not the main point.

What really caught my attention was the choice of typeface used. It is immediately obvious that they did not use Trajan for their movie posters, something I applaud. Trajan is an overused typeface – and here’s a non-exhaustive list of popular films in the past that have used Trajan in their posters (in fact, there are 153 and counting posters):

• The Final Destination (2009)
• One Missed Call (2008)
• Sex and the City (2008)
• Bridge to Terabithia (2007)
• I Am Legend (2007)
• Star Dust (2007)
• Final Destination 3 (2006)
• Requiem (2006)
• The Core (2003)
• A Beautiful Mind (2001)
• The Mummy Returns (2001)
• The Perfect Storm (2000)
• The Mummy (1999)
• City of Angels (1998)
• Deep Rising (1998)
• Titanic (1997)

Gotham Typeface

They chose Gotham instead. It is a geometric typeface designed by Tobias Frere-Jones and Jesse Ragan. Familiar typeface, isn’t it? That’s because Gotham has appeared in:

• Obama’s presidential campaign posters
• Movie posters of Moon (by the way I recommend you watch this film)
• Branding for Discovery Channel, USA Network, Astro and more.
• Chicago’s 2016 Summer Olympics bid.

Related

Related posts that might interest you:

• Fonty Friday: Edifice
• Leave Me, a short film
• Prewedding film “IMAGINE”

Tweet Archive (link)

Tweet Archive

In light of the recent instability of Twitter, especially over the one-month span of the World Cup, I have decided that backing up my tweets on a remote server will be a wise choice. Not only does the remote server helps to archive all the tweets that I have been posting since then, it also creates a searchable tweet archive. Don’t you find it frustrating that even you yourself can’t comb through your own tweets on Twitter web interface?

However, I was only able to retrieve down to the last 3,200 tweets (dating back to August 2009). The 3,200 cap was placed on Twitter API to prevent it from being overloaded with requests… which means I’ve lost around 5000+ of my older tweets, but it’s okay.

I got the idea after Jeff (@perishable) wrote about backing up his tweets during Twitter’s wobbly period. And he has got his tweets backed up already, too.

Jeff's tweet about archiving his tweets

What I did wasn’t exactly quite rocket science (maybe except for the regex part):

1. Upgrade my site to WP3.0, and activate the WP multisite feature. If you’re done with this step, everything will be a lot easier. Note: Please check with your host if they support wildcard DNS, i.e. *.domain.tld. If such a feature is not offered, it’s not all kaboom. Simply create a new WP installation in the subdomain’s root directory.
2. Install a new child blog pointing to http://tweets.teddy-o-ted.com
3. Download your Twitter archive – I recommend TweetBackup. Export the latest 3,200 tweets (or less) as an RSS feed and download it. Try to refrain from tweeting between downloading your Twitter archive and the completion of the set up – you wouldn’t want any tweets to fall through.
4. Import your Twitter archive to your WP installation. If your server is slow, the import script might exceed the 30-second execution time limit and you will encounter a timeout error. Don’t panic. Go to your WP installation and check the earliest tweet that was successfully imported. Return to your RSS file, and remove all entries prior to that, which should shave a sizeable chunk of bytes off the original RSS file. Reimport the file.
5. Install Alex King’s TwitterTools WP plugin. The plugin has quite a lot of function, but I configured it such that it only imports my tweets and post them. The plugin can also create a tweet from your WP post, but enabling this feature might cause a non-ending loop (although it is claimed that the plugin is designed to avoid such fireball of death, you should be smart enough to avoid it).
6. Get a theme. Doug has an excellent one, go get it. Alternatively, you can modify any WP themes you want. The theme I am using for my tweet archive is a modification of Sandbox, modeled after Doug’s theme as well.
7. Regex. If you’re quick, you’ll notice that all imported tweets lack outbound links for @replies and #hashtags. I wrote a short php function to do this. Insert the following lines into your theme’s functions.php file:

   // Makes URLs, @usernames and #hastags in tweets clickable
   function tweet_replies_url_filter($content) {
   	// Prevent premature texturizing
   	remove_filter('the_content', 'wptexturize');
    
   	// Replaces username with clickable link
   	$pattern_username = '/\@(\w+)/';
   	$replace_username = '@<a href="http://twitter.com/'.strtolower('\1').'">\1</a>';
   	$content = preg_replace($pattern_username,$replace_username,$content);
    
   	// Replaces hashtag with clickable link
   	$pattern_hashtag = '/\#([a-z][A-Z])(\w+)/';
   	$replace_hashtag = '#<a title="Search Twitter for \2" href="http://search.twitter.com/search?q=\2">\2</a>';
   	$content = preg_replace($pattern_hashtag,$replace_hashtag,$content);
    
   	/* Uses internal WP command make_clickable to replace URLs with clickable link */
   	$content = make_clickable($content);
   	add_filter('the_content', 'wptexturize');
   	return $content;
   }
   add_filter('the_content', 'tweet_replies_url_filter');

For more information, you can read it up here. Doug has done a great writeup on establishing your own Tweet Archive.

tdy.co (link)

tdy.co - A personal URL shortener

When the .co domain was opened to the general public on the 21st of July, I wasn’t very sure what domain name do I want. The first thing that actually went through my mind was to purchase tmun.co because tmun.com was already parked (and I have no idea why). When searching for available domain names on GoDaddy I decided to try my luck and started jamming the searchform with 3 letter acronyms of my site, my nickname or my other pseudonyms.

Try.co, taken. Tsd.co, taken. Ted.co, taken. Tdy.co, still available. What?!

I jumped. Immediately I billed $26 to my credit card and snagged the domain name before anyone else does. I had no idea what I wanted to do with it until I saw Dean’s tweet about converting his new domain, djr.co, into a personal URL shortener and I thought, hell, why not?

I downloaded a fork of Shaun Inman’s Lessn, developed by Alan Hoogan, called Lessnmore. Lessn is a great simple tool and is a lot lighter than Yourls, but it doesn’t support custom slugs unless I modify the database entry. I dug around and arrived at Lessnmore. It’s an extension of Lessn, and has a little more functionality with the same API hooks as Lessn.

tdy.co/1 points to this site :)

The tdy.co main page is a little plain. However, it is a significant example because it is my first HTML5 page. I’ve never really got into using HTML5 in my current projects because of my unfamiliarity with it, so I’m more than elated that it worked out just fine on tdy.co.

Related

Related posts that might interest you:

• Displaying your latest tweet on WP, sans plugins
• A Preview of HTML 5
• IE6, so this is goodbye!

Here’s a rough update of what happened in the past month:

This layout – teddy-risation Theta

teddy-risation Theta

I have less to love about the current layout, finally. I’m actually very excited because this WP theme has been up for the longest period of time – compared to the short-lived teddy-risation Epsilon who managed to provoke my ultimate wraith in less than three days online – but then it is getting very clumsy, heavy, bloated and complicated. This theme was developed before the days I knew more about hacking functions.php and I actually loaded multiple Javascript libraries (jQuery, Prototype and Scriptaculous) on the same page. Bad. Very bad.

Regardless of how flawed the current theme is, it actually found its way into Theme Hybrid’s showcase :D rate my theme if you feel like it, thanks!

teddy-risation turned six!

A week ago this site has finally turned six :) It’s another big milestone – since it’s fifth birthday, this site has turned into more like a place where I dump my design inspirations, coding tutorials and some photography works. There is less and less writing about my life, and I’m very much aware of it. Most of the personal stuff has been migrated to Tumblr.

Speaking of which, I have recently migrated my Tumblelog, too. It was a silly mistake that I made, to make my Tumblr as connected to my other online identities as this site was. It was a foolish decision, because I ended up having too many prying eyes and nosey folks stalking my Tumblr entries. A week ago I made the decision to replace my original Tumblr site with a dummy page, while its actual contents were clandestinely moved to a new location – and you’ll have to ask me if you have not been given access to the new Tumblr.

Upgraded to WP3.0 Multisite

Over the week I have also upgraded this WP installation to the latest version, which has integrated WPMU in it, too. After some tinkering with wp-config.php and the .htaccess files, I have managed to activate the multisite feature and now I’m actually running an additional WP site on the server.

I’ll keep you guys posted about what the new site is about. But basically it’s a WP blog that serves the sole purpose of backing up all my tweets ;)

If you need any help with implementing WP3.0′s multisite feature, feel free to contact me. I’ll help you as much as I could.

Personal

If you read my Tumblr you’ll probably knew what happened, but to others I could only say that something major happened around me life lately – I wouldn’t say that its unpleasant or something worth to be celebrated of. It’s neither of both. It is more like a process of discovery, learning, embracing and accepting.

My life was, for a moment, up in smokes for a few days a week ago, which explains pretty much what happened – not only I was not in the mood to celebrate this site’s 6th birthday, I also had to migrate my Tumblr because of me writing some really private stuff in there. Since then, things have pretty much stabilized and my life has returned to normal (hopefully so).

And to all those who sent my emails and left comments on my Tumblr, lending me support and dishing out really helpful advice, thank you. You know who you are ;)

I guess that’s all for this update! I’ll keep you guys posted, watch out this space.

Random

Related posts that might interest you:

• Happy Birthday, Patrick!
• It’s Ortus Carnival!
• Dining at IKEA

Most of the photos taken during this trip are done in the RAW format, and therefore most of them have been converted to pseudo-HDRs. There are only a handful of shots that remained unconverted. Sorry, once I have Photomatix I couldn’t stop myself!

My aunt, her boyfriend Josh, and I hiked Broga Hill in the early Friday morning a few weeks back. It was Vesak Day, a public holiday in Malaysia and we rose at 4.30 in the morning so that we could catch the sunrise shortly after we reach the peaks. I wouldn’t say that I’m an avid hiker, but I do love scaling hills a lot. Whenever I return to Malaysia, my aunt would bring me along to hike Gasing Hill, a popular hill among the suburban residents in my area. But then when her boyfriend came along she rarely asked me out already *laughs* I guess she has finally found someone to go with her.

We were taken aback by the sheer size of the crowd. Imagine hundreds of cars and people swarming around the oil palm plantation located at the foot of the hill at 5.30am in a remote town located far away from the city center. The sky was still dark and our surroundings were still pitch black. However, the chatters of the people and the beams of light from their torches slices through the darkness and silence of the morning.

This is so crazy, I said to myself. I looked at my aunt and Josh. Both of them were silent, mouth agape. I’m not too sure if they were amused, amazed or astonished by the amount of people.

Along the way up the hill, people constantly flowed around us. There were families who rested along the way to let their young and old to catch a breather; there were teenage couples who couldn’t stop hugging while making their way up; and then there were groups of noisy, rambunctious adolescents who just couldn’t stop talking all the way up, at the top of their voice.

Suddenly, the entire hiking trip felt like a massive early morning pilgrimage.

There were many samaritans along the way up. There were several sharp turns and steep inclines that were hard to navigate in the dark, even when we were armed with LED torchlights. These people stood close to these danger areas and shone their torches at us and at the walkway, guiding us through. Midway up the hill, a landslide greeted us. It ran parallel to the track but there were many instances when the cliff came too close to our footpath for comfort. Nylon strings were tied between trees for us to hold on to our dear lives.

The hike gave me hope. You could see people pulling each other up steep slopes. Mommies were spotted pushing their little sons and daughters up. The elderlies were offered walking sticks spontaneously fashion out of fallen branches. People offering words of encouragement to each other as they laboriously navigated through crazy turns.

After around an hour’s worth of hiking, we emerged through the secondary tropical forest and onto landing full of weeds. Further ahead you could see yet another steep climb up a hill. The interesting thing is that the hill is no longer covered by trees or any tall foliage. It’s covered with weed. A windy and steep path led hikers to the first peak of Broga Hill, and we could see torchlights flashing. I thought they were fireflies.

The climb from the clearing up to the first peak was the craziest ever. I reckon the inclination to be around 45 degrees, and at some points they could be as steep as 50. However, human traffic has carved steps out of the footpath, making hiking a lot easier than the way less traveled.

Finally, we reached the first peak at 6.30am. Although dawn is yet to break, I could see campers and a whole lot of people through the darkness. There was almost no standing space. My aunt, Josh and I found a secluded spot and decided not to move on to the other peaks because there were simply too many people. Like a swarm of angered bees, they went ferociously for the remaining peaks.

Light trails on Broga Hill

Enjoying the view

It took us awhile to find a less crowded spot on the barren peak. A few huge boulders were scattered around so we picked one that pricked our butts the least :) From left: my aunt and Josh. And then we started snapping away!

People. And more People

From the photo above you could see how crazeh the size of the crowd is. There was almost no standing space left, and if I was any shorter I would have drowned in a sea of sweaty backs and armpits. Everybody waited patiently for the sun to rise above the hills ahead, while new hikers kept walking past us to the remaining peaks.

Windy Path Ahead

A snaking path brings hikers to the next 3 peaks. The boulder we sat on offered a panoramic view of the path leading to the remaining peaks, and I just snapped away, in awe of the sheer size of the crowd.

Broga Hill, in infrared

The one and only infrared photo of the trip. I took a handful of infrared photos but I suspect it’s because of the low light conditions that made most of the photos unusable. This is the “Goldilocks photo” – it was not too dark, and yet the sun was yet to be seen (so there was barely any lens flare in the photo, which infrared photos are notoriously known to have).

Through the Grasses

As the sky continued to brighten, the crowd gets stronger by the minute. More and more people starting surging from the jungle and oil palm plantation below and heading straight at us. All we could do is to hold our fort and hopefully there won’t be any rude intrusion onto our little boulder.

Glowing

The weeds lay under the weak morning sky glow. The glow from the sky above seemed to bounce right off them :) pretty lovely. Taken with the trusty old KM f/1.7 lens.

Awww! I smell romance in the air.

My aunt and her boyfriend Josh. Love is in the air. And I adore his tattoos, although I’m yet to ask him what they meant to him.

Girl and Polaroid Camera

Shortly after I took this photo, the girl called me over and asked for me help to take a group photo with her friends using that very camera. Pretty cool! An alternative crop of this photo is available here ;)

In her own little world

A girl reads her book as her father (left) snaps away. I’m surprised how she managed to remain attentive throughout my entire stay on the peak because the crowd is extremely noisy – well, I couldn’t blame them for being disruptive because of the excitation from conquering Broga Hill and the prospect of seeing the sun rising before their eyes. An alternative crop of this photo is available here.

The Crowded First Peak

The first peak remained crowded throughout our stay. Everyone is looking at the direction where the sun is rising.

The Sun is Out! #1

The Sun is Out! #2

The sun is finally out, and everybody snapped away furiously. My aunt was shown in various awkward poses because her boyfriend was playing the role of the artistic director in his photos, heh.

Looking Over

I was looking over my aunt and her boyfriend, as I struggle to maintain my balance on yet another boulder. When this photo was taken I wished I had a fisheye lens with me because the horizon will definitely look damn good with it :)

Heaven & Earth

Another shot of the windy path leading to the other peaks. The wispy cloud caught my attention. My aunt joked that most of my photos will turn out to be photos filled with human heads. Well, she was definitely half right about that!

On our way down #1

On our way down #2

We savoured enough of the magnificent views and decided that we should make our way back to the foot of the hill before the crowd makes it impossible to pass. Afterall, it’s a narrow path that bridges the peaks and the street below – and what really separates us between the peak, the queue, and our car parked way below is a good tumble down the hills :P People were already queueing up to get down. Can you imagine the number of people up there?

Family of Four

A family of four admires the great view, oblivious to the crowd around them.

Wispy Clouds

Definitely one of my favourite photos in this pack. It looks like the man’s head is steaming :P Oh and it’s the same people as the previous photo. Just that I photographed them from a lower angle.

On our way down #3

We stopped at the steps along the path, carved out by human traffic, as we waited patiently for our turn to descend. Impatient queue-cutters were taking the easy but dangerous way down, which includes sliding down with their asses on a slippery, muddy slope.

Common sense, or the lack thereof?

People please, stop wearing slippers to climb a hill. That’s not good, and you’re placing everyone in front of you in danger. Dumbasses that are the shining example of the imbecility.

On our way down #4

Finally, the queue is moving. Goodbye, Broga Hill!

Random

Related posts that might interest you:

• Randomizing Images on Glider
• Crab Eating
• Sabbaticals #5 – Faint, Fainting, Fainted

Justin Tadlock, the creator and developer behind the Hybrid framework (of which the current WP theme is built on), has written a meticulous and beautiful tutorial on how to create a widget from scratch for WP2.8 and above. His tutorial is straight-forward and simple – more importantly, he provided a sample widget code that you can download at the end of the day and tinker with it on your own site.

There are two ways to introduce widgets into your WordPress installation:

1. Through a plugin file, which you place in your /[blog-root]/wp-content/plugins/ folder, or
2. Through your theme’s own functions.php file located in /[blog-root]/wp-content/themes/[theme-folder]/. If the file is not present, you can create it yourself but most probably the theme does not support widget and further tweaking of sidebar.php is needed (Jeff Starr explains it all in his tutorial).

I will not be covering how to write a widget in this article – I recommend you to read Justin’s tutorial if you need to understand any part of the code I’m posting below. Since I’m working on Theme Hybrid, which has a handful of widget-ready areas, I will no longer have to go through the process of making my child theme widget friendly.

The Widget – Loading Posts in a Category

I don’t have an official name for the widget – and I don’t have any intention to. There are too many plugins out there who offer a similar, or perhaps improved, functionality. What I’m presenting is a piece of code that you can simply put in your theme’s functions.php file without even needing to install a plugin or whatsoever.

Of course, if you want to hardcode it, it’s rather simple:

<?php $recent = new WP_Query("cat=[category_ID]&showposts=[integer]"); while($recent->have_posts()) : $recent->the_post();?>
<ul>
	<li><a href="<?php the_permalink() ?>" <?php the_title(); ?></a></li>
</ul>

Why do it the hard way?, you may ask. It’s simple – you don’t have to modify anything in your theme file in the future. Action and filter hooks have a special place in WordPress, which allows us to construct child themes from frameworks without needing to touch any of the core files at all – except for a single functions.php file in your child theme’s folder. When the framework is upgraded to a new version, one no longer needs to worry about porting the changes over to the new version, or go through the same mind-wrecking cycle of comparing new and old codes.

What the widget does is actually simple – to load posts from a specific category. You will enter the category ID and let the plugin do the crunching. Of course, more customization options are offered too. Just in case you’re curious, this is how the widget looks like in WP2.9:

WP Widget: Load posts in a category

The Code

Simply place the codes below sequentially into your theme’s functions.php file. After that, navigate to the widget page from your WP dashboard and you should see a new widget named “List Post in a Specific Category”. I think I heard a silent scream over the naming of the widget, but that’s the best the inner linguist in me can go. Go ahead and give it a new name if you feel like it.

Most of the code is modeled after Justin’s very helpful, heavily annotated example widget code. I have removed some of the comments (that’s why it’s better that you read his tutorial beforehand) for simplicity’s sake. The overall structure remains the same, except for the core functionality of the widget itself.

Add action hook

The first thing we need to do is to register the widget to a function, and then hook the function up with widgets_init.

// Load Custom Theme Widgets
function custom_widgets() {
	register_widget('posts_in_category');
}
add_action('widgets_init', 'custom_widgets');

Declaring a new widget

After adding the action hook, we will need to declare the new widget. We go through a few mandatory lines that describes the widget and assigns it a unique identifier. If you are intending to replace any of the variables, make sure to replicate the changes downstream as well – simply use the “Search and replace all” tool (or any equivalent) that will help you make global changes to the identifiers.

class posts_in_category extends WP_Widget {
 
	// Custom Theme Widget: Display posts from a specific category
	function posts_in_category() {
		$widget_ops = array( 'classname' => 'posts-in-category', 'description' => __('A widget that displays posts from a specific category', 'posts-in-category') );
		$control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'posts-in-category-widget' );
		$this->WP_Widget( 'posts-in-category-widget', __('List Posts in a Specific Category', 'posts-in-category'), $widget_ops, $control_ops );
	}

Determine what will the widget display on screen

Of course, when your widget is activated, you would want to present saved data (if input from the user is allowed) in the widgetized area. We will declare 5 different variables, namely:

1. $title – The title of the widget that will appear in the widgetized area, usually wrapped between header tags.
2. $category_id – The ID of the category where posts will be fetched from.
3. $post_count_limit – The maximum number of posts to be queried from the database and be displayed.
4. $post_orderby – How do you want to arrange the posts in the list? By author, title, date, modified and etc. You will be given the option to choose.
5. $post_offset – How many posts to skip/pass before displaying the first post.

For more information about the query_posts() function, you can refer to the WordPress codex.

To fetch the code, we will use the template tag get_posts() (how to use it?) to help to fetch posts from a specific category.

Don’t forget to wrap the displayed content between echo $before_widget; and echo $after_widget; – we do not define what wraps around the widget, because that is usually pre-determined by the theme in use already.

	// Displaying widget on screen
	function widget($args, $instance) {
		extract($args);
		$title = apply_filters('widget_title', $instance['title'] );
		$category_id = $instance['category_id'];
		$post_count_limit = $instance['post_count_limit'];
		$post_orderby = $instance['post_orderby'];
		$post_offset = $instance['post_offset'];
		echo $before_widget;
		if ($title) {
			echo $before_title . $title . $after_title;
		}
		$category_posts = get_posts('category=' . $category_id . '&numberposts=' . $post_count_limit . '&orderby=' . $post_orderby . '&offset= ' . $post_offset . '');
		if ($category_posts) {
			$category_posts_result .= '<ul>';
			foreach($category_posts as $post) {
				$category_posts_result .= '<li><a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a></li>';
			}
			$category_posts_result .= '</ul>';
		}
		else {
			$category_posts_result .= "No posts found in this category";
		}
		echo $category_posts_result;
		echo $after_widget;
	}

Updating widget settings

We cannot forget that we’re allowing users to input the category IDs and other parameters in the widget from the dashboard. However, in order to allow changes to be made to the variables, we will have to allow them to update the widget parameters.

The strip_tags() function is used to remove any tags – we only want texts to be entered, not tags. The reason why post_orderby doesn’t need to be passed through the strip_tags() function is simply because it obtains its values from a dropdown list, which does not contain any tags at the first place.

	// Update widget settings
	function update($new_instance, $old_instance) {
		$instance = $old_instance;
		$instance['title'] = strip_tags($new_instance['title']);
		$instance['category_id'] = strip_tags($new_instance['category_id']);
		$instance['post_count_limit'] = strip_tags($new_instance['post_count_limit']);
		$instance['post_offset'] = strip_tags($new_instance['post_offset']);
		$instance['post_orderby'] = $new_instance['post_orderby'];
		return $instance;
	}

User input interface

In order for a user to enter specific parameters, we have to set up a user interface. The following piece of code simply sets up the input fields for the user – a few text inputs and a dropdown list.

	// Widget setting controls
	function form($instance) {
		$defaults = array('title' => __('Category Name', 'posts-in-category'), 'category_id' => __('1', 'posts-in-category'), 'post_count_limit' => __('5', 'posts-in-category'), 'post_orderby' => 'date', 'post_offset' => __('0', 'posts-in-category'));
		$instance = wp_parse_args((array) $instance, $defaults); ?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'posts-in-category'); ?></label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('category_id'); ?>"><?php _e('Category ID:', 'posts-in-category'); ?></label>
			<input id="<?php echo $this->get_field_id('category_id'); ?>" name="<?php echo $this->get_field_name('category_id'); ?>" value="<?php echo $instance['category_id']; ?>" style="width: 100%;" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('post_count_limit'); ?>"><?php _e('Post Count Limit:', 'posts-in-category'); ?></label>
			<input id="<?php echo $this->get_field_id('post_count_limit'); ?>" name="<?php echo $this->get_field_name('post_count_limit'); ?>" value="<?php echo $instance['post_count_limit']; ?>" style="width: 100%;" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('post_offset'); ?>"><?php _e('Offset:', 'posts-in-category'); ?></label>
			<input id="<?php echo $this->get_field_id('post_offset'); ?>" name="<?php echo $this->get_field_name('post_offset'); ?>" value="<?php echo $instance['post_offset']; ?>" style="width: 100%;" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id('post_orderby'); ?>"><?php _e('Order Posts By:', 'posts-in-category'); ?></label>
			<select id="<?php echo $this->get_field_id('post_orderby'); ?>" name="<?php echo $this->get_field_name('post_orderby'); ?>" class="widefat" style="width:100%;">
				<option <?php if ( 'author' == $instance['format'] ) echo 'selected="selected"'; ?>>author</option>
				<option <?php if ( 'date' == $instance['format'] ) echo 'selected="selected"'; ?>>date</option>
				<option <?php if ( 'title' == $instance['format'] ) echo 'selected="selected"'; ?>>title</option>
				<option <?php if ( 'modified' == $instance['format'] ) echo 'selected="selected"'; ?>>modified</option>
				<option <?php if ( 'parent' == $instance['format'] ) echo 'selected="selected"'; ?>>parent</option>
				<option <?php if ( 'ID' == $instance['format'] ) echo 'selected="selected"'; ?>>ID</option>
				<option <?php if ( 'rand' == $instance['format'] ) echo 'selected="selected"'; ?>>rand</option>
			</select>
		</p>
 
	<?php
	}
}

The final code

I have also uploaded a copy of the entire piece of code. Simply download it, copy it in its entirety and paste in anywhere in your theme’s function.php file – okay, not really anywhere, but do stay within the <?php > tags that are found on the first and last line in the file.

Download: WP Widget - Posts in CategoryVersion 1.2 \ File size: 4.99 KB \ 116 downloadsA WordPress widget that allows you to load posts from a specific category with several other customizable parameters.

Last

If you have any problems regarding the widget, or any suggested improvements, feel free to reach me through the comments or the contact page. Thank you!

Related

Related posts that might interest you:

• Designing is Fun – a Wordpress Poster
• Displaying your latest tweet on WP, sans plugins
• WP theme: teddy-risation Theta

I’m barely into the second day at home and I’m missing Singapore a lot. I miss the freedom to leave my room anytime I want and roam the streets of Singapore, fearless. In Malaysia the situation is a little different, I will have to be more cautious when I’m out and will have to try avoid late night outs at all costs.

A few weeks back, I walked around my university in the evening. I was nearing the completion of my second academic year in my university and I simply could not believe that I’m already half way through now. Two more years down the road I will graduate, then toil and tumble in the real working world.

The HDR photos below are merged from photos of identical scenes taken at different exposure settings (with bracketed exposure option turned on). If you want to know how to create HDRs, read this tutorial.

School of Arts, Humanities and Social Sciences

School of Arts, Humanities and Social Sciences - Love the cuboidal structures.

The building that houses the school of humanities, arts and social sciences is the latest addition to the sprawling university campus. It has a minimalist touch to it, with a simple colour scheme of mainly black, white, grey and earthy tones. I haven’t got the chance to explore the building much, but when I visited my academic writing tutor in the building, the interiors were very simple too. Their carpet smells nice though.

The fountain plaza underneath the blue skies

This is the fountain that connects the north academic complex and the students services center. The latter is tucked behind the trees in the background so you can’t see it quite clearly. On clear warm days you would see the birds drinking from the fountain. How adorable :)

Outside the administration office

A wide avenue brings visitor to the academic complex and the Nanyang auditorium, as well as the carparks located in the north academic complex. When we have visitors from other institutions or nations visiting, their tour buses would line the avenue, adding more life and vibrancy to this quiet stretch of campus road. Except for main functions, this place is usually deserted of vehicular and human traffic.

If you’re interested to view more photos of NTU, you can browse the Photography category. I have also published two entires containing infrared photos taken on the campus too.

Have a great week ahead, folks!

Related

Related posts that might interest you:

• TGIF: Thank God It’s Friday!
• Bokeh portraits
• The Sentosa Outing

In this tutorial, I will not be covering the details of constructing a glider groundup because that has been covered in a previous tutorial, Compacting contents using Glider script. I will be covering more on how we will be loading in images using php.

There are many other gallery/glider scripts that use different javascript libraries out there – Glider.js relies on scriptaculous and prototype, which I know have fallen out of favour as jQuery becomes more widely adopted. However, the basic construction remains the same and the steps below will still remain relevant to those using

Setting up the Glider

The basic construct of a typical glider will be as follow, according to the Glider tutorial:

1. <div id="glider">
2. <div class="scroller">
3. <div class="content">
4. <div id="section1" class="section">...</div>
5. <div id="section2" class="section">...</div>
6. <div id="section3" class="section">...</div>
7. </div>
8. </div>
9. </div>
10. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

Instead of placing texts within each individual sections in the previous tutorial, we will be inserting images into the <div> elements instead:

1. <div id="glider">
2. <div class="scroller">
3. <div class="content">
4. <div id="section1" class="section">
5. <img src="..." alt="..." title="..." />
6. </div>
7. <div id="section2" class="section">
8. <img src="..." alt="..." title="..." />
9. </div>
10. <div id="section3" class="section">
11. <img src="..." alt="..." title="..." />
12. </div>
13. </div>
14. </div>
15. </div>
16. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

But then of course, we will be inserted images dynamically into the glider, and not by copy and pasting every single line. We will be using the for loop for this – keep this in view, we’ll come back to the for loop later.

Rotating the images

My strategy was very rudimentary and perhaps imperfect, so if you have any improvements, feel free to voice up in the comments section below. The strategy is simple – to ensure a wide variety of images, I cluster my images into different folders based on the theme. Let’s say we want to rotate photos of different types – architecture, food, street and people. I would love to display a random image from each type. What I do is to place the images in different folders located in a main folder called /gallery/ – let’s say 10 photos in a folder named /ach/ (so it’s location will be /gallery/ach/), and so on and so forth for the remaining categories.

Now we will need to make a request to the server as the page loads – asking it to serve us a random image from each category. This is achieved by using the lightweight 4kb image rotation script (view PHP source) written by Dan Benjamin for A List Apart. Place the file rotate.php into each folder, and when we load the PHP file as an image source, we will be served a random image by the php file, for example:

<img src="/ach/rotate.php" alt="Photo - Architecture" title="Photo - Architecture" />

However, we will also need to jumble up the sequence of which the category are loaded. Therefore, randomity of the images come in 2 forms – an image is randomly loaded from a category, and the order of the images are further randomized.

Jumbling up the order of images

What we need to do to jumble up the order of the image will be as follow:

1. Create an array with a strings
2. Shuffle the array so that each string will be called in random order
3. Execute a for loop so that we run the loop as many times as the size of the array
4. In the for loop, load rotate.php from each category folder

And the ideas above can be translated into php as seen below:

1. <?php
2. $gliderdata = array(
3. 'ach|Architecture',
4. 'fod|Food',
5. 'str|Street'
6. 'ppl|People',
7. );
8. shuffle($gliderdata);
9. for ($i = 0; $i < count($gliderdata); $i++)
10. {
11. $gliderimg = explode('|', $gliderdata[$i]);
12. echo '<div class="section" id="section'.($i+1).'"><img src="'.get_bloginfo(stylesheet_directory).'/gallery/'.$gliderimg[0].'/rotate.php" alt="Photo - '.$gliderimg[1].'" title="Photo - '.$gliderimg[1].'" /></div>';
13. }
14. ?>

In the for loop, what I did was to explode the string in $gliderdata with ‘|’ as the delimiter – for example, if we explode ach|Architecture, we will separate them into ach and Architecture – they will be referenced as $gliderimg[0] and $gliderimg[1] respectively.

After that, we will echo the individual sections of the glider which will house the image elements. The sections will be assigned a unique identifier, section'.($i+1).', will mean that for each iteration of the for loop, the identifier will reflect the number of iterations. The reason why $i+1 is used is because $i starts from zero but the section identifier has to start from “section1″ and more.

I have placed the /gallery/ folder into my WordPress theme folder, but of course you can use a static URL in its place. Instead of using '.get_bloginfo(stylesheet_directory).'/gallery/'.$gliderimg[0].'/rotate.php, we can use http://yoursite.com/gallery'.$gliderimg[0].'/rotate.php. Remember that $gliderimg[0] refers to the name of the folder while $gliderimg[1] refers to the description.

In short, the elements in the array should be formatted with this in mind: '[foldername]|[description]',. Whenever you add a new directory to the gallery folder, remember to add a new line to the array with the new subfolder name and a description if you feel like it. Each subfolder should contain photos and the rotate.php file.

Final code

We compile everything together into a decent glider with does not only jumble the sequence of images, but also loads a random image from a folder.

1. <div id="glider">
2. <div class="scroller">
3. <?php
4. $gliderdata = array(
5. 'ach|Architecture',
6. 'fod|Food',
7. 'str|Street'
8. 'ppl|People',
9. );
10. shuffle($gliderdata);
11. for ($i = 0; $i < count($gliderdata); $i++)
12. {
13. $gliderimg = explode('|', $gliderdata[$i]);
14. echo '<div class="section" id="section'.($i+1).'"><img src="'.get_bloginfo(stylesheet_directory).'/gallery/'.$gliderimg[0].'/rotate.php" alt="Photo - '.$gliderimg[1].'" title="Photo - '.$gliderimg[1].'" width="270" height="180" /></div>';
15. }
16. ?>
17. </div>
18. </div>
19. <script type="text/javascript" charset="utf-8">var my_glider = new Glider('glider', {duration:0.5});</script>

If you have any questions, feel free to contact me, or ask in the comments section.

Random

Related posts that might interest you:

• Ms Wun’s Nightmare
• Upgrading WordPress
• Me @ Suntec City