WordPress

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

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

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

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

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

Asides

Eric Meyer’s Reset CSS Updated

And why am I not zeroing out deprecated elements, like center? Because they shouldn’t even be in the markup. The way to handle deprecated elements is with something like Marco Battilana’s Big Red Angry Text, not silently neutering them.

I somehow always preferred Eric Meyer’s Reset instead of from others like YUI’s Reset, and it’s a good update that of course will be used.

Leave a response

Asides

Lovely Picasa

You are using a browser that is not fully supported. Some features may not work too well, but you are welcome to have a look around.

Other web apps usually tell users with non-supported browsers to go away, as if it’s the user’s fault. Picasa’s approach is much more lovely.

Leave a response

Design

Unique Numbers in CSS

If you’ve been learning CSS and looking around people’s code all over the web, I’m sure you have found some strange numbers inside their CSS files, seemingly used out of the blue. This is the list of some of those numbers that I noticed, accompanied with some background information about it.

-9000px

This is the number originally used by Mike Rundle on his famous Phark image replacement technique. Another variation is -100em or -5000px or -9999px. Nevertheless, the idea is to apply a big, negative number to the CSS text-indent property, so that it puts the text way, way off of the screen, effectively hiding it. Combined by adding a background image of choice to the element, this gives the effect of having text inside the HTML structure, but shows an image instead.

HTML:

<h3>Revised Image Replacement</h3>

CSS:

h3 {
  text-indent: -9000px;
  overflow: hidden;
  background: url(image-to-show.png);
  height: 25px;
  }

Note: The usage of em causes some slight problem with old Version of Safari, so whenever possible (actually I can’t think of a situation when this isn’t possible) use px.

62.5%

This is the known number used for the base font size in browsers so that 1em equals 10px, mostly used in the practice of using em’s for setting font size yet still thinking in pixels to make things simpler. This method is first introduced and explained by Richard Rutter. The usage of em instead of pixel for font-size, of course, is good for many reasons, one of them is due to the fact that fonts set in px cannot be resized on a certain wretched browser. Back to this number, it is commonly used on the html element, for obvious reasons.

body {
  font-size:62.5%;
  }

A more advanced usage is 62.5%/1.6em, where the second number denotes the line height. This only works in font instead of font-size property:

body {
  font:62.5%/1.6em Arial, Helvetica, sans-serif;
  }

1%

This number, used on height property, is commonly used with the Holly Hack to fix the strange escaping floats bug in IE6. It is also featured on A List Apart’s 2004 article on creating horizontal drop down menu. Now if you’d excuse me, talking about IE bugs is obviously not my (or any other web designers’) happiest moment, so kindly peruse the links above to learn more about it.

101%

Like the number before it, 101% is also used on the height property. This is commonly used to deal with Firefox’s behavior of adding/hiding its vertical scrollbar depending on whether the page is taller than the viewport or not. This behavior gives the effect of inconsistencies between pages depending on their height. Using this technique, Firefox is forced to always display the scroll regardless of page height.

html {
  height: 101%;
  }

Nevertheless, it is said that this does not fix the same problem in Opera, and the more correct solution is this:

html {
  overflow-y: scroll;
  }

Another similar discussion about this can be found at Dzone Snippets.

Closing

These are what I can remember easily. It’s by no means a complete list, and I’d love to hear it if you know more about them!

6 Responses

Page 1 of 212

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.