This is an add-on tutorial to my previous tutorial, "WordPress Custom Post Type Search".

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>
The Zenphoto Option

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:

Advanced Options

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.

Advanced Search Options

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: