17. May 2015

Mix languages in a WordPress post / pages with a simple shortcode and gettext

In a current project I am using pages as templates, to load content into specific containers on the website. The website will be using up to 15 different languages.

The main language setup is done through WPML, which creates linked content per language. This helps, as some languages will fail terribly when translating them through a pure gettext setup, as the words setup is often completely different.

But there is always static stuff that can be translated directly through the language files. For that I use a simple shortcode that allows me to keep the native language as a basis in all linked content. Easier to move around, as I can actually read and understand it :)

Call the shortcode from the functions.php

add_shortcode('quick_trans','do_quick_trans');

1	add_shortcode('quick_trans','do_quick_trans');

The shortcode function itself. This loads the language textdomain from the specified location and translates the string.

function do_quick_trans($atts, $content) {
 extract(shortcode_atts(array(
	'location' => 'PATH_TO_LANG_FILE',
	'lang' => 'LANG_TO_USE',
'textdomain' => 'TEXTDOMAIN'
 ), $atts));
				
load_textdomain($textdomain, $location.$lang.'.mo'); 
$content = __($content, $textdomain);
		
return $content;
   
 }

function do_quick_trans($atts, $content) {

extract(shortcode_atts(array(

'location' => 'PATH_TO_LANG_FILE',

'lang' => 'LANG_TO_USE',

'textdomain' => 'TEXTDOMAIN'

), $atts));

load_textdomain($textdomain, $location.$lang.'.mo');

$content = __($content, $textdomain);

return $content;

}

How to use it in your post or page content

German
[quick_trans lang="de_DE"]Simple is nice![/quick_trans]

Spanish
[quick_trans lang="es_ES"]Simple is nice![/quick_trans]

Spanish - Latin America / with a special path for the lang file location
[quick_trans lang="es_LA" location="/wp-content/..."]Simple is nice![/quick_trans]

German

[quick_trans lang="de_DE"]Simple is nice![/quick_trans]

Spanish

[quick_trans lang="es_ES"]Simple is nice![/quick_trans]

Spanish - Latin America / with a special path for the lang file location

[quick_trans lang="es_LA" location="/wp-content/..."]Simple is nice![/quick_trans]

11. May 2015

Conditional Tags for Menus & Widgets

Conditional Tags are a powerful thing in WordPress and especially handy to show or hide things.

“The Conditional Tags can be used in your Template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. ”

Two plugins are part of my essentials, that utilize the Conditional Tags:

Widget Logic
“This plugin gives every widget an extra control field called “Widget logic” that lets you control the pages that the widget will appear on. The text field lets you use WP’s Conditional Tags, or any general PHP code.”
Menu Item Visibility Control
“Using this plugin you can use WordPress Conditional Tags to enable or disable menu items on the front-end. It works like ‘Widget Logic’ but for menu items.”

You can easily define your own Conditional Tags in your functions.php or plugin.

10. May 2015

Shield.io – Quality metadata badges for your open source project

Pixel-perfect
Retina-ready
Fast
Consistent
Hackable
No tracking

Shield.IO

9. May 2015

ClockPicker – elegant way to choose time

This time picker provides a unique way to enhance your input fields. Use a clock interface to enter the time. The plugin works with Bootstrap or standalone.

Part of my essentials :)

ClockPicker

9. May 2015

Datedropper – elegant way to enter dates

Datedropper is a jQuery Plugin that provides a quick and appealing interface to enter dates. Nice little plugin to spice up your interface.

Definitely part of my list of essentials :)

datedropper

7. May 2015

PHP Headers To Serve JSON

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');

header('Cache-Control: no-cache, must-revalidate');

header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');

header('Content-type: application/json');

The first two headers prevent the browser from caching the response and the third sets the correct MIME type for JSON.

Than just output your JSON data

$data = array(
"fire" => 1,
"water" => 0,
"earth" => 1,
"air" => 1,

);

echo json_encode($data);
exit;

$data = array(

"fire" => 1,

"water" => 0,

"earth" => 1,

"air" => 1,

);

echo json_encode($data);

exit;

5. May 2015

Hiding NGFB errors in WordPress Admin

“NextGEN Facebook (NGFB) gives you total control over the information social website crawlers need, improving Google Search ranking, social engagement, and click-through-rates on Facebook, Google+, Twitter, Pinterest, LinkedIn, StumbleUpon, Tumblr and and many more”

A powerful plugin for WordPress, but it sometimes displays many image dimension errors. Even if those errors remind me to optimize the page or post, I sometimes prefer to ignore these during development :)

Here a simple way to hide them:

add_action('admin_head', 'hide_ngfb_errors');

function hide_ngfb_errors(){
echo '<style type="text/css">
  [id^="err_err_wp"]{display: none} 
 </style>';
}

add_action('admin_head', 'hide_ngfb_errors');

function hide_ngfb_errors(){

echo '<style type="text/css">

[id^="err_err_wp"]{display: none}

</style>';

}

5. May 2015

Optimizing Typekit font loading

When loading web-fonts, we often see a brief un-styled moment before the browser applies the actual font. Gladly Typekit and also Google Web Fonts provide an option around that.

Both are using WebFont Loaders to help handle those brief moments.

TypeKit Webfont Loader Example

(function(d) {
    var config = {
      kitId: '***' , // Your Kit ID
      scriptTimeout: 3000
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);

(function(d) {

var config = {

kitId: '***' , // Your Kit ID

scriptTimeout: 3000

h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='//use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)

})(document);

This adds a class name to the <html> element during loading

<html class="wf-loading">

1	<html class="wf-loading">

This is removed when loading is done. This allows us to hide content until all fonts are loaded.

Webfonts Loading

.wf-loading * {
     opacity: 0;
}

.wf-loading * {

opacity: 0;

}

This also adds classes once the webfonts have been loaded, which allows us to add some transitions to reveal the content again.

Webfonts Loaded

.wf-active *, 
.wf-inactive * {
    -webkit-transition: opacity 1s ease-out;  
    -moz-transition: opacity 1s ease-out; 
    -o-transition: opacity 1s ease-out;  
    transition: opacity 1s ease-out;  
}

.wf-active *,

.wf-inactive * {

-webkit-transition: opacity 1s ease-out;

-moz-transition: opacity 1s ease-out;

-o-transition: opacity 1s ease-out;

transition: opacity 1s ease-out;

}

One last thing. You should add the webfont loader early in your content, so that it can do its magic before anything else is being loaded.

3. May 2015

Inherit and extend events from parent in Backbone

Parent

var ParentView = Backbone.View.extend({
   events: {
      'click': 'onclick'
   }
});

var ParentView = Backbone.View.extend({

events: {

'click': 'onclick'

}

});

Child

var ChildView = ParentView.extend({
   events: function(){
       return _.extend({}, ParentView.prototype.events,{
	  'click':'childClick',
	 
 });
   }
});

var ChildView = ParentView.extend({

events: function(){

return _.extend({}, ParentView.prototype.events,{

'click':'childClick',

});

}

});

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,

) );

}