Today I present an NMC project set that is sort of a Zen Riddle. If a blog has no posts is it a web site? This is the editing area for a finished web site:

How? Why?

The web site is made up entirely of WordPress pages, because there is nothing chronological in the site’s structure (though if we ever added a news section it would be easy). There was a reason I organized it around Pages… and I cannot remember why, but had something to do with being able to list the pages in a sidebar. I think. To be honest, the work started more than a year ago and the site sat behind a password until the grant funders for the project where ready to go public.

The site is for the Edward and Betty Marcus Digital Education Project for Texas Art Museums, a project where we worked with 28 art museum or art education programs in Texas to help them apply storytelling concepts to their collections and artists, and use the Pachyderm software to create online exhibits.

The overall template design has morphed quite a bit. I knew form the beginning it was going to need a basic 3 column layout, and somehow ended up with Talian which actually does not now look like the first version I had… and beyond the cosmetic changes I ended up doing a lot of cleanup and fixes for the CSS.

There was an intermediate version (now lost) that had a pink and green theme, even an animated Flash Texas map– a mock layout is what found and the now unused map that wa supposed to be a splash intro:

Soon before we went public, we got a hint that they wanted something less cartoonish and simpler, so we went to the more Texas color theme of the final site.

That’s just the cosmetics. Time to go under the hood and bang the pipes.

The bulk of the site are different WordPress Pages for each museum, such as the Blanton Museum of Art:

The left sidebar on all site pages is the same- some static top links, and using the command to list all the museum pages by excluding all the other pages

<h3>Museums</h3>
<ul>

<?php
  wp_list_pages(
  'title_li=&sort_column=post_title
  &exclude=2,3,4,33,34,86';
)?>
</ul>

The main column content is written for each museum, with some standard headings. The project screen shots are linked to the museum’s Pachyderm Projects- which show a lot of evolution in the two years of the projects, as the Matto example from the Blanton demonstrates nicely.

At the bottom, in homage to the lost map, I have embedded Google MyMaps with locations for each museum, so if you are on the page for the Old Jail Art Center, there is a “Where in Texas is the Old Jail Art Center”

and the main web page has a full map with all the museums located.

All the magic happens on the right sidebar. All of the Museum pages use a special page-museum.php template which just simply has it use a pecial sidebar template rather than the one used on the front page.

I am using some custom queries, external include files, and plugins to pull in museum specific content on the right sidebar. A lazy way would have been to use a separate template for each museum, but I was able to do it from a single sidebar template, using as a reference the database ID for the page.

The first section, Explore Projects, presents an abstract of all the museum’s projects, which can be anywhere from one to four like the Art House at Jones Center. The content in the box is pulled from an external content file in the template/projects subdirectory. The files are named based on the database ID for the page, like 3.php, 22.php etc. This makes it generic for the template to pull in the correct content.

We first jimmy through another iteration of the Loop to grab the ID of the current page

  <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
    	<?php $mypost = $post->ID; ?>
    <?php endwhile; ?>
  <?php endif; ?>

On a single Page, there is only one “post” and from that we get the ID. Then we simply call an include PHP statement to insert the content of that file:

<?php
$mfile = TEMPLATEPATH . '/projects/' . $mypost . '.php';
if (file_exists($mfile)) require_once($mfile);
?>

I created these content files as structured PHP statements, so our staff person creating content only had to define content for variables:

There is first some variables that provide the info for the museum:

<?php
// modify for each museum name
$mymuseumname = 'Austin Museum of Art';

// the page URL used on this site
$mypage = 'austin-museum-of-art';
?>

The next part handles two ways this content is used- if called from a projects-page template we display the name of the museum as a header. But, as we show below, this same content can be called for the front page as a random museum highlighted, so we need to be able to echo different text if the current page template indicates it is a general page:

// logic to add explanatory text for pages other than museums
if (is_page_template('page.php')) {
	echo '<p>Explore these projects from
        <a href="/' . $mypage . '">' .
         $mymuseumname . '</a></p>';
} elseif (is_page_template('page-projects.php')) {
	echo '<h3><a href="/' . $mypage . '">'
            . $mymuseumname . '</a></h3>';
}

Finaly, we create a block like this for each project to be listed for a museum, so if there are 4 projects for the page associated with page ID 14, then file 14.php would need four copies of this block of code. The image file is for the square icon stored in the template directory

<?php
// ----- BEGIN EDIT FOR EACH PROJECT ---------

// modify for the linkname for the picture
$mytitle = 'New Art in Austin: 20 to Watch';
$myimage = 'AMOA_85.jpg';
$mylink = "http://amoainteractive.org/newartinaustin2008/";
$myblurb = 'New Art in Austin features emerging artists
    from central Texas whose work stretches the boundaries
    of contemporary art.';

// --- do not edit below the line! ------------
?>

<p><strong><?php echo $mytitle?></strong><br />
<a href="<?php echo $mylink?>">
<img src="<?php bloginfo('template_directory'); ?>
   /images/projects-sm/<?php echo $myimage?>"
   class="alignleft" /></a><br />
<?php echo $myblurb?>
(<a href="<?php echo $mylink?>">explore...</a>)
<br clear="left"></p>

<?php
// ----- END EDIT FOR EACH PROJECT ---------
?>

The next section lists recent comments that have been made only for a particiular museum– to get this to work, I use a function that was built into this template (I think it was, or I put it in there) that allows me to pull an abstact of a comment made specific to a page. I’m able to specify character limits for te comments title, author, format the date string, and most importantly, provide a post ID to limit it to pull comments just to this one page.

<h3>Recent Comments</h3>
<p><strong>Read what viewers have to say
  about these projects...</strong></p>
<ul>
<?php
  mw_recent_comments(8, false, 35, 15, 35, 'all',
   '<li><a href="%permalink%" title="%title%">
    <strong>%author_name%</strong> said
   <em>"%excerpt%"</em></a></li>','d.m.y, H:i',
    '<li>No one has commented on these projects yet!
   <a href="#comment-temps">add one now</a></li>',
     'Pingback', 'Trackback', 'on', $post->ID, 150 ); ?>
</ul>

That’s all there is (hah) to a museum page.

I also created a single page that lists all projects in one display
, and this does so by simply inserting all of the include files described above used for the side bar. This page uses a special page-projects,php template, which instead of using the content entered for the page in the editor, just pulls it from the external files:

First we simply walk the directory that contains all of the page sidebar content files to build a list of all files, and then sort the file names:

if ($handle = opendir(TEMPLATEPATH . '/projects')) {
  // get all file names in directory
  while (false !== ($file = readdir($handle))) {
    if ($file !='.' and $file != '..') $myfiles[] = $file;
  }
  closedir($handle);
sort($myfiles, SORT_NUMERIC);

Now that we have all the file names in an array, we simply walk the array and include the files as indicated.

foreach ($myfiles as $item) {
  // display content in file
  echo '<div class="list-box"><div class="listing">';
  require_once(TEMPLATEPATH . '/projects/' . $item);
  echo '</div></div>';
  }
}
?>

And that’s it- a blog with no blog posts (does it make a sound?)

The next thing I am adding is a gallery page that will have icons for all projects that we can present as a way to explore all the projects in one page, maybe with some CoolIris action.

This current write up includes a custom category template, direct database querying, custom fields, and maybe a little elbow grease.

Firstly, the original site of Rachel’s postcards features her original artwork, with the most recent one at the top, and icon links to previous works below. I would guess creating a new one is making a new HTML page, copying some source code to the top of the index, and updating the icons below.

Maybe it’s not all that onerous, but it is all manual writing of HTML, etc, and to me, really screamed for re-doing the WordPress Way, meaning that authoring is done via the simple WP interface, and pages and archives are automatically created. Plus you get comments (well if someone leaves some); Plus it is integrated into her current blog, not a hanging appendage.

Even in what she did before by hand is pretty much what one might define as blogging, and the resulting new site really sets up nicely.

The way it works now is that every new postcard is created as a regular blog post, marked by a special category. A custom category template, detailed below, generates the archive or main entry view. Database queries are thne used to generate a random set of 6 to go on the sidebar of her main template, and a special sidebar for the category page.

Here’s the juice on the code….

Custom Category Template

When you assign a WordPress post to a category, your regular stock template is designed to generate a category view, which is usually just a copy o the normal reverse chronological posting of your blog main page, just with filtering out just the posts in the category. But with very little expertise needed, you can modify the appearance (or functionality) of a category archive by creating a Category Template specific for that category. This can be done by copying the guts of the main index.php or an archive.php template, and rename it category-XX.php where XX is the ID number for that category (you can find it be going to the control panel where you edit the post categories, and hover over the edit link- the URL reveals an id=XX in it as a unique identifier.

This means when WordPress is asked ti generate a category archive for Category XX it first sees if there is a specific one, and if not it uses archive.php or index.php. So her “postcards” category is id 129, so her template now includes a category-129.php template.

In there I has able to add the intro block of text that appears at the top. The trick on this one was making it so it would pull only the single most recent blog post in this category.

The core of understanding WordPress is getting into the Zen of The Loop. In essence (at least my wording of it), when you are accessing different parts of WP content (the main page, an RSS feed, a category page, a tag page, etc), WP knows and automatically does a database query to get the appropriate posts, and then the templates “do something” with them, by cycling through The Loop (so your control panel has a place to tell it how many times to loop- if you want 3 recent posts on the front page or 50). This typically looks like in a template:

<?php if(have_posts()) : ?>
  <?php while(have_posts()) : the_post(); ?>
  
  .. do stuff
  <?php endwhile; ?>
<?php endif?>

It already has done the correct database query without the template having to ask for it.

So to become a WordPress Jedi Master (maybe) one key is learning how to make your Own Loops. The gateway is the query_posts command which lets you steer The Loop. So for the category template, I want to make sure I grab posts just from the category I want and specify only 1 post (which by default is the most recent; so it means just inserting this above the code show above:

<?php query_posts('cat=129&posts_per_page=1');?>

On the first iteration I put all the icons to previous posts below the current post card (like the original site), but then we decided to replace the regular sidebar content with this (see below). The way sidebars are customized var with the template design; with this one, it was just easier to replace the standard:

<?php get_sidebar(); ?>

with my own include statement:

<?php include (TEMPLATEPATH . "/sidebar-postcards.php"); ?>

All Postcards on the Sidebar

The sidebar on the Postcards page is designed to place icons and links to all previous postcards, in reverse chronological order. To associate an icon for each post, we used custom fields. Rachel already had a directory of these images, so we just uploaded a directory named squares to her wp-content directory.

Since she had named the files systematically (2 digit month + 2 digit year) the easiest thing to do would have been to parse the post publish date to automatically retrieve the correct icon (we back dated the older post cards). The only problem was some of her icons were named *.gif and some were *.jpg, and while we could have converted them all to one format, I suggested using aq custom field named square to hold the name of the icon file for that post (this also allows them to be named anything and to have more than one per month).

The sidebar code also uses the same wp_query command as the category template- so you can have More Than One The Loop. I also use the Get Custom Field Values plugin to retrieve the info we need. The lop query this time calls for posts from this category, and using the value of -1 for showposts to return all posts in the category:

WP_Query('category_name=postcards&showposts=-1')

For this one, all we need is the name of the custom field value (name of the icon file name) and link it to the post, so the code for postcards-sidebar.php (new file added to template directory) looks like:

<h2 class="widgettitle">
  <?php _e('All Postcards'); ?></h2>
<div align="center">
<?php 
$my_query = new WP_Query('category_name=postcards&showposts=-1');?>

<?php while ($my_query->have_posts()) : 
    $my_query->the_post();?>

<?php $postcard_icon = c2c_get_custom('square');?>
  <a href="<?php the_permalink() ?>"  
     title="<?php the_title(); ?>">
  <img src="/wp-content/squares/<?php echo $postcard_icon ?>" 
  border="0" alt="" style="margin:8px" /></a>
<?php endwhile; ?>
</div>

Random Postcards for the Main Sidebars

I figured while I was tossing loops, I could make one that pulled X number of postcard icon/links at random for the main sidebar.

Unfortunately, as an experiment showed, while the query_posts command has an option for order= the only options are ASC or DESC (these are just part of the MySQL query; trying a value of order=RAND() which works in mySQL queries did not work here.

So this called for a more low level loop creation, of calling the MySQL database directly. This involved a bit of playing with the syntax in phpMyAdmin, and sorting out finding the right structure to get the category (the relict category column in table wp_posts is not used; it is buried in the taxonomy and term relationship tables. The winning query to pull 6 random posts from category 139 was:

SELECT wposts.* FROM wp_posts wposts 
   LEFT JOIN  wp_term_relationships rel 
     ON wposts.ID=rel.object_id   
   WHERE rel.term_taxonomy_id = 139 
     AND wposts.post_type = 'post' 
     AND wposts.post_status='publish' 
   ORDER BY RAND() 
   LIMIT 6

Using a custom select query I added this block to the main sidebar template:

 <?php     
 $postcards = $wpdb->get_results(
    "SELECT wposts.* 
     FROM $wpdb->posts wposts 
     LEFT JOIN  $wpdb->term_relationships rel 
       ON wposts.ID=rel.object_id  
     WHERE rel.term_taxonomy_id = 139  
       AND wposts.post_type = 'post' 
       AND wposts.post_status='publish' 
     ORDER BY RAND() LIMIT 6", OBJECT);   
  ?>

<?php if ($postcards): ?>
  <?php foreach ($postcards as $post): ?>
    <?php setup_postdata($post); ?>
    <?php $postcard_icon = c2c_get_custom('square');?>
    <a href="<?php the_permalink() ?>"  
    title="<?php the_title(); ?>">
    <img src="/wp-content/squares/
    <?php echo $postcard_icon ?>" border="0" alt="" 
           style="margin:1px;width:44%" /></a>

   <?php endforeach; ?>
 <?php endif; ?>
 <ul>
 <li><a href="/category/postcards/">all postcards...</a></li>
</ul>

which produces six random icons in each reload.

Navigation Link

the last touch was adding a tab link to the main template. Since most templates are done by cycling the WordPress Pages, and the link I wanted to add was a category, I just hard coded it into the part of the template that does the navigation heck the home page is hard linked so I just added another list item there.

That’s all! I think it took longer to write this up than to code it.

I am hardly a WPmu guru, certainly no bavatuesday… maybe a bavalatethursdaymorning. Most places running WPmu are doing it to provide a blog hosting service, like edublogs or the crazy stuff the Rev does at Mary Washington.

My need was to have a series of separate sites hosted in WordPress w/o having to have an even bigger fleet of separate installs (Heck, maybe one day I can rope them all in under the WPmu hood). No these are all a series of online publications we have done at NMC in the lasy 8 months, all using the slick CommentPress template. Developed by the Institute for the Future of the Book, CommentPress provides a way to post a series of publication chapters as “blog” posts, but the special feature is that comments can be attached to individual chapters.

So we have things like the 2008 Horizon Report in this format as well as the text of a keynote given by Howard Rheingold on Co-Evolution of Technology, Media and Collective Action.

Until just a few minutes ago, these were separate little sites, but now I have at least a crude launch page for the entire WPmu site at http://wp.nmc.org.

Getting here meant first upgrading WPmu from what I had installed, version 1.3.3 to the just released 2.6 version (they bumped the numbers to be in line with the versions of regular WordPress). The documentation on upgrading WPmu is skimpy to say the least; the ReadMe file said it had to be done incrementally from 1.3.3. to 1.5.1 and then to 2.6.

Okay that is not too much.

Except I spent 40 minutes poking arounf the WPmu site and the WP Codex w/o any luck. Finally I tossed a tweet in frustration, closed the lid, and went outside to do some real work. But the twitterverse shined and came through as Kevin Jarret pointed me to the Trac code side.

Doh, right? How the _______ would anyone find that (without friends on twitter).

The upgrade process was pretty easy. Next was the fun part, starting to rip apart the template:

This is just the start.

(A) List of Blogs on Site

One thing I needed was a list of all the blogs on the site (each a different publication), so I reached for the list-all plugin which, as you might guess, returns output of all the blogs on a WPMU site, with some options for the order, and how many it spits out. I just put some code in my index.php template to make a block that would appear above any “posts” as an index to the whole site:

<div id="opening">
<h2>Publications on this site</h2>
<ul>
<?php list_all_wpmu_blogs('', 'name', 
'<li>', '</li>', 'last_created');?>
</ul>
</div>

The div was needed to add some styles so it would stand out a bit more. At first nothing happened; I got the header but no lists. I dug in the plugin to find the MySQL query and then ran it manually in phpMyAdmin- and sure enough, it returned no results. Then I looked at the query and my wp_blogs table and realized it had a condition looking for a value of public=1 and in my table, these were all 0s. I can only guess that either my database did not get a right setting or maybe it was a new column added. My hack was to modify values in te database to set all values of public to be 1.

This was fine, but the query in the plugin also was returning a link to this same blog. So it was back to the plugin code, finding the query and adding an extra condition to the query on line 89:

AND blog_id > 1 so the main blog was skipped. That all worked.

The list-all plug in seems like a large chunk of code to do what I can see is a basic query, a lot of the stuff I did as described in WordPress Dissected. I plan to go back and just code in the query, which will allow my to pull and display other data, like the tag line, or the date published, or the number of comments, or…. With some MySQL know how, you can be a god. Sort of.

(b) List of Posts From Within

The next thing I wanted was a piece on the sidebar that would pull in content from among all the published papers within. There are a handful of plugins that do it on the WPMU Dev site, I chose Ada WPMU Recent Posts because it did so as a widget. I’m old school in my templates and have not done much with widgets except when forced to (like on WordPress.com). But since this blog was basic, I thought it would be worthwhile to get some widget experience.

It worked as advertised, and the options in the widget editor let me chose to pull Posts or Pages, and some options for ordering them.

The problem was a date order was not very interesting. When I create these Comment Press sites, I mend up cresting about 5-10 posts in a row in the same blog, because each one is chapter/section. So in this list, the would be all from the same blog because I di each site at different times.

So I tweaked the code slightly, by editing again the MySQL query that grabbed the posts, by changing line 224 in ada_list-all-posts.php (this plug is ironically built on top of the list-all.php plugin I used inn section (A)) which sets the ordering of the results to be in reverse chnronological order– I changed the line that reads:

$post_sql .= " ORDER BY post_date_gmt DESC " . $limit . "";

to read:

$post_sql .= "ORDER BY RAND() " . $limit . "";

so rather than getting 7 or 10 posts in order of most recent, I now have a random selection form across the site.

This is still in play mode. I want to add more that will pull comments form within the site to the front, and eventually some sort of site wide tag thing going.

Wow, I love tinkering in WordPress.

More or less, I have a main WP site, with a nested second complete WP site sitting inside of it, yet they are themed and connected to each other in away to make them work as one.

For the last two years, I have been running the NMC Campus Observer, a site that documents the projects and events of the NMC’s activity in Second Life. The design of this site is a blow apart of one of the more basic templates, Blix, as described back in May 2006 as WordPress Theme Philosophy.

In 2006 there was not a great deal of things happening in education, and I spent a lot of time and energy writing, researching, interviewing, setting up events. The nice thing about the continued interest among educators is that there are many more events and things going on that would be if interest to them. And I am seeing less of a need for me to be writing about them all; over the years I did recruit some guest writers, but most volunteers waned after a few posts.

Lets put it this way- I just peeked at the users page of the dashboard, and I have 350 posts credited to me; the next person after that has 18.

I’m tired of blogging there.

But the ideal thing has happened, with the expansion of NMC owned property in SL and many of it leased to other educators, they are now more frequently running their own events. I’ve been interesting in finding ways for them to announce/post their events; using a shared Google Calender was not all that successful. I was looking for a tool that people in the NMC sl community could use to post their events and would generate an RSS feed we could display on other web sites, or in SL using some of the RSS display systems that are out there.

A blog software is ideal for generating the feeds, IMHO. But I dont want to give access to the main blog site. So that’s when a tiny light bulb lit up- what if I set up a second WP inside a subdirectory of the primary site? this way, it could have a different set of users, and they could only edit their own calendar posts.

I themed it using the same template, it it even draws random banner images from the same directory the main site uses. The top navigation needed to be hard coded to link to the same sites as the main one. So while the main WP powered site is at http://sl.nmc.org/ there is an entire second WP install in /calendar so this site, the NMC Campus Community Events Calendar, is accessed via http://sl.nmc.org/calendar/:

I simplified the right sidebar and had to hard code the top green links since they are not generate by pages in the new blog. The other subtle thing I did was to create two custom fields; one contains the slurl for the event location, and the second one is a date/time in Pacific Time (aka linden Time) for the event.

Then in my templates, it uses the custom fields to display the SLURL as a hyperlink and convert the time to a nicer display format and also link it back to a World Time clock to provide local times for an event. See the authoring guide I provide for our calendar blog users.

I had all of this working a few weeks back, but there was a major missing piece. If people posted their events in the interior blog, how would the info get widely shared? it’s buried. I did not want to copy the post and paste it in as a new entry. I could embed an RSS feed in a sidebar of the main blog.

And then I had a Jim Groom lightning idea flash — use one of those plug-ins he raves about to post form one blog to another. It was easy to find on of Jim’s favorite plugins — WP-o-matic, a tool that regularly checks an RSS feed for new content, and if found, it inserts it as republished content.

So now the main Campus Observer blog has WP-o-matic installed, and if it finds a new feed from the Campus Community Events blog, it posts anew entry to the main site. I have it configured so the title published in the main site links to the full entry in the Calendar site.

As an example, this post on Metanomics Season 2 was posted into the calendar site, and automatically republished to the main blog, with its title linked to the full story in the calendar blog.

Blog in a blog– I cannot vouch that anyone else might need to set up something like this, and likely there is some other way I could have rigged it in one blog, but hey, I was curious if this would work, and so far it looks good.

But WordPress, you make me sing. In this blog post that portends to be a monster one of length, I am going to dissect a new site I worked in gory technical detail.

On each of these sites, I have started with a standard template and slowly ripped the guts apart. So far, in the stable, is the NMC Campus Observer which began as the Blix template. Then there is NMC Virtual Worlds a child of the Orange 2.0 Theme, and one where I learned to create multiple page templates, use custom fields to spawn content specific sidebars, and rolling my own database queries to get posts I really wanted. Our podcast site, NMC Conversations is probably the least modded, a few tweaks of the redoable theme.

Now the thing I also love about WordPress is there are many levels of creativity you can operate at. You can simply blog, never tinker with the templates, and easily switch out themes like a new pair of socks. That’s great; it means you are focused on the content. Or you can get way down into the guts of the engine. Now I don’t do much with widgets- I think the concept is great for many bloggers as it offers a nice amount of flexibility on what you slap on your sidebar… but in my case, I find them horribly limited and boxed in.. cause I know I can easily script my way to something better. Or you can somewhere in between- add your own graphics header, toss some specific text or web javascript code in the sidebar.

So as I get closer to the details, I remind you the stuff I am talking about is what you can do with your own code on a hosted server; while the WordPress.com service is fabulous (I used it myself this year), its simplicity comes at a price of severe lack of template tinkering. You really cannot do much there.

BEFORE:

The site I am going to talk about is the NMC Pachyderm Services web site, which replaces a static HTML tabled encrusted, hand code the navigation links” Pachyderm.org web site, which was not all that bad, but once you go to database driven template sites, it just hurts to hand code an HTML site.

AFTER:

So I am going to talk alot about the mangling I did in the templates along with some plugins I deploy (and tweak too). I should say I go about waist deep into the CSS and full body dive into the PHP code of the templates. And for some of these sites, I make a bend away from the standard format of blog as reverse chronological series of “posts”. I make web sites, not blogs.

Some of this stuff may get nitty gritty in detail, but I am intrigued to see if I can document all the little pieces that came together for this site. To be honest, these really develop organically, and sometimes change/evolve with more content dumped in.

These projects start usually with a lot of scribbles in real paper, and boxes and lines, as I try to flesh out some sense of the information types. Then I start browsing WordPress themes. I am not always looking for one that “looks good” out of the box, but more, one that seems to have a general layout and design elements I have in mind. Everything, from colors to graphics to sidebar structure, is malleable.

In this case, I had access to a great set of themes shared with my by James Farmer. The Vertigo theme by Brian Gardner jumped out- it has appropriate color elements, but also a clean text style, and 2 sidebars to play with. I also eyeball how complex the theme files are; this one is elegant with a basic set of files.

The header text is all graphics, so it could be almost any type style and the footer is a Hemingway style. At this point I think I may get lucky and not have to do much to the template. But that’s no fun…

In looking at the content needs, the Pachyderm site would need basic intro static content, time stamped news items, and a collection of examples for the “gallery”. It might not need more, but that was enough to get rolling.

So in the next chunk, I am going to talk about all the mods I did on the front page, using the numbered spots as a key:

(1) Header Graphics
These changes are easy, you just need to find the originals, check their dimensions, and then create new versions, and replace them in the theme’s images folder. For the Vertigo theme, the main banner is all graphic, so I could use any font to make the pachyderm services background header. In the Pachyderm site, the font for the main title is “Orater Std” and the tagline font is Monotype Corsiva. The left pachyderm logo was a bit of editing to get a good mask for the icon. A sign of a quality template to me is that the author has provide PhotoShop versions of this graphics (e.g. the logo blank), so the sizes and background colors are all preserved.

(2) The static front content
The focus of this site is not a regular stream of “blog posts”, so I used Options -> Reading the feature that allows make the front of the site display this static content from a WordPress page. This is the second or third time I have used this approach for a site that has a consistent front face so the primary information is not the new “posts” but information that does not change over time. The “posts” are there, but are now relegated to the sidebars as the content that are newly added are either news items, and showcase items.

(3) Fixing the Top Navigation Links
On this and many templates, automatic navigation within the blog is enabled by WP code that loops through all of the pages created, and attempts often to put a lot of content in a small box. I had plans to put those links elsewhere. So rubbing together the template tools, we go to Presentation -> Theme Editor, and then open up the header.php file to change these lines:

  <div id="headerright">
    <ul>
      <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
      <?php wp_list_pages('title_li=&depth=1'); ?>
      <li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
    </ul>
  </div>

This will create navigation from all WP pages, and then tack on in the beginning a home link and RSS on the end, but I opted for hard coding a smaller set since I only wanted a handful on the top navigation (yes, I could have used the options on wo_list_pages to exclude pages by ids, but straight HTML here is less work. Plus I’d have to keep adding excludes as pages were added).

<div id="headerright">
  <ul>
    <li><a href="<?php echo get_settings('home'); ?>">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact Us</a></li>
    <li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
  </ul>
</div>

(4) Navigation Links
A normal blog has a sidebar block listing categories and another one listing static wordpress pages; for this sites purposes, I have blended them together under an “Explore” heading. I somewhat did it the lazy way, just shoving together in one <ul> list the pages and then the categories. I hope the order does not mattter, in that case I’d have to do some more gymnastics in PHP (but I know I can take that on).

<li id="Pages">
<h2>Explore</h2>
<ul>
<?php wp_list_pages('title_li=&depth=1'); ?>
<?php wp_list_cats('sort_column=name'); ?>
</ul>
</li>

(5) Static Content Links
Nothing special here, just to show you can add pretty much what you need in HTML to the template; in this case, a top block of specific links (well I could have used a blogroll, but for 4 link, straight HTML is easy). and the “About” block.

You may have to have some savvy of the CSS- in this case, all of the <a>…</a> links are set as block, meaning they sit alone on a line (this is to handle the rollover effects).

(6) Random Post from Category
Now we really roll of our sleeves and do custom code. We have a category of posts for our pachyderm showcase and want to randomly put one on the front page. There might be a plugin that does this (I looked but did not find one that can pull from a category), so I rolled my own code.

Put your safety glasses on, this gets pretty messy.

I’ve learned this from the WP Codex on Displaying Posts Using a Custom Select Query. More or less you figure out how to query the database to get what you want (usually a bunch of trial error tests in phpMyAdmin). Some of the query stuff is tricky, as the wp_posts table contains not only blog posts, but page content, and even rows for the media uploaded, so you have to make sure you get the right things back. And fishing from categories is not as easy as it used to be, so it requires a join to another table where the categories are related to the posts.

I should add that I am using another advanced technique for the posts that are Pachyderm Showcase items- I use custom fields for two extra pieces of data for each post in this category (for reference, see the corresponding post):

The value of “icon” is a URL for a square icon used in the entry. These showcase items had already been done on the NMC drupal site, so I just link to those existing ones.

The value for “miini” is a file name of a 220 pixel wide icon that is used for the front page preview- I have these stored in a specific directory inside /wp-content/showcase, e.g. the one for the Fox Harris entry. In hindsight, I could have gotten away with one custom field value and made twp WordPress special directories for the image.

Anyhow, where I need these in my code, I use the Get Custom Field Values plugin to get the values. For example, to embed the icons in a post page, I use:

<?php 
$showcase_icon = c2c_get_custom('icon');   
if ($showcase_icon) echo '<img src="' . 
  $showcase_icon . '" alt="" 
  class="right" />';
?>

This code will embed an icon only if there is a value for the appropriate custom field.

I cannot underscore enough how much flexibility custom fields provide. I use it extensively on the NMC Virtual Worlds site (see the write-up I did for that site)

But back to this front page random post inserter, here is the whole chunk that does this section, with some explanatory comments…

<?php 
/* Only display on pages that are front (id 3) or the About page */ 
if ( is_page('3') or  is_page('about')) : ?>

<li id="Showcase">
<h2>Featured Pachyderm</h2>
<ul>
<?php
// Here is the hairy MySQL query to get one post
// selected randomly from id# 4 (category id)
 $pageposts = $wpdb->get_results(
   "SELECT wposts.* FROM $wpdb->posts wposts 
     LEFT JOIN  wp_term_relationships rel 
     ON wposts.ID=rel.object_id 
     WHERE rel.term_taxonomy_id = 4 
     AND wposts.post_type = 'post' 
     ORDER BY RAND() Limit 1", 
     OBJECT);
 ?>

<?php if ($pageposts): ?> // loop over results
<?php foreach ($pageposts as $post): ?> // each result
  <?php setup_postdata($post); ?> // get variables

  // use plugin to get value of custom field
  <?php $showcase_preview = c2c_get_custom('mini');?>

  // only execute if something was found
  // embed the graphic and link
  <?php if ($showcase_preview): ?>
  <li><a href="<?php the_permalink() ?>" 
  title="link to <?php the_title(); ?>">
  <img src="/wp-content/showcase/<?php echo $showcase_preview ?>" 
  border="0" alt="" /></a></li>

  <?php endif; ?>
  
  <!-- print a title and link -->
  <li><strong><a href="<?php the_permalink() ?>"  
         title="link to <?php the_title(); ?>"><?php the_title(); ?></a>
         </strong></li>
  
  // use the RSS version to print a mini blurb, first 35 characters
  <li><em><?php the_content_rss('', false, '', 35); ?>...</em></li>

 <?php endforeach; ?> 
 <?php endif; ?>
 
 <!-- more showcases link -->
  <li class="more"><a href="/category/showcase/">more pachyderms...</a></li>
   </ul>

</li>
<?php endif?>

Its pretty hairy, yes, but exactly what we needed.

(7) Move Search Field
The Vertigo template has the search field in the footer; I justed moved it higher on the page. I believe search boxes ought to be “above the fold”.

(8) Custom Code for Recent News
As another variation of the approach in item 6, I wanted to display headlines for posts that re only in the “Pachyderm News” category. But the twist here was using some code to rework the date display like it was on the old Pachyderm.org site (it was not critical, more of, “I wonder if this can be done”).

This custom query is not as complex as the previous example, so I used the WP_QUERY function that allows me to use the standard WP method and just add some parameters, in this case to select from a specific category, and return 5 items.

We then loop over each one, use the the_time() function to reformat the timestamp, and make a list of links.

<li id="Recent">
<h2>Recent News</h2>
<ul>
<!-- use WP_QUERY to select by category and count -->
  
<?php $my_query = new WP_Query('category_name=news&showposts=5');?>
  
  <?php while ($my_query->have_posts()) : $my_query->the_post();?>
  <!-- display link, date reformatted, and title -->
  <li><a title="<?php echo the_title() ?>" 
  href="<?php the_permalink() ?>"><strong>
  <?php the_time('m.d.Y') ?></strong> 
  <?php echo the_title() ?></a></li>
  <?php endwhile; ?>
     
  <li class="more">
        <a href="http://pachyderm.nmc.org/category/news/">more...</a></li>
   </ul>
</li>

(9) Flickr Badge
I love adding random photos to a page for freshness. Here I use flickr’s badge code to pull from photos in an NMC general photo account only photos tagged as pachypix.

You are not stuck with the cut and paste code. I yank out some chrome and stuff I dont want, and you can edit the javascript line:

http://www.flickr.com/badge_code_v2.gne?count=4&display=random&siz....

to sat tel it a different number of photos to pull. I use this method on other sites; for example, if you use the badge creation tool to work on a public tag, flickr does not offer random as a display option. But if you edit the value here... it works.

<?php /* If this is the frontpage */ if ( is_page('3')) : ?>
<li id="flickr">
<h2>Pachy Pix</h2>
<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; 
   background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, 
Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" 
cellpadding="0" cellspacing="10" border="0">
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4
&display=random&size=t&layout=v&source=user_tag
&user=17942035%40N00&tag=pachypix">
</script>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->
</li>
<?php endif; ?>

<li id=Pachyforge">
<h2>PachyForge News</h2>
<?php 
// declare Feed2Js variables
$src = 'http://www.pachyforge.org/index2.php?
     option=ds-syndicate&version=1&feed_id=2';

$chan = 'n';
$num = 5;
$desc = 0;
$html = 'n';
$tz = -8;
$utf = 'y';
$date = 'n';
$targ = 'y';
$pc = 'y';

// use  feed2php include file
require('/var/www/........./feed2js/feed2php.inc');
?>   

<span class="more">
<a href="http://www.pachyforge.org/">more...</a>
</span>
</li>

<h4>How do I?</h4>
[faq summary How Do I?]

<h4>Authoring</h4>
[faq summary Authoring]

<h4>Working with Media</h4>
[faq summary Media]

 <?php  
if ($post->post_parent=="43") 
echo '<p style="font-size:95%; text-align:right">
<a href="/faq">&laquo; return to pachyderm faq</a></p>';
?>