Create a Dropdown List of Tags

One of the options on the default category widget is to display it as a dropdown. When a category is selected, user is immediately redirected to the category archive page.

This functionality is provided by the wp_dropdown_categories function. Surprisingly, this same function can be used to display a list of tags as well (which, design-wise, seems to be a better alternative than a tag cloud).

Here’s the code, modified from the example available on the Codex page:

<li id="categories">
	<h2><?php _e('Posts by Tags'); ?></h2>
	<form action="<?php bloginfo('url'); ?>/" method="get">
	<div>
<?php
$select = wp_dropdown_categories('taxonomy=post_tag&show_option_none=Select tag&show_count=1&orderby=name&echo=0');
$select = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $select);
echo $select;
?>
	<noscript><div><input type="submit" value="View" /></div></noscript>
	</div></form>
</li>

Above, note the taxonomy=post_tag parameter that tells the function to generate a list of tags. If you have your own taxonomy, you can use that too. Pretty nifty!

Getting the Feed URL of Current Taxonomy Archive Page

Had a project recently where I need to output the RSS feed url of the current taxonomy archive page. The function to use is get_term_feed_link ( $term_id, $taxonomy = 'category', $feed = '' ). Read more at WPSeek.

This function is yet to be documented in the Codex, but it is quite similar with get_category_feed_link() function, which is an identical function, but only works with categories.

Ideas for Less Theme Options: Sticky Posts for Homepage Slider

Forever WordPress theme Forever is a wedding WordPress theme available for WordPress.com (here’s the demo). On its homepage, it features a slider on top with big images and headline that links to a single post.

Now, there are many ways done by themes to add a post to a slider. One way is to create a specific slider custom post type. Another is to add something to the post’s custom field. Forever theme shows us an easier way to do it:

Featuring posts in a slider on your home page is easy. You just need sticky posts with Featured Images. Every sticky post you have (up to 10) that has a Featured Image (at least 887 pixels wide) attached will show up there. Easy!

Easy indeed! Sticky post and featured image are both built-in features of WordPress, so there’s a good chance that users are already familiar with it. There’s no need to create separate options, just a couple familiar steps on the Edit Post dashboard area and the user is done. I bet the ordering of the slider can be done simply by changing the post’s date too, so there’s no need to create another interface for it.

This is simple, familiar, and easy. Good idea.

Ideas for Less Theme Options: Adapt to User Settings

Reddle is a theme made by Automattic for WordPress.com users (no .org release yet, but there’s SVN). Here’s a demo you can check.

The theme allows for one-column and two-column layout. However, instead of having a select layout option in a theme options page, Reddle chooses the layout by adapting to the content of the user’s sidebar widget areas. If the widget areas are empty, then it shows a one-column layout. Otherwise, it shows the widget(s), hence a two-column layout.

That is a smart, logical idea that can be extended to more layout options. Want a three-column layout? Add the second sidebar to the available widget areas. If it is filled, automatically change to a three-column layout.

The idea here is to make use of WordPress’ built-in features and settings, whenever possible, instead of adding another theme option. I like that.

Should you use HTML5 and CSS3 to build your next theme?

Tale from the dinosaur era

Lotus 1-2-3 iconOnce upon a time, Lotus 1-2-3 was the world’s premiere spreadsheet application. It was the first killer application for IBM PC, and its ground-breaking functionality helped convince the corporate world that personal computing was the way to go.

Trying to maintain its lead, Lotus wanted to upgrade its product for the next 3.0 version with plenty of new features, including 3-D spreadsheet. They also wanted to conquer the market more by creating Symphony, an integrated software that would include word processing, spreadsheet, charts, similar to what the MS Office suite is today.

They worked really hard for 18 months trying to build both product while keeping up with the DOS memory limitation of 640 kilobytes and the up-to 16 MHz Intel 80286 processor (yes, this is a story from the ancient times). Their strategy, basically, was to build for the most used hardware at that time. Intel already started shipping 80386 processor, but it was deemed too expensive with too little market to pursue.

Try as they might, their strategy just didn’t work. The hardware limitation was too strong, so they wasted a lot of time and had to cut down features. To add insult to the injury, by the time their softwares were released, hardware prices were down thanks for Moore’s Law and everybody had 80386s with 2 or 4 MB of RAM! Lotus was optimizing for nothing, and their softwares were out-of-date.

From that time Excel started to take over the market, because Microsoft optimized it for the better hardware and were patient to wait until the prices catched up with their software requirement. 1-2-3 and Symphony never recovered from that blow and eventually got discontinued.

Moral of the story

HTML5 LogoHTML5 and CSS3 allow us to do amazing things. The only downsides of not using them are that browsers support is not yet perfect and we still have to cater to awfully inadequate, 10 years old browser.

Now, do you want to be 1-2-3, or do you want to be Excel?

You can spend hours working on old browser compatibility, or you can spend that same amount of time making amazing themes using HTML5 and CSS3. By the time you’re done, there’s a pretty good bet that modern browsers will be better, not worse. Mozilla now adopts a rapid release policy for Firefox so they can update it much faster with better HTML5 features. Google already did that first with Chrome.

Browser support might be imperfect, but they’re good enough most of the time. There are graceful degradation and progressive enhancements techniques that can be used.

Also, let’s just admit that HTML5 and CSS3 make web development fun while dealing with old browser bug sucks big time. They’re the standard of the near-future and there’s no other alternative to worry about. The choice is obvious as far as I’m concerned.

TL;DR

Yes.

Further Reading

Joel Spolsky’s Strategy Letter VI, where I first read the Lotus 1-2-3 story.

Add the Official Twitter Follow Button to your WordPress Site

Twitter just launches its own official Twitter Button, and you can create your own here. It’s really simple and there are a couple of options you can pick:

  • Username to follow
  • Light or dark background color (this affects the button’s color)
  • Show follower count
  • Language

The resulting HTML example:

<a href="http://twitter.com/hafizrahman" class="twitter-follow-button" data-show-count="false">Follow @hafizrahman</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

Not visible on the Twitter Button page is the alternative script, using IFRAME:

<iframe allowtransparency="true" frameborder="0" scrolling="no"
  src="http://platform.twitter.com/widgets/follow_button.html?screen_name=hafizrahman&show_count=false"
  style="width:300px; height:20px;"></iframe>

You can dig deeper by reading the complete Follow Button documentation. Especially worth reading are the parameters explanation and the FAQ section.

Once you get your script you can simply paste it to your desired theme template files. A good place is the end of a post in single.php, above the comments area.

You can also add this button to your RSS feed. The simplest way is to use Yoast’s RSS Footer plugin and paste the button script there. I’m using the iframe version and it works nicely.

The Better Way to Get Custom WP_Query Loop Working with Pagination and WP-PageNavi

If you’re coming from my old post, here’s a more updated (and easier!) way to get your custom query working.

The key thing is not to mess with $wp_query. If we want a custom query, then it’s better to create a new variable for it.

<?php
// My custom query for the homepage of wplover.com
$wplover_home = new WP_Query('cat=-7&paged=' . $paged);
 
while ($wplover_home->have_posts()) : $wplover_home->the_post(); ?>
 
<h2 class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
 
<!-- the rest of the post stuff here -->
 
<?php 
endwhile;
if(function_exists('wp_pagenavi')) { 
	wp_pagenavi( array(
		'query' =>$wplover_home   
	)); 
}
?>

And that should do it. The important things are:

  • The paged parameter
  • The loop start now uses our query variable: $wplover_home->have_posts() and $wplover_home->the_post() instead of just have_posts() and the_post()
  • Inside the loop, though, we don’t need to use the query variable. It’s the_permalink() and the_title(), not $wplover_home->the_permalink() and $wplover_home->the_title().
  • PageNavi now has a ‘query’ parameter, enter our query variable’s name so the plugin detects it correctly.

This is the actual code running here, so I can confirm that it works, tested with version 2.74 of WP-PageNavi.

Page 1 of 41234

Latest Links More →

The Week in WordPress: 2nd Week of November, 2012

Ghost, Rethinking WordPress. Also don’t miss the discussion over at Hacker News.

For The Aspiring Professional WordPress Developer is a collection of good advices for those wanting to be a WordPress pro.

Recently I had the task of cloning a WordPress site both to my local server and to another development server that I host. The Duplicator plugin has been a massive help for me, makes cloning really simple and fast. Highly recommended.

Classy Plugins

Eric Mann uses classes in his non object-oriented WordPress code. Here’s why.

Playing Nice with the “the_content” Filter

This great article could be useful if for some reason you have a need to filter the_content in your theme.

Google Goes After Links In WordPress Themes

New post from the Search Engine Roundtable: Someone “…received a response from Google to a reconsideration request that the only way his site will be reincluded in Google is if he removes all or most of the links in those WordPress themes.” The problem is that those links are in the form of sponsored links on footer (a practice I saw a lot in the past, not so much in the present).

I don’t think it will be easy, or even possible, to do what Google requested. If a theme contains an upgrade notification feature it might be possible to do, but even then the users might choose not to upgrade.

Secondly, if this is true, I wonder whether Google differentiates between credit links (“Designed by…”) and sponsored links. I would say they should, but then again I’m not a SEO guy.

Theme Options Gallery

New favorite blog: Theme Options Gallery by Konstantin Kovshenin, discussing “the best (and the worst) theme options screens around”. Loving the in-depth article and discussions already available there.

Dive into Responsive Prototyping with Foundation

Pretty safe to say that if it shows up on A List Apart, it’s going to be the de facto standard. Time to learn some Foundation.

Google HTML/CSS Style Guide

Couple of days ago we got Starbucks’ style guide, and now here’s another by Google. I think the interesting thing is the rule to “\[o\]mit the protocol from embedded resources“. So instead of typing <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>, they recommend to type <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script> instead (without the http part). Never heard of that before.

“I Woke Up but My Server Wasn’t There”

Robb Shecter’s WordPress site got popular overnight thanks to Reddit and went down immediately. The interesting aspect is that the site was new and it’s on a relatively high-powered server. The author then found that the theme he used in particular was doing too many (47!) server requests at a time, and the site ran along very well after switching back to Twenty Eleven.

I think it’s an important read for any theme developers out there.

Read the story here

Modern Web Development – Part I: The Webkit Inspector

A superbly detailed article, part one of a series about web development toolchain.

Crayon Syntax Highlighter plugin

I’ve always been on the hunt for that perfect syntax highlighter plugin. Currently I’m using WP-Syntax, which does its job very well. However I’ve just found this plugin called Crayon Syntax Highlighter, which could be a good contender for the best WordPress syntax highlighter plugin out there.

It looks good, and I like the little toolbar on top of the code box, with the small icons. Additionally, it also offers a lot of customization options. Lastly, it seems to support the same pre tags to wrap the code, similar WP-Syntax, so if I do make the switch, my old codes will still be highlighted correctly.

Starbucks Style Guide

The Starbuck website has its own style guide, accessible for public. I think its a neat idea, wouldn’t it be cool if themes have their own style guide? Pretty sure it will be helpful both to users or developers alike, if time consuming to write.

Also, I wonder what they use for the various toggles panel on the top right corner like on this page. It shows background, baseline, boxes, can be used to change windows size as well. Looks like it’s custom coded, imagine how super useful it can be if it’s a jQuery plugin.

NHP Theme Options Framework

I love theme options frameworks. And I want you guys to check this new framework called NHP. It passes my “does its UI look like the rest of WordPress enough?” test (screenshots here), it has tons of field types, and even offer validations, too.

Can’t wait to test and probably use it too in my to-be-released theme hint hint

What Dev4Press thinks WordPress needs…

This post at Dev4Press outlines what MillaN, its author, thinks would be a necessary addition to WordPress.

Based on the comments, it appears that a lot of people agree with this list. Some of the items mentioned can be achieved with plugins (e.g Tax Meta Class to add meta data to taxonomy items, Custom Post Types Relationships for, well, creating custom post type relationships), so expect there to be a bunch of debates about what should and shouldn’t go to the core.

I like his list, but I disagree with his assessment that we don’t need new core themes. We do, especially to bring about the standard for how a theme options should be designed. This is the aspect that desperately needs to be standardized. Different theme companies and individual theme designers have their own idea of how the theme option UI should look, and it’s hurting the users.

Upgrading from WordPress 1.5

I recently spotted this interesting Ask Metafilter thread where user gd779 tries to find a way to upgrade his old, WordPress 1.5 install. One of the answer is pretty detailed:

I think the right approach is going to be:

  1. Do a full backup of your WordPress files
  2. Do a full database backup (mysql dump using phpMyAdmin or similar)

Then, from your 1.5.2 install:

  1. Upgrade to 2.0
  2. Upgrade to 2.5.1
  3. Upgrade to 3.0
  4. Upgrade to 3.3.1

It is quite fascinating thinking about the solution to this. There’s an official Codex page called Updating WordPress, but it doesn’t seem to go that far back in time.

Smashing Special: What’s Going On In The WordPress Economy?

Siobhan McKeown wrote this awesome, birds-eye view of the whole WordPress economy. Make sure to read this two-part article so you know what’s up with WordPress and identify what opportunity lies ahead.

I agree with Matt’s prediction on that article:

I think the next big opportunity is around agencies and consulting—there will be five to six companies as large as Automattic, just providing high-end consulting and services to the large customers who are adopting WordPress en masse.

Start with Part I of the article.

Automatic responsive images for WordPress

The one issue with creating responsive web design is in displaying images, especially getting the most appropriate size in a particular screen size. One solution for it is the Responsive-Enhance jQuery plugin. It works by loading small-sized images by default, then checks the screen size and loads the bigger version if necessary.

According to its creator, Josh Emerson:

This results in a faster perceived page load speed, but a slower actual speed. I’m happy with this solution as I care more about perceived speed than actual speed.

This tutorial by Keir Whitaker takes the whole thing further by teaching us how to apply Responsive-Enhance in WordPress.