Frame Killer

A few days ago i found my website under the URL with some ad-banners and pop-ups and other stuff. After checking the source code i spotted the <iframe> tag thats includes my website.

I found the registrant and the registrar organisation and wrote 2 emails. The registrant dosn’t replied and the organisation can’t help because they are only the domain registrar and the server is somewhere else. What you gonna do about it? I found the answer here:  and these lines of code working perfect for me:

  html { display : none ; }
  if( self == top ) { = 'block' ;
  } else {
    top.location = self.location ;

Open Streetmap Categories WordPress Plugin


Today i wrote my first WP plugin. Here you can see it in action.

The plugin embed an OpenStreetMap map to a page by using the OpenLayer API with a simple shortcode. For every category in your blog a different layer on your map show markers for every article with an geotag. You just have to save the lon and lan parameters in a custom field. It’s possible to use different marker images for every category.

In the plugin settings page you can make some basic settings like:

  • map dimensions
  • map center point
  • initial zoom faktor
  • exclude categories
  • article custom field for marker lon and lat parameters
  • marker popup content
  • marker images path

You can download the plugin here: and i added it also to WordPress Developer Center – just waiting for the request confirmation.

WordPress Youtube shortcode for lightbox playing

This solution to embed a YouTube-Player in your WordPress-Theme was used to show just a preview image and on click play the video in a lightbox.  For the lightbox I used the Easy-Fancybox Plugin.

Here is my theme function:

function youtube_shortcode_handler( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'size' => 'big',  // the image size, just for css styling
      'id' => 'tOhU7wqWV3E', // the youtube ID
      // ...etc
      ), $atts ) );  

  // check for highest resolution preview image from youtube, the @ disables warnings
  if(@file_get_contents(''. $id .'/maxresdefault.jpg')) {
    $youtube_img = ''. $id .'/maxresdefault.jpg';
  // if highest resolution dosn't exists check for the next
  else if(@file_get_contents(''. $id .'/hqdefault.jpg')) {
    $youtube_img = ''. $id .'/hqdefault.jpg';
  // no high resolution preview images - take the default
  else {
    $youtube_img = ''. $id .'/0.jpg';
  // check for content as title
  if($content) $title = '<div><h2><span>'. $content .'</span></h2></div>'; else $title= '';
  // return html markup   
  return '<div class="youtube '.$size.'"><a href="'. $id .'?autoplay=1&wmode=transparent">'. $title .'<div><img src="'. $youtube_img .'" alt="'. $content .'"></div></a></div>';   

add_shortcode( 'youtube', 'youtube_shortcode_handler' );

Now you can use this shortcode in your editor:

This will generate the following markup and you can easy style it with CSS. I know the markup can be much more simple, but this was for a special case.

<div class="youtube medium">
  <a href="">
    <div><h2><span>DER HOBBIT Trailer German Deutsch | FullHD 2012</span></h2></div>
    <div><img src="" alt="DER HOBBIT Trailer German Deutsch | FullHD 2012"></div>

The video cannot be shown at the moment. Please try again later.

This is the result of the shortcode below without any additional styling. Here you can find a real example with some styling and a play button:

Don’t forget to enable Easy-Fancybox for YouTube on the plugin settings page.

WordPress responsive images

As I worked on my last projects I found a little problem for responsive WordPress-Themes. By default WordPress adds width and height parameters to every image tag. This is very disruptive for responsive themes, because you don’t want a fixed image size. In your CSS file you set image max-width: 100%, so the images are scaling on different viewport sizes. The width parameter prevents this. It’s easy to remove these parameters by adding this function to your theme functions.php file:

function remove_thumbnail_dimensions( $html ) {
  $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
  return $html;

add_filter( 'post_thumbnail_html', 'remove_thumbnail_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_thumbnail_dimensions', 10 );

I found this trick here: and the original is here:

Thanks a lot!