I AM LISTENING TO
|
WHAT I LIKE
  • English
  • German
BLOG FILTER

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:

wplms_points_payout

This list the instructors and their point balance and allows to start the payment process.

wplms_points_payout2

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.

wplms_points_payout3

The session can be cancelled at any point. You can also leave the session open and continue at a later point.

wplms_points_payout4

On the frontend I added an interface to the BuddyPress Profile, that allows the instructor to track his payouts and balance.

wplms_points_payout5

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.

Enjoy coding …

 

 

readmore

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:

Enjoy coding …

readmore

“Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.”

Supported languages
Prism

readmore

“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”

Brim @ Github

readmore

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

TIMBER TEASE-POST.TWIG

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

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 …

readmore

“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.

Github

readmore

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:

WHERE

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

  1. In the plugin folder ? Bad idea,  as that folder will be deleted on each upgrade of the plugin.
  2. 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.
  3. 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:

  1. Files should have permissions not higher than 664 (start at 644)
  2. 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

Get upload dir information and prepare directory to save to

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.

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.

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

Enjoy coding …

 

readmore

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.

MutationObserver Syntax

Browser Support / Polyfill

jQuery-Watch Syntax

jQuery-Watch on Github

readmore

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

readmore

Adding Metaboxes in WordPress to your admin areas normally involves 3 steps:

  1. Action to define the metabox area
  2. Callback to define the metabox content
  3. 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:

  1. title An arbitrary title field *
  2. text
  3. text_small
  4. text_medium
  5. text_email
  6. text_url
  7. text_money
  8. textarea
  9. textarea_small
  10. textarea_code
  11. text_date Date Picker
  12. text_time Time picker
  13. select_timezone Time zone dropdown
  14. text_date_timestamp Date Picker (UNIX timestamp)
  15. text_datetime_timestamp Text Date/Time Picker Combo (UNIX timestamp)
  16. text_datetime_timestamp_timezone Text Date/Time Picker/Time zone Combo (serialized DateTime object)
  17. colorpicker Color picker
  18. radio *
  19. radio_inline *
  20. taxonomy_radio *
  21. taxonomy_radio_inline *
  22. select
  23. taxonomy_select *
  24. checkbox *
  25. multicheck
  26. taxonomy_multicheck *
  27. taxonomy_multicheck_inline
  28. wysiwyg (TinyMCE) *
  29. file Image/File upload *†
  30. file_list Image/File list upload
  31. oembed Converts oembed urls (instagram, twitter, youtube, etc. oEmbed in the Codex)
  32. group Hybrid field that supports adding other fields as a repeatable group. *

Simple example from the CMB2 Github page

 

readmore