How to Edit HTML in WordPress?
WordPress is an easy-to-use platform that you can utilize without touching a single line of code. But, knowing how to edit HTML in WordPress is a good skill to have under your belt.
With the knowledge of editing code, you can troubleshoot issues or perform advanced customization to improve your WordPress site.
This article will talk about why editing HTML in WordPress is needed and how to do it right.
Is It Necessary?
WordPress works amazingly out-of-the-box, meaning you can have a beautiful and functional website without writing any code.
In fact, WordPress has a huge collection of themes and plugins to tweak your website easily. So, you don’t really need to know how to edit HTML in WordPress.
If you want to change the appearance of your website, you can use and customize the preinstalled theme or install a new one from the WordPress directory. In addition, to add more functionality to your website, installing plugins could be one of the best solutions.
In short, leaving the WordPress source code alone is fine for most situations.
However, there are times when you need to edit HTML in WordPress because it might be the only way.
For example, when you want to do advanced theme customization or add HTML effects on your posts like attractive highlighted text.
Keep in mind that editing code in WordPress incorrectly will cause more harm than good. Do it carefully.
Pro Tip
You can check out our article about WordPress vs HTML to understand the difference between them when creating your website.
Things to Consider
Editing the WordPress source code is a serious task. You should minimize the risk whenever you can.
To do that, you should consider what your goal is, what tools to use, and how much time you have.
Ask yourself: what is your motive? Do you want to make changes for testing, learning purposes or advanced customization?
If you want to test things out, creating a WordPress child theme is highly recommended. In case anything goes wrong, it won’t affect your website. Apart from that, playing around with a child theme allows you to see if the modification is like what you expected.
You can also try out certain WordPress functions for learning purposes. Remember, you should narrow down your scope, touching only the part you want to learn. Not only will it save your time but it will prevent you from stumbling into unnecessary problems.
Editing the WordPress source code requires you to have a text HTML editor like Notepad++ for Windows or Text Wrangler for Mac. You also need to prepare an FTP client like FileZilla and a modern browser like Google Chrome.
The last but most important thing is deciding how much time you want to spend on the task.
Typically, editing the WordPress source code by yourself is fairly time-consuming. So, if you think you don’t have time to do it, hiring a professional can be a wise option.
Editing Source Code in WordPress
As you might know, WordPress uses four different programming languages: HTML, CSS, PHP, and JavaScript.
Each language has its own code and serves different functionalities. For example, HTML handles the content structure and CSS manages the appearance. That being said, you might need to perform certain operations by using a specific set of code.
Now, let’s explore more on how to edit code in WordPress.
How to edit HTML in WordPress
As previously stated, HTML — stands for HyperText Markup Language — controls the structure of content.
You can add any type of content like text, images, videos into your WordPress posts. You would usually do this from the WordPress editor.
WordPress has two kinds of editors: a visual and text (HTML) editor. In the classic editor, you can switch from the visual editor to the HTML editor easily because they are located side by side. But, that is not the case with the newly introduced Gutenberg editor. There are two ways to switch to the HTML editor:
- Clicking on the three-dot menu button on each block
- Clicking on the three-dot menu on the upper left-hand side for editing the entire post
This is an example of how to edit HTML in WordPress using the Gutenberg editor: And this is the result:
So, you can edit code in WordPress using the two ways above.
But, how to edit HTML on your homepage? Basically, you can add custom HTML from the widget areas. Go to Appearance -> Widget.
From the widget areas, you can edit the HTML of the available WordPress widgets or add more from the Custom HTML menu.
To edit HTML, you need to choose the targeted widget first, make changes and save it. On the other hand, you can add new widgets from the Custom HTML menu. Depending on your activated theme, the options may vary. For example, using the Twenty Seventeen theme, you have the options: Blog Sidebar, Footer 1, and Footer 2. Once you add the details, save it.
How to edit PHP and CSS in WordPress
CSS (Cascading Style Sheets) applies the style to HTML. It is responsible for determining how the web page is presented.
When you apply a WordPress theme, your website will have a specific layout, color, and fonts. If you don’t like a certain theme, you can use another one.
But, what if you want to keep the theme layout but want to change the font? Then, you might need to edit the PHP and CSS in WordPress.
Be careful, this method might be not suitable for WordPress beginners.
There are two ways to edit PHP and CSS in WordPress: using the WordPress code editor or FTP client.
1. The WordPress Code Editor
The first method accesses the WordPress code editor. Please note that you can only use this method if your website runs well – meaning your website doesn’t crash because of any malware attacks or failed updates.
Once you created a child theme, activate it. Then, you can go to Appearance -> Editor.
Make sure you select the targeted child theme you want to edit. For example, if you want to edit the footer, you can select footer.php on the right side. Then, you can add or edit the code in the Code Editor.
After editing the code, click the Update File button.
2. FTP Client
The next method uses an FTP Client.
While this might be a powerful method, we don’t recommend using it. It is unsafe and might put your website at risk if mishandling it. But, here’s how it’s done if you feel qualified, and trust your skillset.
First, you need to create an FTP credential login. Then, you can open your FTP client and enter the details of your FTP host, username, and password.
Once you manage to connect, you will have access to the WordPress source code. Select any files you wish to edit, right-click and choose edit. After you finish editing, you can save the changes.
Conclusion
You need a strong reason to edit HTML in WordPress. Most of the time, it is enough to utilize themes and plugins.
If you need to fix any problems or want to perform advanced customization, you may edit the WordPress source code. There are things to consider before doing it: your goals, the tools, and your time.
How to edit WordPress page's html code
I can’t get editable html code behind the page. I want to make some changes to the page. Web site is hosted in the remote server. Someone assigned this task. There is empty editor when open edit page as below image.
Also I added plugin and actived it but can’t get the result.
3 Answers 3
The picture you posted is of the WYSIWYG editor, which is only for adding content to the page.
If you want to edit the layout of the page itself you have 2 options —
Minor page edits to appear across all pages on the site — Go to Appearance -> editor -> page.php and then edit the code to suite your needs.
Large page edits to appear on one or two pages —
- Get access to the files
- Duplicate page.php with a different name
- Edit code
When you go to add a new page you should have an option to pick a page template. Choose the page template you just created.
How to Edit HTML in WordPress Code Editor (Beginner’s Guide)
Last updated on August 18th, 2022 by Editorial Staff | Reader Disclosure Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.
Are you looking for an easy way to edit HTML on your WordPress website?
HyperText Markup Language or HTML is a code that tells a web browser how to display the content on your web pages. Editing HTML comes in handy for advanced customization and troubleshooting issues.
In this article, we’ll show you how to edit HTML in the WordPress code editor using different methods.
Why Should You Edit HTML in WordPress?
WordPress offers thousands of themes and plugins to change the appearance of your website and customize different elements without touching a single line of code.
However, plugins and themes have their limitations and might not offer the exact features you’re looking for. As a result, you might be unable to style your website the way you want it to look.
This is where editing HTML is really useful. You can easily perform advanced customization using HTML code. It provides a lot of flexibility and control over how your site will look and function.
In addition, learning how to edit HTML can also help you identify and fix errors on your WordPress website when you don’t have access to the dashboard.
Note: If you don’t want to edit HTML, but still want full customization options, then we recommend using a drag and drop WordPress page builder like SeedProd.
That being said, let’s look at different ways to edit HTML in a WordPress website.
We’ll cover how to edit HTML using the block editor and classic editor, and we’ll also show you an easy way to add code to your site. You can click the links below to jump ahead to your preferred section.
How to Edit HTML in WordPress Block Editor
In the WordPress block editor, there are multiple ways to edit the HTML of your post or page.
First, you can use a Custom HTML block in your content to add HTML code.
To start, head over to your WordPress dashboard and then add a new post/page or edit an existing article. After that, click the plus (+) sign at the top left corner and add a ‘Custom HTML’ block.
Next, go ahead and enter your custom HTML code in the block. You can also click on the ‘Preview’ option to check if the HTML code is working properly and how your content will look on your live website.
Another way to add or change HTML code in the WordPress block editor is by editing the HTML of a particular block.
To do that, simply select an existing block in your content and then click the three-dot menu. Next, go ahead and click the ‘Edit as HTML’ option.
You’ll now see the HTML of an individual block. Go ahead and edit the HTML of your content. For example, you can add a nofollow link, change the style of your text, or add other code.
If you want to edit the HTML of your entire post, then you can use the ‘Code Editor’ in the WordPress block editor.
You can access the code editor by clicking the three-dots option in the top right corner. Then select ‘Code Editor’ from the drop-down options.
How to Edit HTML in WordPress Classic Editor
If you’re using the WordPress classic editor, then you can easily edit the HTML in the Text view.
To access the Text view, simply edit a blog post or add a new one. When you’re in the classic editor, click the ‘Text’ tab to see the HTML of your article.
After that, you can edit the HTML of your content. For example, you can bold different words to make them prominent, use the italic style in the text, create lists, add a table of contents, and more.
How to Edit HTML in WordPress Widgets
Did you know that you can add and edit HTML code in your site’s widget area?
In WordPress, using a Custom HTML widget can help you customize your sidebar, footer, and other widget areas. For instance, you can embed contact forms, Google Maps, call to action (CTA) buttons, and other content.
You can start by heading over to your WordPress admin panel and then go to Appearance » Widgets. After that, click on the ‘Plus’ icon in any widget area you want to add HTML code to.
The available widget areas will depend on the WordPress theme you’re using. For example, you may be able to add it to your footer, header, or other areas.
Next, search for the Custom HMTL widget in the widget block menu and click on it to automatically add it to the widget area.
After that, you can click on your Custom HTML widget and enter the HTML code. When you’re finished, don’t forget to click the ‘Update’ button in the top-right corner of the screen.
You can now visit your website to see the Custom HTML widget in action.
How to Edit HTML in WordPress Theme Editor
Another way to edit the HTML of your website is through the WordPress Theme Editor (Code Editor).
However, we don’t recommend that you directly edit the code in the Theme Editor. The slightest mistake when entering code can break your website and block you from accessing the WordPress dashboard.
Also, if you update your theme, then all your changes would be lost.
That said, if you are considering editing HTML using the Theme editor, then it’s a good idea to backup your website before making any changes.
Next, head over to Appearance » Theme Editor from your WordPress dashboard. You’ll now see a warning message about directly editing theme files.
Once you click the ‘I Understand’ button, you’ll see your theme files and code. From here, you can choose which file you’d like to edit and make your changes.
How to Edit HTML in WordPress Using FTP
Another alternative method to editing HTML in the WordPress theme files is by using FTP also known as file transfer protocol service.
This is a standard feature that comes with all WordPress hosting accounts.
The benefit of using FTP instead of the code editor is that you can easily fix issues using the FTP client. This way, you won’t be locked out of your WordPress dashboard if something breaks when editing HTML.
To start, you’ll first need to select an FTP software. We’ll be using FileZilla in this tutorial, as it’s a free and user-friendly FTP client for Windows, Mac, and Linux.
After selecting your FTP client, you’ll now need to log in to your site’s FTP server. You can find the login details in your hosting provider’s control panel dashboard.
Once you’re logged in, you will see different folders and files of your website under the ‘Remote site’ column. Go ahead and navigate to your theme files by going to wp-content » theme.
You’ll now see different themes on your website. Go ahead and select the theme that you want to edit.
Next, you can right-click on a theme file to edit the HTML. For example, if you want to make changes in the footer, then right-click the footer.php file.
Many FTP clients allow you to view and edit the file and automatically upload them once you’ve made the changes. In FileZilla, you can do this by clicking the ‘View/Edit’ option.
However, we suggest that you download the file that you want to edit to your desktop before making any changes.
After editing the HTML, you can replace the original file. For more details, we recommend following our guide on how to use FTP to upload files in WordPress.
Easy Way to Add Code in WordPress
The easiest way to add code to your WordPress is by using WPCode.
The team at WPBeginner designed this plugin so you can easily add code to your site in minutes, and we’ve made it 100% free to use.
It also helps organize your code since it’s stored in one place. Plus, it prevents errors that can be caused when manually editing code.
Another benefit is that you don’t have to worry about your code being erased if you decide to update or change your theme.
The first thing you’ll need to do is install and activate the WPCode plugin on your website. For more details, you can follow our detailed tutorial on how to install a WordPress plugin.
Once the plugin is active, you can head over to Code Snippets » Header & Footer from your admin panel.
Next, you can add the HTML code to your website in the header, body, and footer boxes.
For example, let’s say you want to display an alert bar on your website. You can simply enter the HTML code in the ‘Body’ box and click the ‘Save Changes’ button.
Besides that, you can add a Google Analytics tracking code and Facebook pixel in the header or add a Pinterest button in the footer of your website using the plugin.
With WPCode, it’s easy to decide where the code outputs as well. For example, you can automatically display some HTML code at the beginning or end of every post.
For more details, you can see our guide on how to add header and footer code in WordPress.
We hope that this article helped you learn how to edit HTML in the WordPress code editor. You may also want to look at our guide on how much it really costs to build a WordPress website, or see the most important reasons you should use WordPress for your website.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Редакторы
Редактор — это место, где добавляется содержимое для сайта или блога. В одном редакторе можно обрабатывать как записи, так и страницы. На этой странице описаны различные редакторы, которыми вы можете воспользоваться.
Редактор WordPress
Редактор WordPress, который также называют редактор блоков, был выпущен в конце 2018 года. Он предоставляет самые мощные и гибкие возможности редактирования WordPress. Им пользуются миллионы владельцев веб-сайтов по всему миру.
Каждый элемент сайта, например изображения, тексты, видеоролики и заголовки, добавляется посредством блока. Блоки — это отдельные структурные элементы, которые позволяют изолировать области содержимого для редактирования.
Редактирование HTML в редакторе WordPress
Существует два варианта редактирования HTML в редакторе WordPress.
На панели инструментов для каждого блока (которая появляется при нажатии на блок) есть кнопка с многоточием. В её меню есть опция Редактировать как HTML, которая позволяет редактировать HTML только для этого конкретного блока.
Редактировать HTML блока
Чтобы отредактировать HTML для всей страницы или записи, нажмите кнопку с многоточием рядом с кнопкой «Опубликовать» и перейдите в Редактор кода.
Редактор кода
Не весь код будет работать в режиме «Редактировать как HTML». Если код правильно сформирован и не содержит ошибок, убедитесь, что он включён в список разрешённых тегов HTML и не является кодом для ограниченного использования, как, например, JavaScript.
Переход на редактор WordPress
Если запись или публикация были в классическом редакторе до появления редактора WordPress, все существующее содержимое будет размещено в классическом блоке, где доступны многие функции классического редактора.
Нажмите кнопку с многоточием в правом верхнем углу классического блока, чтобы преобразовать содержимое в блоки.
Классический редактор
Классический редактор использовался по умолчанию для сайтов и блогов WordPress.com до выхода редактора WordPress (см. выше).
В редакторе WordPress есть классический блок, который повторяет функционал классического редактора в WordPress. Вот как это выглядит:
В классическом блоке применяются те же инструменты редактирования, что и в классическом редакторе.
Сторонние редакторы
Этот раздел руководства применяется к сайтам с тарифными планами WordPress.com Business или eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, эта функция доступна для плана Pro.
На сайтах со включённой поддержкой плагинов допускается установка сторонних плагинов-редакторов, таких как Elementor и WP Bakery. В некоторых случаях сторонние темы уже содержат собственный редактор.
Помните, что при использовании стороннего редактора лучше всего обращаться за поддержкой по связанным с ним вопросам к его разработчикам. Ссылки для прямой связи с ними часто указываются на странице настройки инструмента в консоли WP-Admin.