Excel needs to know that you are using non-ASCII characters in your CSV or it will not display them correctly :)
Add the BOM(Byte Order Mark) to the first line, notifying Excel that you are offering a UTF-8 encoded file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//headers header('Pragma: public'); header('Expires: 0'); header('Cache-Control: must-revalidate, post-check=0, pre-check=0'); header('Content-Description: File Transfer'); header('Content-Type: text/csv'); header('Content-Disposition: attachment; filename=your.csv;'); header('Content-Transfer-Encoding: binary'); //open file pointer to standard output $fp = fopen('php://output', 'w'); //add BOM to fix UTF-8 in Excel fputs($fp, $bom =( chr(0xEF) . chr(0xBB) . chr(0xBF) )); |
I am currently working on a WPLMS enhancement for a customer, that allows to simplify the payout of instructor commissions. The whole system runs on the MyCred Points System and students pay for courses with Points. The problem is how to easily payout the instructor commissions via PayPal.
There is currently no addon for MyCred available that does that magic, so I build one myself.
At the moment the payment process via PayPal is completely manual, due to budget constraints. I am basically generating a custom „Send Money“ link that prefills the PayPal email and amount to send.
The interface itself handles the payout sessions, tracks the instructor balance, paid and unpaid points.
Here some images to illustrate the admin dashboard:
This list the instructors and their point balance and allows to start the payment process.
Payout sessions make sure, that only one session can be started per instructor, as the instructor could earn new points during the process. The points converted can be changed, allowing you to payout a fixed amount of points.
Its a 3 step process. Login at PayPal. Open the „Send money“ dialog and send money to instructor. Confirm that you manually send the money and than register the payment and payout points in the system.
The session can be cancelled at any point. You can also leave the session open and continue at a later point.
On the frontend I added an interface to the BuddyPress Profile, that allows the instructor to track his payouts and balance.
The whole setup could be updated using PayPal Adaptive Payments, to make the whole process completely automated. Something to consider for the future :) Pretty happy with the manual process so far and it will be a great help for my customer to keep track of the commission payouts.
The whole setup is currently targeted for WPLMS, but can easily be adapted to other setups using the MyCred Points System.
Javascript Error tracking is becoming more and more important, with applications moving to the client. Many service providers already offer a variety of extensive error tracking solutions for a price. These providers help to get around browser limitations and get the most out of errors.
Depending on your budget, that might not always be an option and not always needed.
To the rescue comes ErrorBoard, that provides a basic interface to track window.onerror events. Requires Node.js, NPM and a free port.
Here the window.onerror, how I set it up for now:
|
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 27 28 29 30 31 32 33 34 35 |
// checks if there was a previously defined window.onerror and preserve it var oldOnError = window.onerror; window.onerror = function( message, url, line, column, error ) { if (errorMsg.indexOf('Script error.') > -1) { return false; } try { var e = encodeURIComponent; var meta = '{"project":"portalzine.de"}'; ( new Image() ).src = 'http://UrltoErrorBoard/error?message=' + e( message ) + '&url=' + e( url ) + '&line=' + e( line ) + '&meta=' + e( meta ) + ( error && error.stack ? '&stack=' + e( error.stack ) : '' ) + ( column ? '&column=' + e( column ) : '' ) ; } catch(e) { // we don't want errors to throw inside onerror } // Call any previously assigned handler if (typeof oldOnError === 'function') { oldOnError.apply(this, arguments); } // returning false triggers the execution of the built-in error handler return false; }; |
„Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.“
„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“
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
„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.
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]); } }); |
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
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.
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.
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 :)