The WordPress content management system is an easy way to create a website without writing or modifying a single line of code, but if you have experience in the HTML markup language, knowing how to add and edit HTML codes in WordPress is important to benefit from your experience in this language to develop and improve your website. Troubleshoot and resolve some of the types of problems you may encounter while managing the site.
In today’s article, we will teach you how to edit HTML code in WordPress, and we will explain to you how to do it correctly in more than one way.
When do you need to edit the HTML on your WordPress site?
With the presence of this huge amount of free and paid WordPress templates and plugins ( WordPress plugins ) that have different features and characteristics, the times you will need to edit HTML code are few. Instead of making advanced customizations to your website template, you can install another template that meets your needs, and instead of Editing the code To solve a problem, you can install a plugin that will solve it for you automatically.
However, there are actually times when adding HTML code or making modifications to the code is better than using another template or installing additional components, and it is not possible to limit all of these reasons to one paragraph, because websites are built for different goals, so we will mention here the most important reasons. Which can make you need to add HTML code to your site or edit pre-existing code:
- There are no plugins that perform the task you want . Sometimes you may need to perform a precise task and there are no plugins that help you automate it.
- You need to make precise customizations to your site . The free templates available in the WordPress templates section on the official website provide relatively limited customization options, and you have to accept what is there or make modifications to the code yourself.
- Looking at and editing WordPress HTML code can help you troubleshoot issues with a site’s design and how elements appear on its pages when there’s no way to solve the problem with a plugin.
You may also need to modify the HTML code in WordPress in many other cases, and if you have good experience in managing websites using WordPress, you will know when you will need to modify the HTML code on your site yourself.
Read also: An explanation of HTML and CSS and how to use them
Edit and add HTML code in the component editor
There are several ways in the plugin editor in WordPress that enable you to edit and add HTML code to the page or article, and the first of these methods is through using the (Custom HTML) component, which is called in English (Custom HTML). This component enables you to add HTML code within the editing page in a similar way. How to add any text paragraph.
To use the Custom HTML component to add HTML code to a page or article, place the typing cursor where you want to place the HTML code, then click on the ( + ) button that appears next to the cursor, and enter the search box in the small window that shows the name of the component. Click on it as the following image shows.
A text box will be inserted where the typing cursor was. This box represents the Custom HTML component into which you can write HTML code.
Note that you can preview the code that you add in Custom HTML by clicking on the ( Preview ) button that appears above the component when you click on it, and you can also re-show the same code by clicking on (HTML).
For example, you can enter the following code and click ( Preview ), and you will see a list consisting of two items, which is the same result that the browser will show to the visitor when he visits the page.
The Custom HTML component will show you the previous code when you click (Preview), as in this image.
The component editor not only provides the ability to add custom HTML code, but also enables you to edit the code for the components that you insert on the page, such as images, paragraphs, lists, etc. That is, after you add a component to the page, you can modify it using HTML.
To do this, choose the component whose code you want to show and edit, click on the options button (three dots), then click (Edit as HTML) from the drop-down menu that appears.
The HTML code for the component will appear in a dedicated field where the component used to appear, and you will be able to make whatever modifications you want to it to better display the component to the visitor.
If you want to show and modify the HTML code for the entire content of the page or article that you are editing, you can do so by switching to the ( code editor ) by clicking on the options (the three dots located at the top right or left of the editing page), then choosing the option The appropriate one from the editor section from the drop-down menu that appears to you, as the following image shows.
Once you click on ( Code Editor ), the section of the editing page in which the components are located will change, as all elements will disappear and HTML code will appear in their place. You will be able to make the modifications you want to the code, and you will also be able to delete it completely and insert another code in its place.
Add custom HTML code to the sidebar
The component editor does not provide the ability to add HTML code to the sidebar or footer, but only to the section of the page that displays the article elements or content, because the editor is specialized in adding and modifying this section, but you can use (widgets) to add elements using HTML to the page in Sections other than the section in which the article is displayed.
Adding HTML code to the various areas (sections) of the user interface helps customize those areas to increase the conversion rate by attracting the visitor to perform the required actions, as you can insert the elements you want into the different sections of the user interface by using HTML code in them.
To add HTML code to the sidebar or footer in WordPress, go to the (Widgets) page by placing the mouse cursor on the theme and then clicking on the (Widgets) option.
On the widgets page, you will find a tool called ( Custom HTML ), and when you click on this tool, a small window will pop up asking you to choose the section in which you want to add the tool.
Depending on the theme you use you may be able to insert the code in the header, sidebar, footer, or only in some of these areas. In any case, choose the area where you want to add custom HTML code, then click on the ( Add Widget ) button as this image shows.
Note: You can also add a custom HTML widget to a section of the site through drag-and-drop, where you drag and drop the widget into one of the sections next to it, each of which represents a section of the site.
After you click the ( Add Widget ) button or add a custom HTML code widget via drag-and-drop, you can specify where you want the code result to appear in the area where you added it via drag-and-drop as well.
A custom HTML widget (or tool) will appear in the sidebar or footer section of the widgets page in the form of two fields in which the section title is entered in one of them and the HTML code in the other. Note that the text that you enter in the title field appears as it is to the visitor while the code is interpreted. Which you enter in the other field by the browser and the result is shown to the visitor.
After entering the address and code you want in the two designated fields, do not forget to click the (Save) button for the changes to be applied and published.
Notice how the result of the HTML code we entered in the previous image appeared in the sidebar when we opened the website’s home page
It is worth noting that you can add the HTML code you want and display the elements you want in the sidebar, footer, or header. If you want to add images, tables, or other elements, you can do so.
How to modify HTML code in the classic editor
If you are still using the classic editor to add and edit articles and pages on your site, you can show and modify the HTML code of the page by clicking on the ( Text ) tab located at the top of the editing area, and you can re-show the elements visually by clicking on the word next to it ( Visible ). These two options switch between displaying the content in the form of HTML code or visually (as it will be displayed to the visitor), and you will be able to make modifications to the content in both cases.
It is worth noting that the classic editor does not provide the ability to modify the HTML code of a single element or component individually, as the component editor does. Rather, it provides editing and adding to the code in the manner we have just explained above.
How to modify the HTML code of the template
WordPress templates are built using HTML, CSS, and other languages, and you can make modifications to the template in WordPress if you want, although we do not advise you to do so, because any mistake you make while modifying the template code can destroy your website and prevent you from accessing its WordPress control panel. Also, when you update the template, you will lose all the changes you made to it.
In any case, if you would like to make modifications to the template code, we advise you to make a backup copy of your site before starting to make modifications, and you can learn how to make a backup copy of the site by reviewing our article in which we explained several ways to do this in detail and practically ( Explanation of making a backup copy of your site ) .
To view the code of the WordPress template you are using and make modifications to it, go to the template editor by clicking on the (Theme Editor) option that appears in the drop-down menu when you hover the mouse cursor over the (Appearance) option in the side menu in the WordPress control panel.
A small window will appear telling you that it is recommended that you do not make modifications to the template files directly, and that making mistakes here may crash your site and prevent it from working properly.
Once you click on the ( I understand ) button, the template editor page will appear to you, which enables you to modify the codes of all template files. The following image shows how to switch between files and where the code in the file appears.
Here we finish explaining how to modify the HTML code in WordPress in several ways that work on various sites, and we point out that there are other methods that provide the ability to modify the code in WordPress, but the methods that we have explained here are the best, easiest, and safest methods.
In conclusion, we would like to draw attention to the fact that hiring a WordPress developer to make the modifications you want is a better option than modifying the codes of the template files yourself if you do not have much experience in the languages that were used to develop the template.
