WordPress becomes popular due to its easy to use interface. The design of WordPress is to eliminate the need for coding and make website creation easier. Then why make changes to a site built with WordPress? HTML (Hypertext Markup language) comes in handy when adding more functionalities, advanced features or troubleshooting issues of your site by editing its code. There are many ways to edit backend code and in this article we will explain various methods to edit source HTML code in WordPress.
Why to Edit Source HTML Code?
There are lot of limitations with the plugins and themes WordPress offer for customizing site elements or changing appearance. To style your website the way you want requires editing the HTML code in WordPress to get the exact features you are looking for in the site. Thus, this provides control and flexibility of how your site would look, function or also being able to identify and fix likely errors to occur. Here are some of the simple cases you need to edit the source HTML:
- You want to change the font family of a paragraph element on a particular page.
- Need to copy and paste the entire post content and modify the code.
- Wanted to add custom CSS class to few elements on the page.
How to Edit Source HTML Code in WordPress?
Depending upon the need, you can one of the following methods to change the site’s appearance using HTML editing. We have covered various options including ways to insert HTML code, though these are not actually editing existing code.
1. Editing Code in Gutenberg Block Editor
Gutenberg block editor makes it easy for editing source HTML in visual mode. Once the raw HTML code of the WordPress site is visible, proceed with editing by changing the text styles, adding hyperlinks or any other code of choice in your page/post. But first, there are three ways you can edit a page or post in Gutenberg, and here are they:
1.1. Editing HTML of a Particular Block
Let us say, you have a paragraph block and want to edit its source HTML code. First, select the block you want to edit and click on the three dots of the menu. Choose the “Edit as HTML” option as shown below:
You will see the source of the selected elements and can edit it within the editor.
When done with the code editing, click the three-dot menu and select “Edit Visually” to return to your textual/initial view.
1.2. Editing the HTML of Entire Page/Post
Locate the threes dots at the top right corner of your current page or post and click on it. From the drop-down menu options, choose the “Code editor”.
In this way, you can view the source code of your entire content and edit them. after finishing editing, again click on the three dots and select the “Visual editor” to exit. Alternatively, you can click on the “Exit code editor” option to close the code editor.
1.3. Inserting Custom CSS to Elements
Gutenberg also allows you to add custom CSS class to any block on the page. Select the block and go to “Block” section in the right sidebar. Scroll down and add your custom CSS class in “Additional CSS class(es))” section. You can add multiple CSS classes by separating them with comma.
After updating or publishing your post, go to “Appearance > Customize > Additional CSS” section. Here, you can add your custom CSS for the class you have added in the editor. you can preview the live changes and publish the changes when you are done.
1.4. Inserting Code Using Custom HTML Block
This method requires adding content to your page or post by writing the HTML code, usually from scratch.
- Start with clicking the plus (+) sign at the top left side of your existing/new page or post.
- You would see the “Custom HTML” under the ‘Widgets’ category of the menu.
- Alternatively, you can look up the “Custom HTML” by entering the keyword into the search box.
- Then, click on it and start writing your HTML code.
- Use “Preview” tab to check for the visual appearance of your live site as you code.
2. Edit Source HTML Code in Classic Editor
If you are using the classic editor in your WordPress site, the text view is what you need to access and edit the HTML code of the post/page. Just click the “Text” tab of the classic editor to start making code changes, and you can switch back to normal view after editing by clicking the “Visual” tab.
Frequently used HTML tags are available as menu buttons for use during your site editing.
3. Insert HTML Code in Widgets Area
Similar to using custom HTML in content area, you can use the same block to insert your HTML code in widgets area. You use the “Custom HTML” in widgets to customize the header, sidebar, footer or other sections of your WordPress site.
- From your WordPress dashboard, select “Appearance” and then click on “Widgets”.
- Depending on the theme you are using, expand any of the widgets “drop-down” tab and click the + icon that says, “Add block”.
- Then choose the “Custom HTML”.
- Type in your HTML code and finally click on “Update” to effect the changes you made to the live site.
4. Edit HTML Code in Theme and Plugin Editors
Though, this isn’t quite recommendable since any slight mistake during theme editing might render your website un-functional. You should back up your site before changing, and any update you carry out on the theme after code editing result in losing all the changes made. Alternatively, use child theme so that updating parent theme will not impact your changes in child theme.
- To begin with, click on “Appearance” and then “Theme Editor”.
- You would get a warning message and clicking the “I understand” button gives you access to make Theme changes.
- With the theme editor interface shown, click on the file you want to work on, and start editing its HTML codes.
- Once done with all editing, kindly click on the “Update File” to save your changes.
Similarly, you can edit plugin’s files under “Plugins > Plugin Editor” section. Remember, these editors generally contain CSS and PHP files for your theme and plugins. You can edit the CSS and update HTML inside PHP files to modify HTML elements.
5. Edit HTML Code using FTP or File Manager
The File Manager app in your hosting panel is a standard feature available for all sites developed with WordPress. It is an alternative and much preferable to the above-listed ways to edit HTML in WordPress.
- Start by logging in to your hosting account with the login details. If you are using cPanel, login to your cPanel with the URL: yoursitename.com/cpanel.
- You would see different folders or files that comprise your site once logged in.
- Locate & click on the “File Manager” to select the “public_html” folder.
- Choose “wp-content” and click on “themes”.
- Finally, tap the exact file you want to edit. For example, you may need to edit header.php file to make changes to the HTML in the header section of your site.
- Choose the character encoding and then click on the “Edit” button to proceed.
- There is a better option to the “Edit”, which is the “Download”. It is advisable to use it because convenient or proper editing is obtainable on your personal computer. after finishing the editing, upload the file back to replace the current theme folder.
Again, WordPress themes and folder will not have many HTML files. You need to edit the HTML content inside correct PHP files to achieve required feature. Instead of using File Manager app, you can also use FTP to remotely login to your server and edit the source files.
6. Using Plugin to Edit Code
We recommend using one of the above methods for editing or adding HTML code in your WordPress site without using any third-party plugins. However, plugins can help in organizing your changes, especially if you are inserting plenty of HTML in posts content. There are different types of plugins available in WordPress repository and you can use them depending upon the purpose:
- Insert HTML Snippet – this is a simple plugin to create HTML widgets and insert anywhere in content and widget area.
- Insert Header and Footer – this is a useful plugin to insert code in header and footer area of your site.
- Code Snippets – if you are looking for editing functions.php file and apply a new function throughout your site, then this plugin is for you.