20. October 2015

HyperDB – replication, failover, load balancing, and partitioning for WordPress

HyperDB is a plugin for spreading your websites load across several servers and databases. Its currently used in production on WordPress.com.

Partitioning, separate your data and spread it across multiple servers.
Replication, master / slave setup for security.
Failover, if one database fails, the other takes over.

Just started experimenting with it :)

HyperDB

9. September 2015

PHP 5.6 + phpMailer + WordPress + Connection Errors

Since version 5.6+ PHP is verifying peer certificates and host names by default when using SSL/TLS. This is causing problems on some servers / websites, where the config has not been setup correctly. If you can not fix the setup yourself, make sure to talk to your server host to fix that issue.

For PHPMailer (Github) there is a workaround:

$mail->SMTPOptions = array(
    'ssl' => array(
        'verify_peer' => false,
        'verify_peer_name' => false,
        'allow_self_signed' => true
    )
);

$mail->SMTPOptions = array(

'ssl' => array(

'verify_peer' => false,

'verify_peer_name' => false,

'allow_self_signed' => true

)

);

This should only be a workaround until your configuration has been fixed. You are suppressing certificate verification and compromising your security!

As WordPress is using PHPMailer as its main email library, this can be tweaked by using the phpmailer_init hook:

add_action( 'phpmailer_init', 'configure_smtp'  );

function configure_smtp( $phpmailer ){
 $phpmailer->SMTPOptions = array(
    'ssl' => array(
        'verify_peer' => false,
        'verify_peer_name' => false,
        'allow_self_signed' => true
    )
 );
}

add_action( 'phpmailer_init', 'configure_smtp' );

function configure_smtp( $phpmailer ){

$phpmailer->SMTPOptions = array(

'ssl' => array(

'verify_peer' => false,

'verify_peer_name' => false,

'allow_self_signed' => true

)

);

}

Add this to your themes functions.php.

BASIC PHPMAILER SETUP

$phpmailer = new PHPMailer();
$phpmailer->isSMTP();
$phpmailer->CharSet = 'UTF-8';
$phpmailer->SMTPSecure = "ssl"; // or tls
$phpmailer->SMTPAuth = true; 
$phpmailer->Username = _APP_EMAIL_FROM;
$phpmailer->Password = _APP_EMAIL_PASS;
$phpmailer->XMailer =' ';
$phpmailer->Host= "correct email host";

$phpmailer = new PHPMailer();

$phpmailer->isSMTP();

$phpmailer->CharSet = 'UTF-8';

$phpmailer->SMTPSecure = "ssl"; // or tls

$phpmailer->SMTPAuth = true;

$phpmailer->Username = _APP_EMAIL_FROM;

$phpmailer->Password = _APP_EMAIL_PASS;

$phpmailer->XMailer =' ';

$phpmailer->Host= "correct email host";

And here is how phpmailer->smtpOptions should be used, on a properly configured server:

phpmailer->smtpOptions = array(
'ssl' => array(
          'peer_name'		  => 'your.domain.com',
          'verify_peer_name'    => true,
          'capath' 		     => '/path/to/authority/certificates/directory' # Usually /etc/ssl/certs or /usr/lib/ssl/certs/
          'local_cert' 		  => '/path/to/your.domain.com.crt', # Should be a combined cert & key in pem format
          'verify_peer'            => true,
    )
);

phpmailer->smtpOptions = array(

'ssl' => array(

'peer_name' => 'your.domain.com',

'verify_peer_name' => true,

'capath' => '/path/to/authority/certificates/directory' # Usually /etc/ssl/certs or /usr/lib/ssl/certs/

'local_cert' => '/path/to/your.domain.com.crt', # Should be a combined cert & key in pem format

'verify_peer' => true,

)

);

SSL changes in PHP 5.6: http://php.net/manual/en/migration56.openssl.php
SSL context options in PHP: http://php.net/manual/en/context.ssl.php

Enjoy coding…

3. September 2015

Fixing WordPress + Chrome 45+ admin menu glitch

Chrome 45+ is glitching on WordPress admin menus.

function chromefix_inline_css()
{ 
  if ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Chrome' ) !== false )
  {
    wp_add_inline_style( 'wp-admin', '#adminmenu { transform: translateZ(0); }' );
  }
}

add_action('admin_enqueue_scripts', 'chromefix_inline_css');

function chromefix_inline_css()

{

if ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Chrome' ) !== false )

{

wp_add_inline_style( 'wp-admin', '#adminmenu { transform: translateZ(0); }' );

}

add_action('admin_enqueue_scripts', 'chromefix_inline_css');

Github Plugin version

22. June 2015

Twital – addon for the Twig template engine

Twital is a small addon for the Twig template engine, it adds shortcuts and makes Twig’s syntax more suitable for HTML based (XML, HTML5, XHTML, SGML) templates.

Should be also no problem to integrate it with Timber, currently looking into that ;)

<ul t:if="users">
    <li t:for="user in users">
        {{ user.name }}
    </li>
</ul>

// shorter than :

{% if users %}
    <ul>
        {% for user in users %}
            <li>
                {{ user.name }}
            </li>
        {% endfor %}
    </ul>
{% endif %}

</li>

</ul>

// shorter than :

{% if users %}

<ul>

{% for user in users %}

<li>

</li>

{% endfor %}

</ul>

{% endif %}

Twital

18. June 2015

Powerful database abstraction with Doctrine DBAL – Getting started

“Powerful database abstraction layer with many features for database schema introspection, schema management and PDO abstraction.”

The following will get you started, these offer the Doctrine\Common and Doctrine\DBAL namespaces.

BASIC SETUP

In the end your structure should look something like that:

includes/
includes/doctrine
includes/doctrine/lib
includes/doctrine/lib/Doctrine
includes/doctrine/lib/Doctrine/Common
includes/doctrine/lib/Doctrine/DBAL

The following will add a class loader, so that all the other classes will be autoloaded.

use Doctrine\Common\ClassLoader;

require dirname(__FILE__).'/includes/doctrine/lib/Doctrine/Common/ClassLoader.php';

$classLoader = new ClassLoader('Doctrine',dirname(__FILE__).'/includes/doctrine/lib');
$classLoader->register();

use Doctrine\Common\ClassLoader;

require dirname(__FILE__).'/includes/doctrine/lib/Doctrine/Common/ClassLoader.php';

$classLoader = new ClassLoader('Doctrine',dirname(__FILE__).'/includes/doctrine/lib');

$classLoader->register();

FIRST CONNECTION

This will setup your first connection to a MySQL database.

$config = new \Doctrine\DBAL\Configuration();

$connectionParams = array(
    'dbname' => 'my_db',
    'user' => 'my_user',
    'password' => 'my_pass',
    'host' => 'localhost',
    'driver' => 'pdo_mysql',
);
$conn = \Doctrine\DBAL\DriverManager::getConnection($connectionParams, $config);

$config = new \Doctrine\DBAL\Configuration();

$connectionParams = array(

'dbname' => 'my_db',

'user' => 'my_user',

'password' => 'my_pass',

'host' => 'localhost',

'driver' => 'pdo_mysql',

);

$conn = \Doctrine\DBAL\DriverManager::getConnection($connectionParams, $config);

FIRST QUERY

This will do a simple first query

$sql = "SELECT * FROM some_data";
$stmt = $conn->query($sql);

while ($row = $stmt->fetch()) {
    echo $row['some_field'];
}

$sql = "SELECT * FROM some_data";

$stmt = $conn->query($sql);

while ($row = $stmt->fetch()) {

echo $row['some_field'];

}

DYNAMIC & PREPARED

DBAL gives us some nice options to prepare queries.

$sql = "SELECT * FROM some_data WHERE id = ?";
$stmt = $conn->prepare($sql);
$stmt->bindValue(1, $id);
$stmt->execute();

$sql = "SELECT * FROM some_data WHERE id = ?";

$stmt = $conn->prepare($sql);

$stmt->bindValue(1, $id);

$stmt->execute();

By using the bindValue the placeholder “?” is replaced. You can also use named parameters :)

$sql = "SELECT * FROM some_data WHERE name = :name OR username = :name";
$stmt = $conn->prepare($sql);
$stmt->bindValue("name", $name);
$stmt->execute();

$sql = "SELECT * FROM some_data WHERE name = :name OR username = :name";

$stmt = $conn->prepare($sql);

$stmt->bindValue("name", $name);

$stmt->execute();

More about this in the official documentation.

That was not too difficult ;)

Enjoy coding …

18. June 2015

Regular Expression with TWIG / Timber to check for sticky post

TWIG allows you to use regular expressions within its templates, this makes it possible to easily check if a post is sticky in Timber for WordPress.

TWIG MATCHES OPERATOR

Comparisons in TWIG

{% if findme matches '/^[\\d\\.]+$/' %}
{% endif %}

1 2	{% if findme matches '/^[\\d\\.]+$/' %} {% endif %}

TIMBER TEASE-POST.TWIG

This is the template that is called within the loop on the index.twig to show each post.

{% extends "tease.twig" %}
{% block content %}
<div class="{% if post.class matches '/sticky/' %}col-md-12{% else %}col-md-6{% endif %}">
 <!--Your content -->
</div>
{% endblock %}

{% extends "tease.twig" %}

{% block content %}

</div>

{% endblock %}

The post.class holds the full set of classes assigned to a post, which includes the class “sticky”. We do the match magic and you can use that to style your sticky posts differently ;)

WHAT IS TIMBER?

“Timber helps you create fully-customized WordPress themes faster with more sustainable code. With Timber, you write your HTML using the Twig Template Engine separate from your PHP files.

This cleans-up your theme code so, for example, your php file can focus on being the data/logic, while your twig file can focus 100% on the HTML and display.”

WHAT IS TWIG?

Twig is a modern template engine for PHP

Fast: Twig compiles templates down to plain optimized PHP code. The overhead compared to regular PHP code was reduced to the very minimum.
Secure: Twig has a sandbox mode to evaluate untrusted template code. This allows Twig to be used as a template language for applications where users may modify the template design.
Flexible: Twig is powered by a flexible lexer and parser. This allows the developer to define its own custom tags and filters, and create its own DSL.

Enjoy coding …

9. June 2015

Saving files in WordPress using the Filesystem_API

When building plugins or addons, sometimes we need to save custom files within WordPress.

These can be custom JavaScript or CSS files that a user edited and are loaded to override core functionality.

In most cases inline styles and scripts are an option, but not always the most elegant way. Everyone has to decide that for themselves. (wp_add_inline_style) Not talking about performance between inline and external files here :)

Another option is the wp_head action:

add_action('wp_head','hook_css');

function hook_css(){
$output="<style> .wp_head_example { background-color : #f1f1f1; } </style>";
echo $output;
}

add_action('wp_head','hook_css');

function hook_css(){

$output="<style> .wp_head_example { background-color : #f1f1f1; } </style>";

echo $output;

}

WHERE

Many ask where can or should I save files created within a plugin.

In the plugin folder ? Bad idea, as that folder will be deleted on each upgrade of the plugin.
In a separate plugin, just for those extra files. That is an option, but many webmasters prevent writing to any other folder than the upload folder. Also adding a blank plugin to just add upload folders is not really optimal.
In the upload folder itself. Just like the name says, its the main folder to upload files to!

SECURITY

When dealing with file creation and uploads, security is always important. That relates to any other platform doing similar operations. A folder created within a plugin directory is not less or more secure than a folder created in the upload directory.

Its important to have the correct file and folder permissions set:

Files should have permissions not higher than 664 (start at 644)
Directories should have permissions not higher than 755 (start at 744) Try what works. The lower the more secure :)

There is a detailed article about permissions over at WordPress as well.

When it comes to creating files in PHP the term cross-site-scripting often comes up. When the system creates a file it is owned by the webserver and on a shared hosting account those files could be altered by another user on the same webserver. This could allow them to inject malicious code and compromise your sever.

That is why the WP_Filesystem was created, to make things more secure and make sure that the owner of files is correct.

CREATING FILES

WordPress provides a nice clean interface to create folders and save files to the upload folder. Here a simple example from one of my current projects.

Prepare the filesystem

require_once( ABSPATH . 'wp-admin/includes/file.php' );
global $wp_filesystem;

1 2	require_once( ABSPATH . 'wp-admin/includes/file.php' ); global $wp_filesystem;

Get upload dir information and prepare directory to save to

$upload_dir = wp_upload_dir();

$dir = trailingslashit( $upload_dir['basedir'] ) . 'your folder/';

$upload_dir = wp_upload_dir();

$dir = trailingslashit( $upload_dir['basedir'] ) . 'your folder/';

Check if file exists, create folder, delete similar and save.
In my case I am adding a custom key and the page id to the file.

$key = md5($js);

if (!is_file($dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js")) {				
    
    WP_Filesystem(); 
    // Create main folder within upload if not exist
    if(!$wp_filesystem->is_dir($dir) )
    {
        $wp_filesystem->mkdir( $dir ); 
    }
    // Create a subfolder in my new folder if not exist
    if(!$wp_filesystem->is_dir($dir."/subfolder") )
    {
        $wp_filesystem->mkdir( $dir."/subfolder" ); 
    }
    // Delete similar files, might not apply to you
     foreach (glob($dir . "/subfolder/yourfile_" . get_the_ID() . "_*.*") as $filename) {
        unlink($filename);
    }   
    // Save file and set permission to 0644
    $wp_filesystem->put_contents( $dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js", $js, 0644 ); 
    
}

$key = md5($js);

if (!is_file($dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js")) {

WP_Filesystem();

// Create main folder within upload if not exist

if(!$wp_filesystem->is_dir($dir) )

{

$wp_filesystem->mkdir( $dir );

}

// Create a subfolder in my new folder if not exist

if(!$wp_filesystem->is_dir($dir."/subfolder") )

{

$wp_filesystem->mkdir( $dir."/subfolder" );

}

// Delete similar files, might not apply to you

foreach (glob($dir . "/subfolder/yourfile_" . get_the_ID() . "_*.*") as $filename) {

unlink($filename);

}

// Save file and set permission to 0644

$wp_filesystem->put_contents( $dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js", $js, 0644 );

}

If the direct way is not possible, you can also use or force the FTP approach
(request_filesystem_credentials).

This will check for the ftp credentials and request them with a form if needed.

if ( ! WP_Filesystem($creds) ) {
      request_filesystem_credentials($url, $method, true, false, $form_fields);
    return true;
}

if ( ! WP_Filesystem($creds) ) {

request_filesystem_credentials($url, $method, true, false, $form_fields);

return true;

}

This is just a very rough outline of how to do it, but should get you started.

Enjoy coding …

9. June 2015

Your own custom maintenance mode for WordPress

The custom maintenance mode message in WordPress, during upgrades and installs, is far from beautiful :) Time to change that!

You can do your own page by adding a pure PHP maintenance.php into your /wp-content folder.

Now go and build a nice page !

<?php
function site_protocol() {
    if(isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'on' || $_SERVER['HTTPS'] == 1) || isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&  $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')  return $protocol = 'https://'; else return $protocol = 'http://';
}
/* Redirect if no maintenance */
if(!file_exists(realpath ($_SERVER['DOCUMENT_ROOT'] )."/.maintenance")){
	header("location: ".site_protocol().$_SERVER['HTTP_HOST']);
	exit;
}
$protocol = $_SERVER["SERVER_PROTOCOL"];
if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol )
        $protocol = 'HTTP/1.0';
header( "$protocol 503 Service Unavailable", true, 503 );
header( 'Content-Type: text/html; charset=utf-8' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Maintenance</title> 
</head>
<body>
    <h1>Do some magic</h1>
</body>
</html>
<?php die(); ?>

<?php

function site_protocol() {

if(isset($_SERVER['HTTPS']) && ($_SERVER['HTTPS'] == 'on' || $_SERVER['HTTPS'] == 1) || isset($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') return $protocol = 'https://'; else return $protocol = 'http://';

}

/* Redirect if no maintenance */

if(!file_exists(realpath ($_SERVER['DOCUMENT_ROOT'] )."/.maintenance")){

header("location: ".site_protocol().$_SERVER['HTTP_HOST']);

exit;

}

$protocol = $_SERVER["SERVER_PROTOCOL"];

if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol )

$protocol = 'HTTP/1.0';

header( "$protocol 503 Service Unavailable", true, 503 );

header( 'Content-Type: text/html; charset=utf-8' );

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Maintenance</title>

</head>

<body>

<h1>Do some magic</h1>

</body>

</html>

<?php die(); ?>

Just remember that during maintenance no WordPress functionality is available!

Enjoy coding …

4. June 2015

Visual Composer – Fixing icon bleeding to child elements in admin

When mapping shortcodes using vc_map, you can assign icons to your new Visual Composer element.

If you created a container element, that wraps around other elements, the child element icon will currently be overwritten with the parent icon. A fix is apparently on its way :)

Currently the only way is to skip the icon option completely and use pure CSS for that.

You can enqueue a CSSs file for the admin through a vc_map option “admin_enqueue_css“.

.wpb_vc_your_element > .wpb_element_wrapper > .wpb_element_title i, 
#vc_your_element i.vc_element-icon {
	background-position: 0 0;
	background-image: url(/path_to_images/vc_your_element.png)!important;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-ms-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
}

.wpb_vc_your_element > .wpb_element_wrapper > .wpb_element_title i,

#vc_your_element i.vc_element-icon {

background-position: 0 0;

background-image: url(/path_to_images/vc_your_element.png)!important;

-webkit-background-size: contain;

-moz-background-size: contain;

-ms-background-size: contain;

-o-background-size: contain;

background-size: contain;

}

The CSS targets the icon of the displayed element in the editor and the icon when adding new elements to the layout.

Enjoy coding …

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