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'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.

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!

Looking for instructions for SudoSlider?

EasySlider is pretty awesome. You just chuck it in, tell it what container to slide with and you're all good to go. It's definitely my go-to slider when working on new projects. When implementing it on a recent project there was only one thing missing: Keyboard navigation. I'm a huge fan of keyboard navigation, probably just because I'm really lazy and I'm always impressed when I can move things about using my arrow keys. Luckily for me, keyboard navigation is super simple to add, and Alen kindly provides the non-minified code so we can hack away and customise to our liking!

Firstly, open up the non-minified version and find the this.each function:

this.each(function() {

Directly under that, simply paste in the following code chunk:

// Keypress Listeners
function checkKey(e){
switch (e.keyCode) {
case 37:
e.preventDefault();
animate("prev",true);
break;
case 39:
e.preventDefault();
animate("next",true);
break;
default:
}
}
// Keypress Listener Support
if ($.browser.mozilla) {
$(document).keypress(checkKey);
} else {
$(document).keydown(checkKey);
}

You're all set! The CheckKey function keeps an eye out for any keystrokes. If it finds key "37" (left arrow) it triggers the previous slide animation to start. If it finds key "39" (right arrow) it triggers the next slide.

But David, you say. What If I only want keyboard navigation on some pages and not others? Well you, I say, simply make it an option. Now if you've never looked at a jQuery plugin before this might be a little scary, but we can simply add an option that we can pass a true/false setting to when we call our script. Look for this code:

$.fn.easySlider = function(options){
// default configuration properties
var defaults = {
prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',	

Go to the end of the list of options, it should be numericId: false. You'll probably notice that every option has a comma at the end, except for the last one. Add a comma to the end of this line and create a new line. On the new line, add the following: keyboard: false

Your options code should now look something like this:

// default configuration properties
var defaults = {
prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',
nextText: 		'Next',
controlsShow:	true,
controlsBefore:	'',
controlsAfter:	'',
controlsFade:	true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',
lastText: 		'Last',
lastShow:		false,
vertical:		false,
speed: 			800,
auto:			false,
pause:			2000,
continuous:		false,
numeric: 		false,
numericId: 		'controls',
keyboard:		false
}; 

Now go back to the code you added earlier. Before the checkKey function, add: if(options.keyboard) {, then at the bottom of the new code (below both the checkKey function and the keyboard listener support section, add a curly bracket: }.

Your checkKey code should look like this:

if(options.keyboard) {
// Keypress Listeners
function checkKey(e){
switch (e.keyCode) {
case 37:
e.preventDefault();
animate("prev",true);
break;
case 39:
e.preventDefault();
animate("next",true);
break;
default:
}
}
// Keypress Listener Support
if ($.browser.mozilla) {
$(document).keypress(checkKey);
} else {
$(document).keydown(checkKey);
}
}

That's it! You've added your option! What this does is it checks if the option "keyboard" is true and if it is it runs the code in the brackets. Remember how we set the option to default to false? Well, we'll now need to call the slider with the option set to true:

$(".homepageSliderWrapper").easySlider({
continuous: true,
prevId: "largePrev",
nextId: "largeNext",
keyboard: true
});

Now go to the page your slider is on and press your left/right arrows and watch that baby slide!

Alternatively, you can set the keyboard option to default to true, and on the pages you don't want it to be on, call it as false.

SudoSlider

SudoSlider is based on EasySlider and as such it's a pretty easy to adapt these instructions to SudoSlider. All you need to do is change the "animate" calls to "goToSlide".

// Keypress Listeners
function checkKey(e){
switch (e.keyCode) {
case 37:
e.preventDefault();
animate("prev",true);
break;
case 39:
e.preventDefault();
animate("next",true);
break;
default:
}
}

To:

// Keypress Listeners
function checkKey(e){
switch (e.keyCode) {
case 37:
e.preventDefault();
goToSlide('prev', true);
break;
case 39:
e.preventDefault();
goToSlide('next', true);
break;
default:
}
}

So ZenCart has a massive back-end that even the most experienced Zenners can get lost in. Even with all the menus and obscene amount of options, there aren't any settings to configure for the centerboxes.

The only way to customise these boxes is to edit the code. Luckily, the ZenCart guys have put all the product lookup functions in /includes/functions/functions_lookup.php, and have lookups for both the category and the description. We can drop those functions in to the centerbox code quite easily, even though their FAQs and knowledgebase don't really mention it much.

Read on if you're interested in seeing a breakdown of how it's done, or you can jump right to the solution.

1. Backing up and Overriding

The first step is to create some overrides for the files we need to edit, rather than editing the core file.

Fire up your FTP client and go to /includes/modules/. Download the centerbox you would like to edit. In this example I'll do the featured products box. So download featured_products.php. If there isn't already, create a folder with the same name as your template.

Upload the file you just created in to this folder, and start editing.

2. Adding the Category Name

If you're using a template that's based on the default "contemporary green" template, the line you need to find should be 73, and should start with 'text' => (($featured_products.

In this line, find where the product name is displayed. The bit of code we're looking for is:

<a href="' .  zen_href_link(zen_get_info_page($featured_products->fields['products_id']),  'cPath=' .  $productsInCategory[$featured_products->fields['products_id']] .  '&products_id=' . $featured_products->fields['products_id']) .  '">' . $featured_products->fields['products_name'] . '</a>

Directly after the link (or h1 in my case) ends, add the following code: <h2>' . zen_get_category_name($featured_products->fields['master_categories_id'], $_SESSION['languages_id']) . '</h2>

The function zen_get_category_name takes two values. The first is the category id, which featured_products already creates for you as $featured_products->fields['master_categories_id'] and the second value is the language. You can get the users language by using $_SESSION['languages_id']. This function will result in printing out the category name.

If you've put a h1 around your product title your line should now look like this:

'text' => (($featured_products->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'cPath=' . $productsInCategory[$featured_products->fields['products_id']] . '&products_id=' . $featured_products->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $featured_products->fields['products_image'], $featured_products->fields['products_name'], IMAGE_FEATURED_PRODUCTS_LISTING_WIDTH, IMAGE_FEATURED_PRODUCTS_LISTING_HEIGHT) . '</a>') . '<h1 class="itemTitle"><a href="' . zen_href_link(zen_get_info_page($featured_products->fields['products_id']), 'cPath=' . $productsInCategory[$featured_products->fields['products_id']] . '&products_id=' . $featured_products->fields['products_id']) . '">' . $featured_products->fields['products_name'] . '</a></h1><h2>' .  zen_get_category_name($featured_products->fields['master_categories_id'],  $_SESSION['languages_id']) . '</h2>' . $products_price);

Save the file and you should now see the category listed right under the title for your featured products.

3. Adding the Description

Directly after the h2 ends, add the following code:

<div>' .  zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($featured_products->fields['products_id'], $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>

There are a few nested functions here. zen_trunc_string asks ZenCart how many characters the description should be before it truncates it. The default is 150. This can be changed in the your admin settings. The zen_clean_html and stripslashes are functions that remove any HTML so you don't end up messing up your layout with cut off code.
zen_get_product_description is the function that finds the description for the product. It takes the product id and the language. The products id is conveniently accessed via $featured_products->fields['product_id'].

4. The Whole Lot

After all of that, your text line should end up like so. If you're just joining us, this should be around line 73 in includes/modules/YOUR_TEMPLATE/featured_posts.php.

'text' => (($featured_products->fields['products_image'] ==  '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) ? '' : '<a href="' .  zen_href_link(zen_get_info_page($featured_products->fields['products_id']),  'cPath=' .  $productsInCategory[$featured_products->fields['products_id']] .  '&products_id=' . $featured_products->fields['products_id']) .  '">' . zen_image(DIR_WS_IMAGES .  $featured_products->fields['products_image'],  $featured_products->fields['products_name'],  IMAGE_FEATURED_PRODUCTS_LISTING_WIDTH,  IMAGE_FEATURED_PRODUCTS_LISTING_HEIGHT) . '</a>') . '<h1  class="itemTitle"><a href="' .  zen_href_link(zen_get_info_page($featured_products->fields['products_id']),  'cPath=' .  $productsInCategory[$featured_products->fields['products_id']] .  '&products_id=' . $featured_products->fields['products_id']) .  '">' . $featured_products->fields['products_name'] .  '</a></h1><h2>' .   zen_get_category_name($featured_products->fields['master_categories_id'],   $_SESSION['languages_id']) . '</h2><div>' .   zen_trunc_string(zen_clean_html(stripslashes(zen_get_products_description($featured_products->fields['products_id'],  $_SESSION['languages_id']))), PRODUCT_LIST_DESCRIPTION) . '</div>' . $products_price);

Save your file and refresh your page. Voila! Product title, product category, product description and price, all listed in the box.

With a little bit of styling, you end up with something like this:

]]> http://dbaines.com/blog/archive/zencart-adding-category-and-description-to-featured-products-centerbox/feed/ 0 http://dbaines.com/blog/archive/wordpress-conditional-post-type-function/ http://dbaines.com/blog/archive/wordpress-conditional-post-type-function/#comments Fri, 26 Mar 2010 11:34:04 +0000 David http://dbaines.com/?p=1545 Custom post types are pretty neat. By putting the following code (kindly taken from WPRecipes) in your functions.php, you can include all post types in your blog page:

function my_get_posts( $query ) {
if ( is_home() || is_feed() || is_search() || is_archive() ) {
$query->set( 'post_type', array( 'post', 'tutorial', 'update' ) );
}
return $query;
}
add_filter( 'pre_get_posts', 'my_get_posts' );

That's great, but what if I want all of my post types to be shown on my blog page but look slightly different. Well, you can use get_post_type to do exactly that.

get_post_type requires a post ID to be supplied, so you can use <?php get_post_type(get_the_ID()); ?> inside the loop to check against the current posts' post_type.

You can echo that code inside your post class to allow changes on a purely CSS level, by targeting the my_post_type class. However, if you want to go all crazy and have a completely different output for each post, you could do something like this inside your loop:

<?php $type = get_post_type(get_the_ID());
if ($type == "tutorial") : ?>
.. tutorial display ..
<?php elseif ($type == "update") : ?>
.. update display ..
<?php else : ?>
.. normal post display ..
<?php endif; ?>

And viola! You now have completely customisable post type displays, all in the single loop.

I decided to expand my art gallery to include some FLVs and MP3s and found that my trusty Zenpressed plugin doesn't check if the file is an FLV or an MP3, and instead just tries to embed the mp3/flv as a thumbnail.

I looked around for a few different plugins that would recognise the multimedia formats, but none of them were as awesome as Zenpressed. Zenpressed hadn't been updated since the dawn of time so I didn't expect to find any help from their website.

Instead I dove in to the code and created a small hack for multimedia formats.

It seemed fairly simple enough. At the moment, the plugin takes the image url and uses it as a thumbnail.
For multimedia formats, Zenphoto requires an image to be made with the same filename as the multimedia file, uploaded to the same folder as the file.
For example, the thumbnail for mymovie.flv would be mymovie.jpg, so all I really needed to do was put a script in that removed the file extension and add ".jpg" to the end of the url.

And guess what? It really was that simple.

Installation

1. Navigate to your [wordpress install directory]/wp-includes/plugins folder.
   Download your zenpressed.php file, create another copy of it and back it up somewhere safe just to be careful.
2. Open up the zenpressed.php file in your favourite code editor.
3. Find line number 75
   The line below it should start with:
   

   76 77

   // Output $c =

   
   This is where the file starts it's output, we want to modify the filename URL before then, so on line 75 enter the following code:
   

   75 76 77 78 79 80 81 82 83 84 85

   // Multimedia Replacement mod by dBaines.com - Replaces image.flv with image.jpg // Get last three characters from filename $se = substr($s,-3); // Check if FLV or MP3 if ($se == "flv" or $se == "mp3") { // Remove last 3 characters from image filename, "flv" $s = substr($s, 0, -3); // Add "jpg" to filename $s.="jpg"; } // End Multimedia Replacement mod by dBaines.com

   
   WARNING: If you have modified your zenpressed.php file in any way or have downloaded a fork or pre-modified version of it, then your line number will possibly not match. Please make sure you have the official version to make sure you are putting the code in the right place.

   If you have a modified version of zenpressed you might not be sure what line to put this code on.
   It goes in the zenpressed_showphoto function, under the "generate data" section and before the "output" section.

4. Save and reupload the file and you're good to go!