In our pursuit of improving the performance of your code snippets, we are introducing a way to load snippets on your site!

WPCode v2.1.11 introduces the option to generate files for JS and CSS snippets. This lets you determine whether you want the code added inline (the default) or generated in a separate file. This freedom comes with many benefits! Let’s get the details.

Introducing Loading Code Snippets As Files 

When you load a JavaScript or CSS snippet as a file, a separate file dedicated to the snippet is generated, and then the file is enqueued in the selected location. 

This means when you enable files for snippets, your snippet’s code will be loaded using wp_enqueue_script for JavaScript and wp_enqueue_style for CSS.

Perks Of Loading Snippets As Files:

• Improved Performance: Plugins that optimize site performance, such as WP Rocket, W3 Total Cache, etc., work more effectively with file-based snippets, enhancing your site’s loading speed and responsiveness.
• Better Dependency Management: If you turn your snippets into files, you can reference them as dependencies for other scripts, streamlining the execution of related code.
• Enhanced Customization: You can now localize these snippet files with variables from PHP snippets, making it easier to customize your site for different audiences. 

How To Load Code Snippets As Files 

With WPCode, switching from the default in-line snippets to file-based snippet loading is straightforward, requiring only a few clicks. 

First, choose either CSS or JavaScript as the code type for your snippet. 

Then, enable “Load as file” by turning the button on from the insertion section.

Now, activate the snippet and click “Save Snippet”. Please note the file will be generated if the snippet is activated. 

Finally, you can check the generated file by clicking the “View file” button. It appears only after saving the snippet. 

How To Reference Snippet Files In Other Scripts

WPCode uses a simple convention for naming the files it generates: “wpcode-snippet-[snippet-id]”. This naming convention allows you to easily reference these files as dependencies in other parts of your WordPress project.

For example, if you have a snippet with an ID of 21, you would reference it as “wpcode-snippet-21” when setting it as a dependency. This integration brings a modular and organized approach to script management on your site.

Please visit the documentation for more information.

Closing Notes

The ability to load JavaScript and CSS snippets as files opens up new possibilities for enhancing your site. Whether improving site performance, managing script dependencies more efficiently, or localizing your JavaScript files, this update will make your website management experience smoother and more productive.

We’re excited to see how you leverage this new feature to enhance your WordPress sites. As always, should you have any questions or need assistance, our team is ready to help. 

Upgrade WPCode today to become the first to get exciting new features!