WordPress File Upload plugin was recently upgraded to version 4.0.1. The advancement of primary version number, from 3 to 4, denotes a major upgrade, related to its architecture. Indeed WordPress File Upload architecture has been under development since April-2016. It is a complete redesign aiming to make its User Interface (UI) more adaptable to user’s expectations.
The need
What was the need for this change? The design.
Indeed the design of a website (aesthetics, easiness of user interaction) plays a very important role to its branding, popularity and traffic. This applies to all kinds of websites, personal, blogging and commercial. Especially when it comes to commercial ones, a good design contributes to higher user conversion and eventually to higher sales.
This is one of the reasons why WordPress succeeded so much comparing to other CMS platforms (like Joomla and Drupal). It provides an easy and extendable framework that enabled programmers and designers to develop thousands of themes. So now, whoever wants to create a WordPress website can really tailor the look-and-feel exactly to its needs without too much effort and money.
Another fact to consider is the fast evolving web environment. Every few years new technologies appear (e.g. mobile phones, SEO) and others become obsolete (e.g. Flash player) that affect the design (e.g. the need to have responsive pages or call-to-action buttons). The UI also changes often (e.g. content delivery changed from multi-page to single-page with infinite-scroll, or graphics changed from heavily styled shiny ones to leaner with less colors and gradients and many infographics). Eventually nowadays a website needs to be renewed almost every year to incorporate these changes and keep up with technology and competition.
Plugins cannot stay out of this game, especially those generating visual content, like WordPress File Upload. They need to adapt continuously to the new web trends and their UI needs to align with the rest web content, generating a smooth and uniform experience for the user. If not, they would mess the design and they would not be preferred by website creators.
Progress so far
WordPress File Upload enabled design customizations since its initial launch. The following table outlines the evolution of the plugin regarding design flexibility:
| Major Version | Plugin Design | Customization options | Means of customization | Design change level |
|---|---|---|---|---|
| 1 | Single design strictly defined | Element classes | CSS rules put on theme’s Custom CSS area | Limited styling changes |
| 2 | Single design loosely defined (flat) | Element classes, Custom CSS area | CSS rules | Limited but easier styling changes |
| 3 | Two flat designs, normal and responsive | Element classes, Custom CSS area, responsive option, filters | CSS rules, shortcode options, filter hooks | Extended styling & limited functional changes |
| 4 | Template based unlimited designs | Element classes, Custom CSS area, responsive option, filters, template classes | CSS rules, shortcode options, filter hooks, class declarations | Full styling and functional changes |
Up to version 3 it was possible to change the plugin design only partially. No major modifications could be made without extensive rewriting of the plugin’s code. Version 4 changes all this.
The new WordPress File Upload architecture
The new WordPress File Upload architecture, introduced by version 4, completely separates the visual representation of the plugin’s upload form from its logic. All HTML, Javascript and CSS code necessary to generate the buttons, text boxes and other elements of the upload form is contained in a single mixed PHP file, the template. This way it is possible to have many template files and consequently many different visualizations of the plugin. An administrator can choose which one to apply to its upload instances.
The new architecture is based on Model-View-Controller (MVC) approach. In MVC approach, the code is separated into three distinct parts:
- the model, which contains database and other kind of definitions (e.g. attribute, settings and advanced options definitions),
- the view, which generates all the visual representation to the users
- the controller, which receives and processes user input, modifies model and updates view.
Although the new WordPress File Upload architecture is not entirely MVC, it is very easy to modify shortcode attribute definitions, settings definitions, advanced options definitions, the appearance of a single element of the upload form or the appearance of the whole upload form by just modifying one file every time. This enables the plugin to keep evolving and meeting new users’ needs, quickly and reliably.
From a technical point of view, every template is a singleton class containing functions that manage the individual elements of the upload form. Whenever the plugin needs to generate an element, or interact with it (read its value, change its value, focus, hide, activate etc.) it just calls the template’s functions, it does not work on it directly.
The default template contains detailed inline instructions and explanations of functions and their use, so that a new and completely different template can be created. On the other hand, if the purpose is not to create an entirely new template but modify an existing one only partially (e.g. modify only one of its elements), it can be done easily by creating a child class and redeclaring only the parts that are necessary, without having to modify the original template or rewriting all the code.
Future considerations
For the moment latest version 4.0.1 contains only one template applicable to the upload form, which generates the same result as in previous versions for backwards compatibility. The front-end file viewer of the plugin does not rely on templates yet.
Next releases will include more templates with more visualization options. New file view formats will be added on the front-end, not only tabular lists but also tree views, tiled views and single file views. Finally, the template system will be extended to cover the front-end file viewers.
For any questions, bugs or information please contact us.
The Iptanus team
Thanks for your hard work! It’s an awesome plugin – very empowering for all WordPress websites with user submitted files features.