If you’re like me, you work on many WordPress websites. The account manager comes by your office and says, “Hey I Slacked the WordPress login info from the customer to you – looking forward to those updates they’re waiting for!”. You reply with “Oh thanks! And you got the FTP credentials or cPanel too, right?” Then come the grimaces and hints at getting the work done anyway.
Creating JS, CSS and PHP files in WordPress Without FTP
You would hope that you could do this from the Appearance>Theme Editor, but that is only for editing existing files. Then you try a file editor plugin, only to find it can’t reliably write back to the server. Here’s how you really create new files from within WordPress:
Step 1: Open the Theme Editor and Browse to the header.php File
If you are on a child theme, open the header.php of the parent, otherwise work within the active WordPress theme folder. In my case I was working with a Divi child theme (really nice resource at DiviReadyThemes), so the parent Divi theme folder is where I went.
Step 2: Add the PHP Touch Command to the Top of the File
At the very top of the file, add a line similar to this so that PHP will create the file as soon as the website is loaded at least once:
<?php touch('wp-content/themes/Divi_Child/custom-script.js'); ?>
Step 3: Load the Website Once, Then Remove the PHP Touch Line
Once you’ve saved your work from Step 2, Shift-Refresh the website in another tab one time. You can then refresh your Appearance>Theme Editor to confirm that the new file is present. Then, remove the PHP Touch line from the WordPress header.php file and save your changes.
Step 4 (Optional): Enqueue Your New File and Get to Hacking!
You probably want to use this new file somehow, such as enqueuing a custom script. Here’s the code you’d likely plop in your functions.php file of your theme:
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );
function enqueue_custom_scripts() {
wp_enqueue_script( 'custom-child-js', get_stylesheet_directory_uri() . '/script.js', array( 'jquery' ), '1.0', true );
}
Hope that helps you get your website updates done with a little less stress – happy hacking!