“In iOS 7.1, a property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars in Safari as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again. Brim is a view (minimal-ui) manager for iOS 8”
“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.
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.
|
1 2 3 4 5 6 |
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(); |
This will setup your first connection to a MySQL database.
|
1 2 3 4 5 6 7 8 9 10 |
$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); |
This will do a simple first query
|
1 2 3 4 5 6 |
$sql = "SELECT * FROM some_data"; $stmt = $conn->query($sql); while ($row = $stmt->fetch()) { echo $row['some_field']; } |
DBAL gives us some nice options to prepare queries.
|
1 2 3 4 |
$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 :)
|
1 2 3 4 |
$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 ;)
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.
|
1 2 |
{% if findme matches '/^[\\d\\.]+$/' %} {% endif %} |
This is the template that is called within the loop on the index.twig to show each post.
|
1 2 3 4 5 6 |
{% extends "tease.twig" %} {% block content %} <div class="{% if post.class matches '/sticky/' %}col-md-12{% else %}col-md-6{% endif %}"> <!--Your 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 ;)
“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.”
Twig is a modern template engine for PHP
Tracy helps you to:
|
1 2 3 4 5 6 |
require_once ('/includes/tracy/tracy.php'); use Tracy\Debugger; //Debugger::$strictMode = TRUE; Debugger::$logSeverity = E_NOTICE | E_WARNING; Debugger::enable(Debugger::DEVELOPMENT, '/cache/log'); Debugger::fireLog('Hello World'); |
The timeout is cleared every time a resize event fires, making sure your code is only executed once the resizing actually stopped.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var timer; $(window).on('resize', function(e) { clearTimeout(timer); timer = setTimeout(function() { // Execute }, 250); }); |
When doing flexible layouts, there is no way around using relative sizes, so that fonts and elements resize accordingly.
If not set differently, 1 em equals 16 Pixel in most browsers, which gives us a calculation basis.
So 1/16 = 0,0625 is our calculation factor.
|
1 2 3 4 5 |
PX EM 1 = 0,0625 12 * 0,0625 = 0,75 48 * 0,0625 = 3 250 * 0,0625 = 15,625 |
The difference between EM and REM is the inheritance.
The REM value is calculated in reference to the root element, the font size of the HTML, not the BODY, element.
The EM value is calculated in reference to its parent element.
Due to limited support in older browsers, you can use graceful degradation in your stylesheet to use both.
|
1 2 3 4 |
li a { font-size:20px; font-size:1.25rem; } |
The Pixel value must be added before the REM value !
“DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews.”
Really neat and clean way to add file uploads to your next project.
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:
|
1 2 3 4 5 6 |
add_action('wp_head','hook_css'); function hook_css(){ $output="<style> .wp_head_example { background-color : #f1f1f1; } </style>"; echo $output; } |
Many ask where can or should I save files created within a plugin.
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:
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.
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
|
1 2 |
require_once( ABSPATH . 'wp-admin/includes/file.php' ); global $wp_filesystem; |
Get upload dir information and prepare directory to save to
|
1 2 3 |
$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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
$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.
|
1 2 3 4 |
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.
