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.
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 !
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<?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(); ?> |
Just remember that during maintenance no WordPress functionality is available!
The files author-course.php and author.php can not be overwritten in a WPLMS child theme directly. The only way is to override the filter in the child theme functions.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
add_filter( 'template_include', 'override_check_instructing_courses_endpoint',99); function override_check_instructing_courses_endpoint($template){ if(!is_author()) return $template; global $wp_query; $instructing_courses=apply_filters('wplms_instructing_courses_endpoint','instructing-courses'); if ( !isset( $wp_query->query_vars[$instructing_courses] ) ){ $wp_query->set( 'post_type', array('post') ); return get_stylesheet_directory().'author.php'; }else{ $wp_query->set( 'post_type', array('course') ); return get_stylesheet_directory().'author-course.php'; } } |
“WPLMS is a Learning Management System for WordPress. It is an e-learning WordPress theme for course management, instructor and student management using which you can create and sell your courses online. “
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// before li{ border-right: 1px solid red; } li:last-child{ border-right: 0; } // after / compact li:not(:last-child) { border-right: 1px solid red; } |
Flowtime.js is a JavaScript framework to easily build HTML presentations. Animations are managed using native and accelerated CSS3 transitions.
It also provides a nice fragment navigation and overview of all slides.
It works on all modern browsers and mobile browsers, with full swipe functionality.
jQuery-Watch is a nice little plugin that monitors CSS, Attribute or Property changes in an element.
It uses the MutationObserver internally for modern browsers and uses setInterval() polling as a fallback for older browsers.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var element = document.getElementById("Notebox"); var observer = new MutationObserver(observerChanges); observer.observe(element, { attributes: true, subtree: opt.watchChildren, childList: opt.watchChildren, characterData: true }); /// when you're done observing observer.disconnect(); function observerChanges(mutationRecord, mutationObserver) { console.log(mutationRecord); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$("#btnChangeContent").click(function () { // assign text programmatically $("#SomeContent").text("Hello - time is " + new Date()); }); // watch the content $("#SomeContent").watch({ properties: "prop_innerHTML", watchChildren: true, callback: function (data, i) { console.log("text changed"); alert('text changed' + data.vals[i]); } }); |
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“.
|
1 2 3 4 5 6 7 8 9 10 |
.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.