How to Safely Edit Your WordPress Theme Files

Sooner or later you might want to make a change to your WordPress website or blog that will require editing your child theme files. You may want to change the color of a link or a button, or you need to add a landing page template file, or you just want to change some text in one of your templates. There are many methods for editing your theme files, but you can safely edit your WordPress theme files with several plugins – Jetpack Custom CSS, Code Snippets, and WP Editor.

There is a native WordPress editor under Appearance > Editor which you can use to edit your files directly. I DO NOT recommend direct editing of your files. It’s just too easy to make a small typing error that can cause your WordPress install to white screen. Then you’ll need to upload a replacement file via FTP. And if you’ve been editing your files directly, you may not have an up-to-date replacement file, and furthermore, if you haven’t been using FTP, you may not have your FTP login credentials on hand.

So what do you do instead?

Edit CSS with a Custom CSS Editor

If you need to edit your style.css, you can use a Custom CSS editor to add the CSS styles without ever editing your theme files (style.css) directly. This is the easiest and safest method if you just want to add or change some font or color styles.

You no longer need a Custom CSS plugin. Just go to Appearance > Customize > Additional CSS, and add any CSS you want there.

Edit Theme Functions With Code Snippets

If you need to edit your functions.php to add a function or filter, it’s very easy to add each function as a stand alone piece of code using the plugin Code Snippets by Shea Bunge.  What I really like about this plugin is that each separate function or code snippet can be activated or deactivated separately, and it’s easy to see what you’ve added to your theme. You can also export snippets to use if you change themes. Install Code Snippets as you do all plugins. Using this plugin can be a safer option than directly editing your theme functions file.

(Before adding any code snippets or editing your functions.php, I recommend that you have a copy of your current theme, and that you have your FTP credentials handy. Editing CSS can only affect the way your website looks, but a wrong piece of code can cause your WordPress install to be unusable.)

Using Code Snippets is a lot like adding a new post.

1. There is a new menu item.
2. When you click Code Snippets, you are at a page that lists all the code you have added.
3. Click one of them or Add New to add a new piece of cod.
4. There are inputs for a Title, the actual Code itself, and a Description.
5. Add each piece of code in a separate snippet, as it will be easier to activate and deactivate each piece of code.

What if you want to do more theme file editing or add a new theme template file?

WP Editor

The last plugin – WP Editor –  is a recent find that is invaluable. This plugin replaces the native WordPress Editor under Appearance > Editor. It is so useful because you can upload and download files directly from your WordPress dashboard instead of using an FTP application. Also if you do edit directly in WP Editor (again, NOT recommended), you can revert to your previous saved file, in case of a mistake, using the undo button. Again install WP Editor as you do all plugins.

You can deactivate WP Editor, except when you are actually using it.

Once you activate WP Editor, you will see a new Menu item, WP Editor. Here you can change the settings for the plugin. You can select an editor theme (color scheme), if you like, and also change some settings to limit files that are accessible, and which users can access the editor. You can also select WP Editor to be the Text editor for your posts. This is really convenient, if you’re just pasting in code or making a few code edits. I found it very slow as an editor for a long post, however. Again, please don’t edit your files directly; see “How to Edit Your WordPress Theme Files” below.

You use WP Editor under Appearance > Theme Editor (new name), and when you go to the theme editor screen, it looks like this:

And here are some of the main features:

1. This is the new item added to the Admin menu. You can adjust the settings for WP Editor here.
2. Download the single file that you are currently viewing, which is item 7.
3. Download your entire theme folder as a .zip file; this way you always have a backup copy of your theme. You can unzip it to work on each file.
4. The undo button (in case you use the editor directly; again not recommended).
5. This is a list of all the files in your currently selected theme.
6. This drop down allows you to choose the theme you want to edit or download.
7. This is the theme file that you are currently viewing in the editor.
8. This allows you to first select and then upload a the file for your current theme. You may also upload a new file which is useful if you want to add a new template file, like a landing page.

How to Edit Your WordPress Theme Files

While this may seem like a slow method, it is safe, and will save you a lot of time over making a mistake.

1. First download all theme files in your WordPress theme folder. Make sure you are working on a child theme, if needed.
2. Next use a plain text editor (Notepad for Windows, TextMate or TextWrangler for Mac, Sublime Text 2 or Visual Studio Code for Windows, Mac, Linux) to edit the theme file, for instance style.css.
3. Then upload the file to your WordPress theme folder.
4. Reload your WordPress website to view the change.
5. Repeat for every change you need to make.

Please let me know if these plugins are helpful for editing your WordPress website theme files.