19. April 2015

Doing Metaboxes in WordPress the easy way

Adding Metaboxes in WordPress to your admin areas normally involves 3 steps:

Action to define the metabox area
Callback to define the metabox content
Action to handle the metabox updates / saves

This can be done much easier using Custom Metaboxes and Fields for WordPress, which is a metabox, custom fields and forms library. The library provides a bunch of custom fields and also allows you to add your own easily. Much easier to build new Metaboxes fast!

List of field types included:

title An arbitrary title field *
text
text_small
text_medium
text_email
text_url
text_money
textarea
textarea_small
textarea_code
text_date Date Picker
text_time Time picker
select_timezone Time zone dropdown
text_date_timestamp Date Picker (UNIX timestamp)
text_datetime_timestamp Text Date/Time Picker Combo (UNIX timestamp)
text_datetime_timestamp_timezone Text Date/Time Picker/Time zone Combo (serialized DateTime object)
colorpicker Color picker
radio *
radio_inline *
taxonomy_radio *
taxonomy_radio_inline *
select
taxonomy_select *
checkbox *
multicheck
taxonomy_multicheck *
taxonomy_multicheck_inline
wysiwyg (TinyMCE) *
file Image/File upload *†
file_list Image/File list upload
oembed Converts oembed urls (instagram, twitter, youtube, etc. oEmbed in the Codex)
group Hybrid field that supports adding other fields as a repeatable group. *

Simple example from the CMB2 Github page

if ( file_exists(  __DIR__ . '/cmb2/init.php' ) ) {
  require_once  __DIR__ . '/cmb2/init.php';
} elseif ( file_exists(  __DIR__ . '/CMB2/init.php' ) ) {
  require_once  __DIR__ . '/CMB2/init.php';
}

add_action( 'cmb2_init', 'cmb2_sample_metaboxes' );
/**
 * Define the metabox and field configurations.
 */
function cmb2_sample_metaboxes() {

    // Start with an underscore to hide fields from custom fields list
    $prefix = '_yourprefix_';

    /**
     * Initiate the metabox
     */
    $cmb = new_cmb2_box( array(
        'id'            => 'test_metabox',
        'title'         => __( 'Test Metabox', 'cmb2' ),
        'object_types'  => array( 'page', ), // Post type
        'context'       => 'normal',
        'priority'      => 'high',
        'show_names'    => true, // Show field names on the left
        // 'cmb_styles' => false, // false to disable the CMB stylesheet
        // 'closed'     => true, // Keep the metabox closed by default
    ) );

    // Regular text field
    $cmb->add_field( array(
        'name'       => __( 'Test Text', 'cmb2' ),
        'desc'       => __( 'field description (optional)', 'cmb2' ),
        'id'         => $prefix . 'text',
        'type'       => 'text',
        'show_on_cb' => 'cmb2_hide_if_no_cats', // function should return a bool value
        // 'sanitization_cb' => 'my_custom_sanitization', // custom sanitization callback parameter
        // 'escape_cb'       => 'my_custom_escaping',  // custom escaping callback parameter
        // 'on_front'        => false, // Optionally designate a field to wp-admin only
        // 'repeatable'      => true,
    ) );

}

if ( file_exists( __DIR__ . '/cmb2/init.php' ) ) {

require_once __DIR__ . '/cmb2/init.php';

} elseif ( file_exists( __DIR__ . '/CMB2/init.php' ) ) {

require_once __DIR__ . '/CMB2/init.php';

}

add_action( 'cmb2_init', 'cmb2_sample_metaboxes' );

/**

* Define the metabox and field configurations.

function cmb2_sample_metaboxes() {

// Start with an underscore to hide fields from custom fields list

$prefix = '_yourprefix_';

/**

* Initiate the metabox

$cmb = new_cmb2_box( array(

'id' => 'test_metabox',

'title' => __( 'Test Metabox', 'cmb2' ),

'object_types' => array( 'page', ), // Post type

'context' => 'normal',

'priority' => 'high',

'show_names' => true, // Show field names on the left

// 'cmb_styles' => false, // false to disable the CMB stylesheet

// 'closed' => true, // Keep the metabox closed by default

) );

// Regular text field

$cmb->add_field( array(

'name' => __( 'Test Text', 'cmb2' ),

'desc' => __( 'field description (optional)', 'cmb2' ),

'id' => $prefix . 'text',

'type' => 'text',

'show_on_cb' => 'cmb2_hide_if_no_cats', // function should return a bool value

// 'sanitization_cb' => 'my_custom_sanitization', // custom sanitization callback parameter

// 'escape_cb' => 'my_custom_escaping', // custom escaping callback parameter

// 'on_front' => false, // Optionally designate a field to wp-admin only

// 'repeatable' => true,

) );

}

17. April 2015

Opt-Out for Google Analytics Dashboard for WordPress

The current Google Analytics Dashboard for WordPress integrates no Opt-Out to disable tracking, which is required in Europe. Here is a workaround for that.

Paste this into your theme function.php.

if ( !is_user_logged_in() &&  class_exists('GADWP_Manager') ) {
 add_action('wp_head', 'ga_optout_script', 1);
}

function ga_optout_script(){
 // Read GA Dashboard Settings
 $options =  (array) json_decode(get_option('gadash_options'));

 // Get GA Dashboard profiles
 foreach($options['ga_dash_profile_list'] as $profile){
  $ga_ua_profile[$profile[1]] = $profile[2];
 }	

 // Get active Analytics profile for the current website
 $active = $options['ga_dash_tableid_jail'];
 $activeUA = $ga_ua_profile[$active];

 // Add opt-out script + active UA
 echo "<script>		 
 var gaProperty = '".$activeUA."'; 
		  	
 var disableStr = 'ga-disable-' + gaProperty;

 if (document.cookie.indexOf(disableStr + '=true') > -1) {
  window[disableStr] = true; 
 }		  	

 function gaOptout() {
  document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
  window[disableStr] = true;
 }
 </script>";
}

if ( !is_user_logged_in() && class_exists('GADWP_Manager') ) {

add_action('wp_head', 'ga_optout_script', 1);

}

function ga_optout_script(){

// Read GA Dashboard Settings

$options = (array) json_decode(get_option('gadash_options'));

// Get GA Dashboard profiles

foreach($options['ga_dash_profile_list'] as $profile){

$ga_ua_profile[$profile[1]] = $profile[2];

}

// Get active Analytics profile for the current website

$active = $options['ga_dash_tableid_jail'];

$activeUA = $ga_ua_profile[$active];

// Add opt-out script + active UA

echo "<script>

var gaProperty = '".$activeUA."';

var disableStr = 'ga-disable-' + gaProperty;

if (document.cookie.indexOf(disableStr + '=true') > -1) {

window[disableStr] = true;

}

function gaOptout() {

document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';

window[disableStr] = true;

}

</script>";

}

Then add this to your data privacy document:

<a href="javascript:gaOptout()">Disable Google Analytics tracking</a>

1	<a href="javascript:gaOptout()">Disable Google Analytics tracking</a>

15. April 2015

Defer Parsing of JavaScript in WordPress – new filter & old hack

When the defer attribute is present in the script tag, it specifies that the script is executed when the page has finished parsing. A requirement that is enforced by Google for example (Page-Speed ranking).

Currently the WordPress wp_enqueue_script provides no easy way to add new attributes, but there is a way around that :)
The below hack / filter needs to be added to your theme function.php. The filter should be your preferred solution, as the clean_url filter has been deprecated.

Make sure that your website / theme is still loading after adding these changes. If needed you can add more exceptions, as I did for jQuery.

Hack for WordPress before 4.1

if(is_admin() === FALSE){
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' )  ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

if(is_admin() === FALSE){

function defer_parsing_of_js ( $url ) {

if ( FALSE === strpos( $url, '.js' ) ) return $url;

if ( strpos( $url, 'jquery.js' ) ) return $url;

return "$url' defer ";

}

add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

}

Filter for WordPress 4.1+
Updated: 26.04.2015 – using clean Regexp

if(is_admin() === FALSE){
function add_js_defer($tag, $handle, $src){
 if(  strpos( $tag, 'jquery.js' ) ) return $tag;
  preg_match_all('/([\w\-.:]+)\s*=\s*("[^"]*"|\'[^\']*\'|[\w\-.:]+)/i', $tag, $match);
		
	$newtag = "<script ";
	
	foreach($match[1] as $key=> $val){
		$newtag .= $val."=".$match[2][$key]." ";	
	}
	
	$newtag .= "defer></script>";
	
    return $newtag.PHP_EOL;
 }
 add_filter( 'script_loader_tag', 'add_js_defer', 11, 1 );
}

if(is_admin() === FALSE){

function add_js_defer($tag, $handle, $src){

if( strpos( $tag, 'jquery.js' ) ) return $tag;

preg_match_all('/([\w\-.:]+)\s*=\s*("[^"]*"|\'[^\']*\'|[\w\-.:]+)/i', $tag, $match);

$newtag = "<script ";

foreach($match[1] as $key=> $val){

$newtag .= $val."=".$match[2][$key]." ";

}

$newtag .= "defer></script>";

return $newtag.PHP_EOL;

}

add_filter( 'script_loader_tag', 'add_js_defer', 11, 1 );

}

Browser Support

All modern browsers
Support in IE9 is flaky, as the execution order isn’t guaranteed.
Can I use

15. April 2015

Check & Add GZIP Browser Compression

Compressing your content saves bandwidth and improves render time, particular on devices with slow internet connections. Compression allows your web server to provide smaller file sizes that load faster for your visitors. Compression of your HTML and CSS files with gzip typically saves around 50 to 70 % of the file size.

Check if GZIP Compression is active on your website

Adding GZIP Compression via your htaccess (Apache)

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

# compress text, html, javascript, css, xml:

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

</files>

Adding GZIP Compression on NGINX

gzip on;
gzip_comp_level 2;
gzip_http_version 1.0;
gzip_proxied any;
gzip_min_length 1100;
gzip_buffers 16 8k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
gzip_vary on;

gzip on;

gzip_comp_level 2;

gzip_http_version 1.0;

gzip_proxied any;

gzip_min_length 1100;

gzip_buffers 16 8k;

gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;

# Disable for IE < 6 because there are some known problems

gzip_disable "MSIE [1-6].(?!.*SV1)";

# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6

gzip_vary on;

Adding GZIP Compression via a WordPress Plugin

A good candidate is the WP Far Future Expiration Plugin ,which not only activates GZIP compression but adds file expiration for various static file types.
Link

Check speed improvement before and after

12. April 2015

Forcing a different HTTP Response Header in WordPress

I had a problem with the tag pagination throwing 404 errors and was forced to integrate a custom query into the 404 page, while fixing the rewrite rules ;)

This is how you force a different HTTP response header with WordPress, in this case a simple HTTP/1.1 200 OK.

$GLOBALS['wp_query']->is_404 = false;
status_header( 200 );

1 2	$GLOBALS['wp_query']->is_404 = false; status_header( 200 );

Some tweaking to add your own classes to the body tag

add_filter( 'body_class', 'my_class_names' );
		
function my_class_names( $classes ) {
$classes[] = "archive tag " ;
	
return $classes;
}

add_filter( 'body_class', 'my_class_names' );

function my_class_names( $classes ) {

$classes[] = "archive tag " ;

return $classes;

}

4. April 2015

portalZINE.TV gets full upgrade

As part of our complete network upgrade, portalZINE.TV gets a complete facelift as well. The whole website has been streamlined in preparation for the new season.

portalZINE TV

27. March 2015

WordPress Plugins, lets split them into modules

While building plugins for WordPress is fun, it often means repeating tasks over and over again. I love clean and organized code! For my last internal project, a Visual Composer addon bundle, I decided to build a modular system.

So I have one central plugin, handling multiple modules that access methods from the plugin. This allows me to reuse public and admin routines. In combination with _autoload and traits, this makes the codebase lean and mean.

I also decided to use TWIG fully for the presentation layer. Each module can be activated, deactivated, registers their own public and admin views, admin menus, ajax calls, dashboard widgets and additional context.

I am currently in the process of cleaning this up and will share some more details soon.

Cheers
Alex

26. March 2015

Include WebP images in WordPress

“WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.” – Wikipedia

As the WebP is not widely supported, you need to use polyfills or workarounds to actually use it. But it makes a lot of sense when you are building image heavy applications for the web. It decreases file-sizes immensely and supports transparency as PNG does.

To allow WebP upload in WordPress, add this to your functions.php:

add_filter('upload_mimes','webp_mime_type');

    function webp_mime_type($mimes){

        return array_merge($mimes,array (

            'webp' => 'image/webp'

        ));

    }

add_filter('upload_mimes','webp_mime_type');

function webp_mime_type($mimes){

return array_merge($mimes,array (

'webp' => 'image/webp'

));

}

Browsers with native support will show WebP images natively, for browsers without support deploy WebPJS developed by Google. Download and add it to your theme functions.php

function webp_script() {

    // Loads JavaScript file for webp image support in all browsers 

    wp_enqueue_script( 'webpjs-script', get_template_directory_uri() . '/js/webpjs-0.0.2.min.js');    

}

add_action( 'wp_enqueue_scripts', 'webp_script' );

function webp_script() {

// Loads JavaScript file for webp image support in all browsers

wp_enqueue_script( 'webpjs-script', get_template_directory_uri() . '/js/webpjs-0.0.2.min.js');

}

add_action( 'wp_enqueue_scripts', 'webp_script' );

This should do the trick and enable WebP for all modern browsers, see browser support on the WebPJS development page.

Here another little nice trick to check for WebP using Javascript and replace webp with png images.

window.testWebP = function(callback) {
    var webP = new Image();
    webP.onload = webP.onerror = function () {
        callback(webP.height == 2);
    };
    webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
};

window.testWebP(function(support) {
  
   if(!support){
		 $('img[src$=".webp"]').each(function(index,element) {
          element.src = element.src.replace('.webp','.png');
        });   
	}
});

window.testWebP = function(callback) {

var webP = new Image();

webP.onload = webP.onerror = function () {

callback(webP.height == 2);

};

webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';

};

window.testWebP(function(support) {

if(!support){

$('img[src$=".webp"]').each(function(index,element) {

element.src = element.src.replace('.webp','.png');

});

}

});

Enjoy
Alex

18. March 2015

Allow SVG files in WordPress Upload

function cc_mime_types( $mimes ){
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function cc_mime_types( $mimes ){

$mimes['svg'] = 'image/svg+xml';

return $mimes;

}

add_filter( 'upload_mimes', 'cc_mime_types' );

Just add that to your themes functions.php.

14. March 2015

Handle WP child-theme functions.php after parent theme

Normally the functions.php in your CHILD theme is called before the PARENT functions.php. In some cases, you might like to alter functionality loaded through the PARENT theme in your CHILD theme, which is not possible without some changes.

From the WordPress Codex :”Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)”

For our new setup, I am using a base class in our PARENT theme to define all our defaults. Some of the CHILD themes need to overwrite or adjust functionality. This allows to have a pure foundation, than alter and extend as needed.

PARENT functions.php
is extending the TimberSite class in my case, as I am using Timber (TWIG for WordPress) for my themes

class cubicFusionBase extends TimberSite {
function __construct(){
 parent::__construct();
}

}
// If no CHILD theme is loading init the parent class

if(CHILD_THEME_LOADED != 1){
 new cubicFusionBase();
}

class cubicFusionBase extends TimberSite {

function __construct(){

parent::__construct();

}

// If no CHILD theme is loading init the parent class

if(CHILD_THEME_LOADED != 1){

new cubicFusionBase();

}

CHILD functions.php

// Do not init the parent class
define("CHILD_THEME_LOADED", 1);

// Wait for theme setup to be finished
add_action( 'after_setup_theme', function() {
 
// Extend parent theme class
 class cubicFusionChild extends cubicFusionBase {
    function __construct() { 
     // Call parent class constructor 
     parent::__construct(); 
  }
  /*
    Add or extend any other functionality here
  */

}
// Init Child class
new cubicFusionChild();
}, 42 );

// Do not init the parent class

define("CHILD_THEME_LOADED", 1);

// Wait for theme setup to be finished

add_action( 'after_setup_theme', function() {

// Extend parent theme class

class cubicFusionChild extends cubicFusionBase {

function __construct() {

// Call parent class constructor

parent::__construct();

}

Add or extend any other functionality here

}

// Init Child class

new cubicFusionChild();

}, 42 );

Cheers
Alex