How to Edit HTML Code in Wordpress (PLUS- CSS, PHP, & Javascript)
16 February 2021

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. 
Edit your WordPress website's code by clicking on Appearance and then selecting Theme Editor.
  • 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. 
Editing HTML in WordPress using the theme editor.
  • 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 HTML in WordPress using the theme editor

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.”

How to edit JavaScript in WordPress through the theme editor

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 <script> tell your site to run JavaScript features, but if they’re entered incorrectly, they can disable your site’s functionality. Entering these tags directly in your header or in certain sections of the body within a page can disrupt the order in which your site’s elements are supposed to load, which could make the site freeze or fail to load at all. 

How To Edit in WordPress CSS

The appearance of your website is controlled with CSS code. This styling language guides fonts, colors, layouts, and other visual components.

For example, if you need to change the color of the text on your site so that it contrasts with the background in order to accommodate ADA requirements for people with visual impairments, you would use CSS to make these changes. 

You can also use CSS to customize a WordPress theme. Most themes are standardized with fonts and colors, but you can manipulate the CSS to tailor these elements to your brand. 

  • Like other edits, the first step to changing CSS code is to log in to your WordPress site using your administrative credentials.
  • Again, open “Appearance” and select “Theme Editor.”
  • Click on “style.css” on the sidebar in your navigator, or if you’re using the visual builder tool, select “Additional CSS.” 
Editing CSS code in WordPress using the theme editor.
  • This will bring up a box in which you can enter CSS code to change the appearance of elements on your site. 
Editing CSS code in WordPress using the theme editor.
  • When you’ve finished editing the code to achieve the desired look, click the blue “Publish” button at the top left of your screen, above the Advanced CSS toolbox. 

For Beginners and Non-Techies

Editing your website’s code in WordPress is not for everyone. Some people pick up coding fairly easily and choose to edit source code directly because they find it to be quicker and more efficient. Others are more visual by nature. WordPress offers a visual editing tool, as well as drag-and-drop editing tools including those described below. If you prefer to edit your website visually, by looking at the physical webpages while you’re editing, try one of these tools.

Edit HTML and CSS Using Divi

The Divi tool lets you build a site that’s more visual in nature. It’s easy to use and creates striking websites that enhance the user experience. To use this tool, your site has to be created using the Divi theme. 

Divi’s Visual Builder tool lets you edit your site on without the writing any code. When you log in to your site using your WordPress credentials, click “Use Visual Builder.”

Once you choose this option, you’ll see your website displayed with a variety of editing tools to add rows, add media, edit text, and perform other functions. 

Editing HTML and CSS in WordPress using Divi

Editing your website using the Divi Visual Builder is easy, as it lets you drag files directly from your desktop into your site. This tool is perfect for quick fixes, like adding new employees to your “About Us” page or adding new project pages. 

The visual builder also lets you edit text directly on the page. Simply click the text that you want to edit. You should see a cursor within the section that you’re editing. Once you make all your desired edits, click the green checkmark at the bottom of the screen and click the purple circle with the X. You can log out and load your page to double-check whether your edits have been saved to the page.  

Edit HTML and CSS with Elementor

Elementor is another theme that’s used to build WordPress sites without writing lines of code. It’s slightly more user-friendly than Divi, as the editing tools are located in the top toolbar, and they don’t take as long to find. 

To edit your site using Elementor, log in to your WordPress site using your administrative credentials. At the top of your page, click the “Edit with Elementor” button. You’ll see a toolbar on the right side of your screen with all the tools you need to edit your page. Once you’re done editing, just save your changes and log out of WordPress.

Editing HTML in WordPress using the Elementor editor

Elementor is easier to use than Divi because the navigation toolbar is more clearly labeled, and it’s easier to find the tools that let you edit your content. It also lets you drag and drop and has a variety of tools on the bar that you can use to add functions to your site, such as Google Maps. Elementor also has a mobile web-builder tool, so you can optimize your site for mobile devices.  

Edit HTML, CSS, and JS with Beaver Builder

Beaver Builder is another popular web builder that will let you allow you to edit HTML in WordPress with a graphical user interface or in a text editor. If you’re logged into WordPress, you have the option to edit your page directly. You should see a button on each page that says “Edit with Beaver Builder.” This option will let you drag and drop items into your website and edit text directly on the page. 

Editing HTML in WordPress using the Beaver Builder visual editor

To use the text editor, click “Pages” on the right side of your screen, choose the page you want to edit, and select it. Click the “Launch Page Builder” button to be taken to the editor. Make sure you’ve selected Homepage (Page Builder) as your theme. You’ll be taken to your website as it would be displayed in a typical browser, but there will be an icon in the top left part of the screen that says “Currently Editing Page.” 

Of all the page builders commonly used to build sites in WordPress, this one is probably the most user-friendly. As soon as you hover over a section of the page, you can see an outline that you can click. You don’t have to rely on a sidebar or a series of icons to determine what you’re editing. The “Update” button is also easy to find. 

Like Divi and Elementor, Beaver Builder relies on rows, columns, and modules to build components within your website. You can edit HTML in WordPress (and CSS) by simply dragging and dropping elements of the site to modify them. If you want to add a row, you can just drag it from the editing toolbar to add a new section. If you need to remove a section from your page, you can use the tools in this builder to delete rows and columns as well. 

One drawback to using web-building platforms is that it’s easy to make a mistake that damages your site and then accidentally save your changes. If you tend to be click-happy, it may be best to delegate more involved website edits to someone who has more familiarity with coding and/or site building. 

Summary

Basic knowledge of simple programming concepts can help you easily manage your website. It allows you to look through the code to determine why parts of your site aren’t functioning correctly, and it’s a faster method for making edits and updates. 

WordPress offers a variety of tools that let you edit everything from your basic HTML code to advanced JavaScript features, along with visual web-building tools that you can use to edit your site visually and see changes as they would appear in a browser. 

If you’re tasked with editing your own website, learning code can help save you time on edits and even help you customize and enhance your site and its functionality. 

Book a Demo

Take a deep dive into WatchTowerHQ with a member of our Customer Success Team.

Sign up here