How to Edit HTML in WordPress Code Editor (Beginner’s Guide)
Last updated on May 5th, 2023 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 in WordPress is by using WPCode, the best code snippets plugin on the market.
The team at WPBeginner designed this plugin so that even complete beginners can add custom code to their site in minutes. Plus, there’s a lite version of the plugin that’s 100% free to use.
It 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 free 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 the 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 существует несколько удобных, правильных и неудобных, неправильных способов. В этой статье я расскажу вам про все эти способы. И все они могут пригодиться на практике.
Добавление кода в виджет
Виджеты в WordPress можно использовать для того, что добавить код на сайт. Для этого подходят виджеты «HTML-код» и «Текст». Благодаря такому способу можно установить какой-либо HTML код в любой области виджетов, предусмотренной активированной темой. И если этот код предусматривает вывод какого-либо элемента, то он будет виден.
Для тех, кто не знает: виджеты находятся в пункте «Внешний вид», подпункте «Виджеты». Нужно лишь переместить мышкой виджет «HTML-код» или «Текст» из области «Доступные виджеты» (слева страницы), в какую либо область справа страницы. Затем в него можно вставить текст и сохранить с помощью соответствующей кнопки.
Если используется виджет «Текст», то код нужно добавлять во вкладку «Текст», а не «Визульно».
Но удобнее, всё-таки, использовать виджет «HTML-код», который специально для этого и предназначен. В нём всего одна вкладка, а также есть подсветка синтаксиса.
Иногда возникает необходимость добавить в виджет PHP код и сделать так, чтобы он работал. В этом случае придётся пользоваться дополнительным плагином, который создаст новый виджет «PHP-код».
Плагин называется PHP Code Widget и ссылка на него ниже.
Добавление кода в настройки темы
Ещё один способ добавить код в WordPress — это внедрить его в настройки дизайна. Подойдёт для добавления своих CSS стилей, а в не которых случаях (в зависимости от темы) и других видов кодов.
Для интеграции перейдите в пункт «Внешний вид», подпункт «Настроить». Вы увидите секции с опциями слева. Откройте «Дополнительные стили».
И вставьте CSS код в поле. Не забудьте сохранить всё кнопкой «Опубликовать».
А если нажать на кнопку с иконку в виде шестерёнки, то можно будет ещё и просто сохранить изменения, без публикации, и даже запланировать их публикацию на указный день и время.
Некоторые темы в своих настройках позволяют добавлять и другие типы кодов в разные области сайта. Например, тема Frontier, которая используется на моём сайте, имеет специальное поле для вставки кода в область сайта head.
Настройки тему могут находиться в пункте «Внешний вид», либо вынесены в отельный пункт. В разных темах это может выглядеть, конечно же, по-разному, и не обязательно так, как у меня на скриншоте. А в некоторых темах этого вообще может и не быть.
Добавление кода с помощью плагинов
Универсальный способ добавить код в WordPress — это использовать плагин. И есть несколько вариантов.
Во-первых, рекомендую простой плагин Head, Footer and Post Injections. После активации перейдите в пункт «Настройки», подпункт «Head and footer». И тут вы увидите возможность добавить любой код в любое место сайта: в шапку, подвал, записи, страницы. Кроме того, есть дополнительные опции, вроде включения добавленного кода только на некоторых устройствах или типах страниц.
Есть, что изучать в этом плагине. Только один недостаток — всё на английском языке. Скачать можно по ссылке ниже.
Ещё один способ добавить код в WordPress, это плагин My Custom Functions. Он решает задачу интеграции PHP функций, и добавляет их так, будто они были написаны в файле темы functions.php. При этом ни обновление темы, ни даже её изменение данную интеграцию не нарушает.
Работу этого плагина я рассматривал на примере добавления в тему функции для реализации чек-бокса соглашения на обработку персональных данных в форме комментариев WordPress.
Скачать плагин можно по ссылке ниже.
После активации плагина, перейдите в пункт «Настройки», подпункт «PHP inserter». Включите применение кода и добавьте свою PHP функцию.
Добавление кода в файл темы или плагина
Вначале я писал о том, что есть правильные и неправильные способы добавить код в WordPress. Как раз таки сделать это непосредственно в файл плагина или темы — является самым неправильным методом, но рабочим. Иногда это бывает единственным способом, и поэтому на практике, всё-таки, используется.
Вся неблагодарность метода в том, что при первом же обновлении продукта внедрённая инъекция исчезнет и её придётся создавать заново. Поэтому нужно иметь копии изменённых файлов и вручную их заменять после обновления, что очень не удобно.
Итак, чтобы добавить код в WordPress прямо в файл, нужно перейти в пункт «Внешний вид», подпункт «Редактор» (если речь о теме) или пункт «Плагины», подпункт «Редактор» (если речь о плагине).
Сначала вы увидите пугающее предупреждение, где нужно нажать на «Я понимаю».
И теперь перед вами откроется редактор. Здесь в списке сверху можно выбрать редактируемый продукт (тему или плагин), в колонке справа выбирается файл, а в самом центре редактор с поддержкой синтаксиса кода.
Кроме этого, добраться до файлов тем и плагинов можно через файловый менеджер или FTP подключение. Плагины хранятся в папке wp-content/plugins, а темы в wp-content/themes. Каждый плагин/тема в отдельной папке.
Где в WordPress хранятся страницы
Как на сайте WordPress создавать страницы, чем они отличаются от записей и где хранятся? Выясним, какие ключевые характеристики присущи этому типу публикаций ВордПресс и как ими управлять.
Что такое страницы в WordPress
WordPress позволяет пользователям создавать два вида публикаций на сайте – страницы и записи. Страницы, как правило, используют для отображения статичного контента, хотя по своей природе, они не являются статическими и могут быть обновлены владельцем сайта в любое время. Такую форму публикаций можно применять в качестве главной страницы сайта, для отображения контактов, навигационной карты и прочей редко изменяемой информации.
Для сайтов с редко изменяемой информацией возможно построение всей архитектуры сайта только на страницах, без использования записей. В таком случае все страницы будут иметь второй уровень вложенности вида названиесайта/название-страницы.html и при изменении разделов сайта не придется настраивать перенаправления со старых адресов страниц на новые.
Для чего предназначены страницы WordPress:
- содержат контент, который не зависит от даты публикации и не требует регулярного обновления;
- могут быть организованы иерархически, включать подстраницы или относиться к родительской странице;
- могут использовать разные шаблоны, отличающиеся от основного шаблона сайта.
Для чего не применяются страницы WordPress:
- они не связаны с записями, рубриками или метками;
- они не являются файлами, поскольку создаются динамически «на лету» также, как записи;
- в отличие от записей, страницы нельзя включать в RSS ленту новостей.
Где хранятся страницы в WordPress
Все публикации, созданные в WordPress, хранятся не в виде отдельных файлов, а в базе данных. Когда пользователь набирает адрес интернет-ресурса в браузере, сервер активирует выполнение PHP-кода, который обращается к базе и динамически считывает данные из нее. При этом страница формируется «на лету» и заполняется считанной из базы данных информацией.
Если на сайте установлен плагин для кэширования, страницы могут загружаться из кэша сервера либо браузера при повторном посещении (т.е для каждой страницы создается периодически обновляемый html-файл), но все изменения по-прежнему вносятся через админпанель. Отображение страницы на сайте похоже на запись за исключением отсутствующей даты публикации, комментариев и кнопок социальных сетей.
Редакции страниц
Несмотря на то что на страницах размещается в основном статичный контент, их можно редактировать и обновлять.
- Чтобы добавить страницу на сайт, в админке WordPress зайдите в меню «Страницы».
- Выберите пункт «Добавить новую».
- В поле для заголовка наберите название
- В редакторе добавьте нужный текст.
- Для размещения страницы на сайте нажмите кнопку «Опубликовать». После внесения изменений в текст, эта кнопка будет называться «Обновить».
- WordPress автоматически сохраняет различные редакции одной публикации, их количество отображается в поле «Редакции».
С одной стороны, это удобно для пользователей, поскольку защищает информацию от случайного удаления при выключении электричества или прерывании интернет-соединения. С другой стороны, все редакции вместе с текущей версией сохраняются в базе данных, что увеличивает ее размер на сервере хостинга.
Зайдите в phpMyAdmin с использованием учетных данных, которые вам предоставил хостинг-провайдер во время регистрации.
Выберите нужную базу данных (1) и перейдите в таблицу wp_posts (2). В окне будет отображаться информация обо всех страницах и заметках, созданных на вашем ресурсе:
- post_content (3) – в этом поле хранится содержимое публикаций;
- post_title (4) содержит заголовки страниц и заметок;
- post_type (5) определяет тип публикации, страницы отмечены значением page (6).
Обратите внимание, для созданной нами страницы с названием «Яндекс. Рефераты» в базе данных помимо отметки page существуют две редакции с отметкой revision (7). Чтобы не увеличивать размер базы данных, их можно удалить.
При большом количестве редакций это действие можно автоматизировать. Для этого зайдите на вкладку SQL (1) и наберите в поле для SQL-запросов команду (2):
DELETE FROM wp_posts WHERE post_type = «revision»;
Подтвердите удаление кнопкой «ОК», все редакции с пометкой revision будут удалены из базы данных.
Перед любыми операциями с базой данных обязательно сделайте ее резервную копию. Одна неправильно введенная команда способна испортить результаты вашей многомесячной работы (если в приведенной выше команде не указать тип поста как ревизию, удалятся все записи на сайте).
Ответы на вопросы
Как открыть HTML код нужной странички в WP,в какой папке он хранится?
Вордпресс формирует HTML файл при обращении посетителя к адресу странички, загружая его из базы данных. Исключение — папка с кешированными файлами, которая хранит временные HTML-копии страниц, которые создаются для более быстрой загрузки. Но все изменения все равно нужно вносить не во временные файлы кеша, а в HTML код, который хранится в базе данных.
Как в ВордПресс сайте найти и изменить текст главной страницы?
В администраторской панели сайта нужно зайти в раздел «Страницы» — главная страница будет отмечена меткой «Главная страница». При большом количестве страниц имеет смысл сначала заглянуть в «Настройки» — «Чтение» — там будет указано название главной страницы.
Где WP хранит изображения, которые находятся на страницах сайта?
При редактировании изображения в админпанели WP показывается ее адрес в файловой структуре сайта. По умолчанию изображения хранятся в папке wp-content/uploads/20ХХ — т.е. разбиты по годам и месяцам. Это удобно, если нужно найти, где находятся изображения за определенный период.
Как найти HTML в WordPress?
Самый простой способ — копируете содержимое папки /wp-content/themes/. И делаете поиск в этой папке по каким-нибудь кускам кода — класс, тег и тп.
Насколько я понял суть вопроса, вам нужно добраться до кода странички чтобы внаглую, зачёркнуто, цинично, зачёркнуто, немного его поправить. И тогда да, это не совсем очевидно. Дело в том, что CMS WordPress генерирует странички на основе составленных вами блоков и плагинов, посредством PHP и JS кода. Как, впрочем, большинство CMS. Это если вкратце.
Если нужно вставить какой то код помимо как в блоках конструктора, можно воспользоваться каким-нибудь site-wide плагином. Например Head & Footer Code. Он бесплатен, прост и удобен. Вот в него можно встроить любой код, хоть свой PHP или JS, ну, и естественно, HTML.