wordpress

Design For Emotion book site launches

After a several months of development, I’m pleased to announce the launch of Trevor Van Gorp‘s new book site, DesignForEmotion.com. Based on the theme from AffectiveDesign.com, I helped Trevor redevelop it with a new style and theme while still maintaining the visual connection to AD.

The backend is still WordPress, and works around the same concept as the AD theme, with a few improvements here and there. A number of recent innovations in WordPress will come in handy for next time round however. Featured images help simplify associated a thumbnail with a particular post or page, and content types allow you to separate calendar dates from blog posts within the UI.

One thing I noticed first on this particular WordPress install was that Dreamhost likes to turn off post versioning (presumably to save on database storage, and since disabling it inside wp-config.php is hidden from the user, most people would never notice its absence). However, when you are looking for post versioning and can’t find it, double check that it’s not disabled in your wp-config.php. You might want to turn it on now just in case!

Be sure to check out the Design for Emotion for details on the book and your chance to be involved in the creation of the book.

Migration to Flickr

So, in an ultimate move of irony, I’ve decided to migrate my photos to Flickr. About 5 years ago I started there, but was too bothered by the need to pay for a Pro account just to store my photos. I haven’t bought a Pro account yet, but will likely in the coming weeks. I’ll keep organizing the sets over on my Flickr Page, and you can enjoy the nicer UI, geotagging, sets, and other features that never really materialized in the (officially defunct) flickrer.

The move comes from the desire to simplify my workflow, while making the interface to various destinations simplified. Without a doubt, this move to Flickr will mean it’s one-click to get my pics from iPhoto to the Web, and simplify the integration of my photography into WordPress and jole-v3.

On WP Custom Post Types

So I was hoping to design jole-v3 using WordPress’ latest and greatest Custom Post Types, with customized media types for blog entries, tweets, photos, podcasts, and videos. However I’m beginning to realize the problem with this strategy, particularly at this point in the development cycle.

The new site design revolves around the idea that all my content will be ushered into my personal website for unified and simple browsing of all that exists in the jole atmosphere, however in order to do this, I need a variety of WordPress tools and plugins that will appropriately fetch items from various social media websites. The problem is, most of these plug-ins are not yet custom-post-type aware, or at least not without modification on my behalf. For example, I can have WP-o-matic automatically bring in all my twitpics, but I can’t tell it to save them as “Tweet” post types (at least not yet.)

Before the advent of custom post types, the traditional method of setting up not-so-post-y post types in WP was to simply give them a designated category, and style it appropriately within the theme when you come across it. I’m beginning to realize that perhaps this is still the best way to go at this point in the game, seeing as even the native WordPress environment is a bit confused as to how the various content types will be delivered through theme files.

Whiteboard of the Week – 22

What is this? Another Skully Whiteboard! Ok, normally I would be appalled by this outrageous whiteboard-reality mishmash, but I will accept it because it prominently features the awesome jole.ca banner with without my phone number on it!

I believe the majority of the inspiration for this ‘board is the Ferrari hat Simon found in my closet (and consequently STOLE FROM ME) as well as the gigantic Ferrari history book I found for $10 at the Winnipeg Indigo. I still need to get around to reading that thing… Clearly the rockhorse is jamming out in celebration, in a lovely Italian countryside.

By the time this is posted by WordPress, I’ll be pretty far out in the boonies, but fear not, the blogging will continue as much as I can during my camping/roadtrip adventures. Be sure to follow the Twitter account for the latest!

AffectiveDesign.com Launches Today!

Today marks the launch of AffectiveDesign.com, a project I’ve been working on for Design and UX Expert, Trevor van Gorp. The design and flow of the site was created by Trevor; the HTMLification and integration into WordPress being my task. WordPress has come a long way from its early days as a simple blogging platform. Previously it required a lot of hacking to get it to behave like a Content Management System (CMS) but thanks to Pages and a bit of theme code, it actually works quite well for light-duty websites. 

The theme I created for AD implements some interesting WordPress-as-a-CMS functionality. While plug-ins play an important role, I tried to implement the bulk of it using WordPress theme templates. WordPress supports distinction between “Posts” and “Pages” (and sub-pages) which I used extensively to organize page data. Top-level pages are the source for the tab navigation, with any sub-pages living within those tabs. Blog “posts” live within the Blog page, which is specified within Settings > Reading of WP.

Home Page

The homepage uses a special template (homepage.php) which houses various elements. The left-box houses the “Home” page contents, and is coupled with the Flashfader plugin, configurable inside WP. The purple-headed items are Sub-Pages of the Home Page, and the items below them are WP Widgets, all managed within WordPress.

Top-Level Pages

Diving into a Top-Level Page, some of the CMS features come to life. Starting with the left sidebar, subpages of Services are listed automatically. Below these items is a customizable sidebar of widgets (just a Twitter widget is being used here). Theme code in functions.php automatically creates dedicated Left and Right sidebars for every page for maximum flexibility. I haven’t evaluated the actual load this imposes on the server, but load times do not seem to be severely affected, and WP-Cache takes care of the rest.

In the center we have the contents of the Services pages. If desired, a listing of subpages can be inserted in-line by adding the
tag within the page contents. This listing is generated based on variables set in each subpage (for the image) and text processing (to display the snippet). This configuration is not as elegant as I would like, as it requires the use of “custom fields” (which isn’t terribly user-friendly) but allows for thumbnails to appear beside the subpage listing. WordPress has the ability to “attach” a particular image to the post, but I found it to be unreliable and difficult to manage.

The right sidebar stores more customizable widgets. The first is a custom-built widget based on “better-text-widget” and allows for the rounded corner styling along with an image (something that is difficult to do with a default text widget.) The “Testimonials” widget is also custom-built, and randomly selects a quotation from a list given in the backend. The remaining items are simply basic WP text widgets.

Sub-Pages

Strategic Insight is a subpage of “Services”. The breadcrumb behaves accordingly, and the active subpage is highlighted in the navigation. The image browser is SimpleViewer Pro, which allowed us to customize the look and feel of the actual Flash player to match the look of the sight. The sidebars and other functionality is analogous. 

Blog

The blog page behaves just like any other WordPress blog, with appropriate theming for the template.

Other

The only other thing to note would be the Twitter widget, which is based on Twitter Widget Pro, and customized to add a “Follow” button below it and to improve stylability. 

Be sure to check out AffectiveDesign.com to see how they might be able to help you out, or just to checkout how all these WordPress tricks come together to build a very flexible and powerful CMS! 

New Theme!

I’m looking at redoing the site again this summer. It’s been a while since I’ve totally redone the look, and I’d also like to incorporate some of my other spin-off’s like jolevideo and duck podcast.

The gallery needs to be further integrated with Lightroom so that I don’t lose motivation to actually POST photos, and it’s probably time to provide a bit more information about myself considering I put jole.ca on all my business stuff now!

I’ve learned a lot about WordPress in the past years so I’m hoping to integrate some tricks like image attachment to make this blog a bit more interesting! Have fun!

Whiteboard of the Week – 8

So I’m thinking the WotW is quite inversely proportional to my actual thoughts or something, because this was probably the biggest week for me ever, just…learning so much about myself and the world around me, and yet the reflections on the board are far from inspirational. Maybe that’s a good thing, because we can’t have amazing weeks all the time, so most of the time the whiteboards will be good? I’m not sure, but here’s this weeks in all it’s grayscale glory. (I’ve been keeping my camera in B&W mode, and noticing that a lot of other people do too. It’s a good idea: you can focus on the color balance without being distracted. Plus when you shoot in RAW it is still kept color once you download it.

 

 

So the main scene here is my closet. I reorganized it recently and thought about the giant multi-function printer thing I have in there that I use exclusively for scanning. (I got it from Kevin, and the printer fails and our house doesn’t need more faxes so…) Anyway essentially everything has sort of grown around it, because I keep all my rolls of tape in it’s paper feeders, and it makes me think of a jungle growing around something abandoned in it. (Notably, the abandoned truck in this book from my childhood.)

To the side in that square is Kevin “steaming” the inkjet heads of our old printer. Inkjet spa.

Some interesting thoughts from this week: WordPress has won my heart. My dream is to have all the websites I manage on my Safari toolbar, so that anytime something needs to be changed I can hit Command-# and be in their admin area. I’m starting with elderadvocates.ca, where I’ll be merging all the documents into a giant RSS feed with a bit of PHP and then importing them into WordPress as posts, then converting them to pages using the lovely p2pConverter. I did notice a glitch with it though: it doesn’t seem to handle converting pages with quotation marks in the title. I suspect there’s an escaping issue in the JavaScript somewhere, because it asks you to confirm changing from page to post. (Which, quite honestly isn’t that necessary considering you can switch it back just as easily…)

I’m pretty sure it’s just as easy to do it right in the SQL database too, which might be more efficient for bulk conversion. 

Have a good week everyone!

Thoughts on CMS

One thing that drives me mad is how every content management system (CMS) out there is now based around the concept of blogging, and yet most companies and simple website designs are still reliant on fairly basic static pages. As web developers, we go out and find the most advanced *blogging* tool there is because it’s stable, consistent, and easy to setup (read: WordPress…almost), and then watch as the client sits back and doesn’t actually post content in a blog-centric fashion.

This doesn’t surprise me. After all, if they hired me to implement their website, they probably don’t have too much information that needs to be critically shared on a regular basis, and unlike bloggers who are seeking to provide fresh content, get readers, and thus ad revenue; they don’t have much incentive to publish. (Look at me!)

As I worked away on fbcedmonton.ca which I setup with textpattern a while back, I started to drive myself insane realizing that in order to create a static page, you need to:

  1. Create an article (blog post)
  2. Create a “page,” or essentially a layout method that is statically selecting that post ID.
  3. Create a “section” or area for which the page will be served using a specific themeset.
  4. Create the link to the section within the navigation if an automatic nav generation tag is not in place.
Of course, if I just wanted to post an item to the blog it would have been one simple step. But really, our church doesn’t use its blogging features and the website would have been much better implemented in something more static-page oriented. Maybe I haven’t been looking hard enough, but it seems like a simple static-page CMS is no longer existent in favour of blog blog blog.
Which is fine. I guess I’ll stick to my php includes and raw code. 
But hey if you know of something simple out there, let me know. 

Whiteboard of the Week – 1

This Tuesday I bought a whiteboard from Kevin after a long voyage to different Superstores on both of our parts. (Random thought: wouldn’t it be nice to have a stupidity checker? I just wrote that sentence wondering if it made any sense whatsoever and then just kept typing waiting for a squiggly line to indicate to me whether I was being moronic or not…)

Point is I have a whiteboard carefully mounted on my wall. I’ve found that having a large amount of space to just draw, sketch, take notes, and create is quite useful and mind opening. My plan is to not erase the whiteboard until I’ve taken a picture of it, and posted it here under the “Whiteboard of the Week” category. Who knows, things might just get interesting.

So what’s in this week’s whiteboard?

  • Front and center is the wintersaurus, the prehistoric creature that will be showing up on your lawn soon if you live towards in the Northernly parts like I do. As you can see there are some tobogganists enjoying their day on his back. (No, not tobacconists)
  • Up to we have The Running Man. (No not this one.) This running man started out as just a continuous run, but his persistence was interrupted, and thus it is two arrows. This came to me one morning (probably Wednesday…hump day) when I was feeling rather lethargic and realized that I just had to keep going and eventually the end of the week would come.
  • Parachute Man is symbolic of the excellent Coldplay album “Parachutes”. He became tridimensional a few days after I drew him
  • Finally our last creature is a bit of a complexity even to me, one which I can only describe as…Windshield Cat. I mean really, what else do you see in that illustration besides that?
So that’s it for this week’s Whiteboard of the Week. Hopefully I can keep this going longer than all the other things I strive to make “regular.”
P.S. In the writing of this email WordPress seems to have a bug in WebKit that locks up the UI when you try to add a link to text. I would like to thank the dude who forced a draft-save before activating any further UI, because it’s saved my bacon at least thrice.

Return of the Classic Gallery

So as I’ve been trying out my new site for a while, I’ve realized that eliminating the jolephoto gallery wasn’t the best idea. Photos are still best viewed in a gallery, not in blog posts. The gallery never really “left” because jole.ca/gallery was still there and it still the place I upload my photos before they’re processed into WordPress.

So the link is back in there, if you’re here for the first time and just want to browse, that’s still the best way, and if you want to get more information, there’s always the blog post about each image. (Heck maybe I can put in a link-back at some point…we’ll see.)

Happy browsing!

1 2