A question: how do you guys keep track of sites that use your theme?

I find that Google’s Webmaster Tools show links to my site, including those from the link on the footer area of my themes, but its update can be quite slow and incomplete.

What about you guys?

Just did some small CSS tweaks to this site. Added more breathing space and removed some unnecessary elements. Went wider (990px) over the old one (960px).

This is more a “here’s when I played around with Firebug and ended up making the site look different from the local one” personal reminder post, not a “come over and take a look” one, but if you do find something breaks somewhere, kindly let me know.

With wp_list_categories(), you can exclude categories in some ways:

• You can hide any category with the exclude parameter, use comma separated list for multiple categories.
• You can show only the children of a certain category with the child_of parameter.

However, there seem to be no way with to make that function completely hide the entire children of a category. Sure, you can use exclude, but if you have a gazillion of child categories and/or adding them frequently, thing can get cumbersome.

Wait. Why does this matter?

Well, a funny edge case with Pico is that when there are a ton of child category in a dropdown menu, it will create a long, empty white space even after the footer ends. It turns out that Suckerfish dropdown works by hiding those submenus from view, but they’re still there affecting margins. If you have a lot of them, the page will get longer.

So a quick solution would be to hide all children from that category. I looked around and didn’t seem to find an answer. I was hoping for the exclude_tree parameter to do the job, but based on my (admittedly limited) experiment, it won’t do whatever it is supposed to do (the trac ticket is for wp_list_pages(), but I suppose they’re the same).

CSS to the rescue

There’s probably a solution that involves writing a plugin and mucking around with PHP, but being lazy I then realized that wp_list_categories() outputs a class with the category’s ID inside each <li>. In that case, a simple display:none should do:

.cat-item-15 ul { display: none; }

The code example above will hide all children of the category ID 15. Simple, easy, with the added benefit that the children category links still show up on the HTML and therefore readable by search engine crawlers and page readers. Downside is that it only works specifically for that case; can’t really use it for a catch-all solution.

Wait. Why does a CSS article show up on a WordPress development blog?

Well first of all I stumbled upon this trick accidentally while developing this one theme I’m working on. And also I promise it will be short and simple enough. So do read on.

For the theme I want to display a Table of Content-style home page that will look like this (click the image to view full-size):

That is a centered ordered list with list content below its number. The HTML structure I have is:

  <ol id="toc" class="clearfloat">       
    <li><h2><a href="#">I Learned that Adding an Egg to Ramen Soup is Awesome</a></h2></li> 
    <li><h2><a href="#">Why I believe printers are the spawn of Hell</a></h2></li> 
    <li><h2><a href="#">I nominate the most dangerous enemy ever created.</a></h2></li> 
  </ol>

…and so, the CSS.

This gets me curious because as we all know, list numbers normally show up to the left of the text. After a bunch of crazy experiments, some of which kept me puzzled about what really happened, I got this solution (leaving out the various text-formatting codes):

body {
  counter-reset: toc 0;  
  } 
 
#toc li:before {
  content: counter(toc, lower-roman) ".";
  counter-increment: toc;
  }  
 
#toc li {
  list-style-type: none; /* hide the numbers, show them via the toc li:before above */
  text-align: center;
  }

Here’s the main idea. I found out that if I use list-style-type:none and use generated content to display the numbers, the number will show up on top of the text. Great. Next we add text-align: center; and bam, everything is centered nicely as expected.

This is the first time I learned about counter-reset and counter-increment. They basically allow you to set the starting number on a list. I use 0 in my CSS so mine starts from 1, but that number can be anything. Here are some articles I found about this topic:

• Automatic counters and numbering
• Automatic numbering with CSS Counters
• CSS Content, Counter-Increment & Counter-Reset
• counter-increment (CSS property)

Results and Demo

Here’s a demo page for this CSS experiment. I’ve tested it and it works on Firefox 3.5, Opera 10, Chrome 3 and Safari 4. IE 8 doesn’t seem to support content, so it won’t show the generated number. I can live with that.

And that’s it. Hope it can be useful! I’ll release the theme pretty soon, so subscribe to the feed if you want to be updated.

It all began with Darren Hoyt’s tweet:

interesting new question over at WPQ courtesy of @jophillips, any ideas? – http://bit.ly/7NOEl3

The particular question was about adding an “old” or “new” class for a listed Links based on whether the Link is inserted less/more than 31 days from now.

Curious, I dug around the Codex and into the core files. I began to think about filtering wp_list_bookmarks. Tabs upon tabs were opened, lines of code tested. Finished, I logged in into my WPQuestions account and opened the page again.

Amazingly, the question was already solved (this is only a couple hours after Darren linked to it), and there I saw two different solutions, both solved the problem with a short and easy to understand piece of code. One of it involved editing core file, which generally is undesirable, but both codes were undeniably elegant and to-the-point.

Continue reading this entry →

Pico is updated to 1.0.5 fixing a bug report by Alberto. The download link is still the same (here, direct download to the zip file). Version 1.0.5 is also available on The Theme Directory’s SVN, this way.

One of the most used navigation method used in WordPress themes is to list all of the blog’s Pages and put it horizontally on the header area. The code will look like this:

<ul id="nav">
  <li <?php if ( is_home() ) { ?> class="current_page_item"< ?php } ?>>
    <a href="<?php echo get_option( 'home' ); ?>/">Home</a>
  </li> 
  < ?php wp_list_pages( 'title_li=' ); ?>
</ul>

The most important piece there is the wp_list_pages function, which will automatically list all Pages and add class="current_page_item" to the Page link if it’s currently being opened.

Before that function, we add a little more code to display a front page link. Naturally we put it first on the list, and we add our own class for when the front page is currently open. All is well so far, and that is basically the code I’ve been using (including on Pico).

Continue reading this entry →