Template management

Template location

For a plugin, a template is always the folder that contains the files associated with the template. The default plugin templates are located in the wp-content/plugins/download-from-files/templates/ folder, where they are each in separate folders.

It is common practice in WordPress to override these templates. The overwritten files must be in the download-from-files folder of the current (child) theme, in the folder corresponding to the template name.

That is, assuming you need to use the „default” theme for the plugin, which is a built-in version of wp-content/plugins/download-from-files/templates/default folder, but the current (child) theme <my_theme>/download-from-files/default folder is also available, you will use the latter.

Built-in templates

Default view

Extended view

Browse view

Tree view

The built-in templates are different from the „Tree Structure” because they use a separate javascript library for display. This is why it can be called with another shortcode: [download-from-tree]

To display a download, the plugin will use the file.html template file from the selected template.

How templates work default|extended|browse

The plugin passes an array of data to the template, including theindex.html file, for processing based on the principle of essentially simple text exchange.

An example of how it works:
a shortcode: [download-from-files template="extended" class="my-class"]

			array(	
				'token'   => 'ABCDEF',
				'empty'   => 0,
				'files'   => array( ... ),
				'folders' => array( ... ),
				'class'   => 'my-class'
			);

		<div class="<!-- class -->" id="downloads_<!-- token -->">
			<!-- if empty -->
				<!-- files -->
			<!-- else empty -->
				No content to display
			<!-- endif empty -->
			<!-- if folders -->
				<!-- folders -->
			<!-- endif folders -->
			<!-- this_is_unnecessary -->
		<div>

In the example:

• Opens the index.html file of the „extended” template for processing.
• ABCDEF will be replaced by <!-- token --> in the template.
• my-class will be replaced by <!-- class --> in the template.
• Since empty is 0 (or empty), the text „No content to display” will appear, but <!-- files --> block is not included in the content.
• Because folders is not empty (i.e., there are additional folders), it loads the folders.html template file from the same folder and submits it for processing. folders array.
• <!-- this_is_unnecessary --> will remain as an invisible comment in the code.

CSS and JS

During plugin management, the plugin checks to see if the *.css and *.js files exist in the template directory. If there is, it will load. If there are several, they load all of them.

Because downloadable documents can be invoked multiple times within a page, it also checks to see if the file has been loaded before. If so, it will not reload.

It’s important to note here that a unique token is automatically generated for each paste. This can be especially useful for possible javascript authentication.

Create your own template

You can create your own template without restrictions. To do this, create a folder called download-from-files in the folder of your (child) theme, and then create your own template here in additional subfolders. Remember! The plugin will load the index.html file first. If the downloadable content is not a folder, the plugin will use the file.html file from the template directory.

You may want to use one of the built-in templates to create your own template, copy it, and edit it as needed.

Relevant variables to use in the index.html template:

array(
    'template' => 'default',            // Name of the template used
    'folders' => array(),               // Folders in the current folder 
    'files' => array(),                 // Files in the current folder 
    'target' => 'demo/downloads',       // Path of display folder relative to WordPress
    'empty_text' => 'Empty folder.',    // Empty folder text
    'token' => 'WR5YYLEHCE',            // Unique ID
	'empty' => 0,                       // 0 if the folder is empty and 1 if it contains content
	'count' => 0                        // Number of items in the current folder
);

Relevant variables to use in the folders.html template:

array(
    'name' => 'demo',                     // Name of the folder
	'title' => 'This is demo',            // Folder title
	'filename' => 'demo',                 // Name of the folder
	'date' => '2020-12-31',               // Date the folder was created
	'icon' => 'http://<path>/folder.png', // The folder icon
	'folders' => array(),                 // Folders in the current folder 
    'files' => array(),                   // Files in the current folder 
	'empty' => 0,                         // 0 if the folder is empty and 1 if it contains content
	'count' => 0                          // Number of items in the current folder
);

Relevant variables to use in the files.html template:

array(
    'name' => 'teszt',                      // The name of the file name
	'title' => 'Sample document',           // The tag of the file
	'alias' => 'teszt-docx',                // Alias from file name
	'filename' => 'teszt.docx',             // Name of the file
	'date' => '2020.12.31 13:59',           // Date the file was created (in WordPress format)
	'icon' => 'http://<path>/doc.png',      // The file icon
	'ext' => 'docx',                        // The type of file
	'size' => 13875,                        // File size (bytes)
	'size_text' => '13KB',                  // File size readable
	'script' => '',                         // If the link is hidden, the script is required to download 
	'url' => '',                            // Link to file for simple download, otherwise '#'
	'download_title' => '<title> download', // Text related to the download
	'download_text' => 'Download'           // "Download" text from language
);