How to Safely Edit Your WordPress Theme Files

Share this on:

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

custom css editor
Click for larger image

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.

code snippets editor
  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:

wp editor plugin
Click for larger image

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.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


photo of Marcy Diaz who owns Amethyst Website Design

Comments

8 responses to “How to Safely Edit Your WordPress Theme Files”

  1. Claire Avatar
    Claire

    Thank you so much! I’ve spent days trying to work out the best way to change little things like font size and I feel like you are the first person to explain that for someone who knows nothing about css! I’ve now managed to make the little tweaks to my blog that I’ve been trying to do for ages.

    1. Marcy Diaz Avatar

      I’m glad it helped you edit your website, Claire!

  2. Nefeli Avatar
    Nefeli

    Nice way to also edit your CSS!

    1. Marcy Diaz Avatar

      Thank you, Nefeli!

  3. Rosa Bosma Avatar
    Rosa Bosma

    Thank you for making such a comprehensive list! I use Cyberduck (FTP client) – for me it’s simply the leanest way to edit theme files. But of course, we all favour different methods (which may also change later on), and that’s why an overview is so useful.

    1. Marcy Diaz Avatar

      Thanks for sharing, Rosa.
      Of course, FTP is always an option. The point of the post was safe alternatives for people who don’t understand FTP.

  4. Mia Avatar
    Mia

    This is really a great article, i will have to start learning how to make my own css for my site
    Thanks for sharing. it just wonderful way of learning WordPress i like it.
    Does the Custom CSS plugin work on individual pages.
    i.e can I add style to a single page and not the whole theme?

    1. Marcy Diaz Avatar

      Yes, you can! You would just follow this tutorial, to get the post or page ID and add it in front of your styles.
      Add Unique Custom Styles to One WordPress Page or Post

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.