It’s easy enough to edit WordPress HTML for individual pages and posts on your website, but how about HTML editing your WordPress theme source code? This is a little tricker, as editing the source code can break your website – however, here’s a quick guide to how it’s done.
Editing HTML source code with the WordPress theme editor
Using the WordPress theme editor in your dashboard is a straightforward method. This means you don’t need to use a plugin or third-party platform to edit your HTML source code. Simply follow the steps below.
Step 1: Navigate to Appearance > Theme Editor.
Step 2: A warning message will appear asking you to confirm your understanding of editing HTML before you begin. Click I understand to get started.
Step 3: From the drop-down menu in the right-hand corner, select a theme you want to edit. Let’s say we want to edit the Storefront theme.
Step 4: A new screen will appear. From the list on the right, select a specific theme file that you want to edit.
Please note that the files displayed will depend on your theme. However, there are common points in all themes. For example:
- Index.php
- Header.php
- Footer.php
- Style.css
- Function.php
Step 5: Make changes to the HTML code. Please be careful, because even one wrong comma or dot can destroy your website.
Step 6: Click on Update file to save your changes.
Note that WordPress will prevent you from saving your edited HTML if it detects errors. In this case, check your HTML again and save it again. This method is considered safer than the other 2 methods presented below, but we’ll go through them anyway for good measure:
Editing HTML source code with FTP
FTP stands for File Transfer Protocol, and editing the HTML source code of WordPress with an FTP client is another possibility if you want an alternative. FileZilla is considered the most secure and user-friendly FTP client, so that’s what we’ll be using for this tutorial.
Step 1: Download FileZilla and install it on your computer.
Step 2: Now open FileZilla.
You will need to enter your FTP credentials such as username, password and hostname, which you can easily find in your hosting account. Press QuickConnect to connect to your server.
Step 3: You should then see a list of your website’s files in the right pane.
Open the folder public_html. Your files and directories are located there.
Step 4: In the public_html folder, locate the wp-content folder, which contains all of your website’s installed themes. You should scroll down to see it.
Step 5: Within the wp-content folder, select the themes option.
Here, you can download and edit the themes you want to customize. For example, as you can see in the screenshot below, we have a theme called twentytwentyone.
Step 6: Open the theme folder and you will see a list of HTML files. To edit a file, right-click on it and select the View/Edit option. The file will then be downloaded to your computer.
Step 7: Edit the theme files with your own code snippet.
Step 8: Upload the file back to the same folder. The new file will overwrite the old one.
Now, you can go back to your public website and check the result.
Conclusion
Hopefully now you know how to edit HTML on your WordPress site, including individual pages, posts and via the source code. While editing HTML in pages or posts doesn’t require much effort, editing the source code can be a challenge.
