Last week, Gawker Media launch a full-blown re-design to all their blogs including Lifehacker and Gizmodo. Rather than going for a traditional post-above-post blog layout, their designers tried to reinvent the wheel. Although the new layout has received plenty of criticism from readers, I actually found the revamp quite refreshing. A handful of bugs, some compatibility issues, and slow speeds are partially to blame, but I’m sure developers are working to make improvements quickly as possible.

I was a little bored and had some free time on my hand this weekend, so I decided to code an equivalent theme for WordPress users. Within about six hours and a few breaks, I had a nearly perfect replica without having to look at a line of their code. Like the original, my template features a two-pane interface with a full article on the left and a list of scrollable recent posts on the right. With a little jQuery magic, I managed to even get all the instant loading features working without having to force users to refresh pages. I also threw in support for comments and search.

Although I scrapped most of the code together rather quickly, I managed to get it working with the latest versions of Chrome, Firefox, Internet Explorer, Opera, and Safari. Be warned about bugs since this is only my second venture into building a website aside from designing Skatter Tech 3.0 late last year. I released this WordPress template, which I appropriately named Qawker, into the official theme directory. My code is entirely open source, so feel free to make changes or improvements.

Thanks! Keep in mind migrating a whole network of blogs isn’t easy. I didn’t have that much content when I launched Skatter Tech 3.0 and upgrading took a very long time. I had to make sure all my data was flat and would be compatible with the new layout.

I’m running the demo on a cheap server so I’m confident that if they patch their bugs, performance will get a lot better.

Currently testing this out right now, looks great!
But the scrolling sidebar on the right only shows 10 recent posts- you can’t browse older posts.
Is there a way to show older posts or is it lacking this functionality?

Yep, the latest versions of each browser. I’m not sure if its just my website, or if something else entirely :/ Thanks for following up though I really appreciate it :). Yes I have javascript enabled, and I’m running a clean build of Chrome 9.

Didn’t realize you were linking to the site in your comment. Just had a look and I’m guessing it has to do with the plugin that says “shop” at the top. I’d try disabling it and trying again. Keep in mind that this was a very quick hackery. I apologize for the bugs. Since it looks like it has picked up some steam, I’ll probably push out some bug fixes soon.

Once the folks at WordPress list it in the official directory, you should notice alerts when updates are available. You should be able to update this version to the latest from the WP Dashboard in a single click!

Oh, last thing: I disabled all the plug-ins, and found that it was this that gave me the problem: WP-PageNavi
I don’t know if this’ll help you resolve conflicts with existing plug-ins, but I figured its better to know that to not know.

Good news: Google CAN index Qawker without any issues. Each and every article has its own permalink. Gawker had an issue because they were using “hash” urls which Google doesn’t like. I am using standard WordPress permalinks. If you don’t have Javascript enabled, you will notice that clicking on any link goes directly to the article.

Bad News: Figuring out what page you are on might be slightly annoying for users since the page name doesn’t change. I’m considering adding a “Permalink” text link and a native “Share This” feature to compensate for the lacking. Browsers don’t let Javascript tweak the URL in the address bar for security reasons. If I were to go about using a “hash” system, it would be quite complicated, slow, and cause other issues.

I’m trying this out on my site as well. I’m truly impressed with your work here. I’m thinking there must be a way to solve the URL issue though… it properly updates the URL when the title link or the next three links are chosen, but not in the sidebar. However gawker is doing it, there URLs always update. I’d love to see that change on this theme, but I;’m not sure that my limited time and skill can give a hand to the effort.

Definitely trying to figure something out. Gawker loads a blank HTML page then fetches content to populate all the missing areas afterwards. Their Javascript code figures out what page you are on by detecting the “#hash” link in the address bar. That is why their site is very slow.

Qawker is rather simple in comparison. It is just a very basic WordPress template. All the data is in the original HTML files. I just have some extra fancy Javascript on top which polishes the experience. I’m trying to figure out a way to tweak the behavior. Also looking to make internal links instant load enabled.

I have to admit here, I’d rather it be fast than show the correct URL. In fact, I’d rather disable the proper URL behavior in the main body section so it is consistently “broken” everywhere than do something to make it as slow as gawker.

Unfortunately, I didn’t think that part through during this initial release. You can comment out certain lines in the functions.php file to get the text header option to appear on the configuration page. I would suggest just using an image temporarily. I have a list of bug fixes and improvements that everyone is providing. I will push out updates directly to WordPress users when Qawker gets approved in the official theme directory!.

Really love the theme but the header is a bit of a problem. Changes to #header.logo in the style sheet don’t seem to make any difference b/c of the header controls in the admin. Example: I changed width to 550 and referenced a new gif file I put in the CSS folder and – nothing… Great theme though! :O)

I’m sure it is possible, however my code is specific for the Qawker layout. You are welcome to rip apart my code and take the parts you need to get it to work with the template you are currently using.

Yup, I’m well aware of that problem. It was the best I could do in 6 hours. If I went about the Gawker route where they have a “#” (hash link), users would run into other issues with search engines. My current method is faster and simpler. I would suggest adding a “share this” plugin to solve that issue for now. TechsPlurge looks great by the way.

Thanks! And yes, this theme is open source. You can do pretty much anything you want to it. Feel free to change the layout, fonts, colors, or just about anything else. I’d suggest using a child theme so that upgrading is easy when I push out updates in the future.

P.S. You are not required too, but leaving a tiny credit for us somewhere would be awesome!

I’m not so sure if I understand your question. This theme is specifically for WordPress.org installations. It does not work on WordPress.com sites yet, but that might change at some point if Qawker gets approved in the official theme directory.

Unfortunately did not spend even a minute working on mobile support. This is definitely a desktop browser theme. I would suggest using WPTouch by BraveNewCode to offer optimized interface for smart phones.

On that note, how does Skatter Tech look on your BlackBerry? We launched a mobile version recently!

You know this is stealing right? You can’t just steal someone else’s site design and create a theme out of it. If they want to go after you, they can. The design is copyrighted and Gawker owns the design because they created it. They could sue you if they wanted to. If you are in another country they could simply go after your hosting and your domain name and get your hosting shutdown and possibly your domain name revoked for DMCA violations related to copyright infringements.

I think it is more of an issue if specific patents, stolen code, or scrapped content comes into question. As I stated before, this was a pure emulation/parody of their website. Although inspired by Gawker, this is an original creation. Just because someone has a blog with a certain layout doesn’t make it illegal for others to use something similar.

I’m not too worried, but hopefully nothing happens. On that note, this was even featured on Gizmodo last night.

Three questions (sorry!) – but, first let me say this is a fantastic theme… and you did an amazing job cranking it out so quickly. 1. How do I get the larger images on top of the headline like in the demo? 2. Where is it pulling the tiny author image from on all posts? I’m getting a default image there 3. How do I set the thumbnails for each post? I’m just getting headlines in the sidebar.

Again, much thanks for your hard work. If you’d be willing to customize this a bit for me, I’d gladly pay you. If you’re interested, send me an email, please.

1) For the larger images to appear at top, you need to set a featured image for each post. You should find that option in the post edit page.

2) The author image comes from Gravatar. It looks as though you are already using it to comment here. If you use the same email address in your profile settings in your WordPress, the same image should appear there as well.

3) Doing step one will make the images also appear in the sidebar automatically.

P.S. I am not charging for this, it is open source. If you need to customize or tweak the theme, I’m sure the community will probably be more helpful than me. There are gazillions of free plugins too. The official WordPress forums and WordPress StackExchange are awesome resources too.

Also, it would be awesome (unless I am doing this wrong) to be have the theme automatically resize the images so they display accurately as the featured image, as well as in a post. This is a freaking awesome theme! Where’s the donation link?

I’ll see what I can do about auto resizing in the next update, but setting the width to 618 pixels in the WordPress Media Settings should ensure a perfect fit. As for your question about clicks, it works just like any regular blog theme. It just appears different to users!

Sorry, but that is something I definitely can not help you with. Scraping generally equates to stealing content for SEO spam and making some advertising bucks. I don’t know if you are using this for justified purposes, but my contribution was only the open source code, nothing more. Good luck!

Does anyone know how you would go about creating a default image for teasers below the first post…? For some posts, I don’t want the feature image…but when you don’t do that, there’s no image for the teaser section on the front page. Isn’t there a way to create a default image that would show up if there was no ‘featured’ image?

I’m interested in a default image for those posts where you don’t want a large featured image. Currently, if you don’t pick a featured image, the front page tease of the post doesn’t contain a thumbnail, just a link to the post and the title. To keep things tidy there, I’d love a way to either manually add the smaller thumb or a default image to fall back on… Thoughts?

I can’t stand the new gizmodo site, one article at a time…ha, I don’t have time to go through each article until I find one I like. I need to be able to browse. They’re last design was great…this new design is so freaking unusable .

Not anymore! It looks like Gawker updated all their websites to now feature a scroll bar! I find it funny that they copied my copy of their own website. I guess too many people were confused to learn whether the sidebar actually scrolls.

Awesome! I have the theme running on http://www.stayentertained.com but it seems to sometimes take an old post and automatically re-publishing it by changing the date so it appear at the top of the recent posts.Why does it do that?

alright, I love your work, but can you please help me? when you click a link from the sidebar, The url doesn’t show the whole link/permalink. The only reason I’m complaining is because ads don’t show if a person clicks on a post from the sidebar. however, if you click on the main article, it shows the whole link in the URL box, and the ads show.

Are you using Google Adsense? I believe they prevent loading ads through “ajax page fetches” to prevent abuse. If they were to have enabled it, people could post-fetch additional ad units to get around the 3 per page limit. This unfortunately is an issue for honest users who are just trying to run ads normally.

I’m trying to find a solution, it is even a problem with the “load more” feature on Skatter Tech Hubs. If anyone else has a solution, any help would be truly appreciated.

It’s an easy fix! In the WordPress Dashboard head to Settings -> Permalinks. Choose the Month + Name option and hit save. You should be good to go. Let me know if you have any questions. (And thanks for the complements.)