Easy Includes

Introduction

Easy Includes is a Joomla plugin that allows you to easily include CSS and JavaScript files and declarations on your Joomla site without modifying template files. This documentation covers the installation, configuration, and usage of the Easy Includes plugin.

Download

Downloading the Extension

Email: After you purchase the extension from our store, you will receive an email containing a link to download the extension.

Store: Alternatively, you can download the extension from the "Downloads" section in our store. If you are a new user, you need to create an account using the same email address you used for the purchase.

Click to download the extension package: EasyIncludes_UNZIP.zip

Unzipping the Package

Use any file unzipper tool or WinRAR to unzip the EasyIncludes_UNZIP.zip package. After unzipping, you will find the following contents:

• plg_sys_easyincludes_X.x.zip: This is the installation file compatible with Joomla 4.x, 5.x, and 6.x.
• ReadMe.txt: Contains vital information about the current version of the extension.

Installing the Extension

To install the extension, log in to the backend of your Joomla website.

• For Joomla 4, 5 & 6: Navigate to System > Install > Extensions (or Extensions > Manage > Install). Click on the "Upload Package File" tab. Click "Browse" to select the installation file (plg_sys_easyincludes_X.x.zip), then click "Upload and Install."

A success message will be displayed once the installation is complete.

Configuration

After installation, the plugin needs to be configured to suit your requirements. Access the plugin settings by navigating to Extensions > Plugins, and find System - Easy Includes in the list.

File Management

Click the Add button to add CSS or JavaScript files. For each file, you can configure:

• File Type: Select whether the file is CSS or JavaScript.
• File Path: Enter the complete path to the file (e.g., /templates/your-template/css/custom.css or https://cdn.example.com/script.js).
• Load Position (JavaScript only): Choose whether to load the script in the head or before the closing body tag.
• Script Attributes (JavaScript only): Select defer, async, or both attributes for the script tag.
• Media Query (CSS only): Select the media type (all, screen, print, handheld, TV).
• Conditional Comment: Optional IE conditional comment (e.g., IE, IE 9, lt IE 9).
• Load Priority: Set priority to control load order (higher numbers load first).

Inline Code

Click the Add button to add inline CSS or JavaScript/jQuery code. For each entry, you can configure:

• Code Type: Select whether the code is CSS or JavaScript/jQuery.
• Code: Enter your CSS or JavaScript/jQuery code directly.
• Media Query (CSS only): Select the media type for CSS code.
• Load Priority: Set priority to control load order.

Advanced Settings

• Enable Cache Busting: When enabled, adds a version parameter to file URLs to prevent caching issues during development.

Features

Once configured, the plugin will automatically include the specified CSS and JavaScript files and declarations on your Joomla site. No additional steps are required for usage beyond configuration.

Key Features

• Subform Interface: Easy-to-use subform interface for managing multiple files and inline code entries.
• Multiple File Support: Add unlimited CSS and JavaScript files from local or external sources (CDN).
• Inline Code Management: Add inline CSS and JavaScript/jQuery code without creating separate files.
• Load Position Control: Choose where JavaScript files load (head or body) for optimal performance.
• Script Attributes: Add defer or async attributes to JavaScript files for better page load performance.
• Media Query Support: Load CSS files conditionally based on media type (screen, print, handheld, etc.).
• Priority Management: Control the exact order files and code load using priority settings.
• Cache Busting: Enable version parameters to ensure browsers load the latest file versions.
• Conditional Comments: Support for Internet Explorer conditional comments for legacy browser compatibility.
• WebAssetManager Integration: Uses Joomla's native WebAssetManager for optimal asset loading and caching.
• Template Independent: Add CSS and JavaScript without modifying template files.
• Joomla 4, 5 & 6 Compatible: Fully compatible with the latest Joomla versions.

FAQ

• How do I add a CSS file?

  • Go to File Management tab, click the Add button, select File Type as CSS, and enter the complete path to your CSS file in the File Path field.

• Can I add inline CSS styles?

  • Yes, go to the Inline Code tab, click the Add button, select Code Type as CSS, and enter your CSS code in the Code field.

• How do I add a JavaScript file?

  • Go to File Management tab, click the Add button, select File Type as JavaScript, enter the file path, and choose the Load Position (head or body).

• Can I add inline JavaScript or jQuery scripts?

  • Yes, go to the Inline Code tab, click the Add button, select Code Type as JavaScript/jQuery, and enter your code in the Code field.

• How do I control the load order of files?

  • Use the Load Priority field. Higher numbers load first. Files with the same priority load in the order they were added.

• Can I load files from external CDNs?

  • Yes, simply enter the full URL (e.g., https://cdn.example.com/library.js) in the File Path field.

• What is cache busting and when should I use it?

  • Cache busting adds a version parameter to file URLs to force browsers to reload files. Enable it during development or when files change frequently.

Troubleshooting

• Files Not Loading: Ensure the file paths are correct and the files exist in the specified locations. For local files, use paths relative to the Joomla root (e.g., templates/your-template/css/style.css). For external URLs, ensure they are accessible.
• Styles or Scripts Not Applying: Check for syntax errors in your CSS or JavaScript code. Use browser developer tools to check if files are loading and if there are any console errors.
• Conflicts with Other Plugins: Ensure there are no conflicts with other plugins that manage CSS or JavaScript. Check the load priority if files need to load in a specific order.
• JavaScript Files Not Working: Verify the Load Position setting. Some scripts require being loaded in the body instead of the head. Also check if jQuery is available if your script depends on it.
• CSS Not Loading on Specific Devices: Check the Media Query setting. Ensure it's set to "All" if you want the CSS to load on all devices.
• Cache Issues: If you've updated files but changes aren't appearing, enable Cache Busting in Advanced Settings, or clear your browser cache and Joomla cache.