Google Universal Analytics provides a great possibility to track custom events on your website. These feature can be used to analyze special user-interactions with e.g. advertised/highlighted content or social media links. The recorded data can be directly used to optimize your website!

The event tracking is very simple:

To simplify the integration you can implment a simple data-binding which will automatically add event listeners (click) to you DOM elements. Just add an additional attribute to your elements which includes (in this example) a prefix, the event-category and the event-label (scheme: "prefix:category:label").

Example: Social Links with data-binding#

<a href="" title="Facebook" data-event="ga:social:facebook" class="FacebookButton"></a>
<a href="" title="Twitter Stream" data-event="ga:social:twitter" class="TwitterButton"></a>

Finally, we need some javascript to process the additional attributes. You should always check if Google Analytics is enabled (maybe an adblocker is used or an opt-out option is set!) to avoid javascript errors. The following code will send an event to analytics each time a user clicks on the bound elements.

MooTools based Data-Binding#

window.addEvent('domready', function(){
  // GA loaded ? Used to avoid js errors on blocked analytics
  if (typeof ga !== 'function'){
  // event binding
    // get event string
    var d = el.get('data-event').split(':');
    // format:  "type:category:name"
    if (d.length != 3){
    // extract vars
    var evtType = d[0];
    var evtCategory = d[1];
    var evtName = d[2];
    // outgoing link on click event
    el.addEvent('click', function(){
      // universal analytics event ?
      if (evtType == 'ga'){
        ga('send', 'event', evtCategory, 'click', evtName);


Simple “Zen” Reading Mode with MooTools

simplifying website headers on-demand

Gigantic, image-based headers are an up-to-date web-feature. It looks amazing but they are squandering space, especially on sites with large tutorials containing long text.

This site is using a simply method which transforms the header-size depending on the current page-scroll: the users scrolls down and the header is automatically transformed to a smart toolbar – i’m calling this mode (following WordPress’ fullscreen editor) “Zen” reader mode. Need a demo ? Just open an article on this site and scroll down.

To integrate this feature into you website, you need the followindd things:

  • “Standard” Header Design
  • “Smart/Compact” Header Design
  • Javascript Page-Scroll Observer
  • Optional: Amazing css3 transition

Different Header-Styles (using LESS):#

/* Basic (default) Styling */
  height: 70px;

/* Smart Styling */
  height: 45px;
  border-bottom: solid 1px #e7e7e7;	
  background-color: @color_bluegrey1 !important;

/* Large Navbar */
  background-color: rgba(0,0,0,0.85);
  border-bottom: none;

Scroll-Observer Script (MooTools) :#

Description: user scrolls 200px down and the header is transformed by changing the css classes

var head = document.getElement('header .navbar-beyond');
window.addEvent('scroll', function(){
  // get current scroll
  var s = this.getScroll().y;
  // dark/light topnav
  if (s > 200){

Header Structure (Bootstrap based example from this website)#

<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top navbar-beyond navbar-beyond-dark" role="navigation">
  <div class="container container-lg">
    <!-- Website Title + Mobile Nav Button !-->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
      <a class="navbar-brand" href="">Beyond Technology<br /><span>beyond the visible world</span></a>
    <!-- Navi !-->
    <div class="navbar-collapse hidden-xs">
      <ul id="menu-topnavi" class="nav navbar-nav navbar-right">

<!-- Image -->
<div id="HeaderImage">

PHP-FPM “Access Denied” on .phtml Files

a problem which took about 1h of research..

Some Weeks ago, i switched most of the webserver setups from custom spawn-fcgi init scritps to php-fpm and everything seems to work fine until today. The php-version of GitHubButtons won’t work anymore – just a text-message appears: “Access Denied.” First of all i thougt it was a problem with lighttpd and the directive, but the error message doesn’t seem to be served by lighttpd…and well…it was a php-fpm related issue, beacause php-fpm only processes .php files by default!

You will not find these directive in the official FPM Documentation on – it’s missing including tons of other directives. To get an overview about all possible php-fpm config keys, you should take a look into to default php-fpm.conf file included into the php-sources (sapi/fpm/php-fpm.conf) – also attached to this post!

Important: This directive can’t be used in global context, it’s a pool based config key!

Examle Pool: php-fpm.conf#

; Limits the extensions of the main script FPM will allow to parse. This can
; prevent configuration mistakes on the web server side. You should only limit
; FPM to .php extensions to prevent malicious users to use other extensions to
; exectute php code.
; Note: set an empty value to allow all extensions.
; Default Value: .php
; Recommended: .php .phtml
security.limit_extensions = .php .php3 .php4 .php5 .phtml

Add Links to WordPress Plugin Page (Metadata Row)

Additional News/Update or Settings Links

Sometime you want to add special links directly to the plugin-page. For example, you can enable an easy access to the plugin’s settings-page or to related docs/resources. All the magic is done within the plugin_row_meta hook.

It’s important to check which plugin is currently processed (there are no plugin/namespace specific hooks). Therefore you have to check which plugin-(main)file is selected: if ($file == 'enlighter/Enlighter.php'){

Additional links can be added to the $links array including I18n support.



How it’s done#

// add links
add_filter('plugin_row_meta', 'addPluginPageLinks', 10, 2);

// links on the plugin page
function addPluginPageLinks($links, $file){
  // current plugin ?
  if ($file == 'enlighter/Enlighter.php'){
    $links[] = '<a href="'.admin_url('options-general.php?page='.plugin_basename(__FILE__)).'">'.__('Settings', 'enlighter').'</a>';
    $links[] = '<a href="">'.__('News & Updates', 'enlighter').'</a>';
  return $links;

Cryptex 4.0 with Retina/HighDPI support

behind the scene - high-resolution, css based images using media queries

The Story# No scrapers. No harvesters. No spambots. That’s our goal. A several years ago, i’ve released the first version of the Crypex Plugin to protect E-Mail-Addresses on WordPress based websites. It works great but currently many mobile devices like tablets, smartphones are using high-dpi displays which results in blurred E-Mail-Addresses. Therefore i’ve create a […]

GitHub “Star”-gazer Buttons with MooTools/jQuery/PHP

No iFrames required - just pure javascript/php

Show your Love to GitHub# GitHubButtons is a fork of the famous github-buttons from @mdo using the original styles with a complete new javascript part based on MooTools/jQuery without the need of iframes. It’s targeted on MooTools/jQuery/PHP-Users which are already using various stuff on their pages – all other users should use the original iframe […]

Howto: Content Navigation/Menu with WordPress

automatically generated navigation including anchors

State of the Art# There are a several ways how to deal with large content. The most common used method is to split the content in multiple pages, but this completely destroys the usability on tablets, big screens or other mobile devices and frustate your users. Furthermore, each sub-page causes an additional http-request and extra […]

Fixed Scroll Navigation with MooTools

sticky navigation bar that remains fixed on scrolling

The Goal# Currently a very popular and often used technique wich provides a great usability. There are a several jQuery plugins and code-snippets available which are providing this feature but they are sometimes very complex and didn’t work with MooTools based websites. This tutorial shows you how to create a sticky navigation bar that remains […]

Enlighter WordPress Plugin v2.0 release

EnlighterJS Advanced Javascript based post syntax highlighting

Version 2.0 Released# I am proudly to announce the immediate availbility of Enlighter v2.0. Including EnlighterJS 2.1 with support for Inline-Syntax-Highlighting!  About the Plugin# Enlighter is a free, easy-to-use, syntax highlighting tool for WordPress. It’s build in PHP and uses the MooTools(Javascript) based EnlighterJS to provide a beautiful code-appearance. Using it can be as simple […]

LightUp – PHP Markdown Renderer released

Markdown Parser inspired by GitHub flavored markdown (GFM)

Features# Written in PHP (Version > 5.3 required) Ultra small footprint – only 3 files required, each of them with less than 450 lines of well documented code (linewise comments) Extensible – you need some special features ? Full support for GitHub flavored markdown (excluding tables) Supports various syntax highlighting variants (use the highlighter of […]