WordPress

WordPress Theme Tutorial: Displaying Recent Articles, Excluding From Some Categories

30.01.2008

By default, you can use wp_get_archives() to display a list of recent articles. Nevertheless, it doesn’t allow you to set which category to include/exclude from the list. Here’s a way to do that:

<ul>
<?php
  // display recent posts excluding those from certain categories.
  query_posts("showposts=10&cat=-4,-5,-6,-7,-8,-9"); // grab 10 posts, negative to exclude cat IDs

  while (have_posts()) :
    the_post();
?>
  <li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
  <?php endwhile; ?>
</ul>

The key here is to tweak query_post’s parameter to your liking. “showpost” means how many post you want to display, while “include” can be used both to include or exclude a category. Note that here you used a category ID. Normal number means you include that category, while adding a negative (”-”) symbol before the number means that you exclude that category. You use comma (”,”) to separate multiple IDs.

So, my query_post above can be translated to “get a list of ten most recent posts, excluding those that belongs to category ID 4, 5, 6, 7, 8, 9″.

3 Responses

WordPress

Prologue Theme Mod with 140 Chars Limit

29.01.2008

Note: You are reading about an older version of the theme mod. The most updated post is here. Thank you.

Update: Okay, I was being a total fool for thinking that Twitter’s limit is 128 instead of 140. Thanks to Jeffro2pt0 for reminding me, and I have reuploaded the theme to reflect the changes. End of update.

Prologue is the new, wonderful theme by Automattic. What’s great about this theme is that it’s not your average blog-looking theme. Here’s what they have to say:

So last week Joseph Scott and Matt Thomas decided to tackle this problem and within a few days they had a new theme for us: Prologue. Imagine it like a group Twitter.

Yes, it is a Twitter-like theme, complete with textarea at the top of the page for logged-in authors to submit their post immediately, Twitter-style. They have set up a demo as well.

All in all, it’s a great, well-executed idea. And as a tribute to its greatness, I’d love to contribute my own addition: make it so that you can only post 140 chars per post. Because there’s something Zen-like about it. Because constraints drive innovation and force focus. Because you’re addicted to Twitter enough that writing longer than 140 characters grinds your brain to a halt.

Whatever the reason, this might just be the mod for you.

Terri Ann to the Rescue

Being the lazy guy that I am, the first thing I do is of course look around the net for scripts to do the functionality. And Terri Ann just so happen to create the very functionality a week ago. There are actually quite a lot of such scripts, but I liked Terry’s for its ease of use and simplicity. Plus, it uses Prototype JS, which is already included in everyone’s installation of WordPress. Nice!

And after fooling around for a bit, I finally made it!

Download Prologue-140!

Here you go, download Prologue Theme Mod, now with 140 chars limit!

Final Note

I didn’t create the Prologue Theme, Joseph Scott and Matt Thomas from Automattic did. I didn’t create the character-limiting JS functionality as well, it was made by Terri Ann. All credits should go to them. I didn’t do much but combine the two things together.

Also, since the limiter is done by Javascript, you will be able to bypass the chars limit if you turn it off. But hey, it’s your own blog, so I don’t think that would be too big of a problem :)

Thanks, and hope you like it! (Please don’t bother them if there’s bug with the mod, let me know instead.)

Miscellanea

Here’s a great topic regarding the design of limited characters input.

9 Responses

WordPress

Understanding comments-popup.php

28.01.2008

I have a confession to make.

Up until now, I didn’t have any idea how comments-popup.php works. Oh, it’s not like I haven’t done any research. The Codex’s Theme Development page, for instance, explains this file as:

The popup comments template. If not present, comments-popup.php from the “default” Theme is used.

And it doesn’t link to any specific page explaining more about it. On another page, Using Themes, the information is even more sparse:

Popup Comments Template = comments-popup.php

For quite a long time, my understanding is that this file is used if, somewhere within WordPress, the option to display comments as a popup is activated. When that magic switch is on, people who click the comment link will get a popup window with the comment area inside it. The question is, where on earth do I find that option?

Oh, don’t ask me how many hours I’ve spent looking around for it. I’m even tempted to enter the famous Konami Code inside the WP admin area just to see if a secret page will open and show me the magic “Display Comment as Popup” option—it’s really that hard to find!

And no wonder. I just got the revelation today, and it turns out there’s never been such option within the admin area. Nope. I was digging in the wrong place.

The option to use comments-popup.php, ladies and gentlemen, depends solely on the presence of a single PHP line inside a theme’s header file. Go open the header.php of the Classic theme (available in any default install of WordPress), line 21 you will see:

<?php //comments_popup_script(); // off by default ?>

Yes! That’s the magic switch. The Holy Grail of Popup Commenting. I uncommented that and, bam, the very first WordPress comment popup appared before my very eyes. Try it.

By searching for that PHP function into the Codex, I found this small but complete explanation about popup comments, which I wished I’ve found before.

Anyways, it’s also interesting to note that many, many themes out there have comments-popup.php inside them but no comments_popup_script() function, making it practically useless. It’s not even available within Kubrick, WordPress’s current default theme.

I’m not sure why comments_popup_script() function is not included within the default theme (not even in commented form like the one inside the classic theme); to me and many others, Kubrick is the first theme we tear apart and learn in the process. Perhaps the usage of popup window is discouraged?

I’m not sure. But in my case, I’m very likely to leave out the comments-popup.php like I often do. I used to do it out of the fact that I don’t know what it does, and because Sandbox theme—another good theme I learn a lot from—does not have it. But now, after some thinking, I’ll just leave it out for one more reason:

I’ve never ever visit a WP-powered blog with popup comments (have you?). I’m sure that’s what most users experience as well—we’re already accustomed to the open-new-page-for-comments behavior.

Better not mess with that.

25 Responses

WordPress

WordPress Theme Tutorial: MSNBC-like Home Page Category Listing

24.01.2008

By default, the home page of a WordPress blog will show a list of most recent blog posts. That is simply the usual behavior of a blog. But then, if you’d like to use WordPress as a content management system, then you might want things to show a little differently. This is especially true when creating a magazine style WordPress theme.

Take a look at MSNBC.com. There, if you scroll down a little bit, you will be able to see a list of category blocks (”U.S., World and Politics”, “Business”, “Sports”, and so on). Within each block you can see one most recent post with excerpt, then a list of seven previous posts.

Image example of MSNBC category listing

This article will discuss a way to do that with WordPress.

Continue reading →

16 Responses

WordPress

WordPress 2.5, Backend Redesign, and Happy Cog

05.01.2008

So the news is out that the next version of WordPress, 2.4, is not going to happen. Instead, we will immediately get 2.5 by March 2008. Following the links, I got to read that one of the most anticipated update for the next version is that the backend will be redesigned.

Now, that is big. I don’t think it’s an understatement to say that there are hundreds of thousands of people utilizing the WordPress admin everyday. Scratch that. Matt said that the Presentation page in the wordpress.com backend got 2.4 million pageviews by October 2007. On just the Presentation page. Without counting the self-hosted installation.

In other words, there is a huge number of people who have familiarized themselves with the current backend design. If you’re going to redesign it, this is a big task.

And then I found out at wp-hacker mailing list archives that Happy Cog is doing the redesign.

Happy freakin’ Cog. Wow.

Think of this, an open-source project hiring the web agency headed by the King of Web Standards himself to redesign the backend design. If you haven’t heard of them, Happy Cog is to web design the way Liquid Tension Experiment to progressive rock scene. In a word, a supergroup.

More evidence about this fact could be found at the WordCamp site and also hinted at Liz Danzico’s blog. Liz is the information architect, usability analyst and editor at Happy Cog.

Now, this is a wonderful move by WordPress. For a task this big, they have chosen to do the right thing: get the professional to tackle it. I’m not sure if the redesigned admin demo here is the one made by Happy Cog or not, but since Matt said that it’s probably around 10%-20% of the real thing, it’s best to save the comments for now.

All in all, it’s a great news. I’m so going to learn and tinker and tear it apart once it shipped. Now, for the painful task of waiting until March…

PS: If you want to dig around more on the wp-hackers archives about Happy Cog’s involvement, this might be a good start (it’s a Google search because the archives page itself does not have a search functionality).

2 Responses

Design, WordPress

Decluttering WordPress Theme’s Sidebar Widget Code

04.01.2008

The usual code for a widget-enabled sidebar goes like this:

<div id="sidebar">
  <ul>
    <li id="pages" class="widget widget_pages">
      <h2 class="widgettitle">Pages</h2>
      <ul>
      <li class="page_item page-item-2"><a href="http://url/?page_id=2" title="About">About</a></li>
		  <li class="page_item page-item-2"><a href="http://url/?page_id=2" title="About">Contact</a></li>
      </ul>
    </li>

    <li id="categories-1" class="widget widget_categories">
      <h2 class="widgettitle">Categories</h2>
      <ul>
      <li class="cat-item cat-item-3"><a href="http://url/?cat=3" title="View all posts filed under Asides">Asides</a></li>
      <li class="cat-item cat-item-1"><a href="http://url/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a></li>
      </ul>
    </li>
  </ul>
</div>

This is where I begin to wonder. Why do widgets go into an unordered list? Semantically, it’s possible to argue that the sidebar is actually a list of widgets, therefore the usage of the <ul> tag. But with that same logic, the content area of a blog is basically just a list of posts. Yet I never found any theme placing each post inside an <li> tag. Have you?

This is what Automattic has to say on this, emphasis mine:

Notice that the entire sidebar is an unordered list and the titles are in <h2> tags. Not every theme is built this way and it’s not necessary to do so, but it’s currently the most common sidebar markup in the themes we surveyed so we adopted it. The element with id=”links” is the equivalent of one basic widget.

So, I assume that this practice date back before WP Widgets is created, and is simply picked for compatibility reasons (so that it’s easy to convert already-made themes to be widget-ready). But that does not mean it is still necessary for new themes, I believe.

If you take a look at some of the more well-known web designers’ code, you’ll see that they don’t do this on their sidebar. While none of these examples actually used WordPress widget on their site, but does that matter? Widgets or plain old hardcoded PHP, we’re simply talking about items (or sections, contents) on the sidebar, right?

The last thing that also bothered me is that the usual code above looked so cluttered. Tag soup, anyone? Nested <ul>’s and everything. They’re actually quite difficult to follow, and I don’t see a reason why something simpler can’t be achieved yet still be semantically okay. Something like this, for instance:

<div id="sidebar">
  <div id="pages" class="widget widget_pages">
    <h2 class="widgettitle">Pages</h2>
    <ul>
      <li class="page_item page-item-2"><a href="http://url/?page_id=2" title="About">About</a></li>
    </ul>
  </div>

  <div id="categories-1" class="widget widget_categories">
    <h2 class="widgettitle">Categories</h2>
    <ul>
      <li class="cat-item cat-item-3"><a href="http://url/?cat=3" title="View all posts filed under Asides">Asides</a></li>
      <li class="cat-item cat-item-1"><a href="http://url/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a></li>
    </ul>
  </div>
</div>

Mm. Tasty.

And So We Bump into Troubles…

By default, the value for the function register_sidebar (consult Widgets API docs page for more info) are these:

$p = array(
  'before_widget' => '<li id="%1$s" class="widget %2$s">',
  'after_widget' => "</li>/n",
  'before_title' => '<h2 class="widgettitle">',
  'after_title' => "</h2>/n"
);

register_sidebars(1, $p);

In other words, the built-in Widgets code is to put each of them inside an <li>. To fix this, we do it this way:

$p = array(
  'before_widget' => '<div id="%1$s" class="widget %2$s">',
  'after_widget' => "</div>/n",
  'before_title' => '<h2 class="widgettitle">',
  'after_title' => "</h2>/n"
);

register_sidebars(1, $p);

And to set-up the Widgets area inside sidebar.php, simply use the code:

<div id="sidebar">
  <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
  // static code here
  <?php endif; ?>
</div>

And that’s it. Simple changes, much lovely code. Thoughts?

4 Responses

WordPress

Upgrading WordPress the “Sneaky” Way

30.12.2007

WordPress 2.3.2 is out, and we’ve just recently upgraded this site accordingly. The list of bug fixes can be checked here.

Standard Upgrade Procedure

The usual upgrading process goes like this:

  1. Backup everything in your site (files and MySQL DB).
  2. Deactivate plugins.
  3. Get the latest WordPress files and overwrite the old files. Deleting first instead of overwriting is also encouraged.
  4. Visit the wp-admin/upgrade.php page to auto-upgrade the database structure.
  5. Check permalinks structure and update .htaccess if necessary.
  6. Reactivate all plugins.
  7. Done.

The Sneaky Way

Now, just as an experiment, I tried another way to upgrade this install my way. As a disclaimer, I don’t recommend anyone to try this. It’s just an experiment, mmkay?

So, this is what I do:

  1. Backup everything.
  2. Deactivate plugins.
  3. Download the latest WordPress files.
  4. Overwrite only the files changed from previous version. The list of revised files for this version can be found both here or from the WordPress Trac diff here. For future versions, I’m sure the changed files will be mentioned as well.
  5. Visit the wp-admin/upgrade.php page to auto-upgrade the database structure.
  6. Permalinks and .htaccess shouldn’t get changed I’m sure. Heck, I didn’t overwrite it! But it’s always a good thing to check.
  7. Reactivate all plugins.
  8. Done.

Everything seems to be doing fine after I did this. Well, you can read this, can’t you?

Pro and Cons

Pro:

  • Good if your connection is slow. Only upload a few files instead of the entire WordPress files.
  • Can learn the inner workings of WordPress a little more.
  • It’s a bit more risky and challenging, if you’re into that sort of thing.

Cons:

  • Must be extra careful when overwriting. Gotta have the correct files to upload.
  • It’s a bit more risky and challenging, if you’re against that sort of thing.

Other Notes

  • After reactivating WordPress Stats plugin, it asked me to input my WP API Key again. This bugged me a bit, afraid that my old stats is already gone. After entering the API Key again, I found that the stats does not duplicate (i.e.: it seems to resume the previous stats), so hopefully nothing goes wrong. I will need to check more whether the traffic actually updates or not (note: the Stats get updated about once in 3 minutes—although my personal experience says 10 minutes).
    UPDATE:The Stats plugin works. So, it seems that the key re-entering thing does not break anything.
  • Also note that Akismet does not ask for API Key upon reactivating. Hello, Automattic?
  • It would be a good idea to use Maintenance Mode plugin during the upgrade process. We apologize for any weirdness you get during our recent upgrading attempt.

1 Response

Page 2 of 3←123→

Hello!

My name is Hafiz Rahman. I do standards-based web design and WordPress works. I'm open for new projects, and here's where you can contact me.