3. June 2015

Fullpage.js Addon for Visual Composer – Video Preview (Update 07.03.2016)

This video should give you a good idea what the addon can actually do.

In my last article I gave you a rough overview of the features & requirements. Here some more details and additions:

Added the fixed header & footer container to the admin interface. You can add special padding, to the top and bottom, through the fullpage settings and make room for them. These are standard content containers, that can hold any Visual Composer content or row setup.
Added automatic menu, which adds links to each section as they are created. Link title matches the section title.
Define section and slide anchors, which are reflected in the browser history.
Sections and Slides can have different backgrounds, providing nice effect options. I added an image background to Section 1 and semi-transparent background colors to the Slides.
Fullpage.js configuration is fully integrated and working. The system sets defaults for a quick start.
Fullpage.js CSS override has been added, but is not complete yet. Added code editor.
Fullpage.js Events have been added and are fully functional. These events are triggered after load, after slide load, after leaving a slide and other events.
iScroll can be seen in Section 2. Added resize handling and configuration options. Still need to do some minor tweaks.
iScroll custom scrollbars are on my list, but not sure I will add these yet.
Prebuild Templates will be added, so that you can quickstart your design. Visual Composer 4.5+ provides some nice new options.
Visual Composer requirement will be 4.5+.
The admin provides a nice color separation for all components and count for slides & sections.

The addon is mostly done. I am finalizing the main admin area this week and will do a final cleanup next week, for the first beta release.

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.

Regards
Alexander

Updates

Quickly choose which section / slide to load, when the page is opened.
The addon is injecting its own page template, to make sure that the main container is clear of any theme related margins or padding. As soon as the Fullpage container is added to the layout, the template gets selected dynamically.
21.06.2015 – updating to latest fullPage.js version (2.6.6) and adding new options and changes
13.08.2015
– beta has been delayed due to my vacation & an accident I am recovering from. This is still just a side project ;)
– updating to latest fullPage.js version and adding new options to admin
– updating to latest Visual Composer version
03.09.2015
– moving to Visual Composer 4.7
– finalizing the admin area
14.01.2016
– moving to Visual Composer 4.9x
– fullpage.js version update
– iScroll update
– admin /front-end cleanup … getting close :)
17.02.2016
– works pretty flawless by now
– plugins are updated
– admin complete, working on some minor cosmetics
– not sure yet about distribution :) … my current projects come first!
07.03.2016
– adding version / requirement checks for all linked libs
– moved to VisualComposer 4.10
– fullPage.js version bumped to 2.7.8
– final cleanup of all areas on the way

28. May 2015

Fullpage.js Addon for Visual Composer – Admin Preview

Update: Video 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.

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)

22. May 2015

Remove WordPress CSS / JS / Fonts website clutter

WordPress is fun, but many of my clients take the plugin fun to new levels :)

Depending on how well plugins / shortcodes have been integrated, linked JavaScript & CSS files can clutter up your pages really fast.

The problem is that many plugins do not load external files on demand. Same applies for WebFonts that have been added to the system.

THE HUNT

Its no fun hunting down all those resources and slim down pages manually, but sometimes there is no way around it.

In WordPress CSS & JavaScript files are enqueued by plugins / themes.

THE QUEUE

CSS / JavaScript

wp_enqueue_style(
    'my-extension',
    get_template_directory_uri() . '/css/my-extension.css',
    array( 'bootstrap' ),// an array of dependent styles   
    '1.2', // version number
    'screen', // CSS media type
);

wp_enqueue_style(

'my-extension',

get_template_directory_uri() . '/css/my-extension.css',

array( 'bootstrap' ),// an array of dependent styles

'1.2', // version number

'screen', // CSS media type

);

wp_enqueue_script( 'my-extension-script', 
get_template_directory_uri() . '/js/my-extension.js', 
array(), // Scripts your extension depends on
'1.0.0', 
true // Place in footer 
);

wp_enqueue_script( 'my-extension-script',

get_template_directory_uri() . '/js/my-extension.js',

array(), // Scripts your extension depends on

'1.0.0',

true // Place in footer

);

CLEANUP

To remove files from pages you need to unregister (CSS / JavaScript) those files using their specific handle. This also allows you to replace a specific file with your own version.

wp_deregister_style( 'my-extension' );

wp_deregister_script( 'my-extension-script' );

wp_deregister_style( 'my-extension' );

wp_deregister_script( 'my-extension-script' );

DO YOU HAVE A NAME?

The big problem is finding the names of the enqueued files, their handles. They are often hidden deep in the plugins. But if they are registered somewhere, you should be able to find them somewhere :)

global $wp_styles;
print_r($wp_styles);

1 2	global $wp_styles; print_r($wp_styles);

Add this to your functions.php and you will get a nice overview of all the styles and their handles registered. You can do the same for the registered scripts.

global $wp_scripts;
print_r($wp_scripts)

1 2	global $wp_scripts; print_r($wp_scripts)

This will get you an overview of all the registered files. Now its only a matter of doing the unregister operation with some simple WordPress conditional logic.

add_action( 'some-extension', 'some_mextension', 100 );
function my_extension() {
if ( !is_page('Home') ) {
wp_deregister_script( 'some-extension' );
}
}

add_action( 'some-extension', 'some_mextension', 100 );

function my_extension() {

if ( !is_page('Home') ) {

wp_deregister_script( 'some-extension' );

}

IS THERE A PLUGIN FOR THAT?

Yes there is and it is called “Asset Queue Manager” …

“This tool allows you to monitor, dequeue and requeue scripts and styles that are enqueued on your site. It is designed for frontend performance engineers who want to view and manage all assets enqueued on any page and control the minification and concatenation themselves.”

BREAKING STUFF

Messing with styles can be ugly, but often wont break things completely. Messing with JavaScript includes can cripple a setup badly. So you should be really sure which scripts / styles can be deactivated on specific pages. Please do not experiment on a live website … I warned you ! :)

… enjoy coding

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]

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.

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>';

}

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