Do you want greater control over the design and functionality of your WordPress site? Learning to edit HTML is the solution.
HTML (HyperText Markup Language) is the coding language that organizes your content, instructing web browsers on how to display your pages. Directly editing HTML is beneficial for advanced customization, adding specific features, and resolving issues.
Many users at Canada Create™ express apprehension about modifying code, but editing HTML in WordPress is simpler than you might expect.
In this article, we will guide you through the process of editing HTML in the WordPress code editor using various methods.
Why Edit HTML in WordPress?
WordPress provides thousands of themes and plugins that allow you to change your website’s appearance and customize various elements without needing to write any code.
However, themes and plugins have their constraints and may not provide the exact features you desire. Consequently, you might find it challenging to style your website as you envision.
This is where HTML editing becomes invaluable. It allows you to implement advanced customizations easily, offering significant flexibility and control over your site’s appearance and functionality.
Learning to edit HTML can empower you to spot and resolve issues on your WordPress website, even when you can’t access the dashboard.
Important Note:If you prefer not to edit HTML but still want extensive customization options, we suggest using a drag-and-drop WordPress page builder like SeedProd.
Now, let’s explore various methods for editing HTML on a WordPress website.
We will discuss how to edit HTML using both the block editor and classic editor, and we will also demonstrate a simple way to add code to your site. You can click the links below to navigate directly to your preferred section.
- Editing HTML in the WordPress Block Editor
- Editing HTML in the WordPress Classic Editor
- Editing HTML in WordPress Widgets
- Editing HTML in the WordPress Theme Editor
- Editing HTML in WordPress Using FTP
- Simple Method to Add Code in WordPress
Editing HTML in the WordPress Block Editor
In the WordPress block editor, there are several ways to modify the HTML of your post or page.
You can start by using a Custom HTML block within your content to insert HTML code.
Begin by navigating to your WordPress dashboard, then either create a new post or page or edit an existing one. Click the plus (+) icon in the top left corner to add a ‘Custom HTML’ block.
Now, enter your custom HTML code into the block.
You can also use the ‘Preview’ option to verify that your HTML code is functioning correctly and to see how your content will appear on your live website.
Another method to modify HTML code in the WordPress block editor is by editing the HTML of a specific block.
To do this, select an existing block in your content and click the three-dot menu. Then choose the ‘Edit as HTML’ option.
You will now see the HTML for that particular block. Feel free to edit the HTML of your content.
For instance, you can insert a nofollow link, modify the text style, or include additional code.
If you wish to edit the HTML for your entire post, you can utilize the ‘Code Editor’ within the WordPress block editor.
Access the code editor by clicking the three-dot menu in the top right corner and selecting ‘Code Editor’ from the dropdown options.
How to Modify HTML in the WordPress Classic Editor
If you’re using the WordPress classic editor, you can easily edit the HTML by switching to the Text view.
To access the Text view, simply edit an existing blog post or create a new one. In the classic editor, click the ‘Text’ tab to view the HTML code of your article.
Once you’re in the HTML editor, you can modify your content’s HTML. For instance, you can bold specific words for emphasis, italicize text, create lists, add a table of contents, and much more.
Editing HTML in WordPress Widgets
Did you know that you can insert and modify HTML code in your website’s widget areas?
In WordPress, utilizing a Custom HTML widget allows you to personalize your sidebar, footer, and other widget areas. You can embed contact forms, call-to-action (CTA) buttons, Google Maps, and various other content.
Begin by navigating to your WordPress admin panel and then go to Appearance » Widgets. Next, click the ‘Plus’ icon in any widget area where you want to add HTML code.
The available widget areas will vary based on the WordPress theme you are using. For example, you might be able to add it to your footer, header, or other sections.
Next, locate the Custom HTML widget in the widget block menu and click on it to automatically add it to your chosen widget area.
After that, click on your Custom HTML widget and input the HTML code.
After completing your edits, remember to click the ‘Update’ button located in the top-right corner of the screen.
You can now check your website to see the Custom HTML widget functioning.
Editing HTML in the WordPress Theme Editor
You can also modify the HTML of your website through the WordPress Theme Editor (Code Editor).
However, we advise against directly editing the code in the Theme Editor. Even a minor error can disrupt your website and prevent access to the WordPress dashboard.
Additionally, if you update your theme, any changes you made will be lost.
If you choose to edit HTML using the Theme Editor, it’s wise to back up your website before making any modifications.
Next, navigate to Appearance » Theme Editor in your WordPress dashboard. You will see a warning message regarding direct edits to theme files.
Once you click the ‘I Understand’ button, you will see your theme files and their corresponding code.
From this point, you can select the file you wish to edit and apply your changes.
Editing HTML in WordPress Using FTP
Another option for editing HTML in WordPress theme files is by utilizing FTP, which stands for File Transfer Protocol.
This feature is included with all WordPress hosting accounts.
Using FTP instead of the code editor allows you to easily resolve issues with your website. This prevents you from being locked out of your WordPress dashboard if something goes wrong while editing HTML.
To begin, you need to choose an FTP software. In this tutorial, we will use FileZilla, a free and user-friendly FTP client compatible with Windows, Mac, and Linux.
After selecting your FTP client, you will need to log in to your site’s FTP server. You can find your login credentials in the control panel of your hosting provider.
Once logged in, you will see various folders and files associated with your website in the ‘Remote site’ column. Navigate to your theme files by selecting wp-content » themes.
You will now see the different themes available for your website. Select the theme you wish to edit.
Next, right-click on a theme file to edit the HTML. For instance, if you want to modify the footer, right-click on the footer.php file.
Many FTP clients allow you to view and edit files, automatically uploading them once you’ve made your changes. In FileZilla, you can do this by selecting the ‘View/Edit’ option.
We recommend downloading the file you wish to edit to your desktop before making any modifications.
After you have edited the HTML, you can replace the original file. For further instructions, please refer to our guide on using FTP to upload files in WordPress.
Simple Method to Insert Code in WordPress
The simplest way to insert code into WordPress is by using WPCode, the leading code snippets plugin available.
Designed by the team at Canada Create™, this plugin enables even complete beginners to add custom code to their website in just minutes. Additionally, there is a free lite version of the plugin available.
It helps keep your code organized since everything is stored in one location. Furthermore, it prevents errors that may occur from manual code editing.
Another advantage is that you won’t have to worry about losing your code when you update or change your theme.
The first step is to install and activate the free WPCode plugin on your website. For more information, you can check out our comprehensive tutorial on installing a WordPress plugin.
Once the plugin is activated, navigate toCode Snippets » Header & Footerin your admin panel.
Then, you can add the HTML code to your website in the designated header, body, and footer sections.
For instance, if you want to add an alert bar to your website, you can easily input the HTML code in the ‘Body’ section and click the ‘Save Changes’ button.
Additionally, you can incorporate a Google Analytics tracking code, Facebook pixel, and TikTok ad pixel in the header. You can also add a Pinterest button in the footer of your website using a plugin.
With WPCode, you can easily choose where the code is displayed. For example, you can set it to automatically show certain HTML code at the beginning or end of each post.
For more information, check out our guide on how to add header and footer code in WordPress.
We hope this article has helped you learn how to edit HTML in the WordPress code editor. You might also want to explore our guide on adding HTML forms in WordPress, or discover the key reasons to use WordPress for your website.
If you enjoyed this article, please subscribe to our YouTube Channel for WordPress video tutorials. You can also connect with us on Twitter and Facebook.
