Saving files in WordPress using the Filesystem_API

When building plugins or addons, sometimes we need to save custom files within WordPress.

These can be custom JavaScript or CSS files that a user edited and are loaded to override core functionality.

In most cases inline styles and scripts are an option, but not always the most elegant way. Everyone has to decide that for themselves. (wp_add_inline_style) Not talking about performance between inline and external files here :)

Another option is the wp_head action:

add_action('wp_head','hook_css');

 

function hook_css(){


$output="<style> .wp_head_example { background-color : #f1f1f1; } </style>";


echo $output;

}

WHERE

Many ask where can or should I save files created within a plugin.

1. In the plugin folder ? Bad idea,  as that folder will be deleted on each upgrade of the plugin.
2. In a separate plugin, just for those extra files. That is an option, but many webmasters prevent writing to any other folder than the upload folder. Also adding a blank plugin to just add upload folders is not really optimal.
3. In the upload folder itself. Just like the name says, its the main folder to upload files to!

SECURITY

When dealing with file creation and uploads, security is always important. That relates to any other platform doing similar operations. A folder created within a plugin directory is not less or more secure than a folder created in the upload directory.

Its important to have the correct file and folder permissions set:

1. Files should have permissions not higher than 664 (start at 644)
2. Directories should have permissions not higher than 755 (start at 744) Try what works. The lower the more secure :)

There is a detailed article about permissions over at WordPress as well.

When it comes to creating files in PHP the term cross-site-scripting often comes up. When the system creates a file it is owned by the webserver and on a shared hosting account those files could be altered by another user on the same webserver. This could allow them to inject malicious code and compromise your sever.

That is why the WP_Filesystem was created, to make things more secure and make sure that the owner of files is correct.

CREATING FILES

WordPress provides a nice clean interface to create folders and save files to the upload folder. Here a simple example from one of my current projects.

Prepare the filesystem

require_once( ABSPATH . 'wp-admin/includes/file.php' );


global $wp_filesystem;

Get upload dir information and prepare directory to save to

$upload_dir = wp_upload_dir();

 

$dir = trailingslashit( $upload_dir['basedir'] ) . 'your folder/'; 
 

Check if file exists, create folder, delete similar and save.
In my case I am adding a custom key and the page id to the file.

$key = md5($js);

 

if (!is_file($dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js")) {                                
    
    WP_Filesystem(); 
    // Create main folder within upload if not exist

    if(!$wp_filesystem->is_dir($dir) )

    {

        $wp_filesystem->mkdir( $dir ); 
    }

    // Create a subfolder in my new folder if not exist

    if(!$wp_filesystem->is_dir($dir."/subfolder") )

    {

        $wp_filesystem->mkdir( $dir."/subfolder" ); 
    }

    // Delete similar files, might not apply to you

     foreach (glob($dir . "/subfolder/yourfile_" . get_the_ID() . "_*.*") as $filename) {

        unlink($filename);

    }   
    // Save file and set permission to 0644

    $wp_filesystem->put_contents( $dir."/subfolder/yourfile_" . get_the_ID() . "_" . $key . ".js", $js, 0644 ); 
    
}

If the direct way is not possible, you can also use or force the FTP approach
(request_filesystem_credentials).

This will check for the ftp credentials and request them with a form if needed.

if ( ! WP_Filesystem($creds) ) {

      request_filesystem_credentials($url, $method, true, false, $form_fields);

    return true;

}
 

This is just a very rough outline of how to do it, but should get you started.

Enjoy coding …