How to Edit WordPress HTML Code?
WordPress CMS has made it easier for non-coders to manage their websites. However, to control the appearance and functioning of your website, you need to edit WordPress HTML. If you are a non-coder WordPress user, this might sound scary, but we got your back. This how-to guide will help you apply various safe methods to edit HTML in WordPress.
These methods include:
- To add a custom CSS on your site, use either a plugin such as Simple CSS or the extra CSS section of your WordPress customizer
- To edit the HTML code for specific pages or posts, use the classic editor or the new block editor.
- If you intend to edit the Theme source code of your WordPress, apply a child theme. It is advisable you use a plugin for managing the code snippets, which you added to your theme’s functions.php file or <head>.
Here is how to go about in all the above methods:
1. How to Edit WordPress for Specific Pages or Posts
This is the easiest method to edit WordPress HTML, as you can get access to the source code for each WordPress page or post of your site. Luckily, you can use either the old classic TinyMCE editor or Gutenberg (the recent WordPress block editor).
i. How to Edit WordPress HTML in Gutenberg
Gutenberg allows you to use several ways to work with HTML.
If you aim to add your HTML code in a piece of content, AVOID trying to edit the entire source code of your page/post because that complicates everything. Instead, use the dedicated custom HTML block, and then paste your HTML there.
Nevertheless, some instances need you to edit the HTML of a specific block. For instance, if the block editor has a link and you are planning to add a no-follow tag, you must edit the HTML of that specific block.
You can use either of these two ways:
One, click on the options (three vertical dots) for a specific block, and then select the Edit as HTML choice:
As a result, you will be able to edit the HTML of that particular block.
Two, you can use the Code Editor to edit the HTML of your whole post. To access this tool, go to the primary Tools & Options drop down menu (three vertical dots) and click Code Editor. Alternatively, you can use the keyboard shortcut Ctrl+Shift+Alt+M for fast editing.
NB: When using the full code editor, you need to move around the entire markup for the block. For example-WP: Paragraph—>
ii) How to Edit WordPress HTML Code Using Classic Editor (TinyMCE)
This method is much easier. If you are a user of the older Classic WordPress editor (TinyMCE), it is possible to edit the HTML of your whole post in a click. Go to the Text tab and edit the HTML code of your post.
2. How to Edit the HTML/PHP Source Code of Your WordPress Theme
The aim of this method is to help edit the HTML code in your WordPress theme. However, unlike the first method, this method has higher stakes. The reason being, you can easily break your website even with a simple mistake.Although making this mistake harder to occur in recent versions, the chances increase when you edit the source code HTML of your website. Therefore, you should make sure your editing is safe.
Here are ways on how to edit the source code in your theme:
Using the Child Theme when Editing Direct Code
Instead of editing the “parent” theme, you should use a child theme when editing direct code in the theme files. Failure to use the child theme leads to overwriting any code changes in your next theme update. On the contrary, using a child theme enables you to update the parent theme while your code changes in the child theme remain intact.
Use of a Plugin
If you want to change the functioning of your theme, you need to edit the source code of your child’s theme.
Nevertheless, if your reason for editing the code is different, you should use a plugin. For example, if you want to add a snippet in the functions.php file of your theme. Alternatively, if you want to add a tracking script on your website <head> section.
For example, the best plugin for easy injection of code snippets where you want is the Header, Footer, and Post Injections plugin. Besides that, it enables you to manage the code snippets because the interface of this plugin features them in groups.
Likewise, the free Code Snippets plugin is ideal if you want to add a snippet code in the functions.php file of your child’s theme.
In short, if you are editing your WordPress HTML code for the addition of snippets in:
<head> section or,
Functions.php the file of your theme.
Use a plugin instead of direct editing of theme files because it makes the management of those snippets easier. It also prevents overwriting of those snippets during your theme update.
Using the In-Dashboard WordPress Code Editor
NB: If you want to the WordPress HTML code of your theme directly, you should start by creating a backup of your website. You can backup either the file you wish to edit or the entire website.
After that, go to the in-dashboard theme code editor by navigating through the appearance>>Theme Editor. Once the editor opens, you will receive a warning to create a backup of your site.
Click the “I understand” button to get access to the sidebar. Here, you can move between the code editor and various theme files to make your edits.
Using SFTP to Edit WordPress HTML code
The use of SFTP is an alternative to use the in-dashboard code editor. However, this method has two significant benefits:
You are free to use your ideal code editor.
In case of any accident that breaks something, you can correct the error instantly. On the contrary, if you are using your WP dashboard to edit the HTML code, there is a high probability you will break something, which might lock you out of your WP dashboard. Although this might not happen in the recent releases, you need to connect to the dashboard through SFTP to rectify the problem.
Next, go to the folder of your theme ./wp-content/themes/child-theme-name. Locate the file you would like to edit and then right-click on that file. Many FTP programs offer the option of editing the file, and they automatically re-upload the file after making the changes.
Nevertheless, you should download the original version of that file to your PC before making any changes. By doing so, you will be able to re-upload the original version of that file if you break anything.
3. How to Add Custom CSS to Your WordPress Site
If you want to add custom CSS to WordPress and not edit the code, avoid using the SFTP or in-dashboard code editor methods.
In this case, you should use the WordPress customizer. The benefits of using WordPress customizer are that it is easy to use and allows you to preview all your changes in actual time.
To do so, go to your WordPress dashboard>>Appearance>>Customize>> Additional CSS.
As a result, a code editor that allows you to add your CSS opens. Once you start adding your CSS, your site’s live preview automatically updates based on the changes.
You can also use the Simple CSS plugin to add your custom CSS. This plugin offers an option that is like that of WordPress Customizer. Besides that, it allows you to add custom CSS to specific pages or posts through a Meta box.
If you have tons of custom CSS to add, you can make a customized CSS stylesheet and then add it to your WordPress theme using wp_enqueue_scripts.
Conclusion
You can directly edit the WordPress HTML code of a page or post using the classic editor or the new block editor (Gutenberg).
To edit the source code of your WordPress theme, consider using a child theme and not editing the parent theme. In addition, you should use a plugin when adding snippets to the functions.php file or <head> for easy management of the snippets.
At Helpbot, services like creating a new site, moving to a new hosting provider or changing the domain are provided seamlessly without any hassles by our express WordPress Management Executives. We offer our services at different prices to suit your budget accordingly, take a look, and schedule a free call today!
