Perishable Press

Should We Support Old Versions of Good Browsers?

Jeff Starr — Mon, 01 Feb 2010 19:39:00 +0000

I mean, basically anything except for Internet Explorer, which is a debate in and of itself. Here I’m referring to old versions of good browsers, like Firefox 2, Safari 2, Opera 8, and so on. It seems that older versions of these browsers are not as common as older versions of IE, so should we bother supporting them when designing our websites?

Most agree that we shouldn’t support old versions of crappy browsers like IE, but what about older versions of good browsers like Firefox, Opera, and Safari?

Backwards Compatibility

One of the cool things about adhering to Web Standards during web development is that, theoretically at least, your designs should look similar on all standards-compliant browsers. This is one of the reasons why we exclude IE from the conversation — it doesn’t speak the language, and requires a whole realm of special support in and of itself. But even for modern browsers like Firefox and Safari, a standards-based design does not always translate to presentational fidelity in older versions. So how far back should we go? Obviously there’s no reason to go out of our way to support, say, Firefox 1, but what about more recent versions such as 2 or even 3.0?

Rendering Differences

For many modern browsers, the older the version, the more inconsistencies you’ll find. Older versions of Opera are notorious for borking an otherwise perfect design, and the further back you go, the more borked your design is going to get. And for anyone who does support older Opera, you know how frustrating it can be to target and filter specific versions with CSS. The same is generally true for other modern browsers: supporting older versions can get messy, costing endless amounts of time and energy. There’s no reason to have your designs look identical across browsers, but they should at least be usable. Right?

Browser Testing

If anything is keeping me from completely ignoring older browsers, it is the ease with which they can be tested. Again excluding everyone’s favorite, IE, installing multiple versions of modern browsers is a breeze. For example, on my machines, I am running the following browsers:

Firefox 1, 2, 3, and 3.5
Opera 6 through 10
Safari 2, 3, and 4
Chrome 2 and 3
IE 5, 6, 7, and 8
Camino 1 and 2
Various Flocks

..as well as Lynx and a host of lesser browsers using the Webkit or Mozilla rendering engine. And even if you don’t install a million browsers locally, there are plenty of online services and software that make it possible to do cross-browser testing on virtually any browser with a few mouse clicks. But if it’s so easy to test all of these zillions of old browsers, does that mean we are obliged to do so?

Where do you draw the line between browser support and design expediency? At what point does market share mandate support for old browsers?

Market Share

When deciding how far back to go, market share is certainly an important factor to consider. With that bastard IE, most of us have no choice but to support older versions simply because so many losers are still using it. But for good browsers such as Opera and Safari, most users are quite savvy, understanding the game and always keeping their browsers updated with the latest and greatest. This is another reason to love modern browsers: they make the upgrade process a piece of cake — you don’t even need to think about it — it just happens. Thus, while we are still dealing with IE6 and lots of IE7 — even though IE8 is the current version — the percentage of Firefox 2, Opera 8, and Safari 2 users is very small.

Baseline Support

Given that it is important to maintain usability, presentation, and performance across older versions of modern browsers, where should the baseline be set? Is there some general rule of thumb that will help designers with an optimal support strategy? Perhaps something like this:

One version back - complete compatibility and presentational fidelity
Two versions back - design should be usable, but doesn’t need to look similar
Three or more back - don’t sweat it — cost versus reward not in your favor

Personally, I try to support as many browsers as possible, but much of what I do depends on the particular project I am working on. Not every site needs to be checked on every browser, so I try to take into account the stats and projected client-usage data. It’s all about context, and varies on a case-by-case basis.

But support baselines can be useful. A Perishable Press reader recently described his support baseline as such:

IE7+
Opera 9+
Safari 4+
Firefox 3.5+

His thinking is that older browsers:

Have security holes by nature, therefore isn’t it irresponsible to support them?
Reduce the ability for the site to look good and is bad practice, even within an organization
Give the website visitor a lower experience than they deserve and what they should expect
Generally run slower and reduce the appearance of speed for your site

While I can’t agree with everything in this list, he does make some good points. And more importantly, this designer has taken the time to think it out for himself and reach his own conclusions, which I think is very important.

It’s the User, Stupid

Ultimately, it may be argued, that it’s all about the user. Sacrificing the user at the altar of design expediency benefits only in the short term. Eventually, those development shortcuts are going to catch up with you one way or another. So if design is all about the user, I guess we’re obliged to test for each and every possible scenario regardless of market share — test every browser on every platform on every machine in the world. Of course this is ludicrous, but it begs the question: where do you draw the line between browser support and design expediency? At what point does market share mandate support for old browsers?

Food for thought..

Source: Perishable Press

Take your WordPress skills to the next level with Digging into WordPress!

3 Ways to Track Web Pages with Google Analytics

Jeff Starr — Mon, 25 Jan 2010 02:58:13 +0000

Many bloggers, designers, and developers take advantage of Google’s free Analytics service to track and monitor their site’s statistics. Along with a Google account, all that’s needed to use Google Analytics is the addition of a small slice of JavaScript into your web pages. For a long time, there was only one way of doing this, and then in 2007 Google improved their GATC code and established a new way for including it in your web pages. Many people switched over to the newer optimized method, but may not realize that there are now three different ways to track your pages with Google Analytics. The latest method uses asynchronous tracking to minimize negative impact on user experience. Let’s take a look at each of these three methods for tracking your web pages with Google Analytics..

Method 1: Old School – Tracking sites with `urchin.js`

Web-design veterans are well familiar with the original, old-school method of GATC inclusion via the urchin.js code:

Ahh yes, those were the days.. This method worked great for years, and continues to work just fine to this very day. Although I personally would recommend using one of the newer methods of including the GATC, you may still use this old-school method by simply copying and pasting the code into the bottom of your web pages, preferably before the closing element. And then don’t forget to edit the “UA-XXXXX-X” string to match your actual GA ID.

So that’s pretty boring — let’s check out something a little newer..

Method 2: New School – Tracking sites with `ga.js`

In late 2007 – after years of using the original urchin.js script – Google updated and improved the GATC and renamed the tracking file to “ga.js”. As of now, this new tracking code is the platform on which all new Google Analytics features are deployed.

Here are some of the benefits of using the new ga.js tracking script:

Smaller file size
Improved performance
Object-oriented programming conventions
Namespacing and improved readability
Easy JavaScript integration

As with the old urchin.js-based method, using this new method requires inclusion of a small snippet of tracking code on your web pages. Depending on how you deliver your pages — over HTTP, SSL, or a combination of both — the code used to include the new Google Analytics tracking code will vary:

All web pages delivered via standard HTTP protocol

All web pages delivered via secure HTTP (SSL)

Web pages delivered via combination of standard and secure protocols

As you can see, each of these methods consists of two parts: the first references the ga.js tracking code and the second executes it. A couple of notes on proper/recommended usage of either of these methods:

Do not combine different tracking scripts on the same page
Inlcude the tracking code ~~after~~ before the closing element at the bottom of your web pages
Do not combine the ga.js method with the old urchin.js method
Don’t forget to edit the “UA-XXXXX-X” string to match your actual GA ID

I think this is the GA-inclusion method that most bloggers and designers are using in their pages. But even so, there is yet another way of including the tracking code that improves the user-experience for your visitors..

Method 3: Asynchronous Tracking – Better tracking with `ga.js`

This newer method of GA tracking uses a slice of asynchronous JavaScript to optimize the way in which browsers load the ga.js tracking script. The asynchronous tracking method improves the user experience and allows inclusion of the tracking script closer to the beginning of the web page without delaying subsequent content from rendering. As you might suspect, the asynchronous tracking method requires a slightly more complex inclusion method:

This code represents the minimum configuration required to track a page asynchronously using Google Analytics. To take advantage of this method, you can use this tracking script on your pages by following the simple steps below. To go beyond the basics, check the official tracking reference and usage guide for information on the GA API and proper asynchronous syntax.

How to setup asynchronous analytics tracking on your site

Important: Remove any existing ga.js tracking code, if present ¹
Insert the asynchronous snippet ~~before the closing element~~ after the opening tag ²
Edit the “UA-XXXXX-X” string to match your specific web-property ID
Add any customizations using the GA API and asynchronous syntax

That’s all there is to getting asynchronous GA tracking setup on your site. Of course, there are a few important notes that you should keep in mind:

If you experience content-loading issues, move the tracking code to the bottom of the page
¹ Asynchronous tracking is not available with the old urchin.js-based method.
² The optimal place for the tracking snippet is after the last
This method is especially convenient for preloading large numbers of images. On one of my gallery sites, I use this technique to preload almost 50 images. By including this script on the login page as well as internal money pages, most of the gallery images are preloaded by the time the user enters their login credentials. Nice.

JavaScript Method #2

Here’s another similar method that uses unobtrusive JavaScript to preload any number of images. Simply include the following script into any of your web pages and edit according to the proceeding instructions:

As you can see, each preloaded image requires a variable definition, “img1 = new Image();”, as well as a source declaration, “img3.src = "../path/to/image-003.gif";”. By replicating the pattern, you can preload as many images as necessary. Hopefully this is clear — if not, please leave a comment and someone will try to help you out.

We can even improve this method a bit by delaying preloading until after the page loads. To do this, we simply wrap the script in a function and use addLoadEvent() to make it work:

function preloader() { if (document.images) { var img1 = new Image(); var img2 = new Image(); var img3 = new Image(); img1.src = "http://domain.tld/path/to/image-001.gif"; img2.src = "http://domain.tld/path/to/image-002.gif"; img3.src = "http://domain.tld/path/to/image-003.gif"; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } addLoadEvent(preloader);

Ahhh, the joys of JavaScript!

Method 3: Preloading with Ajax

As if all of that weren’t cool enough, here is a way to preload images using Ajax. This method was discovered at Of Geeks and letters, and uses the DOM to preload not only images, but CSS, JavaScript, and just about anything else. The main benefit of using Ajax over straight JavaScript is that JavaScript and CSS files can be preloaded without their contents affecting the current page. For images this is not really an issue, but the method is clean and effective nonetheless.

window.onload = function() { setTimeout(function() { // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.js'); xhr.send(''); xhr = new XMLHttpRequest(); xhr.open('GET', 'http://domain.tld/preload.css'); xhr.send(''); // preload image new Image().src = "http://domain.tld/preload.png"; }, 1000); };

As is, this code will preload three files: “preload.js”, “preload.css”, and “preload.png”. A timeout of 1000ms is also set to prevent the script from hanging and causing issues with normal page functionality.

To wrap things up, let’s look at how this preloading session would look written in plain JavaScript:

window.onload = function() { setTimeout(function() { // reference to var head = document.getElementsByTagName('head')[0]; // a new CSS var css = document.createElement('link'); css.type = "text/css"; css.rel = "stylesheet"; css.href = "http://domain.tld/preload.css"; // a new JS var js = document.createElement("script"); js.type = "text/javascript"; js.src = "http://domain.tld/preload.js"; // preload JS and CSS head.appendChild(css); head.appendChild(js); // preload image new Image().src = "http://domain.tld/preload.png"; }, 1000); };

Here we are preloading our three files upon page load by creating three elements via the DOM. As mentioned in the original article, this method is inferior to the Ajax method in cases where the preloaded file contents should not be applied to the loading page.

Know some triks?

I love these preloading tricks so much, I could just squeeze something. If you know of any good preloading tricks, including any improvements to the techniques shared here, kick start my heart with your wise words of preloading wisdom ;)

Copyright2010PerishablePress

Source: Perishable Press
Take your WordPress skills to the next level with Digging into WordPress!
Related articles

CSS Throwdown: Preload Images without JavaScript

Preloading Images with CSS and JavaScript

Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom

Pure CSS: Better Image Preloading without JavaScript

A Way to Preload Images without JavaScript that is SO Much Better

The Ultimate Guide to swfIR Image Replacement

Better Image Caching with CSS

Protect WordPress Against Malicious URL Requests

Jeff Starr — Tue, 22 Dec 2009 19:23:37 +0000

A few months ago, many WordPress sites were attacked with some extremely malicious code. While searching for a good solution, I discovered the following gem of a plugin in the pastebin repository:

255 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "base64")) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } ?>

This script checks for excessively long request strings (i.e., greater than 255 characters), as well as the presence of either “eval(” or “base64” in the request URI. These sorts of nefarious requests were implicated in the September 2009 WordPress attacks.

To protect your site using this lightweight script, save the code as a plugin and activate in the WordPress Admin area. Once active, this plugin will silently and effectively close any connections for these sorts of injection-type attacks.

For further protection against malicious code, automated attacks, and other cracker nonsense, check out my 4G Blacklist.

Update to original method

As is often the case, Perishable Press readers have helped to improve this plugin by leaving comments, asking questions, and recommending changes. Here is the new, recommended version of the plugin:

255 || strpos($_SERVER['REQUEST_URI'], "eval(") || strpos($_SERVER['REQUEST_URI'], "CONCAT") || strpos($_SERVER['REQUEST_URI'], "UNION+SELECT") || strpos($_SERVER['REQUEST_URI'], "base64")) { @header("HTTP/1.1 414 Request-URI Too Long"); @header("Status: 414 Request-URI Too Long"); @header("Connection: Close"); @exit; } } } ?>

The changes include, in order, proper plugin declaration (thanks Aldo), exclusion of admin pages, and additional protection against CONCAT and UNION+SELECT requests (thanks John Hoff).

Merry Christmas!

Copyright2010PerishablePress

Source: Perishable Press
Take your WordPress skills to the next level with Digging into WordPress!
Related articles

Blacklist Candidate Number 2008-01-02

Comprehensive Reference for WordPress NoNofollow/Dofollow Plugins

Optimize WordPress: Pure Code Alternatives for 7 Unnecessary Plugins

Blacklist Candidate Number 2008-02-10

Blacklist Candidate Number 2008-03-09

Three Unsolved WordPress Mysteries

Blacklist Candidate Number 2008-04-27

Really Simple Browser Detection with jQuery

Jeff Starr — Sun, 13 Dec 2009 17:35:00 +0000

For my Serious redesign, I push the envelope in terms of CSS’ advanced selector functionality. Stuff like:

p:first-child

p:first-child:first-letter

p:first-child:after

p:first-child:first-line

Plus lots of other stylistic tricks that require CSS3 support in order to display as intended. Fortunately, most of the browsers to which I am catering with this new design have no problems with most of the advanced stuff. Of course, Internet Explorer chokes on just about everything, but fortunately IE’s proprietary conditional comments make it easy to fix things up with some “special” styles:

Bam, just like that. In each of these stylesheets, I essentially “undo” all of the cool CSS effects that modern browsers get, including some crafty
treatments that you are hopefully enjoying ;) Notice that we can specify an additional/alternate stylesheet for any version of IE. For the Serious theme, I provide around 20 remedial rules for IE 6, 7, and 8. Once IE 9 is released, we’ll need four additional stylesheets. Moving on..

So that takes care of Microsoft, but there are still other browsers to consider. I designed the new Serious theme to look perfect in the latest version of Firefox (3.5), which uses a different rendering engine than Safari, Opera, and Chrome. Fortunately, I didn’t need to change much for older versions of Firefox, but some of the other modern browsers required a few tweaks to get things looking just right. To do this, I could have used a bunch of ugly CSS hacks, but there are too many risks and “gotchas” when it comes to differentiating between Safari and Opera, for example. So I decided to keep things as simple and specific as possible. Here’s how I did it..

Really Simple Browser Detection for Modern Browsers

Before getting into it, let me just acknowledge that browser detection should only be used as a last resort. If you can design a site without needing any hacks or alternate presentational trickery, then good for you, no browser detection needed. When it comes to pushing the envelope and trying new things, however, you’ll almost always find presentational discrepancies in modern browsers. In any case, it turns out that I do feel as if browser detection was the ideal solution for the new design, mostly due to the fact that the modifications were few and fairly cosmetic in nature, so no big deal if JavaScript is not available to the user.

Basically, I want to apply an additional stylesheet to each of the modern browsers. To do this with IE, conditional comments work perfectly. I almost wish that every browser included some sort of conditional-comment functionality. It would make all this browser-detection stuff unnecessary. In any case, here is a list of browsers that I want to target with CSS (in no particular order):

Camino

Chrome

Opera

Safari

For these four browsers, I created four unique stylesheets and then conditionally link to them with a few snippets of jQuery:

Basically, each of these snippets tests the client’s user-agent string and writes a to any matching stylesheet. Of course JavaScript is required on the user’s browser, so it’s best not to use this technique for anything beyond minor cosmetic enhancements.

As for the code itself, I am know there are more elaborate ways of sniffing and detecting browsers, but I wanted to keep things as simple as possible. Also, this code could also be simplified to exist within a single

And of course, you aren’t limited to the browsers specified here. You could easily target another by emulating the pattern according to the user-agent or name of the additional browser. For example, we could add a custom stylesheet for the Flock browser like so:

Finally, because this is JavaScript, I place this block of code at the end of my XHTML document, just before the closing element. It could just as easily be argued that this code should be placed in the document because it’s ultimately referring to CSS, but I will leave it up to you to decide for yourself.

Update: in the comments, Gustavo informs us that, as of jQuery 1.4, the $.browser variable is replaced by $.support. So if you’re using jQuery 1.4 or better, you’ll need adjust the code accordingly. Here is an example showing how this would look for the Flock browser:

Copyright2010PerishablePress

Source: Perishable Press
Take your WordPress skills to the next level with Digging into WordPress!
Related articles

Perishable Press Quintessential Screenshot Gallery

Perfect Rounded Corners with CSS

Should We Support Old Versions of Good Browsers?

How to Deal with IE 6 after Dropping Support

Keep it Dark: Hiding and Filtering CSS

Maximum and Minimum Height and Width in Internet Explorer

Absolutely Fabulous Browser Bookmarklet Things

The New Clearfix Method

Jeff Starr — Mon, 07 Dec 2009 05:47:46 +0000

Say goodbye to the age-old clearfix hack and hello to the new and improved clearfix method..

The clearfix hack, or “easy-clearing” hack, is a useful method of clearing floats. I have written about the original method and even suggested a few improvements. The original clearfix hack works great, but the browsers that it targets are either obsolete or well on their way. Specifically, Internet Explorer 5 for Mac is now history, so there is no reason to bother with it when using the clearfix method of clearing floats.

The original clearfix hack looks something like this:

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .clearfix { display: inline-table; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide from IE-mac */

Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done. The logic behind this hack goes something like this:

Target compliant browsers with the first declaration block (if all browsers were standards-compliant, this would be the only thing needed) and create a hidden clearing block after the content of the target element.

The second declaration applies an inline-table display property, exclusively for the benefit of IE/Mac.

At this point, we use the comment-backslash hack to hide the remainder of the rules from IE/Mac. This enables us to do the following:

Apply a 1% height only to IE6 to trigger hasLayout (which is required for the hack to work)

Re-apply display:block to everything except IE/Mac

The last line is a comment that serves to close the hack for IE/Mac

As you can see, that’s a lot of fuss over a browser that has been dead for at least the last three or four years. Nobody uses IE/Mac anymore, so it is time to drop it from the clearfix hack. The result is a much cleaner and more efficient slice of CSS:

/* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */

Stripping out that IE/Mac cruft cleans things up real nice. Notice that we have further improved the clearfix hack by adding support for IE7. Neither IE6 nor IE7 support the :after pseudo-class used in the first declaration, so we need an alternate method of applying the clearfix. Fortunately, applying zoom:1 to either browser triggers IE’s proprietary hasLayout mechanism, which works just fine to clear the float. For expediency’s sake, we accomplish this with a couple of valid browser-specific selectors, but you should be advised that conditional comments are the recommended way to go.

Fortunately, IE8 supports the :after pseudo-class, so this new clearfix method will only become more simplified as IE6 and, eventually, IE7 finally die off.

Bottom line: The new clearfix method applies clearing rules to standards-compliant browsers using the :after pseudo-class. For IE6 and IE7, the new clearfix method triggers hasLayout with some proprietary CSS. Thus, the New Clearfix method effectively clears floats in all currently used browsers without using any hacks.

Copyright2010PerishablePress

Source: Perishable Press
Take your WordPress skills to the next level with Digging into WordPress!
Related articles

Lessons Learned Concerning the Clearfix CSS Hack

Keep it Dark: Hiding and Filtering CSS

Series Summary: Obsessive CSS Code Formatting

CSS Hack Dumpster

Crazy CSS Underline Effects

Theme Edits for IE7

Maximum and Minimum Height and Width in Internet Explorer

Stupid WordPress Tricks

Jeff Starr — Tue, 01 Dec 2009 18:35:57 +0000

One of the most popular articles here at Perishable Press is my January 2005 post, Stupid htaccess Tricks. In that article, I bring together an extensive collection of awesome copy-&-paste HTAccess code snippets. Four years later, people continue to tell me how much they enjoy and use the content as a bookmarked reference for many of their HTAccess needs. The article was even published in a book on Joomla! Security.

This is very inspiring to me, so I have decided to create a similar post for all of the useful WordPress code snippets, tips and tricks that I have collected while working on Digging into WordPress, the new book by co-author Chris Coyier and myself that really “digs in” to all of the awesome ways to get the most out of WordPress. While writing the DiW book, I collected hundreds of incredibly useful WordPress tips and tricks. After packing the book with as many of these techniques as possible, I decided to share the “best of the rest” here at Perishable Press.

If you are one of the millions of people who use WordPress, this article will help you improve the appearance, functionality, and performance of your WordPress-powered websites. Each of these “stupid WordPress tricks” is presented as clearly and succinctly as possible, including as many notes, instructions, and pointers as needed for successful implementation. Of course, keep in mind that we are only scratching the surface here. For a much more complete resource that is packed with tons of tasty techniques, you need to get Digging into WordPress.

So now, without further ado, here is my personal collection of easy-to-use, copy-&-paste WordPress tricks. Enjoy! :)

Table of Contents

WordPress Shortcodes

WordPress Permalinks Outside of the Loop

Custom Message to Returning Visitors

Recently Updated Posts and Pages

Custom Content to Search Engine Visitors

Last Modified Time and Date for Posts

Display Total Number of Trackbacks and Pingbacks

Display Recently Registered Users

List all of Your Site’s Posts

List WordPress User Information

Display List of Scheduled Posts

Display Private Posts to Logged-in Users

Display Posts from Exactly One Year Ago

Custom CSS Styles for Recent Posts

New WordPress-2.7 Comments Loop

Backwards-Compatible Comment Templates

Disable WordPress Post Revisions

Limit WordPress Post Revisions

Remove WordPress Post Revisions from the Database

Reduce Comment Spam by Blocking No-Referrer Requests

Prevent Google Analytics from Tracking Admin Pages

Meta Descriptions without a Plugin

Differentiate Between Posts Depending on Presence of Excerpt

Modify the wp_options Table via the WordPress Admin

Alternate Comment Styles

Automatically Remove Code Mistakes in Posts

Automatically Disable Comments and Trackbacks in Old Posts

Access Post Data Outside the Loop

Display Posts for a Specified Time Period

Unique Single Post Templates for Different Categories

Display Performance Statistics for WordPress Pages

Custom Post Thumbnails in Two Steps

Highlight Author Comments

Easy Random Posts

Display Dates for Groups of Posts

Display a Sticky Post in the Sidebar

Display Latest Comments without a Plugin

Display Most Commented Posts without a Plugin

Change Permalinks from Date-Based to Post-Date Only

Test for Sub-Pages

Multiple Widgetizable Sidebars

Remove Fancy Quotes from Comments

Display a List of All Untagged Posts

Easy Display of Custom Headers, Footers, and Sidebars

A Better Way for Users to Logout

Display a Custom Message on a Specific Date

Display Three Columns of Posts

Disable WordPress Search Functionality

Display Posts with Specific Custom Fields

How to Number Your Comments, Pingbacks, & Trackbacks in 2.7+

How to Number Your Comments Using the Classic Loop

Invite Readers to Comment via Feed

Display the Total Number of Users for Your Blog

Automatically Insert Content into Your WordPress Post Editor

How to Prevent Duplicate Content

Conditionally Display Full Posts or Excerpts

Display Related Posts without a Plugin

Drop-Dead Easy Styles for Author Comments

Display Posts Upcoming Scheduled Posts

Display Automatic TinyURLs for Your Posts

Implement a Site-Maintenance Page for Your Blog

Display the First Image from Each of Your Posts

Display Most Popular Posts without a Plugin

Automatically Highlight Search Terms

Automatically Disable Widgets

Display All Images from Your Post Content

Display Category List in Two Columns

Show Ads or Other Content Only in the First Three Posts

A Better Way to Display Recent Comments without a Plugin

Selectively Disable Automatic Post Formatting

Browser Detection via WordPress’ body_class Function

Get Post or Page Contents as a PHP Variable

Simple Example of How to Use WordPress Cron

Add More Default Avatar Choices to the WordPress Admin

Add a Private Page to Your Navigation Menu

How to Add Additional Links to wp_list_pages

WordPress Shortcodes ^↑

Save time by replacing your most commonly typed words and phrases with WordPress shortcodes. For example, if you are frequently typing your blog’s URL, you could place the following code your theme’s functions.php file:

function shortURL() { return 'http://perishablepress.com/'; } add_shortcode('myurl', 'shortURL');

Now whenever I write a post via “HTML-mode”, all I need to include my blog’s URL is type “[myurl]”. Works great in WordPress 2.5 or better.

Shortcodes with Attributes
To create a shortcode for links, we need to include the href attribute information as well as the anchor text for the link itself. We can do this by placing this function in your theme’s functions.php file:

function shortLink($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' // default URL ), $atts)); return ''.$content.''; } add_shortcode('link', 'shortLink');

Then, when creating a post, emulate the following format to include any links you wish:

[link href="http://perishablepress.com/"]Perishable Press[/link]

..which will output the following code:

Perishable Press

When the href attribute is removed from the shortcode, the default URL will be used. You may specify the default URL in the third line of the funtion (see comment).

Source: Digging into WordPress

Display WordPress Permalinks Outside of the Loop ^↑

Normally, permalink display via the_permalink() requires the loop. To display permalinks outside of the loop, we may use either of the following methods:

Permalink Permalink

Source: Julien Chauvin

Display Custom Message to Returning Visitors ^↑

We can greet returning commentators with a custom message by extracting their information from the comment cookie left on their machine. Place the following code into the desired location in your theme and customize the message and markup to whatever you wish:

Source: ifohdesigns

Display Recently Updated Posts and Pages ^↑

Easily display a list of recently updated posts by placing the following code into the desired location in your theme:

get_results("SELECT ID, post_title FROM $wpdb->posts WHERE post_status = 'publish' AND post_modified_gmt < '$today' ORDER BY post_modified_gmt DESC LIMIT $number")): ?> post_title == '') $post->post_title = sprintf(__('Post #%s'), $post->ID); echo ''.the_title().''; } ?>

Of course, customize the details as necessary and remember to set the number of posts via the “$howMany” variable.

Source: Corey

Display Custom Content to Search Engine Visitors ^↑

Display custom content to your search-engine traffic by placing the following code into your theme’s functions.php file:

After checking and editing the $SE array with the search-engine referrer information of your choice, place this next chunk of code into the desired display location in your theme file(s):

Add whatever content or code you wish to the specified area and enjoy targeted delivery to search-engine visitors only.

Source: Stephen Cronin

Display Last Modified Time and Date for Posts ^↑

Display the “last-modified” time for your posts by placing this code anywhere within the loop:

Posted on

Source: Kyle Eslick

Display Total Number of Trackbacks and Pingbacks ^↑

Display the trackback/pingback count for each of your posts by first placing this code into your theme’s functions.php file:

function comment_count() { global $wpdb; $count = "SELECT COUNT(*) FROM $wpdb->comments WHERE comment_type = 'pingback' OR comment_type = 'trackback'"; echo $wpdb->get_var($count); }

And then call the number for display anywhere in your theme by adding this code to the desired location:

Alternately, in WordPress 2.7, you may display the total number of comments by inserting this code directly into your comments.php template:

Edit the markup as desired. Will display “” or “”, depending on the number of comments.

Source: WPengineer.com

Display Recently Registered Users ^↑

Quick and easy method for displaying a list of recently registered users. Place the following code directly into your theme, wherever you would like to display the list:

get_results("SELECT user_nicename, user_url FROM $wpdb->users ORDER BY ID DESC LIMIT 5"); foreach ($usernames as $username) { echo ''.$username->user_nicename.""; } ?>

As-is, this code will spit out the five most recent registered users. This is easily changed to whatever number you wish by simply editing the number “5” in the first line.

Source: WPRecipes.com

List all of Your Site’s Posts ^↑

If the default wp_get_archives(type=postbypost&limit=) function doesn’t provide enough flexibility to meet your needs, here is another way to list all of your site’s posts:

:

In place, that code will display a list of all of your blog’s posts. As a bonus, you may use any of the applicable parameters available to the get_posts() function to do just about anything you need with your posts list.

Source: WPRecipes.com

List WordPress User Information ^↑

Here is an easy way to display flexible lists of your blog’s registered users’ information. In this example, we will list the first and last name of each user registered in the database:

get_col($wpdb->prepare("SELECT $wpdb->users.ID FROM $wpdb->users ORDER BY %s ASC", $szSort)); foreach($aUsersID as $iUserID) : $user = get_userdata($iUserID); echo ''.ucwords(strtolower($user->first_name.' '.$user->last_name)).''; endforeach; ?>

The following variables may be used to display different types of user information and also to specify the sort order of the output list:

ID — User ID number

user_login — User Login name

user_nicename — nice version of login name

user_email — User Email Address

user_url — User Website URL

user_registered — User Registration date

To display any of these different types of user information, call it with $user->name_of_the_column anywhere within the function’s foreach() loop. To change the display order of the output, use any of the above as the value of the $szSort variable in the first line of the function. Note that strtolower and ucwords are used to ensure proper capitalization of the user names.

Source: Matt Varone

Display List of Scheduled Posts ^↑

Got scheduled posts? Cool. Here’s how to display them to your readers:

have_posts()) { while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>

Place that code in the desired location of your WordPress template and display a list of scheduled posts to your readers. To change the total number of displayed posts, edit the showposts=5 parameter to any number you wish. You may also use other parameters available to the WP_Query() function to further customize the output.

Source: Pascal Birchler

Display Private Posts to Logged-in Users ^↑

To display private posts to your logged-in users, you will need to add a custom field called “private” for each private post and give it a value of “true”. Then, replace your default WordPress loop with the following:

This custom loop will check each post for the presence of a custom-field value of true. For each post that has this value, the loop will then check to see if the user is logged into your site. If the user is in fact logged in, the loop will display the private post(s). Public posts will be displayed as usual and regardless of whether the user is logged in or not.

Source: Digging into WordPress

Display Posts from Exactly One Year Ago ^↑

Use this code to display posts that are exactly one year old:

To display posts from different days or different years, edit the two variables in the beginning of the method.

Custom CSS Styles for Recent Posts ^↑

Use some custom CSS styles to highlight your recent posts. To do this, replace your existing loop with the following:

$currentdate = date('Y-m-d',mktime(0,0,0,date('m'),date('d'),date('Y'))); $postdate = get_the_time('Y-m-d'); if ($postdate == $currentdate) { echo '
'; } else { echo ''; } ?>

This new loop will check the date of each post and include a CSS class of “new” to any post published within the previous 24-hour time period. Once the new post class is included, you may style it with some custom CSS such as the following:

.post{ /* styles for all posts */ } .post.new { /* styles for new posts */ }

Source: Fred jaillet [via] WPRecipes.com

New WordPress-2.7 Comments Loop ^↑

Due to the changes made to comment-related functions in WordPress 2.7, you will need to upgrade your comments template in order accomodate for the new functionality. The major changes are the new wp_list_comments() function and the next/previous_comments_link() functions. Here is an example comments.php loop to get you started:

comment_status) : ?> Comments are open, but there are no comments. Comments are closed, and there are no comments.

As you can see, we are now using the wp_list_comments() function as the method by which our individual comments are displayed. This function wraps each comment with a set of
elements, but this may be changed via customized parameters. We are also using the next/previous_comments_link() functions to accommodate the new built-in paged comments feature.

Source: Digging into WordPress

Backwards-Compatible Comment Templates ^↑

The easiest way to accommodate for both old (pre-2.7) and new (2.7+) WordPress comment loops is to create two different versions of the comments template and then use some conditional logic to process the correct file. Place the 2.7-compatible code from the previous section into your default comments.php file, and then place your existing (pre-2.7) comments code into a file called legacy-comments.php. Once you have both of these files setup and included among your theme files, place the following function in your theme’s functions.php file:

This code will then check for the presence of the new wp_list_comments() function. If it exists, then the version of WordPress is at least 2.7, and the default comments.php file will be used. If the new function doesn’t exist, we have a dinosaur on our hands and so the legacy comments file will be used instead.

Source: Justin Tadlock

Disable WordPress Post Revisions ^↑

One of the new features rolled out in WordPress 2.6 involved post revisions. Revisions are a way for users to keep a working collection of each different version of a post and then revert back to it in the future if necessary. Some people think this is the greatest thing since lightsabers, others (such as myself) find it to be a royal pain in the database. It convolutes the Admin area, gobbles up disk space, and usually doesn’t work as intended. Fortunately, we can disable this amazing new “feature” (which should NOT have been included in the core) by adding the following line to the wp-config.php file:

/* disable post-revisioning nonsense */ define('WP_POST_REVISIONS', FALSE);

Just place that line above the “Happy blogging” comment and say goodbye to needless revisioning bloat.

Source: Digging into WordPress

Limit WordPress Post Revisions ^↑

If you like the idea of WordPress-2.6’s new post-revisioning feature, but don’t want thousands of extra records bloating up your database, here is an easy way to limit the total number of revisions that WordPress is allowed to keep. This code will instruct WordPress to keep only the most recent “x” number of revisions:

/* limit number of post revisions */ define('WP_POST_REVISIONS', 3);

Place that line above the “Happy blogging” comment in the wp-config.php file and enjoy conserved disk space and less Admin clutter. Change the number “3” to any number you wish. Works a treat.

Source: Digging into WordPress

Remove WordPress Post Revisions from the Database ^↑

In line with the previous two sections, here we will remove all existing post revisions from the WordPress database. This is useful if you have disabled the post-revisioning feature or perhaps even reduced the total number of allowed revisions. The easiest way to do this is to run the following SQL command via your favorite database interface (such as my personal favorite, phpMyAdmin):

DELETE a,b,c FROM wp_posts a LEFT JOIN wp_term_relationships b ON (a.ID = b.object_id) LEFT JOIN wp_postmeta c ON (a.ID = c.post_id) WHERE a.post_type = 'revision';

Note that if you have changed the default WordPress database table prefix to something other than “wp_”, you will want to edit the command to reflect the correct prefix information. This information is available in your site’s wp-config.php file. Also note that you should backup your database before casting any SQL spells on it.

Upon successful execution of the above command, all data associated with post revisions will be removed the database. This includes the post revisions themselves and all the meta data associated with each revision.

Credit: Andrei Neculau

Reduce Comment Spam by Blocking No-Referrer Requests ^↑

As explained in my article, denying access to no-referrer requests, you can greatly reduce the number of spam comments by eliminating all direct requests for your blog’s comments-post.php file. This will block automated spam scripts from bypassing your comments form by hitting the comment processing script directly. Here are two ways to block no-referrer comment requests, one uses HTAccess and the other uses PHP. Here is the HTAccess method:

RewriteEngine On RewriteCond %{REQUEST_METHOD} POST RewriteCond %{REQUEST_URI} .wp-comments-post.php RewriteCond %{HTTP_REFERER} !domain.tld [OR] RewriteCond %{HTTP_USER_AGENT} ^$ RewriteRule (.*) http://%{REMOTE_ADDR}/$ [R=301,L]

Place that code in your site’s root HTAccess file and edit the “domain.tld” to match your own domain. Once in place, this code will redirect any request for your blog’s comments-post.php file that didn’t originate from your site back to the URL from whence it came.

This may also be accomplished via PHP. Place the following function in your theme’s functions.php file:

function check_referrer() { if (!isset($_SERVER['HTTP_REFERER']) || $_SERVER['HTTP_REFERER'] == '') { wp_die(__('Please do not access this file directly.')); } } add_action('check_comment_flood', 'check_referrer');

Source: Perishable Press

Prevent Google Analytics from Tracking Admin Pages ^↑

This handy snippet will prevent Google Analytics from tracking your Admin pages or anything else that you wish. Replace your default Google Analytics code with the following:

/* Google Analytics Code */

This code will then include your Google Analytics code only on non-Admin pages. This in turn will prevent Google Analytics from gathering statistics about your Admin pages. Note that the basic functionality of this method is great for restricting just about anything — scripts, markup, content — to logged-in administrators.

Meta Descriptions without a Plugin ^↑

We don’t need no stinkin’ plugin for custom meta descriptions. All you need is a custom field named “metadescription” with the desired meta description for each post. Once you have that going, include the following function to your theme’s header.php file (within the section:

This function enables you to customize the descriptions for various types of pages, such as the home page, category pages, tag archives, and so on. For single post-view pages, this function will display the value of the metadescription custom field.

Source: Malcolm Coles

Differentiate Between Posts Depending on Presence of Excerpt ^↑

Here is a quick conditional snippet that displays different content depending on the presence of an excerpt:

post_excerpt)) { // this post has an excerpt, so display it: the_excerpt(); } else { // this post has no excerpt, so display something else instead: the_content(); } ?>

Placed inside the loop, this code will check each post for an excerpt. If one is found, the excerpt is displayed; otherwise, the code specified in the else condition is displayed.

Modify the wp_options Table via the WordPress Admin ^↑

As you probably know, the wp_options table stores a great deal of useful information, including everything from custom-field values, plugin settings, blog information, and much more. If any table in the WordPress database needs its own friendly user-interface, this would be it.

Normally, you would access the wp_options table using a database interface such as phpMyAdmin. This certainly works, but there is a much easier way to work with the options table, especially if you are already logged into WordPress. Once logged in to the Admin area, navigate to the following URL:

http://domain.tld/wp-admin/options.php

This will open a “secret” Admin page that provides editable options fields for every record in the wp_options table. Bookmark this page, and save yourself a trip to phpMyAdmin!

Source: Digging into WordPress

Alternate Comment Styles ^↑

Alternating comments for old versions of WordPress (pre-2.7)
This is one of the oldest tricks in the book, but it is still a favorite. Alternating comment styles is a great way to enhance usability and add some stylistic flair to your comments display. The trick is to add an alternating set of classes — odd or even — to the containing element of each comment. While there are many ways to do this, here is one of the easiest. Open your comments.php and modify the comments loop as follows:

>

With that code in place, your comments will now have alternating CSS classes with which to apply custom styles to your oddly and evenly numbered comments:

.odd { background: white; color: black; } .even { background: black; color: white; }

Alternating comments for old versions of WordPress (pre-2.7)
In WordPress 2.7 and better, comments automagically include “odd” and “even” classes for oddly and evenly numbered comments, respectively. This makes it a snap to throw down your own custom CSS styles for each of these classes.

Credit: WordPress Garage

Automatically Remove Code Mistakes in Posts ^↑

Here is a handy trick that will automatically remove basic mistakes in XHTML markup, such as empty paragraphs, inline font styles, and more. Place this function in your functions.php file:

function clean_bad_content($bPrint = false) { global $post; $szPostContent = $post->post_content; $szRemoveFilter = array("~]*>\s? ~", "~]*>\s?~", "~]*>~", "~<\/font>~", "~style\=\"[^\"]*\"~", "~]*>\s?~"); $szPostContent = preg_replace($szRemoveFilter, '', $szPostContent); $szPostContent = apply_filters('the_content', $szPostContent); if ($bPrint == false) return $szPostContent; else echo $szPostContent; }

Once in place, use the following function call to display your “cleaned” content in the loop:

Note that the clean_bad_content() accepts a boolean argument (true or false) specifying whether or not to print the function output.

Credit: Matt Varone

Automatically Disable Comments and Trackbacks in Old Posts ^↑

Here is yet another method for auto-disabling comments and trackbacks on old posts. This function automatically closes comments and trackbacks after the specified number of days. Add the following to your functions.php file:

posts; $age = '21 DAY'; $date = $wpdb->get_var("SELECT DATE_ADD(DATE_SUB(CURDATE(), INTERVAL $age), INTERVAL 1 DAY)"); $wpdb->query("UPDATE $tableposts SET comment_status = 'closed' WHERE comment_status = 'open' AND post_status = 'publish' AND post_date < '$date'"); } function autoclose_trackback() { global $wpdb, $tableposts; if (!isset($tableposts)) $tableposts = $wpdb->posts; $age = '21 DAY'; $date = $wpdb->get_var("SELECT DATE_ADD(DATE_SUB(CURDATE(), INTERVAL $age), INTERVAL 1 DAY)"); $wpdb->query("UPDATE $tableposts SET ping_status = 'closed' WHERE comment_status = 'open' AND post_status = 'publish' AND post_date < '$date'"); } add_action('publish_post', 'autoclose_trackback', 7); add_action('edit_post', 'autoclose_trackback', 7); add_action('delete_post', 'autoclose_trackback', 7); add_action('comment_post', 'autoclose_trackback', 7); add_action('trackback_post', 'autoclose_trackback', 7); add_action('pingback_post', 'autoclose_trackback', 7); add_action('edit_comment', 'autoclose_trackback', 7); add_action('delete_comment', 'autoclose_trackback', 7); add_action('template_save', 'autoclose_trackback', 7); add_action('publish_post', 'autoclose_comments', 7); add_action('edit_post', 'autoclose_comments', 7); add_action('delete_post', 'autoclose_comments', 7); add_action('comment_post', 'autoclose_comments', 7); add_action('trackback_post', 'autoclose_comments', 7); add_action('pingback_post', 'autoclose_comments', 7); add_action('edit_comment', 'autoclose_comments', 7); add_action('delete_comment', 'autoclose_comments', 7); add_action('template_save', 'autoclose_comments', 7); ?>

Once in place, you may change the number of days allowed for comments and trackbacks to stay open by editing the two instances of the $age variable to whatever you wish. No other editing or code is required for this function to operate effectively. The function is executed automatically upon various posting actions. Note that this function is included in newer versions of WordPress (2.7 or better), and is therefore only required for older versions.

Source: WP Engineer
Plugin: Autoclose

Access Post Data Outside the Loop ^↑

The easiest way to access and display post data outside of the loop is to use the built-in WordPress core function get_post(); however, for more control over the process, check out this nifty little function from WP Recipes:

function get_post_data($postId) { global $wpdb; return $wpdb->get_row("SELECT * FROM $wpdb->posts WHERE ID=$postId"); }

Place this function in your functions.php and then add this code to the desired location outside of the loop:

post_date; // post date echo $data->post_title; // post title echo $data->post_content; // post content echo $data->comment_count; // comments number ?>

For the argument of the function, specify the post ID for which you would like to display data. The function will return an array containing all of the available fields for the specified post (post_title, date, content, author_id, post_id, etc).

Display Posts for a Specified Time Period ^↑

Here is an easy way to create posts that will only be displayed for the duration of a specified time period. Replace your current loop with the following:

$expirationtime = get_post_custom_values('expiration'); if (is_array($expirationtime)) { $expirestring = implode($expirationtime); } $secondsbetween = strtotime($expirestring)-time(); if ($secondsbetween > 0) { ?>

And then add a custom field named “expiration” to any post that needs an expiration date. For the value of the expiration key, specify the date/time in the following format: mm/dd/yyyy 00:00:00. Each post that contains such a custom field will expire after the specified date and time and will no longer appear in the loop.

Unique Single Post Templates for Different Categories ^↑

Here is an easy way to display custom post styles depending on the post’s category. With the following code, each single-view post will be displayed according to a template that is specific to the post’s category:

post; if (in_category('1')) { include(TEMPLATEPATH.'/single-01.php'); } elseif (in_category('2')) { include(TEMPLATEPATH.'/single-02.php'); } else { include(TEMPLATEPATH.'/single-default.php'); } ?>

This code should be placed in your theme’s single.php file. As written, this code will display posts from the first category with the single template, “single-01.php”; also, posts from the second category will be displayed with a single template named “single-02.php”; finally, all other posts will be displayed via the default single template, “single-default.php”. Of course, you will want to customize the category IDs according to your own needs, and also you will want to create the customized single files as they are called. That’s all there is to it.

Having said that, here is an alternate version of the custom-post-template script:

term_id}.php")) return TEMPLATEPATH . "/single-{$cat->term_id}.php"; } return $t;')); ?>

Placed in your theme’s functions.php file, this alternate script checks all categories for the presence of a custom single template. Any category with a custom single-post template will then have its posts displayed with that template. If a post’s category does not feature a custom template, the default single.php template will be used. Note that this code will use the template for the first listed category of each post. Even so, you should only create custom post templates for categories that will always be mutually exclusive. That is, make sure that your posts aren’t in more than one custom-templated category.

Source: Austin Matzko

Display Performance Statistics for WordPress Pages ^↑

Everyone is familair with the following information:

These statistics are usually seen in the footer area of individual pages and serve as a general indicator of performance. The “queries” refer to the number of times WordPress requested information from the database, while the number of seconds indicates the amount of time required for Apache to generate the page. This information is generated by including the following code in your footer template file (or wherever you would like):

Or, if you don’t like the idea of sharing this information with the entire world, you can limit its display to logged-in administrators only:

'; } ?>

Easy breezy beautiful!

Source: Digging into WordPress

Custom Post Thumbnails in Two Steps ^↑

Alright, kids. Time for the ‘ol three-step custom-field tutorial. This time we’re going to implement post thumbnails. You know, representative images for each of your posts that may be displayed anywhere you wish, including outside of the flow of post content, and even outside of the loop. This is a great trick for advanced page layouts. Ready? Sharpen your keystrokes!

Step 1:
Open your write panel and create a key called “thumbnail”. Then, for the value of the “thumbnail” key, enter the URL of the thumbnail image for that particular post. Write the post and then publish it as normal. Wash, rinse, repeat to get a nice collection of posts with thumbnails. Or, go back to exisiting posts and add a thumbnail as we have just described.

Step 2:
Open your theme template file containing the loop and add the following code to the location where you would like the post thumbnail images to appear:

ID, 'image', true); if ($thumbnail) { ?> " alt="" width="100" height="100" />

That’s it! Don’t forget to edit the width and height attributes of the element to account for the proper image size.

Source: Perishable Press

Highlight Author Comments ^↑

Make your author comments look fabulous darling! Newer versions of WordPress come equipped with a specific “author” class that may be targeted with the CSS of your choice. For older versions of WordPress, however, you will need to add the custom class attribute with a little PHP magic.

First, open your theme’s comments.php template and add the following code snippet in the (X)HTML element that contains the comment information:

comment_author_email == "email@domain.tld") echo ' class="author"'; ?> id="comment-"> . . .

After changing the email address to that of your own (i.e., the one used for your WP Admin user profile), style it up with a little CSS:

.author { background: red !important; color: yellow !important; }

You probably don’t want your author comments to appear with yellow text on a red background, but you get the idea. Anything is possible.

For blogs with multiple authors, you can style each of their comments differently as well by using something like this:

comment_author_email == "email-01@domain.tld") echo ' class="author-01"'; elseif ($comment->comment_author_email == "email-02@domain.tld") echo ' class="author-02"'; elseif ($comment->comment_author_email == "email-03@domain.tld") echo ' class="author-03"'; ?> id="comment-"> . . .

Replace each of the email addresses with those of the various authors. Style to taste.

Credit: Nyssa Brown

Easy Random Posts ^↑

Newer versions of WordPress enable easy randomizing of posts by using the (relatively) new “orderby=rand” parameter in any query_posts loop:

But for older versions of WordPress, this randomizing functionality must be added manually. Here is a quick and painless plugin that will enable you to randomize post queries in older versions:

Once activated, invoke the randomness by adding the “random=true” parameter in your query_posts loop:

Here, we are specifying “cat=11” for the category and “showposts=11” for the number of posts to display. There are many other parameters available as well, so knock yourself out.

Credit: rembem

Display Dates for Groups of Posts ^↑

In order to display the date that a post was published, you have two options:

— displays the date for each and every post

— displays the date only once for each group of posts published on a certain day

So, if you want to list the post date next to each post, use the the_time(). If, on the other hand, you have multiple posts on any given day, use the_date() to list the post date only once for each days’ posts. Something like this:

// the_time(); Jan 01, 2009 - Post #1 Jan 01, 2009 - Post #2 Jan 01, 2009 - Post #3 Jan 02, 2009 - Post #4 Jan 02, 2009 - Post #5 Jan 02, 2009 - Post #6 Jan 03, 2009 - Post #7 Jan 03, 2009 - Post #8 Jan 03, 2009 - Post #9 // the_date(); Jan 01, 2009 Post #1 Post #2 Post #3 Jan 02, 2009 Post #4 Post #5 Post #6 Jan 03, 2009 Post #7 Post #8 Post #9

See the difference? Good, because I’m not going to explain the concept any further. Instead, I will move on by showing you how to use either template tag in your loop. This really doesn’t need explaining either, but for the sake of completeness, here it is. First, the_time() tag:

This loop will output the post title, date, and content for every post. Alternately, here is how to use the_date tag:

',' '); ?>

This loop will output the post title and content for every post, and also output the date for each group of posts published on any given day, as explained above. Notice we are adding the paragraph elements for the post date based on whether or not the date is actually output. If it is, then the date will be wrapped in
elements; if it’s not, no
elements will be output, thereby preventing repetitive sets of empty paragraph elements. Make sense? Good. Here are the available parameters for the nifty the_date() template tag:

Source: Devlounge

Display a Sticky Post in the Sidebar ^↑

Here is a juicy little nugget that displays a “sticky” post in the sidebar of your theme:

have_posts()) : $my_query->the_post(); // set expiration time of two days $goAwayDate = time() - (60 * 60 * 24 * 2); // get date of sticky post $postDate = get_the_time('U'); // if post is too old, do nothing if ($postDate < $goAwayDate) { // else show the post } else { ?>

This method employs a second loop to display the sticky post, so it may be placed just about anywhere in your theme’s template files. You can also change the number of days that the post will remain sticky by editing the expiration variable with a number other than "2". For example, to set a duration period of seven days, you would use this:

$goAwayDate = time() - (60 * 60 * 24 * 7);

Credit: The Closet Entrepreneur

Display Latest Comments without a Plugin ^↑

Good rule of thumb when working with WordPress: don’t use a plugin if you can acheive the same functionality without one. Case in point: displaying latest comments on your blog. Sure, you could always install a plugin to do it for you, but you really don’t need to. In fact, it’s actually easier to display recent comments without a plugin. SImply add the following code to the desired location within your theme’s template files:

comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 5"; // NUMBER OF COMMENTS $comments = $wpdb->get_results($sql); $output = $pre_HTML; $output .= "\n"; foreach ($comments as $comment) { $output .= "\n"."ID) . "#comment-" . $comment->comment_ID . "\" title=\"on " . $comment->post_title . "\">" .strip_tags($comment->comment_author) .": " . strip_tags($comment->com_excerpt) .""; } $output .= "\n"; $output .= $post_HTML; echo $output; ?>

This code will display the 5 most recent comments in the following (X)HTML output format:

Comment Author: This is the first 50 characters of the first most recent comment Comment Author: This is the first 50 characters of the first most recent comment Comment Author: This is the first 50 characters of the first most recent comment Comment Author: This is the first 50 characters of the first most recent comment Comment Author: This is the first 50 characters of the first most recent comment

By editing the commented lines in the PHP script, you may specify alternate number of comments and characters.

Source: StylizedWeb

Display Most Commented Posts without a Plugin ^↑

Here is another trick that will enable you avoid yet another needless plugin. This code results in the display of your most-commented posts in list format:

get_results("SELECT comment_count, ID, post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10"); // NUMBER OF POSTS foreach ($result as $topten) { $postid = $topten->ID; $title = $topten->post_title; $commentcount = $topten->comment_count; if ($commentcount != 0) { ?>

This code may be modified to display any number of posts by changing the LIMIT from “10” to whatever you wish. You may also change the display order from DESC (descending order) to ASC (ascending order).

Once in place, this code will display a list of the 10 most-commented posts in the following (X)HTML output format:

Post Title 01 Post Title 02 Post Title 03 . . .

Source: StylizedWeb

Change Permalinks from Date-Based to Post-Date Only ^↑

Here is an HTAccess method for switching your permalinks from the lengthy date-based format (i.e., http://domain.tld/2009/03/03/post-name/) to the concise post-name format (i.e., http://domain.tld/post-name/).

To do so, first login to the WordPress Admin and switch your permalink structure from this:

/%year%/%monthnum%/%day%/%postname%/

..to this:

/%postname%/

This change will ensure that all future posts are located at the new post-name-only URL, but we still need to redirect all requests for existing posts via the old date-based URL format. This is easily accomplished with a single directive in your site’s root HTAccess file:

RedirectMatch 301 /([0-9]+)/([0-9]+)/([0-9]+)/(.*)$ http://domain.tld/$4

And that’s all there is to it! Remember to test vigorously to convince yourself that everything is working properly.

Source: Perishable Press

Test for Sub-Pages ^↑

Until WordPress includes an is_subpage() function, here is a manual method of testing for sub-pages:

post_parent ) { // subpage content goes here } else { // non-subpage content goes here } ?>

Further, here are some other ways to use this method to test for different combinations of pages and sub-pages:

post_parent == '1') { $banner = 'business.png'; } elseif (is_page('archives') || $post->post_parent == '2') { $banner = 'pleasure.png'; } elseif (is_page('contact') || $post->post_parent == '3') { $banner = 'personal.png'; } else { $banner = 'default.png'; } ?>

Note that the numbers “1”, “2”, and “3” represent the IDs of the target parent pages.

Multiple Widgetizable Sidebars ^↑

Instead of using multiple “if” statements to include multiple widgetizable areas, WPEngineer shows us how to do it a better way:

$name, 'before_widget' => '', 'after_widget' => '', 'before_title' => '', 'after_title' => '', )); } } ?>

Source: wpengineer

Remove Fancy Quotes from Comments ^↑

Prevent invalid markup and sloppy code by disabling WordPress’ automatic generation of “fancy” or “curly” quotes where they fail the most: your comments area.

Only one simple line of code is required, placed into your theme’s functions.php file:

remove_filter(’comment_text’, ‘wptexturize’);

Source: WPRecipes.com

Display a List of All Untagged Posts ^↑

Here is an easy way to display a list of all untagged posts. All that’s required is a custom loop and a quick check of the get_the_tags variable. Here is the code to make it work:

Place that snippet into the theme file of your choice and navigate to that page in a browser to see a permlink-linked list of all posts that have not yet been tagged. Even better, next to each post title will be a an easy-access “Edit” link that will make it easy to quickly edit each of your untagged posts and add some tags, if necessary. Nothing on this planet could be easier. Almost.

Easy Display of Custom Headers, Footers, and Sidebars ^↑

WordPress 2.7 includes new functionality that makes it super-easy to include custom headers, footers, and sidebars into your theme. Normally, you include the default files with the following tags:

These will include the files named “header.php”, “sidebar.php”, and “footer.php”, respectively.

Now, to include alternate versions of these files, simply include the name of the file as a parameter in its associated tag. Here is an example that should illustrate the idea:

These will include the files named “custom-header.php”, “custom-sidebar.php”, and “custom-footer.php”, respectively.

We can now use this new functionality to get fine-grained with includes. For example, if we wanted to display a custom footer for the “Bananaz” category, we could use the following code:

Source: WordPress Codex

A Better Way for Users to Logout ^↑

The old way of displaying a “Logout” link for your users looks like this:

Logout

Now, since WordPress 2.7, we can simplify this hodgepodge with a sleeker, cleaner, built-in template tag:

Logout

Sweetness.

Display a Custom Message on a Specific Date ^↑

Using a snippet of PHP, we can display a custom message (or any code, markup, or content) on a specific date:

Today is CSS Naked Day!

You could even use this technique to join in on CSS Naked Day by removing your stylesheet on that day. Simply wrap your CSS as follows:

The possibilities are endless!

Display Three Columns of Posts ^↑

Displaying content in multiple columns is a much sought-after WordPress technique. There are some good tutorials around explaining various ways of doing the job, but this one is perhaps the easiest.

To display your posts in three columns, begin by segmenting your post with some HTML comments:

Lorem ipsum blah blah. This content appears before the three columns. This content will appear in the first column. This content will appear in the second column. This content will appear in the third column.

The next step is to create columns based on the markup comments. Open your theme file and include the following code within the loop:

", $post->post_content); echo $page_columns[0]; // before columns echo ''.$page_columns[1].''; // first column echo ''.$page_columns[2].''; // second column echo ''.$page_columns[3].''; // third column ?>

That’s essentially all there is to it. To get the columns to actually look like columns, add something similar to the following in your CSS file:

/* column structure */ .column { margin-right: 10px; float: left; width: 33%; } /* column styles */ column.first, column.second, column.third {}

The cool thing about this method is that you have full control over the layout of each particular post. Each column may contain as much or as little content as desired, and adding or removing columns is straightforward. Even better is that you can easily remove the column functionality and display your content in a single column by simply removing the custom code from the loop. The post markup consists of HTML comments, so they will be ignored if not acted upon from within the loop.

Source: Enhanced version of krimsly’s technique (via the WP Codex)

Disable WordPress Search Functionality ^↑

Disabling the WordPress search functionality is as simple as adding the following code to your functions.php file:

function fb_filter_query($query, $error = true) { if (is_search()) { $query->is_search = false; $query->query_vars[s] = false; $query->query[s] = false; // to error if ($error == true) $query->is_404 = true; } } if (!is_admin()) { add_action('parse_query', 'fb_filter_query'); add_filter('get_search_form', create_function('$a', "return null;")); }

In place, this code will disable the search form for your theme while leaving search functionality intact for the Admin area. As is, the $error variable is set to TRUE, which causes the function to display the theme’s error page. Setting this variable to FALSE will prevent the error message and keep the user on the same page.

Source: WPengineer

Display Posts with Specific Custom Fields ^↑

Displaying posts that are associated with a certain custom field is as easy as adding an “if” condition to your loop. Here is an example that checks for the presence of a custom field called “name-of-custom-field”. If such a custom field is associated with the post, the entire post is displayed; otherwise, only the excerpt is displayed.

To get more specific and display only posts associated with a custom-field that is set to a certain value, we simply add an additional parameter to the “if” condition:

Using that line of code, we modify our previous loop as follows:

With this code, any post with a custom-field of “name-of-custom-field” that has a specific value of “name-of-value” will be displayed in its entirety. All other posts will be displayed as an excerpt.

Source: Perishable Press

How to Number Your Comments, Pingbacks, and Trackbacks in 2.7+ ^↑

Numbering comments, pingbacks, and trackbacks in WordPress versions 2.7 and greater requires two steps. First, you need to add a couple of parameters to your comments_template tag, which is used to display your comments template and normally located in your single.php file. Edit this tag so that it looks like this:

Once this is in place, you can display the number of your comments, pingbacks, trackbacks, and both using the following tags:

echo count($wp_query->comments_by_type['comment']); // display comment count echo count($wp_query->comments_by_type['pingback']); // display pingback count echo count($wp_query->comments_by_type['trackback']); // display trackback count echo count($wp_query->comments_by_type['pings']); // display pingback and trackback count comments_number('No Responses', 'One Response', '% Responses' ); // display total response count

These tags can be placed anywhere in your comments loop. For more information on how to implement this, check out our in-depth article at Digging into WordPress.

How to Number Your Comments Using the Classic Loop ^↑

Before, WordPress added the new comments API in version 2.7, the “classic” comment-loop mechanism was used. This loop still works in any version of WordPress, and is useful for extreme formatting of the comment display area. Numbering your comments in the classic loop is as easy as it is in the new-fangled loop. Here’s how:

In your comments.php file, add a counter variable ( ) just above the loop’s foreach statement, like so:

Then, to increment the counter variable with each iteration of the loop, we add another snippet just below the foreach line, like so:

Everything is now set. To display the number of comments, simply echo the value of the counter variable anywhere within your comment loop. Here is an example:

There are comments so far!

Source: Digging into WordPress

Invite Readers to Comment via Feed ^↑

Nice little snippet showing how to invite your readers to leave a comment by clicking on a link within your feed. Just add the following code to your theme’s functions.php file:

// comment invite feed link function rss_comment_footer($content) { if (is_feed()) { if (comments_open()) { $content .= 'Comments are open! Add yours!'; } } return $content; }

In place, this function will output a link that says, “Comments are open! Add yours!” This message will be displayed at the end of each post for which comments are open. If comments are closed, no invite message is displayed.

Source: Hendry Lee

Display the Total Number of Users for Your Blog ^↑

Here is a tasty little snippet from WPRecipes that will enable you to display the total number of users for your WordPress-powered blog. All you need to do is place the following code in your theme file(s) where you would like to display your total number of users:

$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users"); echo $users." registered users.";

Source: WPRecipes.com

Automatically Insert Content into Your WordPress Post Editor ^↑

Here is a nice way to automatically insert some custom content into your post editor. This makes it easy to add repetitive content to your posts while retaining the ability to make changes before publishing. To try it out, add the following code to your functions.php file:

Thank you for your generous attention!."; return $content; } add_filter('default_content', 'my_editor_content'); ?>

This code will display a message thanking people for their generous attention, but you can easily edit the message to display whatever content (text/markup) that you wish. After configuring your message, open your WordPress text editor to see the automatically inserted content.

Source: Justin Tadlock

How to Prevent Duplicate Content ^↑

Unless you’re using excerpts for non-single page views, your post content is being displayed in your single pages, date-based archives, category archive, tags archives, author archives, and so on. From an SEO perspective, this “duplicate” content may be detrimental to your search-engine rankings.

To prevent duplicate content, we can conditionally display one of two tags depending on the type of page being displayed. Pages that we want to have indexed in the search engines will display a “meta-index” tag, while duplicate pages will display a “meta-noindex” tag.

To do this, simply add the following code to the section of your theme’s header.php file:

'; } else { echo ''; }

Once in place, this code effectively stops search engines from indexing all types of pages except for single-post, page-page, category-archive, and the first two index pages. These are considered by many to be the most effective pages to have indexed, but feel free to add or remove anything you see fit to customize the technique.

Source: Perishable Press

Conditionally Display Full Posts or Excerpts ^↑

By default, you can either display full-posts or excerpts when displaying your posts. This may be fine for common blogging purposes, but specialized blogs may find it beneficial to exercise control over which type of post format is displayed. Here’s how to conditionally display either full-post or excerpt based on the presence of a custom field named “full-post-display”.

To implement this technique, setup the following loop in your theme file(s):

Then, for any post that you would like to display with full-post formatting, simply add a custom-field of “full-post-display” and give it a value of “true”.

Display Related Posts without a Plugin ^↑

We don’t need no stinking plugins to display related posts! Here’s how to do the job using tags as the associative criteria.

Place the following code in your loop and take a nap or something:

ID); if ($tags) { echo 'Related Posts'; $first_tag = $tags[0]->term_id; $args = array( 'tag__in' => array($first_tag), 'post__not_in' => array($post->ID), 'showposts' => 7, // how many posts? 'caller_get_posts' => 1 ); $my_query = new WP_Query($args); if ($my_query->have_posts()) { ?> have_posts()) : $my_query->the_post(); ?>

Customize as needed. To change the number of posts, edit the line that says, “how many posts?”

Source: Enhanced version of the code provided by MichaelH (via WP Codex)

Drop-Dead Easy Styles for Author Comments ^↑

This is almost too easy. To make your Author comments stand out from the crowd in WordPress 2.7 or better, use this code to apply some custom CSS stylez:

li.bypostauthor { background: red; color: white; } li.byuser { background: white; color: black; }

Display Upcoming Scheduled Posts ^↑

Here’s an easy way to display a list of posts that are scheduled to be published at some point in the future. Create a page called “Upcoming Posts” (or whatever), and use this code for the loop:

Upcoming Scheduled Posts — Nothing new in queue!

In place, this code will output a list of all posts that exist within the database that have a post_status of “future”. I.e., anything that you have setup in draft mode that is set to auto-publish at a certain point in the future.

Display Automatic TinyURLs for Your Posts ^↑

Make it super-easy for your visitors to share the URL of your posts with their favorite social-media service. Providing an alternate “short” version of your URLs is possible using the free TinyURL service and a couple snippets of code.

To display short URLs at the end of your posts, place this code into your theme’s functions.php file:

function getTinyUrl($url) { $tinyurl = file_get_contents("http://tinyurl.com/api-create.php?url=".$url); return $tinyurl; }

Then, call the function and display the URL by placing this code into your single.php file in the desired location within the loop:

ID)); echo 'TinyURL for this post: '.$turl.''; ?>

That’s it! Your posts now feature super-short URLs for all of your tweet-hungry visitors. Tuper Tweet Tude!

Source: Perishable Press

Implement a Site-Maintenance Page for Your Blog ^↑

Ever do maintenance on your site? Certainly, we all do. Here’s an easy way to display a “site-maintenance” page that will display whatever content you desire. The key here is setting up your HTAccess file to handle the redirect properly.

First, you need to create your maintenance page. This can be as simple or as advanced as you would like. At minimum, you could include something like this into a file named “maintenance.html”:

Site Maintenance Please check back in 15 minutes

Then, add this bit of voodoo to your site’s root htaccess file:

# SITE MAINTENANCE PAGE RewriteEngine on RewriteCond %{REQUEST_URI} !/maintenance.html$ RewriteCond %{REMOTE_ADDR} !^111\.222\.333\.444 RewriteRule $/maintenance.html [R=302,L]

Once that’s in place, replace the example IP address with that of your own. Upload to your site and check it out. What you will see is that you have full access to your site, but all other visitors will see the maintenance page.

Once maintenance is complete, simply comment out the code in your htaccess file to allow visitors back into the site.

Source: Catswhocode

Display the First Image from Each of Your Posts ^↑

If your posts include an image that you would like to display as a thumbnail elsewhere on your blog, here is an easy way to do it with no custom fields required. Place the following code into your theme’s functions.php file:

function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('//i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ $first_img = "/images/default.jpg"; // default image } return $first_img; }

Then, to call the function and display the images as thumbnails, place the following code into the desired location within your loop:

That’s all there is to it. If you would like to display a default image for posts that may not have one, specify its path in the code (on the line that says “default image).

Source: WPRecipes

Display Most Popular Posts without a Plugin ^↑

Simple but effective method of displaying your blog’s most popular posts based on comment count. This code snippet may be placed anywhere within your theme’s files (i.e., no loop required). Check it out:

Popular Posts get_results(" SELECT comment_count, ID, post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 7 "); foreach ($result as $post) { setup_postdata($post); $postid = $post->ID; $title = $post->post_title; $commentcount = $post->comment_count; if ($commentcount != 0) { ?> []

Once in place, this code will display the seven most popular posts along with their associated comment count in unordered list format. Customize according to your needs.

Source: ProBlogDesign

Automatically Highlight Search Terms ^↑

Make things easy for people who are searching your site by applying some custom styling to the search terms that are displayed in the search results. A common way to display search terms is with a yellow background so that users can easily identify locations of the text that may apply to their query. It’s all about about usability, and improving the way search results are displayed on your site. Here’s how to do it:

First, replace the the_title() tag in your search.php file with the following:

\0',$title); echo $title; ?>

This will setup styling for search terms located in the title of each result. Then, for the content, replace the the_excerpt() tag in your search.php file with the following:

\0',$excerpt); echo $excerpt; ?>

Finally, open your theme’s CSS file and add some custom styles for the search terms. A great way to highlight each term is to display it in bold text with yellow highlighting. Something like this:

span.search-terms { background: yellow; font-weight: bold; }

That’s all there is to it! Go run a few searches to see it in action.

Source: Enhanced version of code provided by Yoast.com

Automatically Disable Widgets ^↑

Quick tip to disable all widget functionality from your theme. Add the following to your functions.php file and call it done:

Source: Justin Tadlock

Display All Images from Your Post Content ^↑

Want to display all of the images from each of your posts somewhere on your blog? Easy. Check out this code snippet from Matt Varone:

post_content; $szSearchPattern = '~]*\ />~'; // Run preg_match_all to grab all the images and save the results in $aPics preg_match_all($szSearchPattern, $szPostContent, $aPics); // Check to see if we have at least 1 image $iNumberOfPics = count($aPics[0]); if ($iNumberOfPics > 0) { // now here you would do whatever you need to do with the images // for this example the images are just displayed for ( $i=0; $i < $iNumberOfPics ; $i++ ) { echo $aPics[0][$i]; }; }; endwhile; endif; ?>

Just customize the output in the second part of the code (see code comments) and paste the function wherever you would like to display the images. Sweetness.

Source: Matt Varone

Display Category List in Two Columns ^↑

Tired of that boring, single-column category display? Spice things up with a spiffy two-column category list that will get your visitors’ hearts pumping. Let’s deface a WordPress tag, shall we?

See this bad boy:

We’re going to blow it up, divide its contents into two pieces, and spit it all back out as two unordered lists. Impossible, you say? Nah, just a little PHP to make it all go.

Wherever you would like to display your categories in two columns, throw down the following code snippet:

",wp_list_categories('title_li=&echo=0&depth=1&style=none')); $cat_n = count($cats) - 1; for ($i=0;$i<$cat_n;$i++) : if ($i<$cat_n/2) : $cat_left = $cat_left.''.$cats[$i].''; elseif ($i>=$cat_n/2): $cat_right = $cat_right.''.$cats[$i].''; endif; endfor; ?>

Completely awesome. Now let’s add some style to make the columns work:

.right { float: left; width: 140px; } .left { float: left; width: 140px; }

You are all set. You should probably fine-tune this business until it’s all good. You know.

Source: Blog Oh Blog

Show Ads or Other Content Only in the First Three Posts ^↑

Advertising may require you to limit the number of advertisements on your page to three. For some, this is three too many. For others, it’s far too few. Still others feel that it’s just the right amount.

Regardless of your feelings, here is a trick that will enable you to limit the number of posts that displays some specific content — ads, images, scripts, whatever you want. Check out the three indented lines in the following loop:

current_post < 3) { ?>

See what’s happening here. We’ve got a loop, see. In this loop, we specify a condition that says, “if this is one of the first three posts, display this content.” And that’s the magic. Of course, you can use whatever content you would like, and there is nothing special about the number “3” either.

Source: Blog Oh Blog

A Better Way to Display Recent Comments without a Plugin ^↑

Here is a better way to display your recent comments without a plugin. Instead of slapping a bunch of gnarly code into our index.php or sidebar.php file, we are going to slap it right where it belongs: in your theme’s functions.php file.

Here is the code, all exploded for your viewing and analytical pleasure (well, for mine anyway). For a more minified version of this snippet, be sure to check out the source link.

', $post_HTML='') { global $wpdb; $sql = " SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author, comment_date_gmt, comment_approved, comment_type, SUBSTRING( comment_content, 1, $src_length ) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ( $wpdb->comments.comment_post_ID = $wpdb->posts.ID ) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT $src_count "; $comments = $wpdb->get_results($sql); $output = $pre_HTML; foreach ($comments as $comment) { $output .= ''.strip_tags($comment->com_excerpt).'...'; } $output .= $post_HTML; echo $output; } ?>

Ah, it’s a thing of beauty. Once you have that code in place, rock it out anywhere in your theme with this charming little tag:

see also: Display Latest Comments without a Plugin
Source: Blog Oh Blog

Selectively Disable Automatic Post Formatting ^↑

This trick is by far my favorite “stupid WordPress trick.” You know how WordPress likes to mangle HTML comments, empty elements, blockquotes, curly quotes, and other miscellaneous markup elements? Here is a tight little method that will enable you to selectively disable WordPress’ automatic post formatting.

Do this: Place the following code into your theme’s functions.php file:

// disable auto-formatting function my_formatter($content) { $new_content = ''; $pattern_full = '{(\[raw\].*?\[/raw\])}is'; $pattern_contents = '{\[raw\](.*?)\[/raw\]}is'; $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE); foreach ($pieces as $piece) { if (preg_match($pattern_contents, $piece, $matches)) { $new_content .= $matches[1]; } else { $new_content .= wptexturize(wpautop($piece)); } } return $new_content; } remove_filter('the_content', 'wpautop'); remove_filter('the_content', 'wptexturize'); add_filter('the_content', 'my_formatter', 99);

Then do this: Use the [raw] shortcode wherever you would like to disable auto-formatting in your post content. For example, if you wanted to prevent the following sentence from being formatted, you would write this:

[raw]This text will not be automatically formatted.[/raw]

Absolutely brilliant.

Source: WPRecipes

Browser Detection via WordPress’ body_class Function ^↑

WordPress makes it possible to detect a handful of different browsers using a variety of built-in global variables. WordPress also provides a body_class tag that outputs a variety of class attributes depending on various page properties. Why not combine these two techniques so that the user’s detected browser is added to the list of output classes for the body tag? Here’s the code that will do it via functions.php:

// browser detection via body_class function browser_body_class($classes) { global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone; if($is_lynx) $classes[] = 'lynx'; elseif($is_gecko) $classes[] = 'gecko'; elseif($is_opera) $classes[] = 'opera'; elseif($is_NS4) $classes[] = 'ns4'; elseif($is_safari) $classes[] = 'safari'; elseif($is_chrome) $classes[] = 'chrome'; elseif($is_IE) $classes[] = 'ie'; else $classes[] = 'unknown'; if($is_iphone) $classes[] = 'iphone'; return $classes; } add_filter('body_class','browser_body_class');

This code will output the detected browser along with the other body_class tags. Here is an example:

Hooked.

Sources: Nathan Rice

Get Post or Page Contents as a PHP Variable ^↑

Here is a quick snippet for placing all post or page content into a variable. We’re talking the entire page contents here, not just the content of the post. Place this code into your theme’s functions.php file:

// post contents as variable function callback($buffer) { return $buffer; } function buffer_start() { ob_start("callback"); } function buffer_end() { ob_end_flush(); } add_action('wp_head', 'buffer_start'); add_action('wp_footer', 'buffer_end');

Once in place, this function will capture the entire page contents into a variable called “$buffer”. You may then do whatever you wish to this variable. Filter it, match it, slap it around a little and show it who’s boss. That sort of thing.

Source: Dagon Design
See also: Digging into WordPress

Simple Example of How to Use WordPress Cron ^↑

I have been meaning to get into WordPress’ wp-cron functionality, and this looks like a good way to get started with it. This code snippet uses wp-cron to schedule an automatic email that will be sent every hour.

// send automatic scheduled email if (!wp_next_scheduled('my_task_hook')) { wp_schedule_event(time(), 'hourly', 'my_task_hook'); } add_action('my_task_hook', 'my_task_function'); function my_task_function() { wp_mail('you@yoursite.com', 'Automatic email', 'Hello, this is an automatically scheduled email from WordPress.'); }

Of course, this is meant only as an example. The key here is to schedule and event and then hook into it with some specific function.

Source: slaven.net

Add More Default Avatar Choices to the WordPress Admin ^↑

Here is a quick and easy way to add more default avatars to the list of available gravatars in the Settings area of the WordPress Admin. Here is the functions.php code to make it happen:

// add more default avatars to options if (!function_exists('fb_addgravatar')) { function fb_addgravatar($avatar_defaults) { $myavatar1 = get_bloginfo('template_directory').'/images/avatar-01.png'; $avatar_defaults[$myavatar1] = 'dude'; $myavatar2 = get_bloginfo('template_directory').'/images/avatar-02.png'; $avatar_defaults[$myavatar2] = 'geek'; $myavatar3 = get_bloginfo('template_directory').'/images/avatar-03.png'; $avatar_defaults[$myavatar3] = 'cool'; return $avatar_defaults; } add_filter('avatar_defaults', 'fb_addgravatar'); }

See the innermost indented lines of code? There we are specifying three additional default avatars. To use this code, you will need to edit these lines to match your image paths and the name for each avatar. Hopefully the process of editing, adding, or removing avatars is clear. If not, don’t hesistate to speak up in the comments and someone will help you out.

Source: WPEngineer

Add a Private Page to Your Navigation Menu ^↑

By default, any pages that you classify as “Private” are not displayed in the menu generated by the wp_list_pages function. In general this is a good idea, but it might be helpful to include the link if the logged in user is able to read private pages. Fortunately, WordPress has a function that will enable us to do exactly that:

For Authors only

Place this code where you would normally include the wp_list_pages tag and enjoy private-page links displayed in your navigation menus only for those users who are logged in and priviledged enough to see them. The private link will not be displayed for the “ordinary” folk.

Make sure you replace the number “10” in the middle line to match the ID of the private page you would like to include.

Source: WPEngineer

How to Add Additional Links to wp_list_pages ^↑

Here is a nice way to include additional links to the output of the wp_list_pages tag. All that’s needed is the following function in your functions.php file:

// include additional links function add_bookmarks_to_menu($output) { $bookmarks = (array) get_bookmarks('hide_invisible=0&category_name=wp_list_pages'); foreach ($bookmarks as $bookmark) { $output .= "{$bookmark->link_name}\n"; } return $output; } add_filter('wp_list_pages', 'add_bookmarks_to_menu');

Here we are taking advantage of WordPress’ built-in Links/Bookmarks functionality to assign new links to the output of the wp_list_pages tag. Once this code is in place, login to your WordPress Admin and follow these steps for each link that you would like to add to the page list:

In the Admin, go to Links > Add New

Enter a name and URL for your link

Add the link to a new category called “wp_list_pages”

select “Keep this link private”

Click “Add Link”

Done.

Using the “wp_list_pages” category for any/all of our extra links will enable us to include only links from that category. Further, selecting the “Keep this link private” option will prevent the links from being displayed elsewhere in your site (for example, in the Links/Blogroll/Bookmark sections).

Source: sivel.net

“I’ve got blisters on my fingers!”

..as the man once said.

Copyright2010PerishablePress

Source: Perishable Press
Take your WordPress skills to the next level with Digging into WordPress!
Related articles

How to Generate Perfect WordPress Title Tags without a Plugin

Horizontally Sequenced Display Order for WordPress Posts in Two Columns

Secrets of the Conditional Tag Revealed: How to Gain More Control Over Your WP Templates

Fruit Loop: Separate any Number of Odd and Even Posts from any Category in WordPress

Perfect WordPress Title Tags Redux

Import and Display RSS Feeds in WordPress

Display the Total Number of WordPress Posts, Comments, and Categories

Getting Serious with a New Design

Jeff Starr — Mon, 30 Nov 2009 16:17:34 +0000

New design in effect at Perishable Press. It’s sort of a hybrid between some of the things I like about the Quintessential theme and some of the best parts of the subsequent Requiem theme. So this new theme is named Serious because it represents a renewed commitment to design, blogging, and everything I love about working on the Web. While I have everything fresh in my mind, here are some of the highlights of the latest incarnation of Perishable Press..

Focus on content

This is the primary motivation for this new design. My previous Quintessential theme was a colorful, psychedelic, post-modern crowd pleaser, but it was also entirely design-centric. It ~~said~~ screamed “look at me,” which was fun and all, but it’s time to get serious, so to speak. With this new design, the focus remains on the content, with every aspect of typography, composition, and imagery working to unify and emphasize the high-quality content that I strive to create. As they say:

Good design doesn’t say “look at me,” it says “look at this.”

Sidebar or super-footer?

Why not both. I absolutely love single-column designs, but there is a certain practicality to having key information available right there next to the article. My Quintessential theme had hundreds of links tucked into the scrolling sidebar panels, and the following Requiem theme went in the opposite direction with only a footer menu and no sidebar at all. With Serious, I wanted to combine the best of both worlds and went with a sidebar for on-site stuff and super-footer for the social-media, friends, and projects stuff.

Advertisements?

I gave this one a lot of thought. This is the fourth year of Perishable Press and the 19th redesign, and I have never put any advertisements on the site. I think there are pros and cons of doing so. The obvious benefit is the extra income, but the downside is being stuck with a bunch of uncontrollable material appearing on your site. The money is tempting, but for the time being I have decided to retain my commercial-free integrity.

New Logo

Perhaps the most significant change is the new logo. I tried like the dickens to get that old Rez-font sun logo to fit the bill, but it just wouldn’t gel. After some experimentation, I decided to roll with the triple dropped “e”s and half of the original sun icon. Way back in the days of pen-&-ink drawings and percolated bong hits, the “Perishable” logo was frequently deployed with either dropped letter “e”s, backwards “e”s, or both. Seeing that classic format here on the site is a good reminder.

Nice ‘n clean

One thing that I really wanted to do with this new design is clean things up and stay focused on what’s truly important. Rather than trying to link to everything from the sidebar and footer, I consolidated conceptually related information into second-level pages and just linked to them instead. A good example of this is the site Dungeon, where I give props to friends and software, share my accomplishments, reveal site statistics, and so on. Having all of this stuff on a single page eliminates clutter from the sidebar and footer. There’s just too much content on a site this size to connect it all at the top-level of the hierarchy. I think this new theme makes great strides toward a more streamlined organization.

Color palette

With its white-text on dark-background, the previously active theme (Quintessential) fried a lot of retinas. There is a way to do light on dark, but it’s a delicate balance of hue and contrast. Even just a few shades off and it’s gonna get painful — tracers, ghost text, and bleeding eyeballs in general. After much calculation and testing, I think I conjured up a color palette that’s much easier on the eyes. Using off-white text against rich tones of brown softens the edge without sacrificing contrast. So the readability is improved, and by sticking with only a handful of colors, the design conveys a sense of unification and harmony.

Custom fonts

The typography connoisseur will immediately recognize the use of Museo for headings and Monaco for
and inline code snippets. This is accomplished by the increasingly supported @font-face CSS selector, which makes it possible to display custom fonts directly through the stylesheet. No JavaScript required, but support is either hit or miss as newer versions of popular browsers continue to embrace the functionality. Personally, I think the Museo font looks great. It’s been used on a number of other highly popular sites (including CSS-Tricks), and I predict that it will catch on like wildfire and become the next big font trend.

Uniform link styles

I think it is important that hyperlinks look like actual links. They should be easy to recognize as links, look uniform in appearance, and exhibit the same behavior. As obvious and simple as this sounds, I always find it challenging to accomplish in my designs. Many of my older themes fail in this regard, but the minimalist Requiem theme goes above and beyond with uniform links that are actually blue. The new Serious theme doesn’t go quite that far, but a simple look around shows that the links are definitely uniform.

Other bells & whistles

Instead of going on and on, I’ll try to summarize some of the cool bells & whistles:

Lots of progressively enhanced visual effects for the header, sidebar, links, code et al

Super-cool
code areas. Following my own advice, I pimped out the pre code with auto-expanding boxes, hover effects, and better IE support.

Collapsible Twitter updates with cookies to remember user preference

Imported latest images from my graphix archive, Perishable.biz

Drop caps (in most browsers) on the first paragraph of each article

Fancy tooltips courtesy of the awesome qTip jQuery plugin

Toggling informational panels to keep everything nice and tidy

CSS-based graphical indication for external links

Auto-clear/restore input fields to make it all sweet

Plus all sorts of other stuff that I probably shouldn’t have bothered with, but it is so much fun playing with CSS and jQuery that I just couldn’t resist ;)

Performance

Of course, all of this fancy-pants design stuff would be pointless if site performance prevents people from participating. To optimize performance for the Serious theme, I tried to do as much client-side and server-side optimization as possible, including everything from image sprites and minified code to content compression and expires headers. You can check the results for yourself using YSlow or similar.

Cross-browser consistency and validation

The most painful part of any decent web design is getting them to look good in as many browsers as possible. To accomplish this, I relied heavily on multiple computers, Adobe Browsershots (which didn’t work that great), and the always helpful Chris Coyier. Overall, I think most of the bugs have been ironed out, but definitely let me know if you see something that looks off, broken or whatever.

As for validation, well I really haven’t bothered with it so far. After the theme is active for awhile, I might check a few pages, but honestly I stopped caring about validation once I realized that I don’t really need it. Not to sound boastful, but when you can code a site like this with Notepad, you don’t need the W3C to hold your hand along the way. Sure validation is great for double-checking your code, but if everything is doing what you want, there is no need to waste too much time trying to ensure strict obedience to every obscure rule in the book.

Feedback appreciated

Let me know what you think of the design and please contact me or leave a comment if you spot anything that looks out of place. Thanks! :)

Copyright2010PerishablePress

Source: Perishable Press
Take your WordPress skills to the next level with Digging into WordPress!
Related articles

Perishable Press Redesign 2008

Time for a New Design?

Quintessential Reversion

Rocking the Boat

Site Overhaul, Phase Two: Switching Default Theme

Perishable News: Site Upgrades, Upcoming Interview, and PageRank Update

Perishable Press Theme Renovations Complete

It’s Here: Digging into WordPress!

Jeff Starr — Wed, 11 Nov 2009 16:46:57 +0000

After nearly a year of production, Chris Coyier and I are stoked to announce our new book: Digging into WordPress! It’s nine jam-packed chapters (400 pages!) stuffed with everything you need to take your WordPress skills to the next level and really get the most out of WordPress. We take you through everything — from setting up for success and creating the perfect theme to optimizing performance and tightening security, Digging into WordPress delivers the goods. You’ll learn how to harness the full potential of WordPress with all of the tips, tricks, and code you need to make it happen.

Special 10-Day Discount

For the next ten days, use coupon code DIWPERISHABLE to save $5 instantly. The book sells for $27, so with the coupon code you can grab it for a cool 22 bucks. This is a limited-time deal so take advantage and hook it up now. Go here to get the scoop and download the book.

Living, Breathing PDF Format..

The PDF version of the book is awesome because we will be able to update and expand it indefinitely. As WordPress changes, the book will evolve with new information, techniques, and code. This is why we call the DiW PDF a “living, breathing document” — it will grow with WordPress, and will be updated and improved periodically well into the future.

..and a Printed Version Coming Soon

In addition to the PDF, a printed version of Digging into WordPress will also be available sometime in the near future. Everyone who purchases the PDF version of the book will receive a fair discount on the printed book when it’s released. The printed book will be awesome, but the PDF is ideal because it’s easy to search, easy to zoom, easy to transport, and easy to copy & paste code. It even features actual hyperlinks that make it easy to jump to linked resources (and there’s a zillion of ‘em!).

Lifetime Subscription

All DiW customers automatically get a lifetime subscription to all future updates and new versions of the book. Chris and I are crazy about WordPress and plan on sharing our experience as time goes on. There are a few other WordPress books out there, but this one won’t get old and outdated as WordPress evolves. Whenever we update the book and release a new version, we’ll send you a link for a free download — fresh WordPress with the click of a button.

Affiliate Program

To help promote the book, we are also providing an affiliate program. If you like the book and want to help sell it, you can earn money doing so. For the PDF version of the book, we avoid the substantial costs typically involved with the printing, handling and shipping of a physical product. So, we are offering an affiliate commission of 50% for all affiliate sales. You are doing the legwork, and we appreciate it. Learn more here.

Thank You

Thanks in advance to anybody who picks up a copy. It goes a long way toward helping both Chris and I create all the other free content we love to share.

Digging into WordPress — packed with yummy WordPress goodness!

Sneak peak..

You can download a demo of the book here. The demo features the Table of Contents and part of Chapter 3. Here’s a little collage showing the general look and feel of what’s inside the book..

Digging into WordPress — 9 Chapters, 400 Pages, and tons of great tips, tricks, and code

Copyright2010PerishablePress

Source: Perishable Press
Take your WordPress skills to the next level with Digging into WordPress!
Related articles

Digging Into WordPress

Print Version of Digging into WordPress is Here!

Book Giveaway: Print Version of Digging into WordPress

Book Giveaway Winner!

Book Review: WordPress for Business Bloggers

Looking for a Publisher

Perishable Press Upgrade to WordPress 2.0.5

Perfect Pre Tags

Jeff Starr — Mon, 09 Nov 2009 16:15:36 +0000

If you operate a website that features lots of code examples, you know how important it is to spend some quality time styling the
element. When left unstyled, wild
tags will mangle your preformatted content and destroy your site’s layout. Different browsers treat the
tag quite differently, varying greatly in their default handling of font-sizing, scrollbar-rendering, and word-wrapping. Indeed, getting your preformatted code to look consistent, usable, and stylish across browsers is no easy task, but it certainly can be done. In this article, I’ll show you everything you need to create perfect
tags.

First thangs first

Before getting into it, let’s take a moment to ensure we’re all on the same page. The (X)HTML
element is used to display preformatted text, code, or just about anything else. pre tags are ideal for multiple lines of code or text that need to retain character spacing, display unformatted characters, keep inherent line breaks, and so on.

Let’s say we have the following code that we want to include in a web page:

'http://' // default URL ), $atts)); return ''.$content.''; } add_shortcode('link', 'shortLink'); ?>

After converting the “<” characters to their encoded equivalents, “<”, we would wrap the code in
tags and get this in the browser:

'http://' // default URL ), $atts)); return ''.$content.''; } add_shortcode('link', 'shortLink'); ?>

Looks pretty similar, eh? Notice that the line breaks, spacing, and unencoded characters (besides opening brackets) That’s the whole point: the
tag enables you to easily display raw chunks of source code, text (think poetry), and any other content that we don’t want the browser to process. Now let’s look at that same code when displayed without
tags:

extract(shortcode_atts(array(
"href" => ‘http://’ // default URL
), $atts));
return ‘‘.$content.’‘;
}
add_shortcode(’link’, ’shortLink’); ?>

As you can see, when not wrapped in
tags, code examples such as this are inaccurate and essentially useless.
elements ensure that the content retains its “natural” format, which is crucial for displaying code, poetry, equations, and other types of specialized content.

Also, note that the element is frequently used in conjunction with the
tag when using syntax highlighters and formatting plugins such as the excellent Code Auto Escape. For example, here at Perishable Press, all multi-line code examples are wrapped with and then auto-escaped using the Auto Escape plugin, which automatically escapes all characters within elements, eliminating the need to manually convert, say, opening brackets to their encoded equivalents. Many other syntax highlighters and code-formatting plugins also provide this functionality, greatly facilitating the post-writing process. Such tools help you streamline production and improve display of your preformatted content. One last thing about the tag before we dive into the good stuff. You should keep in mind that tags are used for displaying blocks of preformatted characters. That is, regardless of how many lines of text or code you use, the tag is a block-level element and will display its content as such. Conversely, the tag is an inline element that is perfect for displaying individual words, characters, and lines of preformatted text within a block-level element. For example, I use the tag all the time — just check out the source code of the previous couple of sentences to see what I mean. Displaying preformatted content & dealing with overflow Default behavior: horizontal scrollbars One of the biggest challenges to displaying preformatted content using the tag is dealing with continuous strings of characters such as URLs and long chunks of code. By default, the element handles this by stretching to fit its content. Assuming that no widths have been specified in the CSS, the element will expand in length to accomodate its longest line of content. Interesting, but not very practical in most design scenarios. As soon as a constraining width is applied, the element uses a horizontal scrollbar to accomodate any content that doesn’t “fit” within the display area. This default behavior is deployed in the stylesheet like this: pre { overflow: auto; width: 500px; } This is a commonly seen way of dealing with oversized content. It’s fast, easy, and effective. Even so, not everyone likes to scroll.. Word-wrapping Instead of using a scrollbar to display long lines of preformatted text, some prefer to wrap the content within the display area of the element. When we wrap preformatted content, any lines that extend beyond the specified width will wrap to the next line. As simple as this sounds, some browsers have real problems when it comes to continuous strings of text such as long URLs. Many browsers are unable to break up continuous lines of text unless specifically instructed to do so. Fortunately this is possible using a crefully crafted set of CSS directives. To enable word-wrapping for your content, use the following slice of CSS and edit the first directive to set the desired width: pre { width: 500px; /* specify width */ white-space: pre-wrap; /* CSS3 browsers */ white-space: -moz-pre-wrap !important; /* 1999+ Mozilla */ white-space: -pre-wrap; /* Opera 4 thru 6 */ white-space: -o-pre-wrap; /* Opera 7 and up */ word-wrap: break-word; /* IE 5.5+ and up */ /* overflow-x: auto; */ /* Firefox 2 only */ /* width: 99%; */ /* only if needed */ } Once in place, this code will force your areas to stay at 500 pixels wide. If any continuous lines extend beyond this width, they will be broken and wrapped accordingly. Auto-expanding code box with CSS If word-wrapping isn’t for you, you may want to implement some auto-expansion functionality. Using a small snippet of CSS, it is possible to style your tags such that they magically expand whenever the user hovers their mouse. So, for example, your areas would display normally at 500pixels in width, but as soon as the user hovers their cursor over the area, it would instantly expand to a larger width, say, 700 pixels. Setting this up is easy. Just include the following CSS in your stylesheet and enjoy the results: pre { overflow: auto; width: 500px; } pre:hover { position: relative; width: 700px; z-index: 99; } Of course, you will want edit the width values according to your needs and customize your and hover styles to look all sweet. You know. There are some pros and cons to this method. Here are some of the pros: It works great without requiring any JavaScript. Scrollbars appear only when the box is not expanded. The boxes expand instantly — no waiting required. Works fine even without an inner wrapper. ..and of course some of the cons: All tags expand even if it’s not necessary (i.e., the code fits) The sudden display change may disorient/confuse newer web users. Expanding box may interfere with other page elements. Even after expansion, the are may still require horizontal scrollbars to see all of the content. Auto-expanding code box with jQuery et al The CSS expanding-box method works nice, but it’s a bit choppy — upon hover, it’s like, BAM — suddenly you’re staring at a full-size code box. Using a little bit of jQuery, we can create a much smoother expanding code box, as originally shared by Chris Coyier at Digging into WordPress. The jQuery method is an improvement over the CSS method, behaving more elegantly: Expands only when hovered over Expands only as wide as necessary Expands with some nice animation To implement, begin by styling the element with a little CSS: pre { overflow: auto; width: 500px; } This will prepare the element for the following JavaScript: $(function(){ $("pre").hover(function() { var codeInnerWidth = $("code", this).width() + 10; if (codeInnerWidth > 500) { $(this).stop(true, false).css({zIndex:"99",position:"relative",overflow:"hidden"}).animate({width:codeInnerWidth+"px"}); } }, function() { $(this).stop(true, false).animate({width:500}); }); }); And that’s pretty much it. You’ll want to customize the CSS and jQuery to fit your needs, but the main thing is getting all of the widths to match up (both in the CSS and JavaScript). When JavaScript is unavailable on the user’s browser, this method degrades gracefully to default elements with auto-scrollbars. As discussed at Digging into WordPress, this method requires that your preformatted content is wrapped in both and tags. For complete information, check out the the original article. Whipping scrollbars into shape Vertical scrollbars, height, and Internet Explorer If you do decide to use scrollbars to display overflow content, you will discover many inconsistencies across browsers, especially (surprise surprise) Internet Exploder. The first thing to understand is that, on standards-compliant browsers (i.e., anything other than IE) vertical scrollbars will only appear if an explicit height is specified for the element. If it is, vertical scrollbars will appear whenever the preformatted content contains more lines than is viewable within the specified height. Why is this important? Because it makes eliminating vertical scrollbars rather easy. As a general rule of thumb, I never specify heights for preformatted content, but there are situations where you might want to do so. As for our ‘ol friend IE, you are pretty much going to get vertical scrollbars regardless of whether or not you declare a height. They just appear on their own. Like friends of that squatter you mistakenly let stay with you for awhile. Fortunately, there are effective ways to exterminate those stinky vertical scrollbars in IE. Here is the method I use on many of my sites: /* no vertical scrollbars for standards-compliant browsers */ pre { overflow: auto; width: 500px; } /* no vertical scrollbars for IE 7 */ *:first-child+html pre { padding-bottom: 20px; overflow-y: hidden; overflow: visible; overflow-x: auto; } /* no vertical scrollbars for IE 6 */ * html pre { padding-bottom: 20px; overflow: visible; overflow-x: auto; } That code is pretty much plug-n-play with only the essentials, but you will want to customize the width in the first declaration block and add other styles as desired. What’s happening with this code? Glad you axed. Lemme break it down: first block — sets default scrolling for standards-compliant browsers; no vertical scrollbars unless explicit height is set. second block — hack for IE 7 that removes the vertical scrollbar and adds a bit of padding to make room for any horizontal scrollbar that might be present. third block — hack for IE 6 that removes the vertical scrollbar and also adds some padding. Of course, rather than using unsightly CSS hacks for IE, it’s best practice to summon them via conditional comments. Once in place, this code will neutralize and eliminate those nasty vertical scrollbars in IE and provide some extra bottom-padding to make room for horizontal scrollbars when they appear. This code is effective, but the additional padding is not needed when the content fits within the area and the horizontal scrollbar does not appear, resulting in an awkward blank line. Fortunately we can turn to JavaScript to account for this dynamic display property. Fixing IE’s funky inside scrollbars with JavaScript “IE is so bad..” — how bad is it? It renders horizontal scrollbars on the inside of the element. This sucks because it interferes with content, pushes everything up about 20 pixels, and invokes display of the unnecessary vertical scrollbar. We saw how to remedy this display deficiency using CSS in the previous section, but it wasn’t quite ideal because of the extra bottom padding that is used to ensure content display when horizontal scrollbars appear. A better way to handle it is to use a little JavaScript to do the following: Check if the browser is Internet Explorer Find all elements with overflowing horizontal content Add 20 pixels of bottom padding to account for the horizontal scrollbar Remove the vertical scrollbar Thankfully, Remy Sharp delivers this functionality with the following slice of JavaScript: window.onload = function () { // only apply to IE if (!/*@cc_on!@*/0) return; // find every element to test var all = document.getElementsByTagName('*'), i = all.length; // fast reverse loop while (i--) { // if the scrollWidth (the real width) is greater than // the visible width, then apply style changes if (all[i].scrollWidth > all[i].offsetWidth) { all[i].style['paddingBottom'] = '20px'; all[i].style['overflowY'] = 'hidden'; } } }; ..and as if that weren’t cool enough, here’s the same functionality via jQuery: (function ($) { $.fn.fixOverflow = function () { if ($.browser.msie) { return this.each(function () { if (this.scrollWidth > this.offsetWidth) { $(this).css({ 'padding-bottom' : '20px', 'overflow-y' : 'hidden' }); } }); } else { return this; } }; })(jQuery); // usage $('pre').fixOverflow().doOtherPlugin(); Either of these methods will do the job nicely, making IE appear to display any horizontal scrollbars on the outside of the element. Interestingly enough, we can also execute this dynamic functionality from within the stylesheet and eliminate the need for any JavaScript. By using one of IE’s proprietary expression properties, we can include the following directly in our IE-only stylesheet: pre { width: 500px; overflow-x: auto; overflow-y: hidden; padding-bottom: expression(this.scrollWidth > this.offsetWidth ? 20 : 0); } Just specify the width and you’re off to the races. For either of these dynamic methods (i.e., JavaScript, jQuery, or CSS expression), keep in mind that we are treating horizontal overflow issues when an explicit vertical height has not been specified. Bonus tip: displaying a name for each class of text If you have different types of preformatted content, you can output the name of each one within the content itself. To illustrate, let’s say you provide different types of code snippets at your site, such as CSS, HTML, and PHP. By adding a class to an inner element, you can combine CSS-2.1’s attribute selector and :after pseudo-element selector to display the class name within the preformatted content area. pre code[class]:after { content: 'highlight: ' attr(class); display: block; text-align: right; font-size: smaller; padding-top: 5px; } Then, you set up your preformatted code like so: The class name you specify for each type of code block will then be displayed to the bottom-right of the preformatted content area. Shouts out to Chris Coyier for this awesome trick. Styling preformatted content Now that we know how to improve the physical properties of the element, let’s wrap things up with a few ideas for styling the actual preformatted content. Fonts When styling your preformatted content, employ fonts suitable to its purpose. For example, if your site is mostly sporting code snippets, throw down with some tough monospace typography: monospace "Courier new", Courier, "Andale Mono", monospace Consolas, "Lucida Console", Monaco, monospace Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace To create the perfect monospace font stack, you really should be testing on as many different browsers as possible. Check different operating systems, browsers, zoom settings, and types of preformatted content. A couple of notes: Courier is an incredibly tight-looking font that, unfortunately, does not scale well on all browsers/systems. Particularly, there seems to be a lower-limit to the display size of the Courier font. Also, to get things looking right on both PC and Mac without all the fuss, simply declare “monospace” for your font and you’ll get a great-looking font on both systems. Borders While maybe not beneficial to every block of preformatted text, a nice set of borders can really help accent and emphasize your content. Especially for code snippets, adding a border around the area can help users discern easily between it and the post content. The are many cool things that can be done with borders: Place a border on only one or two sides of the text Use varying widths and/or styles (e.g., dotted or custom image) Get all “Web-2.0” and round your corners Colors Colors are another inspiring thing to play with when it comes to styling the presentation of your elements. You can color the text itself, the background, and the borders. Anything is possible here, I just wanted to point out that a good combination of colors for these different properties can really help your areas “pop.” Also fun to play with when choosing the perfect color combination is transparency, which might be used to let the background show through just a bit. Background images also present unlimited possibilities, such as adding a personal logo/icon or even a nice drop shadow for the upper/left border. How I roll.. Last but not least, here is the template snippet that I use as a base for styling tags. After splicing this little snippet into my stylesheet, I proceed to tweak and fuss ‘til everything’s just right.. code, samp, kbd { font-family: "Courier New", Courier, monospace, sans-serif; text-align: left; color: #555; } pre code { line-height: 1.6em; font-size: 11px; } pre { padding: 0.1em 0.5em 0.3em 0.7em; border-left: 11px solid #ccc; margin: 1.7em 0 1.7em 0.3em; overflow: auto; width: 93%; } /* target IE7 and IE6 */ *:first-child+html pre { padding-bottom: 2em; overflow-y: hidden; overflow: visible; overflow-x: auto; } * html pre { padding-bottom: 2em; overflow: visible; overflow-x: auto; } Rather than another long-winded diatribe exploring the manifold intricacies and subtleties of this particular stylistic strategy, I defer to your currently established comprehension of CSS and invite subsequent analysis of its constituent declarations. Or, in the parlance of the day: “it’s plug-n-play, dude - I’m outta here!!!” Hungry for more As mentioned, I post a lot of code here at Perishable Press. So much so, that I have become rather obsessed with the fine art of formatting and styling preformatted content. As tweeted the other day, I could spend all day just fussing over code. To me, it really is that important. In this article, I have shared many different techniques for creating perfect tags, but these methods are far from exhaustive. I am always on the lookout for new and useful ways to improve the appearance and functionality of my preformatted code examples, so if you happen to know any sweet tricks that I missed, share them and I will update the article with the method and link to your site. Copyright2010PerishablePress Source: Perishable Press Take your WordPress skills to the next level with Digging into WordPress! Related articles A Complete CSS Template File Embed Flash and Video via the object Tag Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom Optimize Convoluted Code via JavaScript XHTML Document Header Resource One Link to Open Them All Auto-Focus Form Elements with JavaScript

Perishable Press

Should We Support Old Versions of Good Browsers?

Backwards Compatibility

Rendering Differences

Browser Testing

Market Share

Baseline Support

It’s the User, Stupid

Related articles

3 Ways to Track Web Pages with Google Analytics

Method 1: Old School – Tracking sites with urchin.js

Method 2: New School – Tracking sites with ga.js

All web pages delivered via standard HTTP protocol

All web pages delivered via secure HTTP (SSL)

Web pages delivered via combination of standard and secure protocols

Method 3: Asynchronous Tracking – Better tracking with ga.js

How to setup asynchronous analytics tracking on your site

JavaScript Method #2

Method 3: Preloading with Ajax

Know some triks?

Related articles

Protect WordPress Against Malicious URL Requests

Update to original method

Related articles

Really Simple Browser Detection with jQuery

Really Simple Browser Detection for Modern Browsers

Related articles

The New Clearfix Method

Related articles

Stupid WordPress Tricks

Table of Contents

WordPress Shortcodes ↑

Display WordPress Permalinks Outside of the Loop ↑

Display Custom Message to Returning Visitors ↑

Display Recently Updated Posts and Pages ↑

Display Custom Content to Search Engine Visitors ↑

Display Last Modified Time and Date for Posts ↑

Display Total Number of Trackbacks and Pingbacks ↑

Display Recently Registered Users ↑

List all of Your Site’s Posts ↑

List WordPress User Information ↑

Display List of Scheduled Posts ↑

Display Private Posts to Logged-in Users ↑

Display Posts from Exactly One Year Ago ↑

Custom CSS Styles for Recent Posts ↑

New WordPress-2.7 Comments Loop ↑

Backwards-Compatible Comment Templates ↑

Disable WordPress Post Revisions ↑

Limit WordPress Post Revisions ↑

Remove WordPress Post Revisions from the Database ↑

Reduce Comment Spam by Blocking No-Referrer Requests ↑

Prevent Google Analytics from Tracking Admin Pages ↑

Meta Descriptions without a Plugin ↑

Differentiate Between Posts Depending on Presence of Excerpt ↑

Modify the wp_options Table via the WordPress Admin ↑

Alternate Comment Styles ↑

Automatically Remove Code Mistakes in Posts ↑

Automatically Disable Comments and Trackbacks in Old Posts ↑

Access Post Data Outside the Loop ↑

Display Posts for a Specified Time Period ↑

Unique Single Post Templates for Different Categories ↑

Display Performance Statistics for WordPress Pages ↑

Custom Post Thumbnails in Two Steps ↑

Highlight Author Comments ↑

Easy Random Posts ↑

Display Dates for Groups of Posts ↑

Display a Sticky Post in the Sidebar ↑

Display Latest Comments without a Plugin ↑

Display Most Commented Posts without a Plugin ↑

Change Permalinks from Date-Based to Post-Date Only ↑

Test for Sub-Pages ↑

Multiple Widgetizable Sidebars ↑

', 'after_title' => '

Remove Fancy Quotes from Comments ↑

Display a List of All Untagged Posts ↑

Easy Display of Custom Headers, Footers, and Sidebars ↑

A Better Way for Users to Logout ↑

Display a Custom Message on a Specific Date ↑

Display Three Columns of Posts ↑

Disable WordPress Search Functionality ↑

Method 1: Old School – Tracking sites with `urchin.js`

Method 2: New School – Tracking sites with `ga.js`

Method 3: Asynchronous Tracking – Better tracking with `ga.js`

WordPress Shortcodes ^↑

Display WordPress Permalinks Outside of the Loop ^↑

Display Custom Message to Returning Visitors ^↑

Display Recently Updated Posts and Pages ^↑

Display Custom Content to Search Engine Visitors ^↑

Display Last Modified Time and Date for Posts ^↑

Display Total Number of Trackbacks and Pingbacks ^↑

Display Recently Registered Users ^↑

List all of Your Site’s Posts ^↑

List WordPress User Information ^↑

Display List of Scheduled Posts ^↑

Display Private Posts to Logged-in Users ^↑

Display Posts from Exactly One Year Ago ^↑

Custom CSS Styles for Recent Posts ^↑

New WordPress-2.7 Comments Loop ^↑

Backwards-Compatible Comment Templates ^↑

Disable WordPress Post Revisions ^↑

Limit WordPress Post Revisions ^↑

Remove WordPress Post Revisions from the Database ^↑

Reduce Comment Spam by Blocking No-Referrer Requests ^↑

Prevent Google Analytics from Tracking Admin Pages ^↑

Meta Descriptions without a Plugin ^↑

Differentiate Between Posts Depending on Presence of Excerpt ^↑

Modify the wp_options Table via the WordPress Admin ^↑

Alternate Comment Styles ^↑

Automatically Remove Code Mistakes in Posts ^↑

Automatically Disable Comments and Trackbacks in Old Posts ^↑

Access Post Data Outside the Loop ^↑

Display Posts for a Specified Time Period ^↑

Unique Single Post Templates for Different Categories ^↑

Display Performance Statistics for WordPress Pages ^↑

Custom Post Thumbnails in Two Steps ^↑

Highlight Author Comments ^↑

Easy Random Posts ^↑

Display Dates for Groups of Posts ^↑

Display a Sticky Post in the Sidebar ^↑

Display Latest Comments without a Plugin ^↑

Display Most Commented Posts without a Plugin ^↑

Change Permalinks from Date-Based to Post-Date Only ^↑

Test for Sub-Pages ^↑

Multiple Widgetizable Sidebars ^↑

Remove Fancy Quotes from Comments ^↑

Display a List of All Untagged Posts ^↑

Easy Display of Custom Headers, Footers, and Sidebars ^↑

A Better Way for Users to Logout ^↑

Display a Custom Message on a Specific Date ^↑

Display Three Columns of Posts ^↑

Disable WordPress Search Functionality ^↑

Display Posts with Specific Custom Fields ^↑

How to Number Your Comments, Pingbacks, and Trackbacks in 2.7+ ^↑

How to Number Your Comments Using the Classic Loop ^↑

Invite Readers to Comment via Feed ^↑

Display the Total Number of Users for Your Blog ^↑

Automatically Insert Content into Your WordPress Post Editor ^↑

How to Prevent Duplicate Content ^↑

Conditionally Display Full Posts or Excerpts ^↑

Display Related Posts without a Plugin ^↑

Drop-Dead Easy Styles for Author Comments ^↑

Display Upcoming Scheduled Posts ^↑

Display Automatic TinyURLs for Your Posts ^↑

Implement a Site-Maintenance Page for Your Blog ^↑

Display the First Image from Each of Your Posts ^↑

Display Most Popular Posts without a Plugin ^↑

Automatically Highlight Search Terms ^↑

Automatically Disable Widgets ^↑

Display All Images from Your Post Content ^↑

Display Category List in Two Columns ^↑

Show Ads or Other Content Only in the First Three Posts ^↑

A Better Way to Display Recent Comments without a Plugin ^↑

Selectively Disable Automatic Post Formatting ^↑

Browser Detection via WordPress’ body_class Function ^↑

Get Post or Page Contents as a PHP Variable ^↑

Simple Example of How to Use WordPress Cron ^↑

Add More Default Avatar Choices to the WordPress Admin ^↑

Add a Private Page to Your Navigation Menu ^↑

How to Add Additional Links to wp_list_pages ^↑