Customizing WordPress: Limiting Categories on Your Home Page and Sidebar
Update: I’ve redesigned my site since writing this post. The advice in this post is still valid, but the descriptions no longer match what you see on my site.
If you click around into different parts of my site, you’ll notice that only certain categories of posts appear on the home page, and there are two variations to my sidebar. What I’ve done is make a single blog look like two different blogs: one for my professional work, and one for my personal posts. I’ve achieved these effects without using plugins, and without registering multiple sidebars. The only downside to my approach is that it’s not a technique you can use to control which widgets appear on which pages (but it’s fine if you want your widgets on all your pages). I don’t use widgets so it’s not a downside for me 😉 .
To follow along, you’ll need to be comfortable with editing a couple of your theme’s files, and be comfortable with the basics of PHP.
Limiting the categories on your home page can be done by adding a few lines of code to the top of your theme’s index.php file.
<?php if (is_home()) {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts("cat=12,23,6&paged=$paged");
} ?>
For “cat=” on the 3rd line, list the numbers for the categories you want to appear on your home page (or you can put a minus sign in front of the category numbers to exclude specific categories). The WordPress documentation for query_posts says you can do this with simpler syntax, but you can’t. The documentation is wrong. If you follow the suggestion there, your “Newer Entries” and “Older Entries” links on your home page won’t work. They will just continually re-load the most recent posts. The code I’ve given here is explained nicely in this WordPress support forum post.
So with this code, my home page includes only the categories related to my professional work. For my personal blog, I needed a way to get posts from all the right categories to appear together on a page. The answer is simple: I created a single parent category that encompasses all the categories I use for my personal posts. So the page for that parent category serves as the “home page” for my personal blog.
I also wanted my sidebar to change depending on whether you are viewing the “professional” pages or the “personal” pages. Achieving this involves two steps. First, add the following code to the top of your sidebar.php file. The category and page numbers you see listed are the ones where I want the “professional” sidebar to appear, which I call $home_sidebar (so you should substitute category and page numbers appropriate for your site). Note the ability to pass an array to is_category is new with WordPress 2.5.
<?php
$home_sidebar = false;
if (is_category(array(12,23,6))
|| in_category('12') || in_category('23') || in_category('6')
|| is_page(array(345,440,496,501)) || is_home()) {
$home_sidebar = true;
}
?>
The second step is to check the value of $home_sidebar whenever you want to vary what appears in the sidebar. For example, to vary the category links in your sidebar, use code similar to this (again, substituting your category numbers). You’ll want to explore the options for the wp_list_categories function to get the exact appearance you want:
<ul>
<?php if ($home_sidebar) {
wp_list_categories('include=12,23,6&feed=RSS&order=desc&title_li=');
}
else {
wp_list_categories('child_of=26&feed=RSS&title_li=');
} ?>
</ul>
Note my use of child_of. This is the number for the parent category I created for all of my personal posts. This is a very convenient way to get all of the child categories without having to list them individually.
I’ve used this approach to make my blog look like two blogs. But you could easily extend this approach to subdivide your blog into as many mini-blogs as you like.
Shashin 2.1 – Easier Steps for Displaying All Album Photos
Shashin 2.1 is now available. It does not include any new dazzling features, but it has a new, easier to use option for displaying all your album thumbnails, and then have them link to a page on your site that displays all the photos in each album. The Shashin page has instructions on how to do this.
There were 3 problems with how I implemented this feature in the previous (2.0) version of Shashin, but they only became clear to me after hearing feedback from people using Shashin 2.0 in a wide variety of WordPress themes. One problem was that the steps involved were just too complicated for most people’s needs (but the more complex options are still there, if you need greater control of the configuration than the new “easy” way).
The second problem was my attempt to manipulate the title of the page containing the [salbumphotos] tag. Shashin 2.0 tries to dynamically append the title of the selected photo album to the page title. In a rational world this would be easy, but WordPress makes it extraordinarily difficult to isolate and manipulate the title of a page, as reported here. I thought I had come up with a work around. But, as it turns out, my solution was not reliable across all the different WordPress themes that are out there. So, with Shashin 2.1, I have removed all the code that tries to manipulate the page title. It now simply displays the album title as a caption on the table that contains the photo thumbnails. This is much cleaner and shouldn’t cause conflicts with any themes.
The third problem was the [salbumphotos] tag, which is used to display thumbnails for all the photos in an album. In Shashin 2.0, a page with the [salbumphotos] tag won’t play nicely with sidebars that use the wp_list_pages function (for listing links to all the pages on a site). The [salbumphotos] tag only worked correctly if you used it in conjunction with Shashin album thumbnails. You couldn’t just go to the page directly from a sidebar link. This is fixed in Shashin 2.1.
Shashin 2.1 also has a few minor bug fixes, the most important of which is that you can now once again see the photo thumbnails in the Shashin admin panel.
I should point out that, if all you want to do with your Picasa photos in WordPress is display your album thumbnails on a page, and then link them to a page that displays the photos in each album, then I recommend kPicasa Gallery. It has similar features to Shashin in this area, but without Shashin’s management overhead. But if you want to do more than just that, then I recommend Shashin 😉 .
U Penn Higher Education Web Symposium
My former officemates at the U Penn School of Medicine Information Services Department have put together a Web Symposium, scheduled for July 15-16. They have an impressive list of speakers lined up.
I recognized many of the names of the list, as it includes some of the most well known people in the world of web user interface design. But I was surprised to see the names of a couple people I personally knew. I worked with Dana Chisnell for a short time in 2000, when she was brought in to consult at a small start-up where I was working (Finexa – a company that did not last long). And I met Alex Urevick-Ackelsberg at a coffee shop when Glenn Greenwald came through Philadelphia to promote his first book a couple years ago. I contributed a post to his Blue Force site, but it wasn’t long after that when I started to come up short on time for regular political blogging.
The price for attending the symposium is a bargain. Several of the speakers typically make the rounds at conferences that cost 2 or 3 times as much. So if this is a topic of interest for you, definitely check it out!
…And …And …Shashin 2.0.4
This is a very minor release in terms of code changes. It’s not critical if you have a previous version of Shashin installed, but it is critical if you’ve upgraded to WordPress 2.5 and you’re installing Shashin for the first time. It has to do with WordPress 2.5’s new handling of variable scope when activating plugins (if you were curious).
The only other change I made was to add mp4 as a video type that Shashin will recognize (it’s not documented as a supported video type for Picasa, but it does in fact accept them).
Update: I’ve received a few reports from first-time Shashin users who are having trouble activating Shashin properly, despite this fix. This seems to be happening to only a small number of people, and I haven’t been able to track down the cause yet. If you are having trouble with Shashin under WordPress 2.5, please leave a comment on this post and let me know exactly what’s going wrong.
…And Now Shashin 2.0.3
In version 2.0.2 I updated Shashin to accommodate changes in the Picasa RSS feed. The feed changes had caused images to stop displaying after you synced your albums in Shashin. I fixed that, but what I didn’t notice was that they also changed how videos are represented in the feed, so version 2.0.2 still doesn’t display videos after you sync your albums. Someone kindly pointed out the problem, so I’ve fixed it – Shashin 2.0.3 is now available at wordpress.org.
Shashin 2.0.2 – Critical Upgrade
Murphy’s Law is being strictly enforced today: within 24 hours of my 2.0 release, Google coincidentally changed the Picasa RSS feed. The URL for the photos isn’t where it used to be in the feeder, with the result that, if you sync your albums in Shashin, your photos won’t show up anymore. I’ve found the new tag for the photo URLs in the Picasa feed and updated Shashin accordingly. So download Shashin 2.0.2 now. Note that your photo data is still safe in Shashin even if your photos stopped appearing after the Picasa RSS feed change. Syncing the albums with 2.0.2 should straighten everything out.
This is the one real problem with building an application that relies on Google’s RSS feeds – I have no control over when they might change the feeds, or what kind of changes they make.
There are also some other minor fixes. Here’s a list of the changes in 2.0.2:
- Adjusted for new location of the content_url in the Picasa feed
- If you select the option to display your photos at Picasa in a new browser window, it actually works now 😉 (the formatting of the anchor tag was incorrect).
- Shashin now performs a preg_escape when detecting the URL for the page containing your salbumphotos tag. This fixes a warning that was being displayed for some URLs in PHP 5.
- Shashin now correctly detects your WordPress installation directory if you’ve installed it in a subdirectory (except for paths in shashin/display/highslide.css which are hardcoded – you’ll need to edit those by hand).
Shashin 2.0 – Highslide and Album Displays
Shashin 2.0 is now available. I jumped the version number to 2.0 because this release includes a couple major new features. One is that Shashin is now bundled with Highslide. It was a fun challenge getting WordPress to play nicely with Highslide for displaying any combination of photos in a post, and then any combination of posts on a page. The other major new feature is linking album thumbnails to a local display of the album’s photos, so you can show them on your site instead of having to go to Picasa.
There are minor new features too: a new tag that lets you display sets of album thumbnails alongside their titles and descriptions, an option to prefix album titles to photo captions, and if you choose not to use Highslide, you can open the links to Picasa in a new window if you want.
All the details, including instructions for using the new features, are on my Post to Post Links II error: No post found with slug "shashin-wordpress-plugin".
If you have any questions or run into any problems, please use the comments on this post.
Generating HTML Tables with a Variable Number of Columns and Rows
Often when you’re generating an HTML table on the fly, you need to be able to display an arbitrary number of columns and rows. This typically comes up when displaying data from a database, where you can get any number of records (rows) back. Fortunately handling a variable number of rows is easy in HTML, since all you have to do is keep adding table row tags until you run out of records. The harder, and less common, case is handling a variable number of columns. An example of where this situation comes up is my Shashin plugin, as Shashin users can decide how many columns they want in the display of their photos. Another example is a form where you need multiple rows and columns for neatly laying out a variable number of checkboxes.
I’ve seen a number of strange and tortured solutions to this problem over the years, so I thought I’d share my solution, which is really simple (I’m sure many others have figured this out as well, but I haven’t seen it posted anywhere). What’s often missing in other solutions I’ve seen is properly closing the final table row when the number of cells in it is less than the preceding rows. Here’s some generic PHP code for it:
// desired number of columns - this can be any number
$cols = 3;
$output = "<table>\n";
$cell_count = 1;
for ($i = 0; $i < count($your_array); $i++) {
if ($cell_count == 1) {
$output .= "<tr>\n";
}
$output .= "<td>your cell content</td>\n";
$cell_count++;
// end the row if we've generated the expected number of columns
// or if we're at the end of the array
if ($cell_count > $cols || $i == (count($your_array) - 1)) {
$output .= "</tr>\n";
$cell_count = 1;
}
}
$output .= "</table>\n";
And just for fun here’s the same thing in Smarty:
<table>
<{assign var="cell_count" value=1}>
<{foreach key=key item=item from=$your_array name=yourloop}>
<{if $cell_count == 1}>
<tr>
<{/if}>
<td>your cell content</td>
<{math assign="cell_count" equation="$cell_count + 1"}>
<{if $cell_count > 3 || $smarty.foreach.yourloop.last}>
</tr>
<{assign var="cell_count" value=1}>
<{/if}>
<{/foreach}>
</table>
CSS and the Limits of Definition Lists
I’ve become a fan of definition lists as a layout tool. Here’s a snippet of HTML, using them to markup a form. You can make the input element label the definition term (dt) and the input element itself the definition data (dd), like so:
<dl>
<dt><label for="first_name">First Name<label></dt>
<dd><input type="text" name="first_name" id="first_name" size="20" /></dd>
<dt><label for="last_name">Last Name<label></dt>
<dd><input type="text" name="last_name" id="last_name" size="20" /></dd>
etc...
</dl>
What makes this better than using an HTML table is that with CSS you can specify whatever layout you want: you can style it so the dt is above, below, to the right, or to the left of its dd partner. This is particularly helpful when you’re writing re-usable code that might be needed in situations where you can’t predict the layout needs.
But tonight I discovered the limit of this approach, which is when you can’t predict whether the vertical height of the dt’s content will exceed the height of the dd’s. I’ve been working on the next version of Shashin, and what’s been driving the effort is the Boxing Dragons art gallery site, which I just finished working on. I’m using Shashin to display a list of albums (in this case artists) with the description of the album alongside the cover image of the album. For the next release of Shashin, I was originally planning to do this markup with definition lists (with the album cover as the dt and the description as the dd), giving users the flexibility to layout their album and description pairs any way they want, via CSS.
This approach to styling definition lists is fairly tidy, and works fine when the height of the dd is the same or greater than the dt. And in Firefox it also works when the height of the dt is greater, but not so in IE6 (I’ve been resisting upgrading so I haven’t tested with IE7). In IE6 the content of a dd will “flow up” into any available space above it, pushing a dd’s content higher than the position of its dt partner.
The clearfix solution for positioning floating divs doesn’t help here (believe me, I tried). I found several threads of people discussing this problem (or something quite similar to it) but no reliable solutions. The best I found was this admirable effort, but it entails about 70 lines of CSS code as well as some goofy markup. It’s also quite fragile – as soon as I started tweaking things like margins even slightly, it would start to fall apart. Although I probably could have gotten the layout I wanted if I kept at it, the CSS would have been so complex it would have defeated the purpose: to make it fairly easy for Shashin users to alter the stylesheet to get the layout they want.
So, at least for now, I’ve given up on using a definition list and have retreated to using a table. The upside is the markup and the CSS are straightforward and cross-browser compatible. The downside for Shashin is that there’s no flexibility: the album covers have to stay on the left, and the descriptions on the right.
Shashin 1.2.3 – Several Bug Fixes
In my announcement of Shashin 1.2 the other day, I said I didn’t have as much time for testing as I would have liked, for the sake of getting out a version that works with WordPress 2.3.3. Sure enough, there were several bugs in Shashin 1.2. Get the fixes in version 1.2.3 from wordpress.org.
It may fix the problem some people were reporting with adding and syncing albums (a problem I haven’t been able to reproduce, so I can’t say for sure). If you had this problem, please let me know if the new version fixes it for you.
I also took the opportunity to rewrite the algorithm for displaying random photos, and it works much more nicely now, so give it a try.
I believe I may have also found why some, but not all, Shashin users were having trouble with multibyte (e.g. Chinese) characters, so this upgrade may help with that as well.
If you have any questions or problems, please post a comment on this post.