1. Home
  2. WordPress Tutorials
  3. How to View and Edit WordPress Theme Files

How to View and Edit WordPress Theme Files

Themes, also known as templates, are skins you use to change the appearance of your WordPress website. With a couple clicks of the mouse, you can shift from a plain white design to one of spectacular color and features. However, not all themes are perfect for every design or topic. This is when modification comes into play.

By modifying the theme’s files, you can customize a WordPress website further. Changing font colors, adding image placements and much more can be done by direct editing.

In today’s tutorial, I’m going to show you how to view and edit WordPress theme files. It’s a simple way to effectively make changes to the functionality of your website.

Finding WordPress Theme or Template Files

The hardest part about editing themes is that developers don’t always design them the same way. Sometimes a creator will name a file something different than what another would use. For this tutorial, I’m demonstrating a plugin called, “What The File.”

This plugin will add a feature to your top WordPress bar that allows you to see the file name that is in use. It’s a handy tool if you’re unsure about which file types you need to change to alter the appearance of your site.

From WordPress, go to the Plugins section and install “What The File.”

What The File

Once you activate the plugin, you can visit your website. On the top tool bar for WordPress, you’ll see a feature for What The File. Click this tool to display the file types that are being displayed.

Click WTF

Click “Template Parts” to see all the files related to the page you’re viewing. These are the sections you’ll edit if you want to make custom changes in code.

Template Parts

You may want to write the parts of your theme to make it easier to edit later. As you can see from the image above, there are a total of three parts that are going into the front page of this particular website.

  • front-page.php
  • content.php
  • navigation.php

All three of these files are used to create the homepage of the ColorMag theme. Your templates may be very much different depending on the developer.

But what theme are you currently using? This tool doesn’t tell you that, unfortunately. To see what theme your site is running, go into the Appearance area of WordPress and note the theme that displays, “Active.”

Active Theme

Editing the Theme’s Files

It’s important to note that any changes you make to a theme may be overwritten should that template receive an update from its developer. However, many website owners get around this problem by using child themes instead.

Also, always remember to create backup copies of your WordPress website before making any manual coding changes. The last thing you want to do is break your site because of bad or incorrect input. A backup will give you the means to recover quickly in the event anything goes wrong.

With that being said, let’s take a look at how you can edit the files of your template.

Using cPanel’s File Manager

An easy way to access the files of WordPress is through cPanel’s File Manager. This is an editing tool that is built directly into your hosting platform and comes with a variety of features. In fact, you can make an entire backup zip file of your site within File Manager.

To open this tool, click on the “File Manager” link within cPanel.

File Manager

This will open a window containing all directories and files of your hosting account. Click the folder labeled, “public_html.” This is where your website is located.

Public HTML

Now, most of the edits you’ll probably wind up making will be for the specific theme you’re using. Double-click into the “wp-content” directory.

WP Content

Click into the directory labeled, “themes.”

Themes

Click into the theme directory of the template you’re using. This is the theme you found earlier in the WordPress Appearance section.

Theme Directory

To open the File Manager editor, select the file you want to edit and click “Edit.”

Edit File

A new window will appear allowing you to select the editing method you wish to use. In most cases, you’re simply going to use the “utf-8” encoder built directly into cPanel. From this screen, click the “edit” button to access the file.

Edit File Button

A new window will appear of the coding for that particular file. From here, you can make your adjustments in code to customize your site. When you are done with your code adjustments, click the “Save Changes” button on the top right.

Save Changes Button

Your modifications will then become immediately live on the website.

Using WordPress Editor

WordPress comes with a basic code editor built into its framework. This gives you direct access to theme files so you can make adjustments. However, there are two main disadvantages to using this editor: it’s harder to make backups and you don’t have full access to all website files.

By design, the editor only gives you access to files that pertain to the template. Which is good if that’s all you need to access. If you need to modify other files outside of the theme, you’ll have to either use the File Manager I mentioned earlier or FTP applications. I’ll explain FTP in a moment.

To access the WordPress editor, go to the Appearance area and click, “Editor.”

WordPress Editor

By default, the theme that is currently active in WordPress will be displayed in this screen. Click the file you want to edit in the right column of the editor.

Right Column

Perhaps one of the best ways to create a backup of the file you’re about to edit in WordPress is to copy and paste the original code into a text editor. For example, you can copy the code of the file you’re editing directly into Notepad if you’re using a PC and save it.

Make the coding adjustments you want in the main editing screen.

Main Editor Screen

When your changes are complete, click the “Update File” button on the bottom. Your changes will then be reflected onto the website.

Update File

Using FTP Programs

File Transfer Protocol, or FTP, is a useful tool if you want to edit files or create backups. These are programs that give you direct access to your hosting files. Although most don’t come with their own editing software, FTP programs still offer a way to dig deep into the workings of the site.

One of the more popular FTP programs you can use for free is that of FileZilla. This application supports Windows, Mac and Linux operating systems and is a quick and easy download and installation. Even if you choose not to use it to edit files, FileZilla is very useful if you want to upload images in bulk or create a complete backup of your site onto a computer.

To set up FTP, you will need to create connection accounts and passwords to access the server. Click “FTP Accounts” in cPanel to create connections to the website.

FTP Accounts

Customization is Part of WordPress

One of the biggest reasons why WordPress is such a powerful and popular platform for creating websites is because of customization. Whether you’re installing plugins for features or hand-coding elements, the system is quite flexible. Just make sure you’re making the right modifications. Adding too many plugins or using improper coding practices could lead to a compromised website.

How often do you find yourself activating new themes? What kind of features would you like to see in a theme instead of customizing code?

Author: Josh Dargie

My name is Josh Dargie and I’m the Operations Manager at GreenGeeks. I’ve been with the company since 2009. I have over 16 years of experience working with and for various web hosting providers specifically in development, day-to-day operations and customer service.

Updated on July 21, 2017

Was this article helpful?

Related Articles

Add A Comment