Make sure you edit the settings at the top of the file to make sure it points to your Sickbeard install.

Yesterday I decided to make a homepage for the server and I figured other people might like to check it out as well, so I released it on GitHub!

It's a cool little one-pager that has buttons for SickBeard, CouchPotato, Headphones and SABnzbd, details of your current download, your wifi information and a list of TV shows that are coming out today.

It's completely customisable, at the top of the php file is a big array full of various settings you can tinker with.

Old browsers weren't that target audience for this project as it makes use of CSS3 and HTML5 (progress bars!)

Check it out on Github!

Let me know if you have any requests or suggestions.

Now available in Package Control

Fear not, though, it's a relatively simple issue to fix!

The file you need to edit is: /admin/Skins/search.ascx.

Inside that file on line 6 you'll find a sneaky little non-breaking space element. Delete that element.

Save that file and upload it if necessary and you'll notice your search bar goes from:

to:

I've done a visual refresh of the WordPress Theme here so I've started a new Github project to separate it from the previous theme.

Like last time, this is a development template and is in no way ready to be used on any website "as is". It's only being shared as a developer resource. If you see something here you like and want to know how it's done then you can download the source and peruse the templates

This is the theme being used on this website right now. It's like a live demo!

Version History

I'll be working with the as-of-writing default template, TwentyEleven, but the steps can really be applied to any skin as long as you acknowledge the dimensions of your website before you start.

This introductory page will act as a guide to break up the tutorial in to easy to digest chunks, so here's a run down of each page and what you will learn:

Page Two

• Create an "artwork" custom post type using the Custom Post Type UI plugin
• Apply additional image sizes using the Additional Image Sizes plugin
• Creating  your first art gallery post

Page Three

• Creating a template to display your artwork post type as a gallery rather than a series of posts.

Page Four

• Implementing Colorbox to display your "full posts" as a popup gallery

Page Five

• Creating a homepage for your website
• Using Sudo Slider to develop a "latest artwork" slider.

Page Six

• Adding titles and dates to your slider and styling
• Linking the titles directly to a colorbox popup

Epilogue

• Download final template from Github
• Other tutorials to keep going with

Ready to get started? Head on over to Part Two.

Here I'll detail the steps I took to add the +1 buttons to my artwork and motion portfolio pages.

First you need to understand the logic behind my portfolio. The artwork page is actually a list of WordPress posts that have the post-type of artwork, so each picture has it's own post and it's own permalink. This is essential for the +1 buttons, as they each need to have their own URL to +1 independent of each other.

If you are using a different CMS, just ensure that each image (or whatever you're colorboxing™) has a unique URL, even if it's just the URL of the image itself.

Step 1: Adding the URL somewhere that Javascript can access

In my wordpress loop I needed to add the permalink for the WordPress post, in this case I just used the "data-*" attribute:

<a href="/path/to/image.jpg" data-permalink="<?php echo the_permalink(); ?>" class="galleryThumbnail" title="my really cool image">

If you're just going to use the URL of the image you can skip this step, as we can just steal the URL from the "href" attribute.

Step 2: The Javascript

I already had a custom "title" set up in my colorbox call, as I wanted the option for the user to download the image. Here is the script I had originally:

$("a.galleryThumbnail").colorbox({
opacity: 0.92,
scalePhotos: true,
maxHeight: "90%",
maxWidth: "90%",
title: function() {
var url = $(this).attr("href");
var title = $(this).attr("title");
var download = '<span id="cboxDownload"><a href="'+url+'" title="Download This Image"><strong>Download</strong></a></span>';
return '<span id="cboxTitleLeft">'+title+'</span>'+download;
}
});

I already have some variables set up in there that's pulling information from the markup. This gives you an idea on how we're going to access the permalink, so let's start the magic!

The Magic

We can't just add in the typical <g:plus> tag in the script since it just plain doesn't work. Conveniently, the plus guys have a handy-dandy documentation page that covers just about everything we need to tackle this problem. We need to use the Javascript API instead, which is really quite easy.

We need to set up a target element which is as simple as adding an empty element to the return, like so:

return '<span id="cboxTitleLeft">'+title+'</span><span id="cboxGplus"></span>'+download;

So I've added an empty span with the ID of cboxGplus. Now we want to target that element with the gapi.plusone.render command. At the end of the title function, add a comma after the last curly brace ("}") then add in the colorbox "onComplete" option:

 
title: function() {
var url = $(this).attr("href");
var title = $(this).attr("title");
var download = '<span id="cboxDownload"><a href="'+url+'" title="Download This Image"><strong>Download</strong></a></span>';
return '<span id="cboxTitleLeft">'+title+'</span><span id="cboxGplus"></span>'+download;
},
onComplete: function() {
// This is where the plusone magic will happen
}
 

The onComplete function, funilly enough, will run when the colorbox pop up finishes loading. So once the image has loaded and everything's settled, we'll tell Google to render that button for us. Do it Google! Do it!

Inside the function add the following two lines:

var permalink = $(this).attr("data-permalink");
gapi.plusone.render("cboxGplus", {"size": "small", "count": "true", "href": permalink});

The variable is pulling the permalink from the data-permalink attribute. If you're using the full-size image as the URL to +1 then change the "data-permalink" to "href".

The render command is being triggered for the "cboxGplus" element. It's being rendered as a "small" button, showing the count and the href is being pulled from the permalink variable. Neat-o.

All together

So now our complete code looks like this:

 
title: function() {
var url = $(this).attr("href");
var title = $(this).attr("title");
var download = '<span id="cboxDownload"><a href="'+url+'" title="Download This Image"><strong>Download</strong></a></span>';
return '<span id="cboxTitleLeft">'+title+'</span><span id="cboxGplus"></span>'+download;
},
onComplete: function() {
// +1 Button
var permalink = $(this).attr("data-permalink");
gapi.plusone.render("cboxGplus", {"size": "small", "count": "true", "href": permalink});
}
 

And after some CSS tweaking, check it out, it's now showing up:
Note: This example has "count" set to false, so the count bubble is hidden.

See it in action

This is now live on my website, over in either my artwork or motion pages. The source is freely available over at GitHub. The pages you're interested in are:

• /js/dbaines.js - Do a search for "// Colorboxing Artwork"
• /loop.php - Do a search for "/* Artwork */" and look for the a tag.

Hope that helps, let me know if you have any questions in the comments section below, or drop me a line via email.

I've uploaded my current WordPress theme as a Github project, freely available for WordPress hackers of the world to dissect and learn from. So if there's anything here that you've seen and thought, "How the hell is he making that happen?" well, now you can find out! Feel free to download, use, dissect, play-with or do nasty, nasty things that you really shouldn't tell anyone about.

Version History

Version 1.7 - 2012-01-17

• FINAL VERSION - Superceded by the 2012 theme.
• Re-arranged and styled the author info box at the bottom of loop-single.php, shows up when user has filled out their profile
• Styled Author Archives page
• Multiple Size Favicon (64, 32, 16)
• Added a little "sticky" icon/flag for sticky posts
• Switched from EasySlider to SudoSlider
• Removed left over Google Prettify code

Version 1.6 - 2011-08-22

• Fixed the excessive PRE tags in Geshi causing massive padding everywhere. (This was actually part of the last update, I just forgot to document it)
• Minified the customised EasySlider script in plugins.js
• Fixed accesskey 2 for about link
• Updated download shortcode to open in new window, removed "Download" part of title text so you can use it as a pretty link button instead.
• Added "or" between load more button and show pagination
• Added some logic to show a disabled load more button if there are no more posts to load
• Added an error message if the loadMore button fails to load the next page
• Adapted post-icons to allow for multiple icons using some jQuery (dbaines.js)

Version 1.5 - 2011-08-21

• Removed changelog from style.css for older releases. Still available at GitHub and the URL at the top of the file.
• Updated to Modernizr 2.0.6 Custom
• Removed border-top for active menu item when using wordpress menus, since custom post types were showing the blog as being active, rather than the correct parent page. Bug in WordPress?
• Added custom close button for colorbox
• Added a blue hover state to the homepage logo link
• Implemented Google Code Prettify to replace GeSHi, but changed back due to quirks of Prettify (namely line number incrementing, copy and paste issues and other things GeSHi does better) - I've left the code in /functions/functions.shortcodes.prettify.php
• As a result of the above I've moved the GeSHi stuff in to functions/functions.shortcodes.geshi.php for hot swapping action
• Added "Show Pagination" link to the load more posts button. Shows wp-pagenavi links next to the load more button. LoadMoreButton also pulls in the wp-pagenavi from each page so if the user loads a few pages and then shows the pagination, it shows the relevant page as being current.
• Fixes to the Load More feature:
  • Functionised&tm; the part of the dbaines.js file that adds colorbox classes to everything so we can call it after the new page has been loaded
  • Called gapi.plusone.go after a successful load so the google plus buttons are rendered.
  • Rejiggered the ajax call for the loadMore link to only do one .load() and then cherrypick the things to go to places and what not
• Added some accesskeys:
  • 0: Takes the user to the new accessibility page
  • 1: Homepage
  • 2: About
  • 3: Blog
  • 4: Portfolio
  • 5: Search
  • 6: Sitemap
  • 9: Contact Page
  • S: Skip to Content

Version 1.4 - 2011-08-04

• Styled figcaption for codebox
• Added aprilfools.css for headache inducing fun come April-time
• Added WordPress Option: Google Analytics UA Code
• Added WordPress Option: Enable WordPress Menu - Uses a WordPress menu, "Main Menu" as the main navigation instead of the hardcoded links
• Added WordPress Option: Replace 'friends' with 'blogroll' links
• Added WordPress Option: All posts have thumbnails - includes shiny new generic post-thumbnail.png
• Added WordPress Option: AJAX Post Loading - Facebook/twitter esque post loading technique
• Removed -webkit-appearance from search input
• Added Google +1 buttons to search results
• Added .2 seconds of transitions (of various vendors) to the top-level nav links for fun and profit
• Gave .homepageSlider h2 1px of text shadow blur to fix the shadow being white in chrome 12/13.
• Added line-height: 1.5 to p,ul - if it affects too many things I'll specify it to content areas only.
• Hardware Acceleration (via the "Magic Bullet" -webkit-transform: translateZ(0);) given to homepage slider and websites slider
• Added a "Shortcodes Reference" box in the new post admin page. Super convenient!
• Responsive Design changes:
  • Fixed rendering of the search input in Firefox for the mobile design, again. Should stick this time.
  • Made the artwork portfolio look somewhat nicer on the reponsive design
  • Changes for the contact form when less than 960px wide
  • Made the "About me" image centred and styled like the centred images in the blog

Version 1.3 - 2011-08-01

• Fixed search input rendering in Firefox for the mobile display
• Added +1 buttons to portfolio colourbox popups (dbaines.js)
• Added +1 buttons to websites loop

Version 1.2 - 2011-07-31 (double day update!)

• Fixed the 1.1 date
• Figure HTML5 elements for wp-captions
• Figure HTML5 elements for tutorial post thumbnails
• Figure elements for code blocks, adding caption option to codebox shortcode
• HTML5 form fields for comments form
• Removed some vendor prefixes for some box shadows and rounded corners as the major browsers now use non-vendor-prefixes.
• Fixed some more inconsistent typography
• New WordPress Theme Options:
  • Google +1 "count" bubbles on/off
  • Footer Text
  • Comments Intro
  • Laid groundwork for WYSIWYG editors in theme options page, still a bit buggy.

Version 1.1 - 2011-07-31

• Reponsive Design changes for <960 and <600 wide
• <600 wide is optimised for mobile devices
• Pseudoelement CSS icons for subsection (dark grey area) and post meta icons
• Fixed some inconsistent typography
• Added GooglePlus and Forrst Icon to homepage
• Plugins.js for minified plugins
• jQuery from Google CDN, Updated to 1.6.2
• Added rel="me" to links to my profiles on things
• Re-arranged functions.php, cleaned up, separated large chunks in to manageable files (ie. functions.shortcodes.php)
• Removed Facebook Likes
• Added Google +1 Buttons
• WordPress Options Page!
  • Google +1 Buttons on/off
• Updated login css to reflect changes in WordPress 3.2

Version 1.0

• First Release

The game takes place directly after Assassin's Creed II. So if you haven't played that one then you're probably going to be lost for the most part at the beginning. It does an okay job of bringing us back up to speed with the overall story which is great.

You start out as any hero would after saving the world. You go around doing mundane things, helping old ladies cross the street and bringing the groceries home for the local hottie. Then everything goes to shit, as I guess it had to.

By a very common trope you're stripped of your earnings and worldly possessions when the now-bustling village you built in AC2 gets attacked by the Pope's son. What a jerk.

The game takes place in Rome. Just one city, unlike the previous games that would take place in a few different cities with a rather boring overworld to get between them. Personally I kind of liked only being in one city. It made it easier to get around and you very quickly learn the landscape.

The Bad

Unfortunately after a few missions you start to realise the developers really haven't learned from the issues of their previous games.

Just like every other Assassin Creed game, there's just four buttons. That means you get one key to do fifty different things. Thanks, consoles!
Pressing shift may at any time, often disregarding whether you're in high profile mode or not:

• Climb the nearest building
• Hop on the nearest platform/fence
• Push somebody
• Tackle somebody
• Grab somebody
• Pick up a weapon
• Pick up a dead body
• Try and loot a dead body
• Climb on a horse

It's really a game of dice to see what your character's going to do. This gets very old very quickly.
You're SOL if you want to hop on a horse if you're standing in a field of the recently deceased. There are guards coming at you and all you want to do is high tail it out of there, yet all you can do is pick up dead bodies. Oh the woes of being an assassin.

The camera locks into place when you're in the process of climbing up on to a platform so it breaks any fluidity, since you need to wait for the animation to stop before you can look around for the next platform to hop to. If you try and create a fluid run you really only end up on walls you didn't want to go up or falling on to a street you really weren't aiming for.

Similarly you can't move your mouse through walls. This makes navigating tight corners very slow and painful. Lots of running in to walls and tripping over because I can't see where I'm going. I'm using the keyboard so the only directions I can go is up down left and right and they are all relative to where the mouse is looking, which would be great if I could move the mouse. If I need to move south west and the camera is locked in to place I need to stagger left and down until I can move freely again.

Several times I've had a target locked on and tried to assassinate them only for Ezio to turn around and take out two completely innocent civilians for apparently no reason what so ever. Sometimes you'll leap at your target and take him out, sometimes you'll just kill some civilians.

Jumping distances are thoroughly inconsistent. Sometimes you'll jump massive distances and make it, other times you'll jump a substantially less distance and your character will fail and fall down. I have a feeling this is mostly due to poorly made scripted jumps though. Most of the big ones you can do (in game, not in a cutscene) are done during the core missions. There are quite a few times I've stood and looked around for another way to go because there was no way I'm going to make this jump they want me to do. I know for a fact I've fallen down from smaller distances. In the end I just guess they want me to go that way so I jump and some how miraculously make it.
The most recent example of this is during one of the Leonardo missions I was able to jump an enormous gap between two buildings that had wooden beams poking out between them. I thought for sure I was going to fall down and die but miraculously made it. Straight after that in a Romulus temple I fell down jumping from one chandelier to another. Even though it looked like they were a lot closer than the two beams I jumped between earlier.

Other times simple little jumps just won't happen. For example if I'm sitting on a broken wall of a house and there's a platform below me, no amount or combination of keypresses will get me from where I am to where I want to go. I either need to leap off completely missing my target, tackle somebody or slowly climb down and hop along the pokey-outey bricks to get over there.

All of the standard Assassin's Creed failures that have been around since the first game, and that you'd think they'd iron out by the third game. If you enjoyed the first two games and you didn't mind these issues, you're really going to like this one.

The Good

There are some pretty cool new features though.

You also now have assassin recruits you can train and call in for support at any time. High level assassins are awesome, and watching them come out of nowhere and take out a group of guards is immensely satisfying.

Hiring a group of mercs and travelling the country-side sicking them on guard patrols is amazingly fun. That are very good fighters too, so hiring a group can often lead to upwards of an hour of killing.

You can now call your horse who will magically appear nearby and crush any civilians that gets between you and itself. I called mine Epona. You can ride your horse throughout Rome and it's a quick way to get around. I'm not sure about everyone else but I specifically went out of my way to run over civilians when I was on my horse.

I'm not sure if it was in AC2, but smoke bombs are fantastic as well. One assassination mission I was perched on a tall column watching the target below chatting with some guards. I threw a smoke bomb at him, dove down and took him out with my hidden blade, stole a horse and took off. The guards had no idea what happened and I didn't get any notoriety. It was so cool.

There are tonnes of missions to do as well, which is great. I think they really learned their lesson from the bad press the got for AC1, for it's lack of missions and mission types. I've been playing for about a week and still have a map full of mission markers.

Like AC2 you can purchase buildings. Instead of just purchasing some buildings in your villiage, you can now purchase a whole bunch of buildings, shops and landmarks located all over Rome. One of the building types you can purchase is a tunnel entrance. You can find several tunnel entrances throughout Rome and when you've purchased them they serve as a quick-travel location.

Instead of just having look out towers to synchronise the map with, you now also have Borgia towers. These towers have varying areas of influence around them that prevent you from purchasing any buildings in the area. For each tower there is a Borgia captain. Once you kill him you're able to burn that mother down and release the area from the evil Borgian presence. Once liberated the tower that miraculously survived the burnination now turns in to a place where you can manage your assassins.

Not only are there Templar lairs, there are now also Romulan crypts, housing the creepy wolf-skin-wearing Followers of Romulus. Beating all six will unlock an equally creepy new armour set for your lovable little assassin.

Getting to free-play as Desmond in the real world was fun as well. There are a few things you can find outside of the Animus, but for the most part it's an empty sandbox that while cool gets pretty boring.

There's a new Virtual Training mode which I enjoyed. A very Metal Gear Solid VR Training-esque mode that you can use to practice your killing and maiming like any normal person would.

All in all I think the game is highly enjoyable. It has some great new features, a quality story with some much more interesting modern-day chapters than the previous games. The issues I've mentioned are the same issues found in both previous games so if you didn't notice the issues with Assassin's Creed or Assassin's Creed II, or you simply didn't think they were a big deal then you are absolutely going to love this game.

Now enjoy a whole bunch of random screenshots I took while playing:

This will walk you through how to add a Zenphoto option, and if the Zenphoto option is clicked, it will show further options to select title, description, tag or filename.

Adding the Zenphoto option

This part is pretty simple. Find your #searchOptions container we set up previously and add in this line:

<input type="radio" value="" name="post_type" id="searchOptionsZenphoto" /> <label for="searchOptionsZenphoto">Search Zenphoto Only</label>

Now we have a new option to specifically search Zenphoto only.
Notice I've also removed "Search All" since there's no way to consolidate the results from WordPress and Zenphoto without hacking the search results page to pull down both results. That's a little of scope for today's tutorial.

jQuery

Unlike the previous tutorial, the Zenphoto search won't go through WordPress at all, so we'll need to redirect the search to Zenphoto if that option is clicked.

Here's the heavily commented code I put together to do just that:

var thisOption = "";
// Switching Form Types Depending On Which Option Is Selected
$("#searchOptions input[name=post_type]").change(function() {
// Throw the ID in to a variable for easy access
thisOption = $(this).attr("id");
// If ZenPhoto is selected...
if(thisOption == "searchOptionsZenphoto") {
// Set Zenphoto Form Settings
$("#search").attr({
"action": "path/to/zenphoto/page/search/",
"method": "post"
});
// Set Zenphoto Input Name
$("#searchMain input").attr("name","words");
// If not ZenPhoto (WordPress)
} else {
// Set WordPress Form Settings
$("form#search").attr({
"action": "path/to/wordpress/",
"method": "get"
});
// Set WordPress Input Name
$("#searchMain input").attr("name","s");
}
});

So now if we click on "Search Zenphoto Only" it will change the form to search action and method attributes to make it search your Zenphoto install. If we select any of the other options it will switch back to the WordPress settings. It will also modify the input field name since WordPress looks for "s" and Zenphoto looks for "words".

You will need to ensure you change the "action" values to your actual zenphoto and wordpress installs. The Zenphoto action will need "/page/search/" at the end to point to the Zenphoto search page.

More Zenphoto Options

By default Zenphoto includes search options of it's own:

So let's try and incorporate that in to our search box.

First add a new section to your search form:

<section id="searchZPOptions">
<input id="SEARCH_desc" name="SEARCH_desc" type="checkbox" checked="checked"  value="desc"  /> <label for="SEARCH_desc">Search Description</label><br />
<input id="SEARCH_filename" name="SEARCH_filename" type="checkbox" checked="checked"  value="filename"  /> <label for="SEARCH_filename">Search Folder/Filename</label><br />
<input id="SEARCH_tags" name="SEARCH_tags" type="checkbox" checked="checked"  value="tags"  /> <label for="SEARCH_tags">Search Tags</label><br />
<input id="SEARCH_title" name="SEARCH_title" type="checkbox" checked="checked"  value="title"  /> <label for="SEARCH_title">Search Title</label>
</section>

This code is mostly taken straight from the Zenphoto search form. By default they are all checked, but you can turn them off by removing the checked="checked" attribute.

We'll also add the following to our CSS to indent it a little to make it look like it's supposed to be apart of the ZenPhoto selection above it, and to hide it by default:

#searchZPOptions {padding-left: 20px; display: none;}

Then add the show/hide functions to your jQuery to show the additional options if a user clicks on the Zenphoto Option:

var thisOption = "";
// Switching Form Types Depending On Which Option Is Selected
$("#searchOptions input[name=post_type]").change(function() {
// Throw the ID in to a variable for easy access
thisOption = $(this).attr("id");
// If ZenPhoto is selected...
if(thisOption == "searchOptionsZenphoto") {
// Show ZPOptions
$("#searchZPOptions").show();
// Set Zenphoto Form Settings
$("#search").attr({
"action": "path/to/zenphoto/page/search/",
"method": "post"
});
// Set Zenphoto Input Name
$("#searchMain input").attr("name","words");
// If not ZenPhoto (WordPress)
} else {
// Hide ZPOptions
$("#searchZPOptions").hide();
// Set WordPress Form Settings
$("form#search").attr({
"action": "path/to/wordpress/",
"method": "get"
});
// Set WordPress Input Name
$("#searchMain input").attr("name","s");
}
});

So now if a user clicks on the Zenphoto option, it not only redirects the form, but also shows the Zenphoto tickboxes.

Cleaning Up After Zenphoto

Since WordPress uses get to retrieve the search terms, it's also going to send all of Zenphoto's SEARCH_* inputs to the WordPress search page. We can create a function that checks for a WordPress search and then removes those input fields:

// Check for Submit press and delete ZenPhoto options from sending if on WordPress
$("#searchsubmit").click(function(){
if(thisOption != "searchOptionsZenphoto") {
$("#SEARCH_desc").remove();
$("#SEARCH_filename").remove();
$("#SEARCH_tags").remove();
$("#SEARCH_title").remove();
}
});

So now if somebody clicks the submit button, the script will check to see if thisOption has the Zenphoto value. If it doesn't, it's obviously a WordPress search, so we'll go ahead and remove those elements from being sent.

So your whole jQuery script should look something like this:

// Show/Hide
$("#searchAnchor").click(function(){
$("#searchOptions").toggle();
});
var thisOption = "";
// Switching Form Types Depending On Which Option Is Selected
$("#searchOptions input[name=post_type]").change(function() {
// Throw the ID in to a variable for easy access
thisOption = $(this).attr("id");
// If ZenPhoto is selected...
if(thisOption == "searchOptionsZenphoto") {
// Show ZPOptions
$("#searchZPOptions").show();
// Set Zenphoto Form Settings
$("#search").attr({
"action": "path/to/zenphoto/page/search/",
"method": "post"
});
// Set Zenphoto Input Name
$("#searchMain input").attr("name","words");
// If not ZenPhoto (WordPress)
} else {
// Hide ZPOptions
$("#searchZPOptions").hide();
// Set WordPress Form Settings
$("form#search").attr({
"action": "path/to/wordpress/",
"method": "get"
});
// Set WordPress Input Name
$("#searchMain input").attr("name","s");
}
});
// Check for Submit press and delete ZenPhoto options from sending if on WordPress
$("#searchsubmit").click(function(){
if(thisOption != "searchOptionsZenphoto") {
$("#SEARCH_desc").remove();
$("#SEARCH_filename").remove();
$("#SEARCH_tags").remove();
$("#SEARCH_title").remove();
}
});

Check out this demo to see it in action, using my old Zenphoto install I still had lying around on my server: