The standard Wordpress search results page can be a little boring for some. If you are a theme developer, you likely will want to makeover this page and give the user the ability to do so. Here's the basics.
This article is not going to do a full fledged design of a search results page. That would be far too much to describe in the time and space I have here. Rather, I'm going to describe a tool that you can use to make this more user friendly.
The basis around this is by giving your user the ability to customize the page's sidebar via custom fields. This tip is not only useful just for the search page but can be handy for other static pages as well (About, Contact, etc.).
Because we are customizing a page, we need a way to get at the pages' post_id. One thing I quickly ran into when trying to build a custom search page was that $post->ID wasn't giving me the right value. Instead, it was giving me the last post in the loop's id. And because it was a post and not a page, I was getting mixed results.
Now you have to know what you are looking for. You don't know the page id for the search page unless you go into the database to find it or hover on the permalink. That is the wrong approach because that value will be different for every installation. So instead, you have to use the title. Since you only have one Search page, use "Search" as the title in this little function below:
function get_id_by_title($title, $post_type='post') {
global $wpdb;
$dbResult = $wpdb->prepare("SELECT ID FROM
$wpdb->posts WHERE post_title = %s AND post_type='{$post_type}'", $title);
$post = $wpdb->get_var($dbResult);
if ($post)
return(get_post($post, ARRAY_A));
return(null);
}
$searchPageId = get_id_by_title("Search", "page");
On return it will return an associative array. Do a var_dump on the return variable if you need to see the keys and contents. You can place this in the functions.php file of your theme.
Since we are using custom fields, we now have to use get_post_meta() function to retrieve the values. All custom field information is stored in the wp_postmeta table. There, metakeys and their associated values are stored. Each post/page has a unique identifier. When you create a custom field, each custom field name is the key.
Let's say we want to place a custom picture in one of our sidebars. We first would go to the our Search page and create a custom field called 'Photo'. Then, put in the img tag along with a reference to that picture.
Next, we go into search.php. This is the search results page. To retrieve the 'photo' custom field value and place it in a sidebar, you do something like this:
(html 5 document header stuff here)
echo "<aside id='sidebar'>";
$aResult = get_id_by_title("Search", "page");
if (!empty($aResult)) {
$customFields = get_post_meta(intval($aResult['ID']),'photo');
if (!empty($customFields[0])) {
$out = "<div id='photo'>";
$out .= $customFields[0];
$out .= "</div>";
echo $out;
}
}
dynamic_sidebar("sidebar-sidebar");
echo "</aside>";
(html 5 document footer stuff here)
Here we retrieve the page identifier via our custom get_post_id_by_title function. If it exists, we then go and retrieve the custom field information for our photo field and then render it in a div block.
Why do it this way? Because it gives a user friendly means to add content rather than let novice users directly edit the theme page.
To inspire you, you can visit a website I put together using state of the art HTML 5, CSS3, and Wordpress 3.3 which uses adaptive web design. Along the right hand side of the page layout, is an aside bar. There, I let the administrator place a custom widgets and content via custom fields.
I did this because it would require that I place the code into the theme layout page itself of which would make it "hard coded". I wanted more flexibility to drop widgets and other things I could think up later down the road.
You learned in this tutorial the following:
