pizza

Blog

WordPress for photographers: do it yourself?

In this article I’ll share the process that brought me to setting up this website using WordPress: it is by no means a professional advice or a do-it-yourself guide but it can be a useful insight for fellow photographers considering using WordPress to showcase their work on the Internet. I hope it will help!

First of all a bit of background: I’m not a web designer and, although I’m at ease with computers, my last (not-so-great) programming experience dated back to university time, coding in C. During the year I’ve spent travelling through Asia and Europe though, I run quite a successful blog using an online platform where no much coding was needed: my biggest programming achievement back then was being able to change the header image of my former blog. I knew HTML existed, I had a vague understanding of what CSS was and ignored pretty much everything else but I wanted to create the new website on my own: how hard would that be? Furthermore, I had no money to spend on the kind of web development I had in mind (not that it was that clear to be honest…) and I thought I could learn a few new skills in the process. For sure in just a couple of weeks I would have been able to show the world my shots the way I wanted!

The selection process

It took little less than a few days days to figure out I would have used WordPress to run my website: I had a blog already (that wasn’t powered by WP by the way), I knew WordPress was used by millions and although originally developed for blogs I heard it could be used to run fully featured websites. The wealth of plugins WordPress has and its active community convinced me even further.

I ruled out using Flash for indexation purposes, Drupal looked too complicated for my hasty self and I didn’t even bother considering Joomla or Dreamweaver. This article (from the Graph Paper Press blog) convinced me I was following the right path and so I selected WordPress for my project.

The tools

When I first started I was using the battered Windows netbook that was my best companion for more than a year on the road: if that was enough for some simple image processing and writing whilst travelling, to say that it was not the right tool for the job is a vast understatement: with only one giga of memory and with a minuscule screen it proved quite tiresome and slow to build a website on it. So, if I can give anyone a first advice: unless you have a lot of time on your hands get a decent computer even before you consider to start.

I used Notepad Plus Plus as a text editor: it is a wonderful editor for its cost (it is free) and I miss it a lot now that I moved to a Mac platform (but this is another story).

I then proceeded to install a local web server for easier development: I used XAMPP that was fairly easy to install and use. Yes, you need a local server as you don’t want to run your tests online, unless you know exactly what you’re doing and you have a fast internet connection.

Oh yeah, and Firebug. You definitely need Firebug for your debugging.

To run a website you then need a host and an FTP client to load your files online but this is quite simple and you don’t need them in the early phases of development.

(As stated previously, there are certainly other and better tools available but this is what I used)

With my text editor, my local server and Firebug installed in Firefox I already felt like a professional web designer: although I hadn’t written a single line of code I hoped it would be a straightforward process to turn my ideas into a brilliant website. Let’s all laugh together.

The easy way

Installing WordPress, selecting an existing theme (basically the template that drives the appearance of your website) and filling it with content is extremely easy. There are literally thousands of themes out there, some of them are available for free, others with more sophisticated architecture sell for way under 50 bucks: if you are happy with any of them you are set to go, you just load the theme on your WP installation and you are ready to go! Some of them come with an easy way to customize them straight from the WordPress interface, others need manual edit but changing bits of code here and there is not that complicated either; on the other hand if you want to modify them more incisively things get complicated to say the least.

Of course I couldn’t find any theme that I liked and I decided I could go on coding my own theme: this is where the nightmare started.

The first attempt

As ignorant as I was I had to study a bit before I could even start: after all I had a lot of time (whilst adapting to life out of the road) and I wasn’t prepared to fork out at least 2000$ on a custom development.

I spent the best part of a month studying some basic HTML and CSS tutorials, I run through a PHP course and read countless WordPress articles. Back then I ignored completely Javascript or jQuery, I didn’t think I would use any fancy animation and I thought I could get away without that knowledge.

I started modifying a very basic free theme to accommodate my needs and after another month of head bashing against the computer screen and some very frustrating moments (I cannot recall how many hours (and days and nights) I wasted trying to modify slightly some minute details: I started telling friends that were enquiring about my activity that I was “about to see the end of the tunnel” and that I would soon come back to life again) I finally and proudly showed version 1.0 of my website to a selected few. They were very kind. In fact, it finally took my girlfriend to let me look at reality straight in the eyes: the result of two months of “life in the tunnel” was… huh, crap.

I had taken too many shortcuts, whenever I wasn’t able to do something I simply moved on to the next feature, on and on. Even worse, the whole idea underling my design didn’t seem to work either: it really looked terrible. I spare you the sight of that atrocity, even through a screen capture.

Not that I was desperate but I didn’t know what to do.

The inspiration

I spent the next few months brooding about my website. I was looking for inspiration around the web but I couldn’t find anything that would move me to start again and I almost though I would resort to some online portfolio system to showcase my work.

Finally, one sunny day, I found the right inspiration and I figured out what would be the right feel for my online corner: I needed to study more and, this time, I would not take any shortcut.

Back to the keyboard: success!

I changed my approach altogether and if I thought of a feature I wanted to include in my website I would study in order to achieve that.

I didn’t neglect jQuery this time and understood its full potential, I relied more heavily on some WordPress plugins and decided to integrate a blog in my photo website: I missed writing and I wanted to include a place where to express myself. WordPress custom post types feature would allow me to have both a blog and a standard photographic gallery.

To make my life harder I’d also decided I would have made my site responsive, namely, creating a design that would suit any browser window’s size without any annoying horizontal scrollbar whatever the size of the window will be (that thought later on evolved to even create an iPad and a smartphone version of my website): you can check what I mean by resizing the browser window and see what happens (I assume only web designers will be impressed though!)

I browsed through countless WordPress articles and tutorials, I read on a daily bases some of the most up to date designers’ sites (my biggest gratitude goes to CSS-tricks.com) and participated actively in the WordPress.org forums (to the point of actually giving answers in the process!): yes, I’ve left photography to the side for a while and turned into a full time nerd!

I worked almost full time on the website as you see it for another three months (including a hard disk breakdown that almost made me cry and made me start from scratch: that set me back at least a couple of weeks) and I launched it at the end of December 2011.

I took into account every aspect I could think of: starting from SEO to a neat integration with Facebook, from painstakingly testing on all major browsers (yes, not every browser displays websites in the exact same way and you have to consider this minor inconvenience in your design; with the exception of the utterly crappy Internet Explorer you should enjoy every feature of this website fully on any other browser) to image optimization, scrambling e-mail addresses using Javascript, inserting some AJAX bits, considering Yslow and Google’s Pagespeed results and validating both HTML and CSS. I even added a humans.txt file but that is for the total nerd. Is it perfect? Hell no but so far I’m pretty pleased with the result :-) and now I can enjoy the ease of use WP gives to its users.

In a nutshell

If you are an established photographer and you are not willing to learn a whole different set of skills then you are better off paying a serious designer to create your website.

If you are happy with one of the free or premium WordPress themes that can be found out there it will be a fairly straightforward process to set up your next photography website, but you run the risk of having several other photographers’ sites looking exactly like yours!

On the other hand if, like me, you have little or no programming skills brace yourself for a few months of hard work: you’re about to enter a world of pain. The rewards you are getting out of the process are not to be dismissed though: I don’t think you can really understand how the Internet works unless you get down to actually building and optimising a website, furthermore you’ll become less reliable on other developers for small tweaks and changes and you’ll be up to date with the ever changing web technology that will make your website look exactly the way you wanted!

Back to photography now, I won’t touch the core of this website for a while but I’m already thinking of the new version I will make in a year or two… this time in HTML5 probably!

If you need help or advice feel free to drop me an e-mail: my debt of gratitude with people I’ve never met and helped me greatly is so big I would be more than happy to help anyone in need and well… if you want me to design your website we can talk about it :-)

References and thanks

Chris Coyer and CSS-tricks for way too many suggestions
NextGen Gallery, the best WP plugin for image management (the version I use is quite customized though)
Brian from Greywywern, for the cool dropdown menu effect
Wordpress.org’s forums
Matt Kersley’s page to test responsive design
Mitchell Kanashkevich, initial and continuing photographic inspiration
The already classical article about adaptive design, by Ethan Marcote
Enkoder to turn your spammy e-mail addresses in scraper unfriendly gibberish
GT-metrix, in my opinion the best tool to check for your site’s speed
W3C validator
CSS, HTML and PHP lessons
Last but not least Bluehost, my host: I would thoroughly recommend them to anyone willing to set up a WordPress site, not only their WP installation is painless but they have the most astonishing customer service I’ve ever came across.

click here to share

Leave a Reply