New AJAX Only Layout

New Layout

So this redesign had a couple of initial inspirations.

1) I like text based layouts. I always have, and I probably always will. I never quite understood what all the fuss about pictures were and images and graphics and all that crap. It probably comes from the fact that I was a writer first and foremost, and an artist in other senses of the word later. Obviously then, this redesign is heavily text based, read entirely text based.

2) I have a couple of Flash mp3 players on my site for music I’ve written in the past and music I’ve recorded for my Maria. As some of you may know, the problem with Flash mp3 players is that as soon as the page gets refreshed, the playing stops, and you have to start over again. Some solutions other sites have used, and even myself at one point or another in the past, is to have the player show up in a little pop up window so that even if the main page gets refreshed, it can sit there happily and play away. I never liked that idea anyways, so the only other solution would be for all the other elements on a page to be loaded and reloaded via AJAX so that there are no actual page refreshes. I suppose another option would be to have the refreshing elements of a page loaded through an iframe, but I don’t really count that as a solution, not that I’m trying to be an iframe hater here.

3) I wanted to create a decently fancy javascript based animation. I’ve known for a long time that with the development of HTML 5 and all the new javascript libraries out there, the necessity for Flash to animate elements on a site is being phased out (though Flash still seems necessary to create a decent multi-track mp3 player for some reason…). Most page effects, menus, even some animations, can be handled by javascript now. So I wanted to give it a try and create one of those animated logos that fancy companies have. And so I did. I also just wanted in general to have a seamless user interface, but that’s another point. Since I wanted the animation, I obviously only wanted it to show the once because it’ll be a pain in the ass to keep seeing the same animation on every page load, hence even more reason for the entirely AJAX based layout.

4) I wanted there to be a seamless user interface and experience. I didn’t want there to be page refreshes, I wanted everything to be fluid, I wanted everything to be accessible. I actually had in mind a much fancier menu system for the posts/tags/categories browsing, but that went by the way side mostly because I lost interest and like it this way anyways. Obviously though to achieve such a kind of site you have to heavily rely on javascript and AJAX.

5) I just wanted to keep my skills up. I’m kind of only partially employed at the moment, moving from tiny little projects to tiny little projects, getting paid only some of the time, so I wanted to make sure that my programming abilities didn’t dull. That’s one of my biggest fears actually, that one day I will be 30 all of a sudden and without a single marketable and useful skill. I really want to avoid that. Not that this project was the world’s most challenging, I didn’t have to create any classes of my own or any large PHP files, but it took clever thinking to do, I think at least, to get around what needed to be gotten around and come up ultimately with the feature set wanted.

And so, without much more talking about all that, I present the new layout and its features:

1) Entirely text based
2) Entirely javascript and AJAX based for all post navigation, browsing, etc.
3) Widgets enabled, with widgets floating and draggable within the site.
4) Built in support for Flash MP3 Player, Flash XSPF MP3 Player, and Flash JW Video Player
5) Custom photo gallery support using jQuery
6) Although everything is loaded via AJAX, a direct link is generated to bring you back to any part of the site

And now a couple of interesting challenged:

1) I had to create a plugin to be the receiving end of all the AJAX requests, plus I’m operating entire outside of the WordPress Loop.

2) Given that jQuery more specifically operates on DOM elements generated when a page reaches its onready state, the newly generated HTML elements from the AJAX requests aren’t accessible, so the javascript code is a mish-mash of actual jQuery code intermixed with normal javascript code that have also been then intermixed with some jQuery code as well. Kind of messy, but straightforward enough for even the everyday javascript developer. Again, one of those do what you can, what you must kind if things.

3) Getting comments to work was a pain! At one point I had miswrote “_id” and “_ip” instead of “_ID” and “_IP” so my comments were going into the void, showing up in the WordPress Dashboard as existing (a number), but then not visible in anyway. I had to track it down through phpMyAdmin before I realized the key value associating a comment with a post”_ID” was missing…Also the fact that I had to reset the timezone based on the WordPress value, not something one would normally think about.

4) I think I’m going to make this post Sticky, at least for this particular theme. I installed a new plugin that allows me to test drive themes, so it only needs a querystring variable of “&theme=text” for anyone to see the new layout.

Other thoughts:

I think this theme will never exist formally for use. I’m thinking of stripping away its respective parts and coding a normal WordPress them with them, so the text based layout without any of the AJAX. I’ve already got it all pretty much sorted out and that process I’m hoping will be relatively painless. It’s just, I’m not sure if this AJAX only version should actually be used in any major way…

Since this post will be Sticky in the AJAX only version of the theme, I’ll probably keep updating it as I go along with specifics of what had to be done to get everything working.

Some To Do’s still:

1) Since I’m running 2 themes using 1 set of widgets, it’s a little messed up in the new theme because there are 6 widgets crammed into 4 clots.
2) The new theme still doesn’t recognize when a user is logged in. Mostly relevant for things like commenting and “Edit” links.
3) I don’t have a posts tags yet…something you’d think would be easy huh? But apparently outside of the Loop, it’s NOT!


New Comment