Thanks to a direct message nudge from @lloydbudd as a reminder, I hemmed and hawed and then just spelled out WTF. I’ve got a bunch of miles on United to get there … ouch… speaking of WTF… WTF is a “close-in processing fee”? United charged me, a sort of frequent flier, $75 because I just used my miles for a trip less than 21 days out. How is that costing them money? Next thing it will be the seat-belt usage fee and the ramp extension charge. Oh and the landing gear deployment fee. Geez.

Oh well, its still an inexpensive trip, and a chance to spend a day in total geek out WordPress mode.

I’m going to camp! I’m going to camp! I’m going to camp! I’m going to camp!

Well not completely, the whole admin interface is different! It has that new car WordPress.com smell, the old blue is gone, we have pastels, and woah, all the stuff is in a different place. Its just an adjustment phase, like wiping the crud from your eyeglasses. Back up th

This post is not about the virtues of WP2.5 as they ought to unveil themselves through use (time to get serious about tagging though). I am thinking more about the fleet of 4 or 5 WP sites I have at NMC (#6 is in the oven) and the upgrade path for them. WP2.5 has in place upgrades for plugins and at NorthernVoice, Matt hinted that it might someday be a feature for the whole blog.

So for grins, and documentation, my typical steps are listed below.One problem is that an update requires deleting all core files and adding new ones, so users accessing your site while this is in progress, might see all kinds of strange things.

• Back up the database (on NMC sites, I run a cron script that does this daily, thats different). I use the WordPress Database Backup plugin and store a copy on my server.
• I already keep a master set of all my wp-content stuff (plugins, themes, etc) on my work machine, so no backup needed.
• De-activate all plugins except one – Maintenance Mode. This is super handy, as it presents a notice if someone visits your site while you are “in maintenance mode” – they see a static page. Users with admin access can log in and see everything. You can test the new version before opening it up. Just dont forget! (yes, drupal as this built in, and I like it)
• I delete ALL files from install directory except for wp-config and the wp-content directory. On some sites, I have a lot of other files not related to WordPress, so in those cases I am deleting al of the wp-xxxxx files (except config)
• Upload new files, go to the upgrade URL, and you are almost home free (dont forget to turn back the setting for Maintenance Mode

But I ran into a situation recently that required another strategy– we were doing upgrades and repairs on our MySQL database, and even in maintenance mode, the site would hang and generate a database connection error of MySQL is offline. I came up with my own strategy for times when perhaps I know MySQL is not available (this may never happen to most readers).

I created a directory in my base directories named offline and put a single index.php file in there that provides a basic message– you can see one at http://sl.nmc.org/offline/.

Next, you need a manual switch. This is done in the main index.php file which is lovingly short:

<?php
/* Short and sweet */
define('WP_USE_THEMES', true);
require('./wp-blog-header.php');
?>

The first statement just sets a flag, and the second one includes the WordPress engine, and starts it with a database call. So all we need is a way to skip that part, and load our static page. So my modified index.php file has statements that I turn off/turn on by toggling the // prefixes on certain lines. A // before a line treats it as a comment, or a note, and is not execute.

In normal WP mode, where all the databases are working and chugging along, my index.php looks like this- we just run everything through wp-blog-header.php:

<?php
/* Short and sweet */

define('WP_USE_THEMES', true);

/* comment out line for on/off mode */

// ONLINE MODE
<strong>require('./wp-blog-header.php');</strong>

// OFFLINE MODE
<strong>// header('Location:offline/index.php');</strong>
?>

And should my database be kaput, sick, or just not available, I can route any blog access (since all URLs to a blog are handled via this basic index.php file) bu adding the comment code to one line, and removing it from the other:

<?php
/* Short and sweet */

define('WP_USE_THEMES', true);

/* comment out line for on/off mode */

// ONLINE MODE
//<strong>require('./wp-blog-header.php');</strong>

// OFFLINE MODE
<strong>header('Location:offline/index.php');</strong>
?>

So all accesses to this blog will go to the holding pattern page.

Yeah, its manual and not elegant, but It Works.

And one more note for the drupal-istas- even with drupal’s maintenance mode, if the database is off kilter or off, you will not see your crafted message but a database error message that tells an admin somethings about checking the configuration settings, not what you want users to see.

I skirted this by hacking the /includes/database/mysql.inc file and commented out the typical database connection message around line 102, and write my own:

    // Show error screen otherwise
    drupal_maintenance_theme();
    drupal_set_header('HTTP/1.1 503 Service Unavailable');
    drupal_set_title('Unable to connect to database server');
    print theme('maintenance_page', 'The NMC Web site is 
   undergoing maintenance or database repairs at this time 
   and should return soon. If this  situation persists please
   contact us at website@nmc.org and thanks for your patience.</p>');

Bad news.

And then I recall at Northern Voice 2008 when keynoter Matt Mullenweg said he created Askiment for his Mom top be able to blog w/o worry of spam… well he had me.

So now I am running Askimet. No spam fence is w/o problems, so I am holding off any celebration.

photo credit: lovestruck.

This is my first play with PhotoDropper a WordPress plugin that provides a search interface and one click insert so you can find creative commons licensed flickr photos in your blog.

It is lovely, a lovely, lovely plugin, and is just one more iota of my expression of my flickr love. Or obsession.

All of which is infinitely more fun, fulfilling, interesting than drudgery than things like meta data or BlackBored.

I am fairly sure this is a linktribution to Tim Lauer via twitter

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>';
?>