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.
Any way how to have a blog view for this theme? Just like http://blog.lifehacker.com/ :)
For those who want to have URL change copy and replace the below code in scripts.js file…… it works like a charm….
[EDIT – by Sahas Katta]
I removed the code since the WordPress comment formatting might cause issues for people. You can instead directly download the same code here http://qawker.linkbouncr.com/wp-content/themes/qawker/scripts.js
Just replace it with your current scripts.js file.
It’s true, this works. But something’s still not ok. When you open in blank, in a new window, a post shows the share buttons, like from facebook, tweet from twitter, and plus 1 from google, so the share buttons show only in new windows, but in the home window they don’t. What script is needed for this, after we have fixed the URL changing, without the help of Sahas Kata?
Do you use any plugin to show share button?
I am not using any plugin for the share buttons, I just have a few code lines copied from addthis.com. But they are not showing. And i believe it’s a jquery conflict.
Javid I have a question for you, where could I find an horizontal theme? Cause I am searching for years for the shelf theme from theme foundry. Can you help me find it. Of course, free download.
How do I make Share Buttons work, when links are accessed from Home page? As I said I am using AddThis code, and not a plugin.
Another problem I noticed is the accessing of the categories. When done, posts from that category are not being displayed.
And a last topic is about related posts. Should I use a plugin?
For sharing I use a plugin called 1click retweet/ share/ like which works really well it asks you to add a code when you first activate it but don’t worry about doing that as it works for sharing without it.
With categories they are displayed in the right scroller bar, I dont get why though, would like to know some way to change that to the main section if anyone knows how.
And finally the related posts should work with any plugin just find the best one for you
It’s edsactly the same for me, copied the code edsactly in to the scripts.js file and it still dosnt change the url
Delete the code which is already there in that file and paste the above code… let me know if this works
Tried that still doesnt work, dont have a clue why
You don’t need to copy the code. Just save the file first> http://qawker.linkbouncr.com/wp-content/themes/qawker/scripts.js -> And after just overwrite it on the path using your ftp connection.
Perhaps you might have to try upgrading to 0.20 version if you have not done it already from here
http://wordpress.org/extend/themes/download/qawker.0.2.0.zip?nostats=1
It works now thanks, didn’t realise there was an update
Hi Sahas,
your current wordpress demo site doesn’t work, so I cannot download the fix.
Could you please make this accessible again?
Regards,
d
Is there anywhere else to find this file?
Link no longer works, but as your comment was a year ago I’m not really surprised
For future reference, to scroll to the top, navigate to the scripts.js file
locate:
$jQ.ajax({url:a,type:”GET”,success:function(b){$jQ(b).find(“#home #livepost”).html(“#home #livepost”);$jQ(“#home”).html($jQ(b).find(“#home > *”)).fadeTo(“fast”,1);$jQ(“#nextpost”).replaceWith($jQ(b).find(“#nextpost”))
and append:
$jQ(“html, body”).animate({ scrollTop: 0 }, “slow”);
right after the double paranthesis
Now to work on the updating url…
Great work! Just a quick help needed.. my site won’t display the images on the right sidebar. Any ideas how to fix this? Thanks a bunch! And oh, WordPress just messes up my logo. I have already created an image following their required resolution, but still ending up as a crap one.
http://theotakutalk.host22.com
Cheers,
June
HeyI can’t get the featured image thing to work. I use the “Set Featured Image” option to upload a pic, and it puts the image code in the post itself. How do I get the featured image to work?Thanks Karan
Hi,
first of all thank you for your grate work, secondly, I have a problem when I am trying to use Jquery based plugins (like NexGen gallery), I think problem comes from loading Jquery, in another word when ajax loads I need to somehow call Jquery again but I really do not have any Idea how can I do that, would you please help me out??
Hi, Any luck with the URL problem (ads and stuff)? I think the only way to get support for most of the modern era browsers is just going for hashchange … but even then, loading stuff via ajax and jquery still mess up google ads and other scripts (like twitter buttons, or google plus buttons)
I am playing with it. I any updates please let me know
Best and thanks
Boaz
is there a way i can put category wise posts only, i.e when i click on a category above the post title…as gawker does?
I just wanna congratulate you for an amazing wordpress theme! I am currently using it for my blog. I just have a quick question, the Load More Stories button is not showing on my blog. How do i make it show up again? I have very little background when it comes coding but I was able to tweak your theme a little bit using tutorials that I found online.
It would be really great if you could help me out or just give me an idea on how to make it show up again.
A really beautiful theme, it’s almost perfect. I’ll use it in a gadget site. Many thanks.
has this been discontinued? any specific reasons?
links not work. please fix or hide or delete it or inform it gone or give updated information. you can make lost some wanderers. :)
The theme download still works. The demo site is no longer functional.
Why not? Were there any issues with Gawker?
I do have the same question as pbehgoozi.
Did you encounter any issues with Gawker?
Any reason this has been discontinued?
I never had a single issue with Gawker. They were a good sport about the whole thing. This theme was actually featured on a few Gawker blogs. I just built this as a proof of concept. I unfortunately do not have time to maintain it. The code is entirely open source. Anyone is welcome to take on the effort of moving this project forward. Sorry I can’t be more helpful.
im a bit of a noob with wordpress, but Is anyone else having trouble with simple posts? It shows no pictures or videos.. looks like maybe a CSS issue? can anyone help? my site is sslnfo.com
By the way guys this is NOT stealing, as a matter of fact, gizmodo.com is where I got the download, they are promoting it.
Hi
I’m trying to have a go at updating the page url. I managed to do so by using:
$(function(){
$(“a[rel=’postToUpdate’]”).click(function(e){
//e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won’t change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr(‘href’);
//to change the browser URL to ‘pageurl’
if(pageurl!=window.location){
window.history.pushState({path:pageurl},”,pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind(‘popstate’, function() {
$.ajax({url:location.pathname+’?rel=tab’,success: function(data){
$(‘#content’).html(data);
}});
});
<a rel='postToUpdate' href="” title=””>
<a rel='postToUpdate' href="” title=””>
and I get it to “work” by changing URLs, but then the entire page goes white (even if no links are clicked)