A redesign of my personal site has been long overdue, but I finally got the inspiration, motivation and the time to give the site a much-needed overhaul. Here’s what’s new:
- Backend completely powered by WordPress, using a custom post type for my web development portfolio and traditional posts for the blog/linked list.
- Linked list functionality achieved by custom post meta data, giving any traditional post the ability to not only have a source link, but have that source link be the default link for the post. I’ll write a post about that sometime soon!
- A complete visual redesign. CSS3 everywhere, AJAX-ified for a more fun experience, and just all around easier on the eyes. I even threw in some webkit keyframe animations, so if you’re not using a webkit brewer, make sure to check it out in one (use the contact form to email me and you’ll see!).
- A real photo portfolio, grabbing my photos from flickr and spitting them out on my site in a pretty neat way. On the photo page, you can not only see when and where the photo was taken, but you’re given a download link so you can use the image as your background without having to drudge through flickr.
One of the main reasons I redesigned my site – beyond the obvious facelift – was to give it a much needed new backend. Everything is now powered by WordPress, which is awesome for control and simplicity, but isn’t exactly known for its AJAX prowess.
As a theme developer, I have been using a little technique to AJAX-ify WordPress themes for a while. In the page template, you can use PHP to find out how the page was requested — was it an AJAX request, or was it a traditional page request? :
$isXHR = (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && ($_SERVER['HTTP_X_REQUESTED_WITH'] == "XMLHttpRequest"));
Then, with a few conditionals, you can customize your template so things like the header (get_header()), footer (get_footer()), and sidebar (you guessed it, get_sidebar()) get left out of the page request if it was an AJAX request.
if (!$isXHR) get_header();
This is a clean and efficient way of serving up just the page content without the headers, footers, and whatever other content you want to omit from the AJAX request. Less content = smaller file size = faster load time = less waiting for your visitors.
See it in action in the individual photo pages of my portfolio.