I AM LISTENING TO
|
WAS ICH LIEBE
  • Englisch
  • Deutsch


BLOG FILTER



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

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 !

Just remember that during maintenance no WordPress functionality is available!

Enjoy coding …

readmore

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

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

Enjoy coding …

readmore

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:

  1. 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.
  2. Added automatic menu, which adds links to each section as they are created. Link title matches the section title.
  3. Define section and slide anchors, which are reflected in the browser history.
  4. 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.
  5. Fullpage.js configuration is fully integrated and working. The system sets defaults for a quick start.
  6. Fullpage.js CSS override has been added, but is not complete yet. Added code editor.
  7. 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.
  8. iScroll can be seen in Section 2. Added resize handling and configuration options. Still need to do some minor tweaks.
  9. iScroll custom scrollbars are on my list, but not sure I will add these yet.
  10. Prebuild Templates will be added, so that you can quickstart your design. Visual Composer 4.5+ provides some nice new options.
  11. Visual Composer requirement will be 4.5+.
  12. 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

  1. Quickly choose which section / slide to load, when the page is opened.
    cubicFusion_VC_Fullpage_Bchoose
  2. 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.
  3. 21.06.2015 – updating to latest fullPage.js version (2.6.6) and adding new options and changes
  4. 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
  5. 03.09.2015
    – moving to Visual Composer 4.7
    – finalizing the admin area
  6. 14.01.2016
    – moving to Visual Composer 4.9x
    – fullpage.js version update
    – iScroll update
    – admin /front-end cleanup … getting close :)
  7. 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!
  8. 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

readmore

Update: Video Preview

I am still busy finalizing the Fullpage.js Addon for Visual Composer. Hope to have some more images or even a video next week :)

Some requirements for the Visual Composer Addon:

  1. PHP 5.4+, as I am using traits and advanced autoloading.
  2. Timber (TWIG for WordPress), for current and future templating. Currently mostly used for the main administration of the core module handler.
  3. iScroller for overflowing content (will be part of the package)
  4. Otherwise the default Fullpage.js restrictions apply

The Addon will ease Fullpage.js integration immensely, but for a more advanced integration some CSS / JavaScript knowledge will always be needed. Do checkout the main Fullpage.js documentation for more information.

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.

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

In a current project I am using pages as templates, to load content into specific containers on the website. The website will be using up to 15 different languages.

The main language setup is done through WPML, which creates linked content per language. This helps, as some languages will fail terribly when translating them through a pure gettext setup, as the words setup is often completely different.

But there is always static stuff that can be translated directly through the language files. For that I use a simple shortcode that allows me to keep the native language as a basis in all linked content. Easier to move around, as I can actually read and understand it :)

Call the shortcode from the functions.php

The shortcode function itself. This loads the language textdomain from the specified location and translates the string.

How to use it in your post or page content

 

readmore

The first two headers prevent the browser from caching the response and the third sets the correct MIME type for JSON.

Than just output your JSON data

 

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

The current Google Analytics Dashboard for WordPress integrates no Opt-Out to disable tracking, which is required in Europe. Here is a workaround for that.

Paste this into your theme function.php.

Then add this to your data privacy document:

 

readmore