Simple Media Queries Tester

CSS Media Queries are getting more popular and the adjustment of the size of a website for different clients or the size of the browsers are more necessary. The Media Queries are a solution, which also have its advantages and disadvantages. It was a disadvantage, when using, that I couldn't see all sizes at the same time. So why not just a small script, the iframe element. If you like to use it, here is a simple solution or you can use the current script in my "Test-Laboratory".
Continue reading …

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!

The Making Of

After the international launch of Xtreme One WordPress Framework we received quite a few questions, how we have realized the pages and whether we have used language Plugins. is a WordPress Multi-site installation and the support forum is a vBulletin 4.0 Forum, which is located in a separate directory and under the subdomain Currently we have 6 blogs plus the Childtheme demo blogs:

All blogs are powered by Xtreme One (what else?) and 3 Childthemes. The Childthemes have their own textual domains to be able to use 2 languages. There are the strings included that do not occur in the framework. We don't use a language Plugin. We write in English and German.

The themes, showcases and testimonials are Custom Post type with some additional custom fields, such as the Buy-Link, the price etc. . For the output of the testimonials I built a widget where I can display English or German. Since we are using on different subdomains some of the Xtreme One Widgets, such as the slider for the Childthemes, I modified the widgets a bit, so that they can execute multi-site queries. Via a selectbox I can choose which blog I want to query.

Every Childtheme Demo Blog runs on a separate subdomain. We wrote a small Plugin that creates the theme switcher. The Plugin adds in Super Admin at Sites, an extra box, with the demo blogs are selected. The data for the price and the purchase link will then be queried by and generates the Switcher. If I add a new demo blog, I just have to check the checkbox and it's ready.

Demoblog Plugin

We wanted the main page, the documentation and the knowledge base to be in a different look. We realized it with 3 Childthemes, and up to a few small changes to the templates, we just changed the CSS and other graphics are used. The entire header with the two navigations are the same on all domains, so it keeps the same look and feel for the navigation for better usability. We use only the WP Menu, which I don't wanna miss again. For the flags in the navigation, we used the CSS classes en and de and styled accordingly. Such a thing was previously not so easy.

Integration of the many different layouts and sidebars was with the layout manager of Xtreme One only a matter of minutes. Select desired containers, set width, select sidebars and hit save. So all core functions of Xtreme One. Only for the integration of Google Analytics and a few little things that happen at all Subdomanis, I've written a Plugin to not do these things more than once.

It was and is an exciting project and there is much more to come.

Simple Autoresize for WordPress Background Image Function

In WordPress 3.0 you have the possibility to easily upload and use a background image. The image is positioned via CSS in the background. Thus it is not quite simple to have the possibility of auto resize and the background adapts to the size of the browser. There are some nice possibilities for this request, I will briefly highlight a very simple way of using CSS, since then the function of WordPress will not be effected.

Continue reading …