By 
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.
Links: Qawker Demo
Download: qawker.zip (v0.1.6)
Notice: I submitted Qawker to the official WordPress Themes Directory and it is awaiting approval.
Just wondering isn’t design is copyright of Gawker media ? and cloning theme wont it lead to issues ???
Honestly don’t know. (I sure hope not.) I wrote all the CSS, HTML, PHP, and Javascript from complete scratch.
Well I hope this theme don’t land you in troubles, theme is indeed great, nice work from your side in porting to WordPress.
Theme isn’t updating the URL in the address bar.
Yes, can you please fix the theme so it’s updating the URL when a new post is being called?
Nice. This actually works better than the gawker sites, way faster. Still thinking it looks different.
what about joomla? will it be a template for joomla aswell or?
I unfortunately have never developed for Joomla, but the code I released is entirely open source. Anyone is welcome to port it over.
I’d have to say you did a great job. It’s even better (response) than the actual Gawker design.
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?
Just checked out the demo, and it seems like I don’t have the “load more stories” button on the bottom of the right sidebar :/
Hmm, What browser are you using?
Oops, other comment went into the spam bin. I’m using Chrome’s Canary Build right now- that may be the problem. I’ll try using regular Chrome
I tried Opera, Safari, and Chrome, and the problem still persists
Are you using the latest versions of each? It works perfectly on Opera 11, Safari 5, and Chrome 9.
It might be a plugin causing an issue. Try clearing your cache. Do you have javascript enabled?
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!
It seems that was the problem. Thanks for walking me through this, the theme looks downright amazing! Cheers
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.
This is brilliant I tell you. I love how hitting next keeps going so fast. Agreed that Qawker works better than Gawker.
Awesome…. I was looking for this…. But,
I noticed thats jQuery loading is not changing the URL in the address bar… unlike the lifehacker etc theme.
Now this will stop Google Bot from Crawling the Site properly…. Also it might trigger a Penalty….
Same issue!!! … but I hope that Sahas will remove this bug soon … once done I’m going to use this theme on my website :)
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.
Thanks for the update….
I understood all the issue about the permalinks …. So no way to update the permalink on the adress bar on clicking on a article link item.
One more issue…. We can load up adsense ads…. previouslly I showed adsense by placing the ad code in single.php … Now where to place it so that it shows up….
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.
Wow this is amazing! i hope it doesnt get you into any trouble :P
Just a question, am testing it, and it shows the first post in summarized view, any idea how i can make it by default to show the full view ?
Oh and, is there any ways we can add a text instead of an image header ?
Thanks
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)
Actually it’s okay – a few changes to functions.php and it works perfectly. Thanks so much for this fun theme!
Can i implement just the scrolling sidebar on my existing Thesis based theme?
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.
Awesome Theme Sahas, nice job done here with this theme. But that sidebar links creates a problem as it doesn’t change the URL.
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.
Oh boy, just 6 Hours? Hats off Sahas. It took me many days to design my theme ;p
I was wondering if I could use this theme and modify it to use on my blog sometime later?
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!
Yeah ofcourse, I’ll leave a credit :)
Sometimes, a wheel is better off round than being reinvented.
Is there any way to get this theme without the wordpress.org desktop application. My PHP won’t work and I just want to install the theme onto a current blog I have on wordpress…
Thanks for your help!
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.
That’s what I was getting at. Thanks for the help. Is it likely to get approved?
It will probably become available for self-installations of WordPress. Since it is not a traditional layout, it may not head to the WordPress.com service for sometime.
I just tried it on my blackberry and it’s not aligning correctly. Have you been able to test it on mobile browsers?
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.
Which is owned by Gawker! I highly doubt they would publicize a site they intended to sue. “The best form of flattery is imitation”.
Well done on the theme! I have been plugging away trying to fix this URL display issue. If I come up with anything I will pass it along.
That would be awesome, let me know if you do think of a way to make the links work better!
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.
Thanks! I sent you an email about the customization stuff…
Will there be a plugin for GA designed for this? I am no developer, but love the layout. Since the URL doesn’t change, the only way to track articles is through clicks. Any solution for non-devs?
Actually, Google Analytics will work perfectly with this. Each “instant load” actually counts as a full page load with the way I coded this.
Will it identify the unique article clicks?
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!
PayPal Link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=PSCYCS6QRKV8Y
Thanks!
Awesome! And how well will this work with web scraping? I want to pull content from other sites into my posts…
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!
My intent is to create an aggregate site, with links and acknowledgement of the content going to the creators, also with their permission to repost on my site. No stealing here.
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 .
Everything looks exactly the same except for the scrollbars on the siderbars.
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?
How do I change the “Links” color from that Lime green to another color? I cant find it in the CSS. Thanks
The color I used in the CSS is #6a3. You can find and replace any instances with any standard text editor.
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.
I’m not that good at html, css and php, but what if like when you click from the sidebar it goes to the html page instead of refreshing? I don’t know if that might help :P
What an unbelievable achievement to be able to code this layout in six hours! I am amazed!
I am currently utilizing your layout at this blog – http://immersion.kodingen.com/home/wordpress/
I’ve noticed for some reason the “Load More Stories” button/link has ceased to load more stories. I’m hoping you can help me pinpoint the issue! I’m willing to share anything you need.
Once again, the layout is beautiful and it works perfectly with WordPress!
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.)
It works like a charm now! Thank you so much.
I have added a credit in my blogs About page which leads to your personal page – If you would prefer that it leads elsewhere just let me know and i’ll change it!
It works perfectly now! Thank you so much.
I have included a credit in my blogs About page that leads directly to your personal page – if you would prefer for it to lead elsewhere just let me know and i’ll happily change it!