28. May 2015

Fullpage.js Addon for Visual Composer – Admin Preview

I am still busy finalizing the Fullpage.js Addon for Visual Composer. Hope to have some more images or even a video next week :)

Some requirements for the Visual Composer Addon:

PHP 5.4+, as I am using traits and advanced autoloading.
Timber (TWIG for WordPress), for current and future templating. Currently mostly used for the main administration of the core module handler.
iScroller for overflowing content (will be part of the package)
Otherwise the default Fullpage.js restrictions apply

The Addon will ease Fullpage.js integration immensely, but for a more advanced integration some CSS / JavaScript knowledge will always be needed. Do checkout the main Fullpage.js documentation for more information.

Many people have asked me for a release date. I currently plan to have a fully working Beta in the next 2-3 weeks. Will offer the Addon to a small closed group of customers first, before I think about other release options. I think I will offer between 20-30 slots for the beta run. If you are interested let me know.

portalZINE NMN | Development meets Creativity | cubicFusion VC Fullpage Beta 1 — Arrange sections & slides, numbering updates

portalZINE NMN | Development meets Creativity | cubicFusion VC Fullpage Beta 4 — Configuration (almost there)

portalZINE NMN | Development meets Creativity | cubicFusion VC Fullpage Beta 3 — Custom CSS (override default). I will also add an option for all JS events

portalZINE NMN | Development meets Creativity | cubicFusion VC Fullpage Beta 5 — Sections (basic options)

portalZINE NMN | Development meets Creativity | cubicFusion VC Fullpage Beta 6 — Slides (basic options)

20. May 2015

WordPress as a development platform & the JSON evolution

Many developers hesitate to call WordPress a PHP development platform. I know what I am talking about, as I developed a platform of my own. PHP platforms normally only provide a skeleton and we need to

Decide on a database schema
Create the database
Setup backends and dashboards
Design the presentation layer
Implement user-level authentication and similar

THE FRONTEND EXPERIENCE

With WordPress you get most of this out-of-the-box, with some predefined structures.

Having a flexible administration backend in place makes it easy to concentrate on the things that matter for a project, which is designing a frontend experience.

JSON MATTERS

And especially with the JSON REST API finding its way into the core slowly, you are completely free when it comes to using the stored data in your frontend designs.

Sure that was possible before, just with some more work on our side ;)

But WordPress embracing the “freeing of data” through JSON, shows us where the ride is going.

THE NEW SINGLE APP UNIVERSE

There has not been a single project of mine in the past year, that has not used the REST API in some way. And all of this fits perfectly into the new single page app universe.

WordPress interfaces with your javascript framework setup (client side templating, DOM manipulation, data binding, routing …) and frees you from any design handcuffs.

It has become much easier and faster over the past 2 years to say “YES” to many of my clients wishes.

Its nice to finally see data flow from the server to the client and back that easily.

If you are not exited about this … I am :)

…enjoy coding

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]

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;

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>

14. April 2015

Google API / PHP SDK / Plus / Youtube & more

Will be adding some basic information about using the current Google API with the PHP SDK, this includes Google+, Youtube and other services. For setting up the actual API access see the Google documentation and Google Developer Console

Including the SDK (Github)

require _DIR_TO_AUTOLOAD_SDK_.'/google_sdk/autoload.php'; 

// Required Information

// OAuth 2.0 
$google_client_id = _GOOGLE_CLIENT_ID_; 
$google_client_secret = _GOOGLE_CLIENT_SECRET_;

// Public API-Access
$google_redirect_url = 'http://yourdomain.com/google_login/?option=do_login';
// API-key for a server application!
$google_developer_key = _GOOGLE_DEVELOPER_KEY_;

require _DIR_TO_AUTOLOAD_SDK_.'/google_sdk/autoload.php';

// Required Information

// OAuth 2.0

$google_client_id = _GOOGLE_CLIENT_ID_;

$google_client_secret = _GOOGLE_CLIENT_SECRET_;

// Public API-Access

$google_redirect_url = 'http://yourdomain.com/google_login/?option=do_login';

// API-key for a server application!

$google_developer_key = _GOOGLE_DEVELOPER_KEY_;

Prepare Client

$gClient = new Google_Client();
$gClient->setAccessType('offline');
$gClient->setApplicationName('Application Name'); 
$gClient->setClientId($google_client_id);
$gClient->setClientSecret($google_client_secret);
$gClient->setRedirectUri($google_redirect_url);
$gClient->setDeveloperKey($google_developer_key);

$gClient = new Google_Client();

$gClient->setAccessType('offline');

$gClient->setApplicationName('Application Name');

$gClient->setClientId($google_client_id);

$gClient->setClientSecret($google_client_secret);

$gClient->setRedirectUri($google_redirect_url);

$gClient->setDeveloperKey($google_developer_key);

Set Scope (Available Scopes)

$gClient->setScopes(array(	
'https://www.googleapis.com/auth/plus.me', 
'https://www.googleapis.com/auth/plus.login',
'https://www.googleapis.com/auth/userinfo.email', 
'https://www.googleapis.com/auth/userinfo.profile',
'https://gdata.youtube.com',
'https://www.googleapis.com/auth/youtube.readonly',		
'https://www.googleapis.com/auth/youtubepartner'
)
);

$gClient->setScopes(array(

'https://www.googleapis.com/auth/plus.me',

'https://www.googleapis.com/auth/plus.login',

'https://www.googleapis.com/auth/userinfo.email',

'https://www.googleapis.com/auth/userinfo.profile',

'https://gdata.youtube.com',

'https://www.googleapis.com/auth/youtube.readonly',

'https://www.googleapis.com/auth/youtubepartner'

)

);

Setup Google Plus Client

$plus = new Google_Service_Plus($gClient);

1	$plus = new Google_Service_Plus($gClient);

Login

session_start();

// A simple check for the login to get a fresh token
if($_GET['option'] == "do_login" && empty($_SESSION['google_token'])){

// Check for redirect from Google & Auth
if (empty($_GET['code'])) {
 
 // Create Auth redirect		
 header('Location: '.$gClient->createAuthUrl());
		 
} else {		  
		  
 $gClient->authenticate($_GET['code']);
 $access_token = $gClient->getAccessToken();  
 //Store the token in a session or your database for later use
 $_SESSION['google_token'] = $access_token;

}	
}
// You have already logged in
if(!empty($_SESSION['google_token'])){
 
 $gClient->setAccessToken($_SESSION['google_token']); 
 
}

session_start();

// A simple check for the login to get a fresh token

if($_GET['option'] == "do_login" && empty($_SESSION['google_token'])){

// Check for redirect from Google & Auth

if (empty($_GET['code'])) {

// Create Auth redirect

header('Location: '.$gClient->createAuthUrl());

} else {

$gClient->authenticate($_GET['code']);

$access_token = $gClient->getAccessToken();

//Store the token in a session or your database for later use

$_SESSION['google_token'] = $access_token;

}

// You have already logged in

if(!empty($_SESSION['google_token'])){

$gClient->setAccessToken($_SESSION['google_token']);

}

Get Google Plus Activity

// Making sure we have a valid access token
if($gClient->getAccessToken()) {
try{
// Get your activities
$optParams = array('maxResults' => 100);
$activities = $plus->activities->listActivities('me', 'public', $optParams); 

print_r($activities);
}

} catch (Google_ServiceException $e) {
        $htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',
            htmlspecialchars($e->getMessage()));
    } catch (Google_Exception $e) {
        $htmlBody .= sprintf('<p>An client error occurred: <code>%s</code></p>',
            htmlspecialchars($e->getMessage()));
    }

// Making sure we have a valid access token

if($gClient->getAccessToken()) {

try{

// Get your activities

$optParams = array('maxResults' => 100);

$activities = $plus->activities->listActivities('me', 'public', $optParams);

print_r($activities);

}

} catch (Google_ServiceException $e) {

$htmlBody .= sprintf('<p>A service error occurred: <code>%s</code></p>',

htmlspecialchars($e->getMessage()));

} catch (Google_Exception $e) {

$htmlBody .= sprintf('<p>An client error occurred: <code>%s</code></p>',

htmlspecialchars($e->getMessage()));

}

14. April 2015

Facebook API / PHP SDK / Login & more

Will be adding some basic information about using the current Facebook API with the PHP SDK. Have been updating a lot of old API integrations over the past 2 months and finally solved many badly documented areas of the new API. Will be updating this in the future, as I dive deeper into the latest API changes.

Including the SDK (Github)

require_once _DIR_TO_AUTOLOAD.'/facebook_sdk/autoload.php';

use Facebook\FacebookSession;
use Facebook\FacebookRedirectLoginHelper;
use Facebook\FacebookRequest;
use Facebook\FacebookResponse;
use Facebook\FacebookSDKException;
use Facebook\FacebookRequestException;
use Facebook\FacebookAuthorizationException;
use Facebook\GraphObject;
use Facebook\Entities\AccessToken;
use Facebook\HttpClients\FacebookCurlHttpClient;
use Facebook\HttpClients\FacebookHttpable;

require_once _DIR_TO_AUTOLOAD.'/facebook_sdk/autoload.php';

use Facebook\FacebookSession;

use Facebook\FacebookRedirectLoginHelper;

use Facebook\FacebookRequest;

use Facebook\FacebookResponse;

use Facebook\FacebookSDKException;

use Facebook\FacebookRequestException;

use Facebook\FacebookAuthorizationException;

use Facebook\GraphObject;

use Facebook\Entities\AccessToken;

use Facebook\HttpClients\FacebookCurlHttpClient;

use Facebook\HttpClients\FacebookHttpable;

Depending on what you want to do with the API, the above needs to be adjusted. Check the Facebook API documentation for more details.

Basic Login / User data retrieval

// Session should be started after all files have been included 
session_start();

// init app with app id and secret
FacebookSession::setDefaultApplication( _FB_APP_ID_, _FB_APP_SECRET_ );

// login helper with redirect_uri
$helper = new FacebookRedirectLoginHelper( 'http://yourdomain.com/FB_LOGIN/');

// Check for Facebook redirect & retrieve session
try {
  $session = $helper->getSessionFromRedirect();
} catch( FacebookRequestException $ex ) {
  // When Facebook returns an error
} catch( Exception $ex ) {
  // When validation fails or other local issues
}


if ( isset( $session ) ) {
/* 
Store the session for later reuse, in this case even getting a long lived session. You should store this in your database.
The session can be reused with: 
$session = new FacebookSession($_SESSION['long']->getToken());
*/

if(empty($_SESSION['long'] )){
  	$_SESSION['long'] = $session->getLongLivedSession();
}
// graph api request for user data
 
try {

    $user_profile = (new FacebookRequest(
      $session, 'GET', '/me'
    ))->execute()->getGraphObject(GraphUser::className());

    echo "Name: " . $user_profile->getName();

  } catch(FacebookRequestException $e) {

    echo "Exception occured, code: " . $e->getCode();
    echo " with message: " . $e->getMessage();

  }  
} else {
  // show login url if no session available
  // request special permissions, optional.
$params = array(
  'manage_pages', 'publish_pages','publish_actions','user_videos'
);
  echo '<a href="' . $helper->getLoginUrl($params ) . '">Login</a>';
}

// Session should be started after all files have been included

session_start();

// init app with app id and secret

FacebookSession::setDefaultApplication( _FB_APP_ID_, _FB_APP_SECRET_ );

// login helper with redirect_uri

$helper = new FacebookRedirectLoginHelper( 'http://yourdomain.com/FB_LOGIN/');

// Check for Facebook redirect & retrieve session

try {

$session = $helper->getSessionFromRedirect();

} catch( FacebookRequestException $ex ) {

// When Facebook returns an error

} catch( Exception $ex ) {

// When validation fails or other local issues

}

if ( isset( $session ) ) {

Store the session for later reuse, in this case even getting a long lived session. You should store this in your database.

The session can be reused with:

$session = new FacebookSession($_SESSION['long']->getToken());

if(empty($_SESSION['long'] )){

$_SESSION['long'] = $session->getLongLivedSession();

}

// graph api request for user data

try {

$user_profile = (new FacebookRequest(

$session, 'GET', '/me'

))->execute()->getGraphObject(GraphUser::className());

echo "Name: " . $user_profile->getName();

} catch(FacebookRequestException $e) {

echo "Exception occured, code: " . $e->getCode();

echo " with message: " . $e->getMessage();

}

} else {

// show login url if no session available

// request special permissions, optional.

$params = array(

'manage_pages', 'publish_pages','publish_actions','user_videos'

);

echo '<a href="' . $helper->getLoginUrl($params ) . '">Login</a>';

}

6. April 2015

Getting the average of an array of numbers

PHP

$average_of_myfoos = array_sum($myfoos) / count($myfoos);

1	$average_of_myfoos = array_sum($myfoos) / count($myfoos);

Javascript

var sum = myfoos.reduce(function(a, b) { return a + b; });
var avg = sum / myfoos.length;

1 2	var sum = myfoos.reduce(function(a, b) { return a + b; }); var avg = sum / myfoos.length;

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