Updates galore

Friday, February 6, 2009

So, if you’re reading this on anything other than the rss feed, you’ve noticed the new site design. I explained a bit of it in another post, but to run through it again but I’ll go into a bit more detail here.

When I started Keynoteuser.com it was simply a single page with Keynote tips and thoughts on it. Then I expanded it into an entire site, and it was all html (check out an archive from early 2003). When I went to a news format, I was literally copying the previous story, pasting it, editing it and posting the new page. Forget archives, this was all hand done. It took way too much time and got old pretty fast. The site went through a few redesigns after this (see the main archive page if you want to look at the different design changes ) but it was still all manually done. Then right before Macworld 2005 I decided to relaunch it. I had done so much work to the site that I didn’t want to start from scratch, but I knew I needed the news system to be automatic. That’s when I discovered WordPress.

I got the WordPress engine up and running in a /news/ folder but didn’t want to use it for the whole site. I think maybe back then it didn’t have the Pages function, and most sample WP sites didn’t even have nav bars. It was meant for blogging, so it didn’t really need all that stuff. Now the problem was, how do I get the news onto the front page? It turns out that WordPress is pretty flexible. The main stories are displayed using a block of code called “the loop.” I found that you could stick the loop on ANY page, as long as that page had a bit of extra code in the header that pointed to the main WP directory.

So the new Keynoteuser.com site was launched from the press room at Macworld that year. It didn’t look all that different from the version before it, but the WP loop replaced the main body on the front page (if you look in the archives, you can see that after 20th, the nav bar changed, a new ad block appeared at the top of the page, and the news articles show “posted by” in them). Ken and I could finally log into a web admin and post stories. We still had to ftp images up and manually link them. Either WP was still messy in that regard, or I didn’t really understand how it handled image uploads, but we still had to do that part manually and enter the image url in the code of the story. Over the years I updated the WordPress engine, and manually edited the side bars on the front of the site.

More recently I installed a plug-in from PRMac that actually creates new story drafts from press releases. It doesn’t this completely on its own without me having to even click anything. All I have to do is go in and delete the drafts we’ll never publish from the list. Then I clean up the stories we want to publish and click the Publish button. It makes running stories SO much easier, and when it’s easy for us, we actually update the site more often.

Anyway, jump to last week when I took the new site live. If you remember, the WP engine was sitting in the /news/ directory. If I was going to keep it there, all my new WP pages would be at site/news/pagename which looks weird to me. I searched and found a way to stick a special htaccess file in the /news/ folder that would simply redirect anything with /news/ in the url to the the correct url without /news/ in it. Sweeeet. So, the next step was to find the right look for the site. I looked and looked and looked and didn’t like anything out there.

One day I was looking at a friends brand new blog (www.gabetaviano.com) and I commented that I liked the theme he was using. He said it was a pre-made theme (which I usually start with anyway) and I went to the site to see what else they had (hoping I’d find a free one). Sure enough, they had this nice woodgrain look called UltraWood. Now, I know some of you are thinking…”yeah, but woodgrain!??” and I’m right there with you. But this is a Keynote site, not my company site. Having the site sort of look like a page sitting on the Keynote podium is kind of cool (in my opinion) so I decided to give it a shot. Thankfully, WordPress has a little known preview feature where you can view your pages in the new theme without having to turn it on.

As soon as I saw the preview I knew this was the right one. No more ugly blue, no more endless nested tables. A real WP header bar with links to WP pages with my content grafted onto them. All the goodies that come with WP wrapped in a nifty Keynoteish theme. So I spent a few hours tweaking the theme and redoing my Keynote Themes landing page. I never did get time to redo each theme sales page, so those are pop-ups. I’m not too worried, as I release new themes, they’ll get the royal treatment anyway.

So, on Jan 30th I carefully removed all the old pages from the server and quickly moved everything from the /news/ folder up a level. Then I turned on the new theme and the site was live. After that I installed the htaccess file and tested it. It worked, so I knew all the old links to my site would still work (yeah!). Then I turned on the Keynote Themes page and tested it, and turned on the Resources page (which is mostly just an updated version of the old Links page). The last step was to upgrade WordPress to 2.7, which went off without a hitch since nothing in the main core had been hacked with this new version of the site (the only modified files are in the template itself).

Overall, I can’t believe how smooth the transition went. Since I wasn’t doing anything to the database, the main news engine was still all there, and even though many of the story images were linked to the old /news/ directory, the htaccess file fixed that (a benefit I wasn’t expecting). Once the transition was complete, I focused on the little tweaks. Things like not showing the blog category on the front page and adding it to the nav bar. I also turned off the default “Read More” buttons since we’re using a special tag in the article itself to designate the break, and that tag inserts the “Read the rest of this article” link instead.

I also modified the category and archives pages so that they appear in more of a list view and found a plugin so that I could force them to show more than 6 entires per page (which is what the front page is set to). Then yesterday I found the trick to making the blog page (which is simply a category page) show up the way the front page shows up, and NOT as a list view like the other category pages. I figured, if you’re going to the blog page, you want to read not search through a list of headlines.

I also turned off the automatic ad block that came with the theme and installed my own ads to give me more control, and then I added an Amazon favorites block at the bottom of the side bar (buying through our amazon links helps us out). I’ll probably keep tweaking the site and adjusting the ads till they look good. I don’t want an annoying ad block in the side bar, but I do need to keep the site bringing in something as it helps pay the bills.

I’m also still working on a decent download manager. I really want to get the freebies back up and running, but I don’t want to have to hand code the downloads page every time I add something. There’s a free download manager for WordPress, but it looks terrible if I simply turn it on, so I’ve got to learn how to customize it before it goes live.

I’ll be trying my best to start posting more tips and tutorials (I’m finally working on a tutorial on how to make a custom theme. It won’t go into all the details, but it will help you get a basic, custom theme created. Most of my tutorials in the past haven’t fully covered all the steps, and I’ve seen people really get confused when it came to what they’re supposed to edit to actually make the theme work properly.

So there you have it. The history and progress of Keynoteuser.com. I hope you enjoy the new site, and don’t forget to share it with your Keynote using friends and colleagues. I’m always surprised when I hear from people who have no idea this site exists.