WordPressing Dissected: NMC Pachyderm Services

Let me join the Jim Groom Kum-Ba-Ya I Love WordPress Chorus. In this least year, I’ve rolled out 3 NMC web sites that are published via WordPress, with each one going deeper into the bowels of the templates and just more jazzed how I can bend them to my will, casting CSS, PHP, plugins, MySQL to do my bidding. This is unlike drupal, where after a year I am still trying to figure out just how the heck it works and manages information. Its still a grey murky, opaque blue gumdrop box. I am trying to summon the drupal love, and it aint happening.

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:

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).

(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).

(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:

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…

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 <a href="http://codex.wordpress.org/Function_Reference/WP_Query">WP_QUERY</a> 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 <a href="http://codex.wordpress.org/Formatting_Date_and_Time">the_time()</a> function to reformat the timestamp, and make a list of links.

(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....

<!--?php /* If this is the frontpage */ if ( is_page('3')) : ?-->

<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">

<tbody>

<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

&amp;display=random&amp;size=t&amp;layout=v&amp;source=user_tag

&amp;user=17942035%40N00&amp;tag=pachypix">

</script></table>

</td>

</tr>

</tbody>

</table>

<!-- End of Flickr Badge -->

<!--?php endif; ?--><strong>(10) Embedded RSS Feed</strong>

We wanted to include headlines/updates from the <a href="http://www.pachyforge.org/">Pachyderm Developer Community (PachyForge)</a>. There are tons of WP plugins for doing this, but since I know <a href="http://feed2js.org/">Feed2JS</a> inside out, I just use the <a href="http://feed2js.org/index.php?s=php">PHP version of it to embed feeds</a> as needed.



I have a central stored location for Feed2JS code that is on our web server, and can access it from any one of our 8 or 9 virtual domains by knowing the path (obscured below for obvious reasons).

[crayon-6640ecc5f0c6f326603731/]

Since my install of Feed2JS caches feeds (well all versions fo) but are cleaned on a daily basis, this is really stable.



<strong>(11) Gutted Footer</strong>

The footer on the Vertigo template is pretty much for blog content, with more lists of recent posts, categories, etc, in 4 columns that is typical for templates following <a href="http://warpspire.com/hemingway">Hemingway</a>. It s anice design style, but the content as is was not what we needed.



So I put a right aligned NMC logo in column 1, put NMC contact info in column 2, the basic links generated by the WP blogrool in 3, and a combo of RSS links and credits in column 4. Its pretty flexible what you can do. And you are not stuck at all with the stock footer.

<h3>But Wait There is More!</h3>

Beyond this template mucking, I made use of two plugins I really found useful that generate special pages for our site.



<a href="http://green-beast.com/blog/?page_id=136">Secure and Accessible PHP Contact Form</a> provides an excellent web form for collecting feedback from visitors, and does away with putting email address links on your site:

<blockquote>This powerful yet easy-to-install PHP contact form features exceptional accessibility and usability while still providing extensive anti-spam and anti-exploit security features. A marriage of communication and peace-of-mind</blockquote>

It is dead easy to configure, with a lot of options for features and design. So it creates our <a href="http://pachyderm.nmc.org/contact/">Pachyderm Services Contact page</a>. I am using this now on all new WP sites I do because it is so useful,



The next one I found is new; we wanted to have a Frequently Asked Questions section on the site. I could have coded it as a static page or series of pages with perhaps sub categories. But this seemed to call for a lot of manual page creation, and I wanted to turn over the content creation / management to NMC staff.



So enter the <a href="http://knowledgeconstructs.com/wordpress-plugins/faq-tastic/">FAQ-Tastic plugin</a> which provides a Wp admin interface for creating, managing, editing the FAQ. So here is the final <a href="http://pachyderm.nmc.org/faq/">Pachyderm Services FAQ </a>as I created it-- well, not final, it is a work in progress.



This took a little bit of extra leg work and tweaking. So first, in FAQ-Tastic, I create a collection of question groups, and associate them with the main FAQ web page- this means each Q&amp;A will be generated as a separate sub page:



<img src="http://cogdogblog.com/wp-content/uploads/2008/02/faq-q-groups.jpg" alt="faq-q-groups.jpg">



and the links on the right allow access to edit, add new questions to that group:



<img src="http://cogdogblog.com/wp-content/uploads/2008/02/faq-questions.jpg" alt="faq-questions.jpg">



You control the order by dragging and dropping the green bars. Editing is easy, well you need to roll your own HTML if you want something more than text. but it works.



The trickier part was on formatting the FAQ page... it is essentially a list of tags specific for this plug-in, that I put below headers to put in the right group order:

[crayon-6640ecc5f0c87868607326/]

where the "summary" command means print the question linked to the answer page, and the third part of the tag is the name of the question group.



I also had issues with the output since it puts them into an HTML unordered list, but then uses &lt;h3&gt; tags, which looked butt ugly on this site. So I just went down into the plugin files and found the php files that generate output, and cleaned it up to make them just bold, and remove extraneous line breaks that mangled the output.



The last little trick was the problem that landing on an Answer page provided no link back to the index. So again, I rolled up my  sleeves and edited the page.php template:

[crayon-6640ecc5f0c8d459828049/]

43 is the WP id for the <a href="http://pachyderm.nmc.org/faq/">main FAQ page</a> so if I am on a child page of that, which is what the plugin creates, I insert a return link.



That is about all my tired mind can think of for the details of how this site works. All in all, crafting these WP sites is a work of sheer joy, and each one I learn new techniques I roll into the next one. With your own WP site, there is no limit to what you can do, and you can arm twist WordPress into running any kind fo site, one that is easy to update, is dynamic, and sometimes even darn pretty to look at.



I love WordPress like no other ;-)

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon