Fix Empty Searches

One minor problem for any web site is duplicate content: the same resource is available under different URIs. Yes, we have <link rel=canonical>, but anything that prevents such cases is better.

Today, let’s look at something, that most professionals never see: empty searches. You offer a search input field, and someone hits the submit button unintentionally, without any term entered. The resulting URI looks like this: It shows the same content as your front page. In fact, it is the front page.

No one needs that.

Therefore, I have added a simple rule to my .htaccess:

# Catch empty searches
RewriteCond %{QUERY_STRING} ^s=$
RewriteRule ^ /? [L,R=301]

Add these lines right after the RewriteBase directive.

Next, I wanted to save my visitors the unnecessary request. I have written a simple jQuery plugin:

 * Stop empty searches
 * @author Thomas Scholz
 * @param  $ jQuery object
 * @return bool|object
(function( $ ) {
   $.fn.preventEmptySubmit = function( options ) {
       var settings = {
           inputselector: "#s",
           msg          : "Don’t waste your time with an empty search!"

       if ( options ) {
           $.extend( settings, options );

       this.submit( function() {
           var s = $( this ).find( settings.inputselector );
           if ( ! s.val() ) {
               alert( settings.msg );
               return false;
           return true;
       return this;
})( jQuery );

I call it in my footer scripts:

jQuery( "#searchform" ).preventEmptySubmit();

Note that my search form element has an id attribute with the value searchform. Adjust the selector to match your current theme. To change the message, just add an option for it:

jQuery( "#searchform" ).preventEmptySubmit({ msg: "This won’t work!" });

You may use the script for other input elements too. Set the selector in the second option inputselector. Say, you have a form with the id discountcode and a field with the id dcodenumber:

jQuery( "#discountcode" ).preventEmptySubmit(
   msg: "No number, no discount, sorry!",
   inputselector: "dcodenumber"

Useful? Any hints?

Guest Post

This post is written by Thomas Scholz - and is a post in our Advent Calendar on WP Engineer about WordPress.
Thank you very much from my part to Thomas.
If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!

Category And Archive Dropdown With Unobtrusive JavaScript

A good website works when a user comes along with JavaScript disabled, just as well as with scripting enabled. You separate the JS layer of the site from anything else (and waived for example, onclick in HTML) and places the scripts in a way that only improves the already existing functionality of the site. So the visitors can navigate through the website with and without JS, even though it might be a little more difficult or less attractive without scripting. This approach to scripting on sites is called Unobtrusive JavaScript. Jenn Lukas gives in this talk at the JSConf 2010 reasons why it's a good thing. Besides all the good reasons, the main argument for unobtrusive JavaScript that is to be implemented with appropriate planning so easily that it would be a wasted potential if you would without it. The problem can be alone if the used CMS makes problem - which brings us to WordPress.

Occasionally you like to have in your blog sidebar drop down menus (select-elements) to navigate the categories and the archive and the WordPress Codex provides the documentation and appropriate solutions for archive in which, however, both with only activated JavaScript function. In both cases, the URL of the destination page is stored in the value-value of the built-in option elements of the drop-down menu and when you select an entry, you will be forwarded via JavaScript on the very URL. The almost same functionality could be achieved also without scripts:

  1. Create an old-fashioned GET form with submit button that sends to the base address of the site
  2. Put the select in this very form and specify name="cat"
  3. Give the option elements the slug of the categories

Submitting the form will result in a call to and thus the desired category, possibly with a redirect to the search engine friendly version of the URL. This works for the visitors just as good as the solution of the Codex, leaving aside the fact that you have to click on a button. But this is where you can engage with JavaScript to hide the button and sending the form via, by a script inserted, onclick handle . The end result looks like the script for users with Codex solution and all others come then just by clicking on the button to its destination and everyone is happy. So let's get to work!

The basis for the category drop forms creates a normal HTML form:

<form id="kategorienform" action="<?php bloginfo('url'); ?>" method="get">
    <label for="kategorienselect">Jump to Category</label>
    <select id="kategorienselect" name="cat">
        <option value="">-- Please Select</option>
            $categories = get_categories('hierarchical=0');
            foreach($categories as $category){
                $selected = (is_category($category->cat_ID)) ? 'selected' : '';
                echo '<option '.$selected.' value="'.$category->cat_ID.'">'.$category->cat_name.' ('.$category->count.')</option>';
    <input id="kategorienbutton" value="Kategorie abrufen" type="submit">

You could use this in your side bar and it would work, but we still want to get rid of the submit button and start forwarding directly when selecting a category. For this purpose, it does not take more than 6 lines of JavaScript that can be inserted directly below the form:

<script type="text/javascript">
    document.getElementById('kategorienselect').onchange = function(){
    document.getElementById('kategorienbutton').style.display = 'none';

If the user changes his selection in select element, is (if not the entry "Please select" is selected) submitting the form automatically, without having to activate the with style.display = 'none' made invisible button - done is the most user-friendly and still working without JavaScript category dropdown! This is a bit more code than the three lines from the Codex, but it works guaranteed on every visitor. And the principle is quite simple, provided you plan accordingly in advance. Since this is not happening in WordPress not even happen, we need to tap a little more - or in the case of the archive dropdown even much more:

<form id="archivform" action="<?php bloginfo('url'); ?>" method="get">
    <label for="archivselect">skip to month</label>
    <select id="archivselect" name="m">
        <option value="">-- Please select</option>
            $query = "SELECT YEAR(post_date) AS `year`, MONTH(post_date) AS `month`, COUNT(ID) as `posts`
                FROM $wpdb->posts
                WHERE post_type = 'post' AND post_status = 'publish'
                GROUP BY YEAR(post_date), MONTH(post_date)
                ORDER BY post_date DESC";
            $key = md5($query);
            $cache = wp_cache_get('select_archives', 'general');
                $arcresults = $wpdb->get_results($query);
                $cache[$key] = $arcresults;
                wp_cache_set('select_archives', $cache, 'general');
                $arcresults = $cache[$key];
                global $wp_locale;
                foreach((array) $arcresults as $arcresult){
                    $value = $arcresult->year.$arcresult->month;
                    $text = sprintf(__('%1$s %2$d'), $wp_locale->get_month($arcresult->month), $arcresult->year);
                    $count = ' ('.$arcresult->posts.')';
                    $selected = (is_month() && get_query_var('year').get_query_var('monthnum') == $value) ? 'selected' : '';
                    echo '<option '.$selected.' value="'.$value.'">'.$text.$count.'</option>';
    <input id="archivbutton" value="Archiv abrufen" type="submit">

The problem with the Archive, is that without a custom SQL query, you cannot get to the information, which you need for a monthly archive. So there is no other way then to manually enter the database and cache the result manually. The principle is identical: simply output a conventional form and then six small lines of JavaScript:

<script type="text/javascript">
    document.getElementById('archivselect').onchange = function(){
    document.getElementById('archivbutton').style.display = 'none';

To summarize: many lines of code, but the principle is not complicated. Unobtrusive JavaScript is a question of intelligent planning and if it is not included as with WordPress automatically, you have to do it. With traditional websites, there is no reason to operate completely dependent on JavaScript, and should there be more effort, it is worth the clean separation of the layers and the accessibility bonus.

Guest Post

This post was written by Peter Kröner

Peter Kröner is freelance web designer and developer and also author of the HTML5-book.
On he blogs on all kind of topics in web technology.

Thank you very much from our part to Peter.

If you also like to have your interesting post published on our website, please let us know on our contact page. Of course we will appreciate your contribution!

Add Menus to the Admin Bar of WordPress

The new WordPress admin bar facilitates the access of backend and frontend to areas of the back end. Of course, this new control element of WordPress is expandable and can be adapted to the needs of the user. In some areas and for various needs, quick access to different areas is certainly interesting.

The newly created menus can be adapted as usual rights to the appropriate roles. A small example will demonstrate the integration.
Continue reading …

The WordPress Exif-Meta-Datas

WordPress stores when uploading files, some data in the meta data - the metadata. If there are pictures involved and these files contain EXIF data, then it outputs some EXIF data which can be used. For example, as additional information about the picture in a photo blog.

No matter what, and how you want to do that, here is a small function that reads the Exif data.
Continue reading …

Use WordPress Post Thumbnail as Background image

Now and then you need in a post or page a catchy image. For editors the thumbnail function is quite comfortable to assign an image to a post or a page. Therefore it is worthwhile to use this picture as a background image for the post. However, it is much better if the image is defined via CSS in the background and it doesn't appear in the markup. Therefore, a small function that defines a default image and if there is a defined post thumbnail, then this will be used.
Continue reading …