Storefront Gridport theme, limit search to products and add pagination
Adding attractive pagination
This does require that search only have one loop and return one set of posts. Here the custom post type Product. It will not return any regular pages or Blog posts. It may be able to be adapted to do that. I do not have the time to work that out. If this works for you great, if not you will need a developer.
The PHP code
First you need to add a function to your functions.php file. This you will find in the Gridport theme folder. Make sure you have a copy of the original functions.php file in case you have problems. If you have not edited PHP before see the notes at the end of this file, do not be scared you can copy and paste. Make a blank line right before the last line which is ?>; in functions.php and copy and paste the code below. Make sure you have no spaces or blank lines after the closing ?>
function storefront_pagination($pages = '', $range = 3)
{
$showitems = ($range * 2)+1;
global $paged;
if(empty($paged)) $paged = 1;
if($pages == '')
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if(!$pages)
{
$pages = 1;
}
}
if(1 != $pages)
{
echo "<div class=\"pagination-search\"><span>Page ".$paged." of ".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« First</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Previous</a>";
for ($i=1; $i <= $pages; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}
if ($paged < $pages && $showitems < $pages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">Next ›</a>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo "<a href='".get_pagenum_link($pages)."'>Last »</a>";
echo "</div>\n";
}
}
Save that file.
One Setting you can adjust
There is one number you may want to adjust in the code for functions.php above. On the very first line you will see $range = 2 This is the number of pages linked to either side of the current page. If there are just 5 pages you will see just 5 links that is the range 2 below, 1 for current and 2 above.
You coud raise range to 3 and you would see 7 numbered page links at a time. Once the number of result pages exceeds the range times 2 plus 1 the next and previous buttons will appear as required like this
Second PHP file
Make sure you have a copy of the original search.php file in case you have problems.
Now open search.php, delete everything and paste in this code. You could also just download the file here, unzip and upload to replace the search.php on your site. What I have done is remove the second loop for blog posts. It is not really possible to have pagination if you have 2 loops, which pages would it be based on? As I mentioned you may be able to adapt this so one loop returned all mixed together. Once reduced to one loop I just call the pagination function I added to the functions.php file above, see line 46.
<?php get_header(); ?>
<?php
$image_width = get_option( 'product_image_width' );
$image_height = get_option( 'product_image_height' );
?>
<div class="leftcontent titlepop">
<h2><?php _e( 'Search Results', 'storefront' ); ?></h2>
<?php
global $query_string; // grab the search query
query_posts($query_string . "&post_type=wpsc-product");
?>
<?php if (have_posts()) : ?>
<h3 class="twotone-bottom" style="padding: 0px 0 10px 0; margin: 0 0 15px 0;font-size:15px;"><?php _e( 'Your search for ', 'storefront' ); ?>"<?php echo wp_specialchars($s); ?>" <?php _e( 'returned the following Products:', 'storefront' ); ?></h3>
<?php while (have_posts()) : the_post(); ?>
<?php if(wpsc_show_thumbnails()) :?>
<div class="srch_product_image" style="width:75px">
<?php if(wpsc_the_product_thumbnail()) : ?>
<a href="<?php echo wpsc_the_product_permalink(); ?>" title="<?php echo wpsc_the_product_title(); ?> - <?php echo wpsc_the_product_price(); ?>" style="cursor:pointer;"><img class="product_image shadow" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" width="75px" height="75px" src="<?php echo wpsc_the_product_thumbnail(); ?>"/></a>
<?php else: ?>
<a href="<?php echo wpsc_the_product_permalink(); ?>">
<img class="no-image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="No Image" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo WPSC_CORE_THEME_URL; ?>wpsc-images/noimage.png" width="75px" height="75px" />
</a>
<?php endif; ?>
</div><!--close imagecol-->
<?php endif; ?>
<div class="srch_product_title">
<h3 style="float:left;font-size:13px;"><a href="<?php echo wpsc_the_product_permalink(); ?>" title="<?php echo wpsc_the_product_title(); ?> - <?php echo wpsc_the_product_price(); ?>" style="cursor:pointer;"><?php echo wpsc_the_product_title(); ?></a></h3>
</div><!-- close title -->
<div class="clear"></div>
<?php endwhile;
storefront_pagination();
else: ?>
<div class="entry">
<h6><?php _e( 'Sorry, no products matched your criteria.', 'storefront' ); ?></h6>
</div>
<?php endif; ?>
<div class="clear"></div>
</div><!-- end of left content -->
<div class="clear"></div>
<?php get_footer(); ?>
The CSS to make it pretty
Now it should work. You need to make it look good. Add this code to the Storefront Options Panel/Style Tab Custom CSS box or your custom.css file if using one.
.pagination-search {
clear:both;
padding:20px 0;
position:relative;
font-size:11px;
line-height:13px;
}
.pagination-search span, .pagination-search a {
display:block;
float:left;
margin: 2px 2px 2px 0;
padding:6px 9px 5px 9px;
text-decoration:none;
width:auto;
color:#fff;
background: #555;
}
.pagination-search a:hover{
color:#fff;
background: #3279BB;
}
.pagination-search .current{
padding:6px 9px 5px 9px;
background: #3279BB;
color:#fff;
}
Tools:
You may edit your PHP outside WordPress and upload it to your server. You must use an appropriate code editor NOT microsoft word or anything like that which adds a lot of invisible formatting and will be a disaster.
If you do not have one, 2 excellent free ones are…
TextWrangler for Mac, http://www.barebones.com/products/textwrangler/
Notepad++ for the PC http://notepad-plus-plus.org/
If you want to go all out Aptana, this is a serious and powerful code editor for both mac and pc. It is free. Has handy code hinting, that is as you type it shows you what the options are for the setting you are working with. It could be overkill, or great. http://aptana.com/
