If you’ve ever tried to post a tutorial or demonstration of Javascript or CSS on a WordPress blog, you’ve inevitably faced the challenge of figuring out how to load the scripts and styles for just that post.

The easy way is to add the styles to your main stylesheet and add the Javascript code to your main Javascript file (if you have one), but that’s not really a very nice thing to do to your viewers, especially if you have lots of posts with large amounts of code. Visitors end up downloading code for posts they’ll likely never visit, and every time you want to a new post, those files will have to be recached.

A better way would be to only load post-specific Javascript and CSS when you’re looking at that particular post. Unfortunately, WordPress doesn’t provide a built-in way to do this.

I’ve seen a few plugins that try to solve this problem, but all of them are pretty hackish and don’t have nearly enough customization options. So after much frustration with the existing plugins, I decided to write my own.

Allow me to introduce Per Post Scripts & Styles. You can download the plugin hosted on WordPress.org or follow the source on Github.

Why it’s better

• Dynamic URLs with %SITE_URL% and %THEME_URL% variables
• Script dependency support as well as script duplication checking
• The option to load scripts in either the header and footer
• Attach scripts to posts, pages, and custom post types
• Load attached scripts and styles not just on that post’s page, but on the home page or any other page where that post is displayed.

Perhaps the worst thing about the existing plugins is they force you to hard code your script and style URLs. Not only is this bad practice, but it’s particularly inconvenient if (like me) you do most of your development locally, and then upload to your server. Obviously if I attach http://localhost:8888/javscript/some-file.js to a post, that’s not going to work when it to my production server. This also applies to anytime you need to switch to URLs. Per Post Scripts & Styles allows you to use variables like %SITE_URL% and %THEME_URL% making this issue much easier to manage.

Another big problem with the existing plugins is they simply collect your URLs and plop them out in the header. This goes against WordPress best practices for two very compelling reasons: (1) no duplication checking and (2) no dependency checking. Imagine if you wanted to include a that required jQuery to run. You could list jQuery as one of the scripts to attach, but what if another plugin is already loading jQuery? Now you’ll be loading it twice!

Per Post Scripts & Styles takes care of all these issues for you. A meta box is added to every post, page, or custom post type you choose, and all you have to do is specify which the URLs should be loaded. The plugin takes care of the rest.

Documentation

Edit Post Screen

In the edit post screen there is a meta box below the post content box titled “Per Post Scripts & Styles”. Simply enter the URLs of any Javascript or CSS files that you want to load in the appropriate box.

Instructions

• When entering the URLs, you may use the variables %SITE_URL% and %THEME_URL% for greater flexibility, e.g. %SITE_URL%/scripts/this-post-script.js
• To have multiple scripts, put each on on its own line.
• If your script has one or more dependencies, add them as a comma separated list in braces at the end of the URL, e.g. %SITE_URL%/scripts/code.js{jquery,json2}. Here is a list of possible dependencies that ship with WordPress.

Header Scripts

List script URLs to be enqueued in the header.

Footer Scripts

List script URLs to be enqueued in the footer. (The footer is often the best place to put Javascript files because it doesn’t slow the loading of the other HTML content.)

Styles

List stylesheet URLs.

Extras

Hardcode Javascript or CSS here. It will be outputted right before the </header> tag. Make sure to properly use the <script> and <style> tags. Note: while this is primarily used for Javascript and CSS, the contents of this box is dumped at the end of the header on the page. Anything extra you want to put in the header when this specific post is loaded can go here.

Settings Page

Allow Per Post Scripts & Styles For The Following Post Types:

Choose one or more of the post types to allow attaching specific scripts and styles to. If you have custom post types, they will appear in this list as well.

Only Load Scripts & Styles When

Most of the time you will want to select single post pages only. The only exception is if you’re displaying the full content (not just the excerpt) of a post on another page. This blog, for example, is using the second option because it displays the full content of some posts on the home page. Keep in mind, however, that selecting all pages will add a considerable amount of overhead to each page load since it will have to query the database for every post loaded on every page. Only use this if absolutely necessary.

Questions / Feedback

If you have any questions, feedback or suggestions, please leave a comment. I’m always looking to make my plugins better, and I don’t always know how people are using them.

Fluid images are nothing new. If you want to have images on your site that scale down as their containers elements — or the browser itself — gets smaller, there is no shortage of tutorials on the Web explaining exactly how. (In case you’re wondering, the trick is to apply the CSS rules max-width:100% and height:auto to the img tag.)

But the problem is most of the time you don’t just want fluid images, you want your captions to be fluid too.

Requirements

• As the container gets smaller than the image’s width, the images scales down, proportionately, inside of it.
• If the container is bigger than the image’s width, the image and caption float left and the text wraps around it.
• There is an appropriate margin on the right side of the image when text wraps around it; when text isn’t wrapping and the image is 100%, that same amount of margin is present between the right edge of the image and the right edge of the container.
• The image and caption should have some sort of border around them to visually tie them together.
• The caption should be directly below the image with no space or gap between them.
• The image caption should have a reasonable amount of padding on all sides and a reasonable line-height so if the caption is longer than one line, it looks natural and doesn’t touch any edges.
• It renders properly in Firefox, Chrome, Safari, Opera, and IE7+

The Markup

I’ll take my example from WordPress, since that’s what most people use.

When WordPress creates a caption, it adds a wrapper div.wp-caption around both the image and the p.wp-caption-text element. Here’s what it might look like.

<div style="width:610px;">
   <a href="#"><img src="starry-night.jpg" alt="Starry Night" width="600" height="375" /></a>
   <p class="wp-caption-text">This is a really, really, really, really, long caption that might have to wrap several times to fully describe what this particular picture is actually about in the most detailed terms possible.</p>
</div>

This is nice, but it’s not going to work for what we I want to do. Fortunately, WordPress makes it really easy for us to change the default caption markup. (If you’re not sure how, here’s a good tutorial.)

<div class="wp-caption" style="width:620px;">
   <div class="wp-caption-wrapper">
      <a href="#"><img src="starry-night.jpg" alt="Starry Night" width="600" height="375" /></a>
      <p class="wp-caption-text">This is a really, really, really, really, long caption that might have to wrap several times to fully describe what this particular picture is actually about in the most detailed terms possible.</p>
   </div>
</div>

Ahh, much better. I’ve changed the container width to 20 pixels larger than the image because I want a 10 pixel border instead of a 5 pixel border, and I’ve added an extra div element around the image and caption.

The Styles

.wp-caption {
   background-color:#fff;
   float:left;
   margin: 0 20px 10px 0;
   max-width:100%;
   -moz-box-shadow:0 0 5px rgba(0,0,0,.4);
   -webkit-box-shadow:0 0 5px rgba(0,0,0,.4);
   box-shadow:0 0 5px rgba(0,0,0,.4);
}
.wp-caption-wrapper {
   padding:10px;
}
.wp-caption-text {
   background-color:#2E6182;
   color:#fff;
   font-size:.8em;
   margin:0;
   padding:6px 8px;
}
.wp-caption img {
   background-color:#2E6182;
   border:none;
   display:block;
   height:auto!important;
   width:auto!important; /* auto is needed to fix a bug in IE8 */
   max-width:100%!important;
}

The styles should be pretty self-explanatory is you’re familiar with CSS, but let me explain some of the finer points and some of the areas I got stuck on when figuring this out.

• You need to use max-width:100% on both the div.wp-caption container and the image itself.
• The image needs to be set to display:block. Images default to display:inline, and if you leave it like that, you’ll see a space between the image and the caption.
• Set the background color of the image to the same as the background color of the caption. As browsers are shrinking the image, sometimes there will be a 1 pixel space between the image and the caption. A background color makes this unnoticeable.

That’s it! Check out this demo to see it in action.

For advances users

If you’re looking at the extra wrapper div and wonder why I didn’t just use box-sizing:border-box, there are basically two reasons:

• Box sizing is only supported in IE8+, so IE7 won’t display this properly.
• There’s a bug in IE8 where box-sizing and max-width don’t play nice together. This has been fixed in IE9, but in IE8 as the container gets smaller, max-width:100% is applied to the content box and not the border box.

However, if you don’t have to support IE8, I’ve also put together a demo using box-sizing:border-box.

PW_Typer is a jQuery plugin that seeks to mimic the look of letters being typed on the page like a typewritter. To use PW_Typer, clone the source on GitHub.

Methods

type

jQuery.type({option1: value1, option2: value2 ... etc.});

Types out content, one character at a time. Speed and variation can be specified through the various parameters.

untype

jQuery.untype({option1: value1, option2: value2 ... etc.});

Removes content, one character at a time. Speed and variation can be specified through the various parameters.

stopTyper

jQuery.stopTyper();

Stops or pauses a type or untype function that is in progress.

resumeTyper

jQuery.resumeTyper();

Resumes a type or untype function that has been stopped.

finishTyper

jQuery.finishTyper();

Imediately completes a type or untype function that is in progress. If a callback function was specified, it is called right away.

Optional Parameters

callback:

(Function) A function to be called once all typing is complete. If the jQuery object contains more than one element, the callback function is called once the last element is complete.

content:

(String, default: $(this).html()) The HTML content (or plain text) to be typed. The content can be as complex as you want, the only requirement is that script tags cannot be used within the string.

delay:

(Number) Time (in millaseconds) before the type function starts

deviation:

(Number) Possible values range from 0 to 1. The deviation Indicates how likely the interval between each typed character deviates from the average time. A deviation of 0 would be no deviation at all, and a deviation of 1 would be up to up to 100% of the average interval. In other words, if the average interval were 100 milliseconds and the deviation were 1, the interval values would range from 0 to 200. If the deviation were .5, interval values would range from 50 to 150. (Note: Average time is total time divided by the total number of characters in the content string. If the time parameter is not specified, deviation is ignored)

minInterval:

(Number, default: 30) Minimum interval (in milliseconds) between the typing of each letter. The interval is a random time between minInterval and maxInterval. (Note: if the time parameter is specified, this value is ignored)

maxInterval:

(Number, default: 90) Maximum elapsed time (in milliseconds) between the typing of each letter. The interval is a random time between minInterval and maxInterval. (Note: if the time parameter is specified, this value is ignored)

time:

(Number) The total elapsed time (in milliseconds) to type all characters in the content string. (Note: Times will not be exact and vary based on browser and computer speed.)

Examples

• Typing simple text

  $("p").type();

  This is just some simple text. No HTML elements here.

• Typing HTML content

  $("p").type();

  This is more complex HTML content. As you can see there are HTML tags & special characters within this <p> element.

• Specifying the content to type

  $("p").type({ content:"This is the <strong>content</strong> I want you to type." });

  This text will be replaced with new text passed via the content parameter.

• Using minInterval and maxInterval to make the typing seems much more irratic

  $("p").type({ minInterval:10, maxInterval:200 });

  Notice how the interval between each character is very, very different.

• Using time, delay, and callback

  $("p").type({ time:5000, delay:1000, callback:function() { alert("Typing Complete!"); } });

  This text should type out completely in approximately 5 seconds with an additional 1 second delay before it begins. Because the deviation parameter isn’t specified, the interval between each character is exactly the same.

• untype and deviation

  $("p").untype({ time:5000, deviation:.8 });

  untype works exactly the same as type but in reverse. The deviation parameter adds a little variance to the time interval between characters into order to make the typing or untyping seem more natural.

• pauseTyper, resumeTyper, finishTyper and multiple elements simultaneously.

  $("p").type({time: 16000}).each( function() { $(this).hover( function() { $(this).stopTyper(); }, function() { $(this).resumeTyper(); }); $(this).click( function() { $(this).finishTyper(); }); }); 

  Paragraph 1: Hover your mouse over this paragraph to stop the typer applying the stopTyper() function. When your mouse is no longer hovering over the paragraph, the typing will resume via the resumeTyper() function. Click anywhere within this paragraph to apply the finishTyper() function.

  Paragraph 2: Hover your mouse over this paragraph to stop the typer applying the stopTyper() function. When your mouse is no longer hovering over the paragraph, the typing will resume via the resumeTyper() function. Click anywhere within this paragraph to apply the finishTyper() function.

  Paragraph 3: Hover your mouse over this paragraph to stop the typer applying the stopTyper() function. When your mouse is no longer hovering over the paragraph, the typing will resume via the resumeTyper() function. Click anywhere within this paragraph to apply the finishTyper() function.

I finally got around to finishing my new WordPress theme for this site. It’s been too long. I mean, who could take seriously a Web designer whose company portfolio blog used TwentyTen?

One of the reasons for the holdup was I really wanted to make this new theme responsive. If you’re not familiar with that term, in essence it’s the practice of building a website whose look and layout respond to the browser or device displaying it. For a more in-depth explanation, see A List Apart’s article on the subject.

In the web industry these days responsive design is all the rage. Some even suggest that if you’re not doing it, you’re not a “real” Web designer. I have mixed reactions to that sentiment. For one thing, not all clients care about it nor are they all willing to pay for the extra time required to do it.

Those that do taught the importance of responsive design usually bring up the need to support mobile devices. But when I look at the analytics for all the sites I track, the percentage of pageviews I have from mobile devices is still relatively small — under 5% for most sites. Don’t get me wrong, I’m not suggesting that mobile isn’t important, I just can’t help but point out the hypocrisy of the ease in which someone will discount IE 6 and 7 users (which is easily still over 5% for almost all sites) but insist that we must cater to mobile users, even though they’re a smaller percentage, and the data show they spend far less time on your site.

But, I’m not writing this to bash responsive design; rather, I want to defend its use for a more obvious — but often overlooked — reason: and that’s screen resolution. About 8% of my viewers have a max resolution of 1024 by 768, but another 8% have a resolution almost double that. In fact I have over ten different max display settings at 5% or more. The days of being able to assume that the majority of your visitors would have one or two different screen resolutions are long gone. And as far as I’m concerned, so should be the days of creating a 960 pixel design, slapping a drop shadow behind it, and calling it finished.

Responsive design shouldn’t be just about creating a desktop version and a mobile version, it should be about creating a fluid layout that makes the most of every square inch it’s been given, no matter what the size. It’s not always easy to envision the best way to layout your content for a half dozen different possible browser widths, but in my experience, doing so forces you to be more intentional in your design. And in the end, I believe intention more than looks is one of the primary separators between good and bad design.

Well, enough talk. I hope you like the look of the new site, and if you have any questions about how I did something, just let me know in the comments below — or to the right depending on how wide your browser window is!

Bryn Mercado, friend and fellow tennis enthusiast, recently approached me to redesign Tennis En Fuego, his blog about all things tennis. In his own words:

Tennis En Fuego is a digital and interactive blog and website encompassing all of the qualities we love about tennis. Every week, our goal is to portray the same kind of fire online that we see on the court.

The sport of tennis is in the middle of an amazing era. Never before have we seen such a high level of athleticism, player depth, and new equipment technology all coming together to produce uncanny competition. Now with mediums such as the internet, twitter, facebook, blogs, etc… tennis can be shared more than ever. TEF wants to be right in the middle of this evolution, providing informative content from all sides of the game.

The site is built as a custom WordPress theme incorporating social features for sharing content via Facebook and Twitter; all the theme options are completely customizable from the back end. The design tries to reflect the mood the title conveys yet at the same time make the viewer forget he’s not reading an article on ESPN.com. Hopefully the subtleties are not lost on the average tennis reader. As a fan myself, I’d like to think they won’t be.

Good luck with the site Bryn. I’m confident you won’t let your readers down.

It must have been a slow news day if Westmont’s releasing an update to their iPhone app made it in the local paper, but I guess I shouldn’t be complaining.

For the record, this was my first attempt at building an iPhone application, and I’m pretty happy with how it turned out.  Unfortunately, there wasn’t room for a lot of really cool features in this version; I was mainly just duplicating the functionality of the existing app, which was developed by an outside company using NimbleKit, a framework that allows developers to write native iPhone apps with just HTML, CSS, and Javascript. My update was a complete rewrite in Objective-C (I also used the wonderful and open-source Three20 framework).

We didn’t make the switch from NimbleKit to Objective-C lightly. At first, an application built on open web technologies that lots of people know seemed like the way to go, but we quickly realized just how limiting it could be (not to mention the fact that it ran incredibly slowly). Under the hood, all NimbleKit does is essentially put the entire application in one big UIWebView (i.e. Safari), which means that in addition to being necessarily less efficient, there was no easy way to take advantage of the iPhone 4′s retina display. So not only did it run slower, but it looked crappier too.

If anyone else is considering using a framework to write native iPhone apps in HTML, CSS, and Javascript it, I’d recommend against it.  My advice is to bite the bullet, learn Objective-C, and do it the hard way. You’ll be glad you did.

If you want to check out the app, just search for “Westmont” in the app store.

I’ve been using Zen Coding for about a year now, and I can’t understate how great the idea is. Its value should be immediately apparent to anyone who has experience writing HTML by hand. But in the past year I’ve started doing a lot more server side programming and a lot less HTML by hand, so I don’t get to take advantage of Zen Coding as much as I once did.

Sill, I constantly find myself in situations where I need to programmatically create a bunch of nested HTML elements in PHP, and I wonder: why isn’t there a PHP function that can take a Zen Coding selector and automatically expand it?

Well, when you wonder something enough times, eventually you decide to actually do something about it.

I’ve created a PHP class called PW_Zen_Coder, and I’ve put the source on github if anyone wants to grab it or contribute. I’ve also set it up as a WordPress plugin, so you can drop it into your plugins directory, activate it, and then use PW_Zen_Coder in any of your own code.

Documentation

PW_Zen_Coder has only one public method, expand(). This may grow in the future as Zen Coding itself changes, but at the the moment all it does is expand a Zen Coding selector into valid HTML ready for output.

expand( )

Consumes a Zen Coding selector, along with whatever passed values, and returns a valid string of HTML code ready for output.

public string PW_Zen_Coder::expand( string $selector , mixed $text [, array $...] )

Parameters

selector

(String) A selector according to Zen Coding syntax. See below for a list of specific selectors not supported.

text

(Mixed) A string that will be the innerHTML value of the last element in the selector. If element multiplication (e.g. “li*4″) is applied and you want different values for each element, pass an array of values that correspond to each iteration of the multiplied element.

…

(Array) Pass additional arrays that correspond to indexed values (e.g. {%1}, {%2}, etc.) within the selector. The passed array(s) should be a list of key/value pairs that correspond to HTML attribute/properties respectively. If element multiplication is used, pass an array of such arrays.

Return Value

Returns the HTML string produced.

Examples

All examples below assume the existence of a PW_Zen_Coder instance variable named $zc .

$zc = new PW_Zen_Coder;

A Simple Example

This is an example of very basic usage, but even here the process of creating an element with a class and a sub-element is significantly simplified.

echo $zc->expand('.wrapper>p', 'Hello World');

Becomes:

<div class="wrapper">
  <p>Hello World</p>
</div>

A Complex Example

Here is a much more complex example. While the selector is somewhat difficult to read, imagine how much easier it would be to edit the markup if down the road you decided to change the structure slightly.

echo $zc->expand(
  '#page.js>#header>.wrapper>h1[title="Slogan"]>a[href="http://google.com"]',
  'Hello World'
);

Becomes:

<div id="page">
  <div id="header">
    <div class="wrapper>
      <h1 title="Slogan"><a href="http://google.com">Hello World</a></h1>
    </div>
  </div>
</div>

Element Multiplication

Adding *N to an element outputs it N times. The $ character in an ID or class is replaced with the iteration number. Notice how this time an array is pass to $text instead of a string.

echo $zc->expand(
  'ul>li.item$*6',
  array("Red","Orange","Yellow","Green","Blue","Violet")
);

Becomes:

<ul>
  <li class="item1">Red</li>
  <li class="item2">Orange</li>
  <li class="item3">Yellow</li>
  <li class="item4">Green</li>
  <li class="item5">Blue</li>
  <li class="item6">Violet</li>
</ul>

Element Multiplication (dynamically and with multiple $’s)

The real power of Zen Coding in evident when you start constructing the selector dynamically. Here is a basic example of doing just that. Also notice how $$ becomes 01, 02, 03 instead of 1, 2, 3.

$numbers = array("One","Two","Three");
echo $zc->expand(
  'ul>li.item$$*' . count($numbers),
  $numbers
);

Becomes:

<ul>
  <li class="item01">One</li>
  <li class="item02">Two</li>
  <li class="item03">Three</li>
</ul>

Passing HTML Attributes to Elements

If you want to apply additional HTML attributes to an element, include {%N} in your selector and pass another argument in the method call.

echo $zc->expand(
  '#sample>pre{%1}>code',
  array('title'=>'code', 'width'=>'600px'),
  'Pre-formatted Code Block'
);

Becomes:

<div id="sample">
  <pre width="600px" title="code">
    <code>Pre-formatted Code Block</code>
  </pre>
</div>

Passing HTML Attributes to Elements with Element Multiplication

If you pass an array of attributes to an element that has been multiplied, each element will possess the exact same set of attributes. If you want them to possess different attributes, simply pass an array of arrays instead of just one array. This example shows both methods:

echo $zc->expand(
  'ul{%1}>li*3{%2}>span',
  array('style'=>'background-color:#eee'),
  array(
    array('style'=>'color:red'),
    array('style'=>'color:green'),
    array('style'=>'color:blue'),
  ),
  array( 'red', 'green', 'blue' )
);

Becomes:

<ul style="background-color:#eee">
  <li style="color:red"><span>red</span></li>
  <li style="color:green"><span>green</span></li>
  <li style="color:blue"><span>blue</span></li>
</ul>

Differences from Zen Coding

Some of the elements in the Zen Coding syntax do not make sense to be dynamically implemented, and some of the features I just haven’t decided how best to implement them. Here is a list of exactly what PW_Zen_Coder does and does not support.

Supported features

• ID and class attributes: div#page.section.main
• Custom attributes: a[title="Hello world"]
• Element multiplication: li*5 will output <li> tag five times.
• Item numbering with $ character: li.item$*3 will output <li> tag three times, replacing $ character with item number
• Multiple ‘$’ characters in a row are used as zero padding, i.e.: li.item$$$ will output li.item001
• div tag name can be omitted when writing element starting from ID or class: #content>.section is the same as div#content>div.section.

Features Not Supprted

• Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer.
  Note: You cannot use the + character to create sibling elements nor can you use parentheses to nest. If you want to nest or use siblings, just pass another PW_Zen_Coder instance as the $text argument.
• Filters support

Partially Supported Features

• Custom attributes: while a[title="Hello world"] is supported, a[title] and a[title="Hello world" rel] are not. The attribute must have both the name and value. To have multiple attributes, just pass them as a method argument.
• Element multiplication: while element multiplication is possible, and it’s possible to do it multiple times within a selector, it is not always possible to do it multiple times within a selector while simultaneously passing the selector attribute values. For example: ul>li*3{%1}>p*2{%2} will probably not work as expected.

What’s next?

If you want to try PW_Zen_Coder, just download the source on github and test it out. There is an example file included that should give you an idea of how it works.

If you have any questions, comments, complaints, suggestions, or if you find any bugs, let me know in the comments below and I’ll try to address them as quickly as possible.

PW_Archives is a fully-customizable yet light-weight and intuitive archiving plugin. Its features include custom post type support, optional javascript enhancement, shortcodes, and widgets all with only one additional database query.

The primary goal of PW_Archives is to be light-weight and efficient. I’ve tried almost all of the popular archiving plugins out there, and so many of them make hundreds or even thousands of queries depending on the number of posts you have on your site. PW_Archives makes only one query to get your posts. That’s it. Not only that but it doesn’t do endless amounts of looping and counting to determine post and comment counts. That’s all included in the one query it does, and it’s very efficient.

The second main goal of PW_Archives is customization. Almost everything is customizable. Select what post types to include, choose whether you want the javascript to fade in or slide down (or no javascript at all). You can even select the date format and add custom markup. If you don’t know HTML, don’t worry; the defaults will work for most people.

Documentation

PW_Archives works just like WordPress menus. If you’re familiar with using menus, PW_Archives will make perfect sense. The idea is that you can create multiple instances of a particular set of options, each with its own name for easy reference later. In other words, you can create two completely different configurations and easily switch between the two without losing all your previous settings.

For example, let’s say you want to list archives in your sidebar and only show year and month (not individual posts) and only for the most recent year. However, you also want your archives listed on a dedicated archives page showing all years, all months, and all posts. Here’s how you’d do it:

1. Create two PW_Archives instances, name one “Sidebar” and the other something like “Full”.
2. For the “Sidebar” instance, select “1″ for “Years to Display:” and “Years > Months” for “Archive Depth:”. For the “Full” instance, just use the defaults.
3. Next, add the PW_Archives widget to your sidebar and select “Sidebar” as the “Instance Name” in the widget form.
4. Finally, create a new page, call it “Archives” and add the shortcode [PW_Archives name=”Full”] in the content.

Or suppose, for a different blog, you’ve registered two custom post types called “Books” and “Movies”, and you want to display the archives of both in your sidebar. Here’s how you’d do it:

1. Create two PW_Archives instances, name one “Books” and the other “Movies”.
2. For the “Books” instance make sure to select only books (not posts) under “Include Types:” and only movies for the “Movies” instance.
3. Next, add two PW_Archives widgets to your sidebar and select “Books” for the “Instance Name” for one of them and “Movies” for the other.

Shortcode Usage

Using PW_Archives with shortcode is as simple as just adding this to your post or page:

[PW_Archives]

When you use just the above code, the default PW_Archives settings will be used. To specify options, create an instance and pass the instance name like so:

[PW_Archives name="INSTANCE_NAME"]

PHP Usage

<?php PW_Archives(); ?>

Use the above code for the defaults and the below code to use a specific instance:

<?php PW_Archives( 'INSTANCE NAME' ); ?>

Form Field Details

Settings

Instance Name:

A name to represent this particular instance (configuration). This name is used to refer to these settings in widgets, shortcode, and php code.

Include Types:

A list of post types, including custom post types, to include in the archive query. More than one may be selected.

Archive Depth:

PW_Archives displays its archives as a hierarchy with years as the top level, months below that, and posts below months. If you only want to display years and month (not posts), select “Years » Months”.

Display Order:

The order in which to list the archives chronoglically. “Descending” means the most recent archives are listed first and “Ascending” means they’re listed last.

Years to Display:

Specify ‘All’ to display all years that contain published posts. If you specify an integer, only that many of the most recent years will be displayed.

Initial Format:

How the archives are presented when the page initially loads. If you’ve indicated to hide certain submenus and javascript is disabled, those submenus are not loaded. If javascript is enabled, those menus are loaded but hidden. Keep this in mind if performance is a concern.

Javascript

Where:

Javascript can be enabled for year items, month items, or both. If you don’t want javascript enabled, leave both options unchecked.

Event Type:

“Click” refers to either a mouse click or a finger tap on a touch screen. “Hover” refers to when your mouse hovers over the item.

Animation Type:

“None” will cause the submenu to hide/show immediately. “Fade In/Out” will produce a nice fading animation, and “Slide Up/Down” will gradually reveal/cover the submenu from top to bottom or vise-versa.

Style:

Including PW_Archives’ custom CSS will add extra visual icons that are instantly recognizable and synonymous with showing/hiding submenus. The icons are shown via the “list-style-image:” css property.

Year Format / Month Format / Post Format

Date

The date format string to use when displaying each item. See Formatting Date and Time for details.

Template:

The template for how individual items are listed.
%YEAR% – The year based on the date format string specified
%YEAR_URL% – The permalink to the archive page for this year. If custom post types are specified, they’re automatically added to the archive page.
%MONTH% – The month based on the date format string specified
%MONTH_URL% – The permalink to the archive page for this month. If custom post types are specified, they’re automatically added to the archive page.
%POST_COUNT% -The number of total published posts in this year/month
%POST_TITLE% – The title of the post
%POST_DATE% – The date this post was published outputted according to the date format string
%POST_URL% – The permalink to this post
%POST_TYPE% – The singular name of this post’s post type. This is often helpful to add a custom class to this item
%COMMENT COUNT% – The number of comments for this post

Questions / Feedback

If you have any questions, feedback or suggestions, please leave a comment. I’m always looking to make my plugins better, and I don’t always know how people are using them.

At its core, Westmont Impact is a WordPress theme, but it’s a lot more than that. It’s also a secure donation application that takes credit cards and reports the real-time progress of the movement.

But that’s not it, the site also incorporates the Javascript Facebook SDK to allow users to log in and see which of their Facebook friends have also donated to the cause.

Audio Mechanics has quickly become one of the most sought-after re-mastering studios in Southern California. They have a reputation for aesthetic integrity and extreme technical proficiency. Specializations include sound restoration, music mastering, sound editing, and forensic audio. Their new facility in Burbank, CA features state-of-the-art adaptable 5.1 mastering rooms, a recording studio suitable for bands and ADR work, and a stereo mastering control room. Audio Mechanics has maintained, through word-of-mouth, an impressive list of corporate and independent clientele in the music, film, and television industries.

Audio Mechanics came to me in July of 2010 to have their site redesigned. Their one requirement: they wanted to be able to edit the content themselves.

Naturally, I recommended using WordPress. I offered to create a custom theme for them where every single part of it — including all the menus, the images, and the slideshow — would be editable. This was exciting for me because WordPress 3.0 had just come out and I was itching to try the new custom post types feature.

I created a custom post type called “SlideShowImage” so the client could just click “New SlideShowImage” (just like you’d click “New Post”), upload a photo of his choosing, give it a caption, and then the theme would automatically add it to the images in the slide show on the homepage.

Easy as pie. Go ahead, see it in action.

Bright Hope for Tomorrow is the website for Westmont College’s capital campaign. The goal of the site was to make it extremely easy for visitors to simply tab through each of the pages and, very quickly, get a sense of the compelling case for the campaign.

The site uses my custom flash video player as well as a sophisticated javascript history script to allow for the more natural usage of the back and forward buttons despite the mostly javascript interface.

Getting approval of your work from other is great. But it’s especially great when that approval comes from a well-known and respected source and when it was completely unsolicited.

Today a coworker forwarded me an article in Smashing Magazine called, Showcase of Academic and Higher Education Websites. The article begins:

College and university websites have a lot of roles to fill. They need to provide information for prospective students (both new and transfer), parents of students and prospective students, current students, and alumni. In many cases, they’re also the gateway to the school’s intranet and the public face for both academics and athletics. They often need to include reams of information in a way that makes everything easy to find. It’s a huge challenge.

And the truth is: most college and university websites are horribly designed. Either they look like they were designed fifteen years ago and then forgotten about, or they’re so overloaded with information that it’s almost impossible to find what you’re looking for.

But not every college or university website is horrible. There are some excellent sites out there, and below are some of them…

And sure enough, Westmont’s homepage, which I had redesigned the previous summer, was among the websites listed. One of the comments they made about it was its “great color scheme”, which was particularly funny to me because I had gone through numerous revisions before eventually settling on the one I chose. Matching another color with maroon isn’t easy!