Scripts Organizer, from the developers behind dpPlugins, is a component for WordPress that will help us to easily program, organize and manage HTML, CSS, JS and PHP. In this note we are going to explore its benefits, mentioning the advances that its latest version 3.3 brings.
Advantage
Scripts Organizer leaves the factory with a collection of components that work together to help us save time. Its typical on/off switches allow us to activate and deactivate scripts at will. If we forget for a moment about its ability to program the JS/PHP environment, the plugin is an excellent manager of Code Snippets (read code snippets).
For the example we have created a script that will only be executed on Saturdays and Sundays (“weekend sales”). Although the programming will activate and deactivate it according to days and times established by us, we can also do it manually.
Of course, the biggest advantage of this plugin is precisely the possibility that it gives us to accurately schedule the execution of a JS or PHP according to our business/service/need/eventuality.
As we can see in the screenshot on the side, the code creation panel is as simple as it is powerful. We can choose conditions for its activation, where the code will be incorporated (header, footer, by shortcode), in what type of content (Posts, Pages, Taxonomies, etc.), the days and times it will be active, etc.
We are allowed to set visibility, insert elements dynamically, call third-party tracking scripts during various campaigns, and even more alternatives. This also takes care of the speed of our website since scripts will be called only when needed. The rest of the time, the code simply will not be on our website.
It is also possible to insert PHP scripts, useful when we have several fragments. When writing PHP code, we are offered a "safe mode" that will prevent the script from running if due to any conflict or incompatibility it breaks our website. This undoubtedly has the power to save us a lot of time for when problems arise and the site goes offline.
The code editor is a familiar interface that makes it easy to view, edit, and add code.
Script Manager
The additional feature called “Scripts Manager” is appreciated. Through this it is possible to insert code from a CDN service (for example, cloudflare) or upload our own CSS and JavaScript files. This functionality interacts directly with the standard script manager, meaning that we will be able to program and apply conditional rules to third-party files from a CDN.
To activate Script Manager we must mark it here:
After saving the changes, we can find the "Scripts manager" functionality within the component's tools menu:
What's new in the latest version Scripts Organizer 3.3
SCSS source maps
if we use partial SCSS, now we can enjoy the new functionality to create SCSS source maps. Let's remember that SCSS are the CSS files that contain small and specific code for a particular style. These snippets are separated from the main style sheet in order to better manage the CSS code. Why? Because these files can be used in another file SCSS avoiding having to write the same styles again (either @use at-rule or @forward at-rule is used with both including the style sheet with different visibility).
SASS Partials provides a great way to organize our CSS code into different files to use only where needed.
Creating source maps allows us to visualize where the partial code is coming from. Before we only got a link to 4-header.css inside the developer tools. But when we opened the code block with "ID 4" we were not sure of the origin of the partial code.
Now once the feature is enabled (bottom screenshot: Scripts Organizer -> Features), it will show us the partial SCSS name instead of the code block name.
We can easily recognize the partial name of SCSS thanks to its “_” prefix.
New functionality in Preview
By pressing the home button, the URL of the home page of our website will be added automatically and a request will be sent. We no longer need to copy, paste, and submit the URL.
HTML, CSS, SCSS and JS only within the admin area
It means that we can now load HTML, CSS, SCSS, and JS inside the WP Desktop without these scripts being visible to front-end users. We can customize them and make them “white label” without the need to install any other third-party plugins.
Before, this could only be achieved for PHP, so we had to code CSS or JS inline. The experience was tedious since we lacked AutoFill functionality.
Conclusions
We have mentioned all the main features of Script Organizer To the date. As it happens with all the components that we recommend in Duplika, this one is also continuously developed to improve it, so it updates every time.
It is a tool that helps us to add scripts from multiple languages to our WordPress with ease, control, and even in a programmed way. The conditions of this programming are fine and flexible, covering any scenario or difficulty.
Its value of USD59 allows us to use it unlimited in time and for an infinite number of sites.
Scripts Organizer is included for free in our Managed WordPress service.
Leave a Reply