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:
pachyderm-old.jpg

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:pachyderm-services-new.jpg

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.

Vertigo theme

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:

pachy-services-web.jpg

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

custom-fields.jpg

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....(10) Embedded RSS Feed
We wanted to include headlines/updates from the Pachyderm Developer Community (PachyForge). There are tons of WP plugins for doing this, but since I know Feed2JS inside out, I just use the PHP version of it to embed feeds 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).

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

(11) Gutted Footer
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 Hemingway. 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.

But Wait There is More!

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

Secure and Accessible PHP Contact Form provides an excellent web form for collecting feedback from visitors, and does away with putting email address links on your site:

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

It is dead easy to configure, with a lot of options for features and design. So it creates our Pachyderm Services Contact page. 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 FAQ-Tastic plugin which provides a Wp admin interface for creating, managing, editing the FAQ. So here is the final Pachyderm Services FAQ 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&A will be generated as a separate sub page:

faq-q-groups.jpg

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

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:

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

43 is the WP id for the main FAQ page 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 ;-)

The post "WordPressing Dissected: NMC Pachyderm Services" was originally cracked open and scrambled from a rotten egg at CogDogBlog (http://cogdogblog.com/2008/02/wordpressing-dissected/) on February 14, 2008.

19 Comments

  • I’m actually working with Jim Groom to do a lot of the exact same things right now. He’s literally right across from me. We’re working on an aggregation/portal page for the UR academ. tech consultant group we work in.

    So this post is right on time! Thanks a lot.

    Got to share the WP love after all . . . although I’m not sure I’m going to let Jim talk me into the WP tattoo (maybe if it’s some place discrete).

  • Alan, great post. But I have a weird story to share. Just this morning at about 9AM CST, I had posted to James Farmer’s edublogs forum a request to add the Vertigo 3-column flexible-width template theme, citing reasons why I thought it was a great layout. And then voila! … here it appears again on the same day in your post, involving the same people. Strange!

    http://edublogs.org/forums/topic.php?id=5196&replies=1

    I have requested that this them be added to edublogs.org. I want it!

    Thanks, Frank

  • Alan Levine aka CogDog cogdogblog.com

    That’s great, and I know James, it will be there in about an hour. I thought I got it from a set of themes he gave me for WordPress multi-user, but maybe I found it elsewhere.

    It has many of the features I like in WP templates, see Brian’s other ones at
    http://www.briangardner.com/themes

    Vertigo has a few color schemes

  • Chris L

    It’s funny– while I like some of the things Drupal can do (the new eduglu project would be much more difficult, if not impossible, in WP), I also have a hard time understanding it. Much to my chagrin after my comments about the code itself at NV last year. I stand by it, to some degree, but it turned out to be a meaningless distinction for which I expect much punishment from Jim.

    This is an excellent, excellent post that I am going to share with my students– who are just getting into theme hacking– right away!

  • Rachel Smith ninmah.wordpress.com

    Alan,

    As the previous hand-coder of the links on the old site, I want to give you a HUGE round of applause on the new one. I knew you did a couple boatloads of work but wow, that’s a lot of tweaking. The new site looks great, works great, and I never have to hand-edit a page again. Three cheers! You did a fantastic job.

    Rachel

  • James Farmer incsub.org

    You are totally giving me credit for something I didn’t do :)

    However, inspired by all of this I’ve also modded the theme to work with tags, the Edublogs avatar system and take a lovely big fat jubly customized header so while you may get all excited about what wp.com offers, Edublogs actually provides this theme now, which, with the use of a few widgets can do 95% of what you’ve got going on up there :)

  • I’ll do this duo with you anytime:

    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.

    I love it when the big dog barks the same tune is me, makes me feel I am not so outnumbered by those Drupal droids.

    More seriously, that FAQ-tastic hack is awesome, I am going to play with that shortly. This is an amazing write-up, and as Tom said above, as are working on a similar site right now, and will take much from this amazing resource. As always, you’re a stud when it comes to sharing all you have done. Especially since you can actually hack with style, I have none of your programming chops, but still seem to yell far louder most of the time. But with quiet certitude you remain the Babe Ruth of our generation!

  • Dancing Monkey Mania » Blog Archive » links for 2008-02-15 community.uaf.edu/~fncll/blog/2008/02/14/links-for-2008-02-15

    […] WordPressing Dissected: NMC Pachyderm Services An excellent article detailing how Alan took an existing theme and worked it into the shape for his vision… just what we were talking about in class! (tags: linklog cios246 wordpress) […]

  • I can’t thank you enough for this, and your timing is perfect–I’ve been asked to mock up a couple of sites in WP for our teaching resources center, but I’m very much a WP newbie. Many of our website needs are similar to yours, so I’m so very grateful for this post.

  • Wow Alan, this really is a magnum opus! So much here to digest and dissect. A great real-world tutorial. Thanks much for documenting this.

  • » WordPress as CMS WPMu Ed wpmued.org/2008/02/18/wordpress-as-cms

    […] WordPressing Dissected: NMC Pachyderm Services » CogDogBlogCogDog gives a play-by=play for how he converted a regular old WP Blog into a dynamic website. Some great stuff here, I particularly like the FAQ-tastic hack […]

  • WordPress Alchemy- Blog in a Blog » CogDogBlog cogdogblog.com/2008/06/25/blog-in-a-blog

    […] the vein of last February’s WordPress Dissection where I detailed the ripping apart and patching together of a WP template, here’s another bit […]

  • Wrangling WordPress MultiUser » CogDogBlog cogdogblog.com/2008/07/31/wrangling-wordpress-multiuser

    […] 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, […]

  • WordPress as a CMS… Advanced Navigation | andremalan.net andremalan.net/2008/08/wordpress-as-a-cms-advanced-navigation

    […] a dearth of information out there on how to do it (there are some out there… including some in amazing detail from Alan […]

  • Devon dcamd.com

    This is wild. Great great ride. I’ve got some questions some time for you over a beer or four. Basic WP things I just don’t know ;)

  • Two interesting items | Playing with Technology jon.breitenbucher.net/2008/09/10/two-interesting-items

    […] first item is Global Voices which I am not sure if Grant has mentioned ot not. The second item is a post on CogDog detailing basically the same process we are doing. The CogDog post was found while I was looking at […]

  • DTLT Revamp: Custom Fields Are Your Friends at The Fish Wrapper marthaburtis.net/wrapping/2008/11/26/dtlt-revamp-custom-fields-are-your-friends

    […] CogDog Levine’s awesome dissection of the NMC Pachyderm site (actually there’s way more in here than just custom fields, but it’s a critical piece of […]

  • On Theme Shopping | The CogDog Show cogdog.trubox.ca/2015/01/28/on-theme-shopping

    […] first major WordPress theme hack was for an NMC site back in 2008. The structure of themes then was almost primitive looking back. […]

  • WordPressing Since 2005 | This is Not a Blog show.cogdog.casa/notablog/wordpressing

    […] WordPressing Dissected: NMC Pachyderm Services […]

Leave a Comment

All fields are required. Your email address will not be published.