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

Version 1.1 - 2012-01-18

• Fixed missing theme option: slider category. Specifies which category of posts to show on the homepage slider
• Fixed google plus social icon options
• Redesigned theme options page to use tabs to make it easier to use
• Wiki now available on github project page
• New theme options:
  • Social Image (/images/facebook.png)
  • Facebook og:type
  • Facebook fb:admins
  • Facebook fb:app_id
  • Meta Author
  • Meta Description
  • Meta Keywords
• Google +1 script now only loads if +1 has been enabled in theme options.

Version 1.0 - 2012-01-17

This one is very much a continuation of the 2011 theme with the following new features:

• Cleaned up some old and unused files
• Visual Refresh for 2012:
  • Redesigned Slider, brought in tutorial posts as well as portfolio posts
  • Heavy use of CSS3 animations
  • New login screen to match the changes in WordPress 3.3.x
  • Comment and cForm form fields have been redesigned
• Paged posts have been styled
• Removed some unnecessary "type" attributes on links and scripts (not needed in HTML5)
• Theme Options rewritten and based on Plugin Options Starter Kit, as such text customisations now have their own WYSIWYG editor.
• New Theme Options:
  • Show/Hide author information at the bottom of posts - will only display if the author has filled in their WordPress profile information.
  • Homepage: Number of slides
  • Show "Listening To" on blog posts
  • Homepage introduction text
  • Show/Hide social links in header and customise URLs

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:

I like having an easy-to-use search bar that isn't redundant and doesn't require several different search bars to do things that a single search bar should be able to do. PhpBB, I'm looking at you.

Today I'll teach you how to add some options to your WordPress search bar to search for several different things. The search bar will allow the user to search:

• All post types and categories
• Only blog post types
• Only portfolio post types (which in this example will be an array of three different kinds of post types in itself)
• Only in the tutorial category

Set up your search bar as you normally would in your template. For this example, I'm just going to have a search bar on an empty page, for simplicity's sake.

Modifying your template

Open up the template that has your search bar in it. Your search form should look something like this:

 
<form id="search" name="searchform" method="get" action="<?php bloginfo("url"); ?>">
<section id="searchMain">
<input type="search" id="s" name="s" title="Search Blog" placeholder="Search My Website" />
<button type="submit" value="search" id="searchsubmit">Search</button>
</section>
</form>
 

Here I've used a HTML5 element called section to wrap around my form elements. You can use a div if you're not comfortable using HTML5 elements. We need a container element for these elements because the options are going to be in a separate container, but still in side the form.
Create another section element underneath the searchMain section, and call it something like searchOptions. Populate this element with some radio buttons and some labels, as you would if you were setting up any old regular form with a radio selection. The "name" for these radio buttons will be "post_type". Set up the values to represent what you would like the post_type to be when the user searches. My code at this point is now looking like this:

 
<form id="search" name="searchform" method="get" action="<?php bloginfo("url"); ?>">
<section id="searchMain">
<input type="search" id="s" name="s" title="Search Blog" placeholder="Search My Website" />
<button type="submit" value="search" id="searchsubmit">Search</button>
</section>
<section id="searchOptions">
<input type="radio" value="all" name="post_type" id="searchOptionsAll" checked /> <label for="searchOptionsAll">Search All</label><br />
<input type="radio" value="post" name="post_type" id="searchOptionsBlog" /> <label for="searchOptionsBlog">Search Blog Only</label><br />
<input type="radio" value="portfolio" name="post_type" id="searchOptionsPortfolio" /> <label for="searchOptionsPortfolio">Search Portfolio Only</label><br />
<input type="radio" value="tutorials" name="post_type" id="searchOptionsTutorials" /> <label for="searchOptionsTutorials">Search Tutorials Only</label>
</section>
</form>
 

Note: I've added the "checked" attribute to the first radio button. This will act as the default action. This way you don't need to worry about coding in a fallback in case someone doesn't select an option.
If you would like a different option to be used as the default search, remove the checked attribute from the first radio button and add it to the one you want to be the default.
So now we've got a pretty good looking form coming together.

Functions.php

You've got a pretty swanky form going now, but does it actually do anything? If you click search, you'll notice it sends ?s=%searchterm%&post_type=%yourselection% to the search results page up in the URL. We're now going to take advantage of those GET variables and do some pretty cool things with them.

Open up your functions.php and at the bottom, paste in the following code:

 
/***********************************
*
* SEARCH FILTER
* http://speckyboy.com/2010/09/19/10-useful-wordpress-search-code-snippets/
*
***********************************/
function SearchFilter($query) {
if ($query->is_search or $query->is_feed) {
// Portfolio
if($_GET['post_type'] == "portfolio") {
$query->set('post_type', array('artwork', 'websites', 'motion'));
}
// Tutorials
elseif($_GET['post_type'] == "tutorials") {
$query->set('category_name','tutorials');
}
// EVERYTHING! MWAHAHAHAHAHA
elseif($_GET['post_type'] == "all") {
$query->set('post_type', array('artwork', 'websites', 'motion', 'post'));
}
}
return $query;
}
// This filter will jump into the loop and arrange our results before they're returned
add_filter('pre_get_posts','SearchFilter');

I like to always attribute links to the places I find the snippets of code I use, so you'll notice I've included a link to the site where I originally found the snippet we'll be using today.
I've added two checks, the first one checks if the page we're on is a search, the second one checks if we're looking a feed. The feed part is optional and you can remove it. I included it because I also wanted to have these queries available as custom feeds.

Once the feed or search check is confirmed, it will move on to look at the $_GET values for the "post_type" variable:

• If it finds "portfolio" it will create a custom query to return all posts in the "artwork", "websites" and "motion" post types that match the search terms. These are proper custom post types I had previously set up in the back-end using the Custom Post Type UI plugin.
• If it finds "tutorials" it will create a custom query to return all posts in the tutorials category that match the search terms.
• if it finds "all" it will create a custom query similar to the first one, however instead of just returning those three post types, it also returns "post" post types, which are the default blog post types for WordPress. This way you're essentially searching all four post types for the same term.

Notice I didn't need to set up a custom query for the "Search blog only" option. If you look back at the code for the radio buttons, the value it sends is simply "post". As we've learned in the code snippet above, "post" is the post type for the default WordPress blog posts. The variable the search form sends to the search results page is post_type, which is actually a real variable you can pass to WordPress at any time. As such when you search only the blog it will send ?post_type=post to the search results page and WordPress will know exactly what to do with this out of the box.

Now you'll probably want to change the post_types above to use the post_types you want to search for on your own WordPress install. Unless you find yourself in the incredibly coincidental scenario of having exactly the same sort of post types as me. In which case, high five!

So now your search form should be fully functional and ready to go!

Some jQuery magic

If you're like me, you like a search bar to not take up too much room, and be fairly easy to access. These new options seem to take up a lot of space and don't look very good. What can we do about that? Well, how about we add a show/hide options button? Sounds pretty good to me!

Go back to your search form template and add in a link just after the search button. Make sure to give it a unique ID so we can target it in jQuery later. Here I've called mine searchAnchor:

  <section id="searchMain">
<input type="search" id="s" name="s" title="Search Blog" placeholder="Search My Website" />
<button type="submit" value="search" id="searchsubmit">Search</button>
<a href="#" id="searchAnchor">Search Options</a>
</section>

Okay, great. Now we have a little link there. If you already have a scripts file with other jQuery business in it, open that up. If not, create a scripts.js file and dump it in to your theme folder. Enter in the following code:

$(function() {
$("#searchAnchor").click(function(){
$("#searchOptions").toggle();
});
});

Make sure you link up your new scripts.js file to your theme, then try it out! Now when you click the link it hides the options. Clicking it again shows them again! Woo! But we'll probably want it hidden by default. So open up your CSS file and add the following:

 
#searchOptions {display: none;}
 

Lookin' good, good lookin'. Now it's hidden by default, and clicking on the "search options" link shows them. Now all that's left is to style that puppy up. Add some background colours, borders and all sorts of crazy CSS3 goodness and you'll soon end up with a pretty swanky lookin' form.

If I'm still using the db2011 theme while you're reading this then there should be a live, working demo right there in the top right corner of this very website!

Now that I've launched dBaines 2011 I thought I'd release db2010 for the world to download and dissect. I hope to make this a tradition

Please Note: This is a theme that served a very specific purpose and as such is in no way ready to be plonked in to any old WordPress install. I'm not releasing it so that others can use it, I'm releasing it so that others can learn from it. I will not be providing support for people trying to use it as a theme. What you can and cannot do with this theme is outlined at the bottom of this post.

A brief run-down of features for the WordPress theme:

• Perfect integration with ZenPhoto 1.3
• Uses HTML5 and CSS3
• No Support for IE6 - May work, untested, not likely.
• Homepage Template that pulls latest ZenPhoto posts
• Search bar searches wordpress if you're on a wordpress page, searches zenphoto if you're on a zenphoto page.
• Admin Bar (defunct now since WordPress 3.1 comes with it's own admin bar)
• Tutorial post type with custom display
• QuickUpdate post type with custom display
• Microthemes with cookie
• Custom admin login theme
• All plugins fallback to either default functionality or display friendly fallback message.
• Various helpful shortcodes:
  • Download buttons
  • Columns
  • Demo/Download buttons for script releases
  • Clear
  • Subheadings (h2 with a class)
  • Important/Info/Error messages
  • Hilight
  • Inline Code
  • GeSHi styled Codebox, doesn't rely on a plugin

A brief run-down of features for the ZenPhoto theme:

• Completely static homepage category display. Unfortunately I just couldn't get the logic down to display the homepage dynamically without doing crazy things with subcategories and what-not.
• Absolutely relies on the WordPress template. The header, subsection and footer are all dynamic and pulled from WordPress.
• Matched very closely in style to the WordPress theme. I tried to make it as tight of an integration as a could.

Supported plugins out of the box:

• ZenPressed (specifically a highly modified version with features for sliders)
• WP AudioScrobbler
• Breadcrumbs NavXT
• Facebook Like
• Get Custom Field Values
• WP PageNavi

You can find more detail at the initial db2010 announcement post.

Credits:

I'll try and link these all to their appropriate places soon. In the meantime a quick google should show appropriate results.

• Silk Icons
• Function Icons
• EasySlider 1.7
• Tipsy
• jQuery.preload
• jQuery.autogrow-textarea
• jQuery.cookies
• jQuery.input.hint
• jQuery.jCaption
• jQuery.styleswitcher
• Modernizr
• YUI CSS base

Do's and Don't's

You are completely free to re-work this theme and use it on your own personal blog or website.

You are completely free to use snippets of code or techniques used/learned from this theme in your own theme.

You are completely free to re-develop this theme and release it for any platform (including as a standalone WordPress theme.) I only ask that you keep a credit to me (a comment in the CSS file or header.php will be fine) and that you release it for free.

2008: This was the first 404 page I developed for Co-Opp. At the time, the Co-Opp logo was sitting on top of a bunch of blue circles with some drips coming off the bottom. I decided to spin that familiar vision of the logo slightly and have the blue cloud turn in to a pool of blood.

2009: The logo changed slightly when the website was redesigned in 2009 and the logo no longer sat on a cloud of blue drippiness. As such the previous 404's pun was no longer relevant. Although still a good 404 page, I wanted something new and something more related to classic gaming that the logo represented. I came up with the idea of using the 404 to represent a classic game over screen.

2011: In early 2011, Co-Opp experienced a complete shift. The logo was back to the original one and everything became much more refined in purpose. I thought for a few days what I would use for a 404 page. I was very close to setting up a scene in Team Fortress 2 (via Garry's Mod) of a battle and having the Co-Opp logo lay dead in the middle saying something like, "Oh no! The page you were looking for was killed in cross-fire!" or something. A member of Co-Opp posted a photo to his Facebook account showing him ferociously about to eat a bunch of peas, and everything just clicked.

]]> http://dbaines.com/blog/archive/a-brief-showcase-of-co-opps-404-pages/feed/ 0