I thought I’d talk a bit about the infrastructure I used to build my web site. My blog has been self-hosted on WordPress for a number of years, and for this kind of web site, I really like that as a foundation. It uses Apache, PHP and MySQL as it’s foundation, and it has been a solid and stable platform for me for a while. Perfect? No. Sometimes it could be faster. Sometimes it feels a bit bloated — but given my day job is in Drupal, relatively speaking it’s hard to claim WordPress is doing a bad job in managing the bloat. (see the end for a digression on this).
In older generations of this site, I would typically search for a free theme, or go to a site like Themeforest and but an inexpensive theme that I would install, beat with a stick until I thought it looked okay, and then move on. A year or so later, I’d be tired of the theme, and go look for a new one to refresh the look. When I redid the site about a year ago, I went looking for a theme that would give me more power and flexibility, one that I hoped I’d be able to live with and adapt to my needs better than the ones I’d been using.
After doing some research and seeing it in action on various sites around the net, I decided to try Photocrati. At $89 it’s not inexpensive but it seemed like it had the flexibility i needed to customize it down the road, and out of the box it looked pretty good. I installed it, whacked it with a stick until I thought it looked okay (baby blue background and all… what WAS I thinking?) and set it aside again. Over the last couple of months, I’ve come back and torn things apart and done some more serious customization and design against it, and that’s left me with my new site that I’ve just completed.
So I’ve actually used Photocrati two ways — as a simple “install and press buttons” theme, and as a framework for a more custom design. Photocrati isn’t the same as a base theme like Thematic, but for me that was a good thing: I could use Photocratic for the heavy lifting, and then put my energy into the parts of the site that I wanted a specific look on — in my case, specifically, the front page.
After building two designs and living with Photocrati for over a year and having gone elbow-deep into it a few times, what do I think?
I like it. As a “plug and play” theme, it’s got a nice, clean look and it has a fairly simple set of designs that you can build around with a lot of flexibility. You can build an acceptable site by installing Photocratic and poking at its customization until you like how it looks, without any significant HTML or CSS experience. It does a pretty good job of helping you tweak all of the details, and the admin and customization is nicely thought out.
With this new design, I needed to address two significant weaknesses to Photocrati, plus I wanted to put together a photo gallery area that and a nice distinct look and was maintainable without having to hand-code everything. I also wanted to improve how the site worked on mobile devices, both because that’s an increasingly important part of the web traffic to sites like mine, and, well, with my history working in the mobile space, it’s always been a bit embarrassing that my sites aren’t better at it.
The two things I couldn’t do with Photocrati out of the box:
- Fonts: The supported fonts in Photocrati are, to be honest, fairly weak. Typographically, the selection is limited and not terribly exciting. Fortunately, I found an easy fix for this with the WP Google Fonts plug-in. It let me override the Photocrati fonts and use the Google Font library for my typography. This worked once I installed and activated the plug-in — the site now uses Libre Baskerville for the text font and Open Sans Condensed for the headline font. I could also have done this by using custom style sheets to override Photocrati, but this is actually quite painless and I’ve found no compatibility issues.
- My custom front page: Photocrati doesn’t support a page that doesn’t display the site’s header and footer. I wanted a front page that was completely distinct from the rest of the site, not just with different material in the content area — a different treatment for the logo and a different menu structure, plus a completely different look and feel. The solution to that was building a new page template called ‘blank’, because it loads in all of the WordPress and theme infrastructure, but no content except the copyright in the footer. That left me an empty page I could build out any way I wanted. With some careful use of the existing Photocrati CSS I could even adopt in changes through their theme customization without having to recode the front page by hand, although in practice, I couldn’t for most of it.
Photocrati also has a way to let you write and publish custom CSS into the theme. This gives you the ability to override their CSS or write your own custom extensions that can be used anywhere you write your own HTML. To add in the “blank” page template involved adapting three PHP files in the theme. My custom front page is (I kid you not) under 25 lines or HTML, and my custom CSS is about 200 lines. That’s pretty much it.
The photo galleries are a series of WordPress pages, each with a hand-crafted HTML that’s themed by classes in that 200 lines, but each section within the galleries is a boilerplate of about four lines of HTML. They interface with a couple of WordPress plugins that implement the galleries and do all of the heavy lifting. Once you get those installed and running, it’s about customizing the look to your design and loading in the pictures.
Planning the new design and how I was going to restructure the site took me about five months of part time, intermittent work. Implementation took about a month, also part time and intermittent until the last couple of weeks, when I just dug in and decided to get it finished. There’s probably 60 hours of time in the implementation itself, and about a third of that goes to design and building graphics and the look of the site, a third to writing or rewriting content, and a third to actually whacking on WordPress and Photocrati with my stick until it behaved. Not a huge time investment compared to some WordPress projects I’ve done.
So I found that Photocrati scales nicely as your needs get more complicated. If you just want to install the theme and change a few colors, you can end up with a perfectly usable and nice site. If you want to dig in and write your own HTML and CSS, Photocrati supports that nicely. And if you get to the point where Photocrati just doesn’t do what you need it to do, there’s a chance an existing WordPress plug-in might solve the problem, and if not, you or your PHP hacker can dig in and customize the theme and solve a lot of problems without having to worry too hard about upgrades (in my case, I’ve added three files to the theme and changed none of the core theme files; as long as I don’t overwrite them in an upgrade, I’m fine. If I was smart, I’d make this a child theme and isolate my changes — and I may. Someday)
Plug-ins are an important part of the WordPress infrastructure and ecosystem. Where themes adapt the look and feel of a site, plug-ins add functionality that isn’t in the base WordPress installation. My belief is that you need to use plug-ins with some care, because they can cause compatibility problems and crashes of the site, and they can slow down the site’s response to the user significantly. That said, finding the right plug-ins and using them appropriately can really enhance a site and save you a lot of the pain of custom coding.
For my web galleries, I ended up using three plug-ins:
- NextGen Gallery: This is the image management back end. WordPress has a media manager in it, and it’s okay, but nothing special. Photocrati comes with a media manager that, honestly, I’m not that thrilled with. It’s got some better functionality than the standard one, but also some eccentricities that annoy me. They seem to annoy the Photocrati folks as well, since they bought NextGen and have announced it’s going to be integrated into Photocrati this year. NextGen, so far, has been nice to work with, and is a good base to layer other things on top of.
- Justified Grid: This is the tool I decided to use to manage the galleries themselves. I’ve become a fan of this gridded look and I think it can really be used to show off images in a compact and flexible format. This isn’t a free plug-in, but it’s powerful and flexible, and I’m really happy with the results. Even better, all I need to do is define a gallery in NextGen, point Justified grid at it with a few options, and magic happens. No hand coding, no maintenance hassles — you DO design your sites for updates and maintenance, right?
So these three plug-ins drive the imagery and graphical look for my photos, and after installing them and getting it all running, I wrote the pages and styled the look around them. The pages are pretty literally cut and paste clones of each other, so the amount of work I need to do to build and maintain the galleries — or change them to add or replace images — is easy. No more galleries that are six months out of date because updating them is painful…
I’m using a few other plug-ins to help add some functionality to the site. Here are the key ones:
- Advanced Recent Posts Widget: displays the recent posts in the sidebar. Much more flexible than the one WordPress offers by default.
- Akismet: spam protection
- Disqus: drives the comments on the blog.
- Google XML Sitemaps: keeps the search engines informed about content and updates on the site.
- Jetpack: the WordPress ‘kitchen sink’ of functionality enhancements. I have mixed blessings here. There’s some nice additions — and I wish they were individual plug-ins and not this mass of features welded together. It seems “not WordPress” to distribute them this way.
- RSS Digest: creates the nightly “things you might find interesting” blog posting.
- Safe Redirect Manager: Allows me to create redirects from within WordPress when I move content around, which I’m going to do more of in the future now that I have this feature available.
- Shortcode Exec PHP: This allows you to write PHP code and turn them into short codes. Where this really comes in handy is that it means you don’t need to dig into the theme itself to customize it in many circumstances, you can write the customization as a short code and avoid infecting a theme with your hack — making future upgrades a lot easier.
- Shortcoder: does the same with HTML and CSS, turning them into a short code. This is very useful for hunks of code you want to re-use in multiple places, and in fact, I will likely re-implement my galleries using this down the road.
- w3-total-cache: performance optimization.
- WordPress Database Backup: You do back up your site, right? RIGHT?
- WordPress SEO: to help optimize what you do to look best to the search engines.
- Yet Another Related Posts Plugin: shows the “other articles you might be interested in” area on the blog entries. Much nicer than trying to do this manually.
And that’s pretty much it. This is one of the nice things about the WordPress ecosystem: there are a lot of things it does well at first install, but by careful choice of a theme and the addition of a few key plug-ins, you can really create something interesting and pretty. And save yourself hundreds of hours of work custom coding or tweaking HTML and CSS and all of that fun stuff we all love to do…
And that’s one place where I think Photocrati shines: it does the heavy lifting of creating a pretty, readable site, but gives you the ability to extend that in maintainable ways to the degree you need to get your job done. My history with other themes is that many of them aren’t so good at the extension and enhancement part — that’s why in earlier generations I used one, threw it out and replaced it after a year. Photocrati looks like it’ll handle what I want to do for the next few generations of my site as it continues to grow and extend to support what I’m trying to do as a photographer — without sucking out all of my time in coding or maintenance so I no longer have time to do photography…
It’s a big win for me.
(Digression on Drupal, since i know I’ll get asked/challenged: I use both. I like both. I use wordpress on my personal blog because I was using it before I took on working with Drupal for my real job, and the time and energy to migrate platforms properly simply hasn’t made sense. I prefer Drupal for larger projects, I think WordPress is perfect for an individual blog like this. There are times when I wish I had it in Drupal because it’d make certain projects easier, but Drupal is also more complicated to maintain and upgrade. I do think WordPress has done a better job of making the admin aspects of WordPress easier and more intuitive than Drupal has; Drupal still has that “adventure game and I’m lost in a maze” aspect to it for me at times. But they both are useful and stable tools that I use depending on the type of problem I’m trying to solve.)