How To Edit HTML in WordPress (Plus: CSS, PHP, & JS)

What started as a tool for posting blogs has grown to become one of the most popular web-publishing platforms in the world. Many sources have estimated that about 20% of active websites are built and hosted in WordPress. Its platform has a variety of web-building tools and templates for people of all design abilities. The native theme editor even allows you to edit HTML code within the WordPress dashboard.

For novice web designers and people who have little experience, these tools can help you create a website without knowing coding languages, but it’s a good idea to have at least a basic knowledge of HTML.

Why Editing Source Code Is Important

WordPress templates use HTML code to design and lay out your website — this code acts as the backbone of your website, giving it structure. It’s a good idea to get familiar with the editor and gain knowledge of how to edit HTML in WordPress. This makes it easier to identify and fix problems within the site in the future.

Knowing how to edit source code also lets you edit your website directly in a browser and save it. You can always save the code to a Notepad file for backup, but editing it in a browser saves you from having to comb through lines of code to fix one small error on your page. 

An understanding of editing HTML in WordPress also comes in handy when you want to make significant changes to your website. When you understand how code is written and how it works, you can quickly make edits to your site that make it more functional and enhance the user experience. 

Fortunately, WordPress doesn’t require high levels of coding skill. There are plenty of various methods by which you can edit your code and make changes to your site. 

How To Edit via the FTP Editor

Many people use FTP editors to create and modify their websites. Unlike the WordPress dashboard, editing your code in an FTP site gives you access to all features of your site. This tool also allows you to build the site in a different program and add custom code if you so choose.

Another benefit of using an FTP editor is that your files are hosted on the FTP server, enabling you to edit them directly rather than having to log in to your WordPress dashboard to make changes. 

1. The first step is to enter the FTP username and password to log in to your FTP site.
2. Once you’re in the site, locate the file that you want to change. Most FTP editing programs use Notepad or a similar tool for HTML code. 
3. Open the file using Notepad or a similar program.
4. Locate the code you wish to change within the file and edit it.
5. Save the edited file onto your hard drive.
6. Upload it to the FTP site.

If you edited your code correctly, your website edits should appear as soon as you upload the code file to your FTP site. This method is also convenient because you can upload media in bulk, activate and deactivate plugins, install new ones, and uninstall old ones more easily than with other editing methods. 

How To Edit Source Code via the Theme Editor

For beginner and intermediate web designers with a basic knowledge of code, but whose knowledge is not advanced enough to design a site with high-level functions, WordPress lets you design and build your website using themes. 

Themes are professionally designed templates that can be used to customize your site with all the tools you need to make it functional, stylish, and consistent with your brand. WordPress themes are easy to edit, but the process may be a little different depending on which theme you use. To edit your HTML code through the theme editor: 

• Log in to your website using your admin credentials.
• Access the Theme Editor by clicking the “Appearance” box, using the menu on the right side of your screen and then clicking the “Theme Editor” subtask. 

• Once you click on this option, you’ll see a pop-up screen that contains all the code for the webpage that you’re editing. 

• If you’re using multiple themes on your webpage, or if you’re using a variation of an existing theme with the adult/child tool, you can use the drop-down box in the top right of your screen.
• Scroll through the code on your screen and edit your desired sections. Some themes will let you navigate through various parts of your site with the menu located under Theme Files. This can make it easier to locate the section of your website that you want to change without scrolling through pages of code. 
• Once you’ve made your desired changes, press the blue “Update File” button located at the bottom left of the code editor screen, as shown in the image above.

Not all WordPress themes feature the Theme Editor tool. If you can’t find the tool or don’t have access to it, check to see if the theme you’re using has a code-specific editor tool. It may take a little digging, specifically reaching out to WordPress or various message boards with specific questions about editing HTML code in your theme. 

To edit your code using the basic editing tools on the back end of your website, you can select the page that you want to edit from the menu on the right side of the screen and edit it by selecting the “Text” tab in your editor rather than the “Visual” tab.

How To Edit in WordPress JavaScript

If your website features anything other than a static page and images, it’s likely running JavaScript as part of the code. You can use this programming language to modify interactive features of your site. 

A lot of WordPress plugins that let you add features to your website have their own JavaScript code. If you want to modify the functionality of these plugins, you may have to edit the code, which is not always possible. It’s probably easier to find a different plugin offering your desired function.

You can also add your own custom JavaScript. 

• Find a plugin that allows you to add your own custom JavaScript code to your site, OR
• Open the functions.php file and use WordPress functions and hooks. This tool allows you to edit headers, footers, and various scripts within your website. 

To access functions and edit JavaScript, open your Theme Editor tool as detailed in the previous section. When you open the tool and edit your selected theme, all the functions that run JavaScript will be displayed on the right side of your screen under the header “JS.”

You can click on different functions, and you’ll be directed to the code that you wish to edit. Make all of your desired changes to your JavaScript and click the “Update File” button located at the bottom of your editing box. 

If you don’t have a lot of coding experience or aren’t comfortable with JavaScript, you should use plugins to edit these features. The script tags