WP Thinker

The WordPress Playground

How to Edit HTML in WordPress

Edit HTML in WordPress

Changing HTML (HyperText Markup Language) code is something WordPress owners do often. After all, the markup language determines the structure i.e., the hierarchy of content on web pages. HTML also works in unison with two other markup languages, XML and CSS, the latter of which is defines styling information on webpages. Although not directly related, making edits to HTML is usually accompanied by tweaks to JavaScript and PHP, both scripting languages that can enhance the appearance or functionality of websites. With that said, let’s dive into how to edit HTML in WordPress.

Before you start

Although this warning applies to methods 1 and 3, they both have a cushion for errors and limit the harm you can do. Therefore, it’s primarily oriented toward users of method 2, since you’re accessing the WordPress source code without supervision or fail safes. This can crash your website, make it display the white screen of death, and lock you out of the WordPress Admin section.

Prevent dangers of incorrectly editing HTML in WordPress

Here’s what you can do to mitigate the risks of modifying HTML in WordPress:

  1. Make regular backups. This means using backup plugins for WordPress and creating duplicates of files you edit via FTP.
  2. Don’t edit your active WordPress theme directly. Instead, use a child theme.
  3. Create a staging environment. Optional.
  4. Copying a code snippet? Check the author or provider, and examine comments for experiences, corrections, or improvements.
  5. Writing your code? Do so in a safe environment, such as text editor. Use an online tags list (example) and its code checker to verify it works. This applies to code snippets, too.
  6. Using a WordPress.com hosted site? Ensure your code fits the allowed HTML tags depending on your payment plan.
  7. Exclude any JavaScript, PHP, and CSS that doesn’t belong.

1. Edit HTML in WordPress posts and pages

Here’s how altering HTML of parts or entire WordPress posts and pages works:

1. Using Classic Editor

Editing HTML via Classic Editor is straightforward:

  1. Open a page or post in Classic Editor.
  2. Spot the two tabs in the upper right corner of the sheet.
  3. You’re on the Visual tab so switch to Text.
  4. The whole page will be converted to HTML.
  5. Tip. You can switch to and fro Visual to get a preview and make changes.

2. With Block Editor/Gutenberg Editor

Things get slightly more complicated with Gutenberg Editor but for a good reason, as you’ll see. There are 3 ways to alter HTML code in Block Editor:

Add a new HTML block

This allows inserting snippets of HTML code anywhere on the page or post. Unlike Classic Editor, only that portion is converted to HTML; the others remain in Visual Mode. So after starting to edit a post or page, do this:

  1. Find the location you want to add the snippet to.
  2. Click the + icon below.
  3. A new empty block is created. You’re asked to select a type from the “Formatting” section.
  4. Select Custom HTML (you can search for it).
  5. Paste the snippet to the text field in the HTML tab.
  6. Tip. You can switch to the Preview tab to see the result without converting to Visual Mode.

Convert an existing non-HTML block

As you’ll see below, the post or page is written in HTML, you just don’t see it on the backend. Therefore, after clicking on any block while revising a page or post in Gutenberg editor, you can do the following:

  1. Spot the floating taskbar above the block. It’s in the upper left corner, if you use the Top toolbar.
  2. Click the 3 vertical dots menu then select Edit as HTML.
  3. The block is now transformed into its HTML version.
  4. Note. You’ll likely encounter the “This block contains unexpected or invalid content.” error. You have 2 options:
    1. Resolve (Recommended). WordPress will detect the problem and try to make a safe transition.
    2. Convert to HTML. WordPress converts the block unchanged. Only do this if your block contains nothing but text and/or minor formatting or you believe it’s an error.
  5. When you’re done tweaking, repeat step 2, then choose Edit visually.

Alter the HTML of the whole page or post

Block Editor, like Classic Editor, lets you transform the entirety of the post or page to HTML. It’s just as quick and simple, too; you merely have to do this:

  1. Begin modifying a page or post in Block Editor.
  2. Click on the cogwheel/gears icon (More tools & options) in the top right corner.
  3. From the drop-down menu, click on Code editor under “Editor”.
  4. The whole sheet is now transformed into HTML, title included.
  5. Once you’re done making modifications, do one of the 3 things:
    1. Click on Exit code editor in the top right corner.
    2. Repeat step 1, then under step 2, select Visual editor above.
    3. Use the keyboard shortcut Control (Command on Mac) + Shift + Alt + M.

2. Edit HTML source code within WordPress

There are times when you’d like to customize the structure or appearance of your website, not specific pages/pages. That’s where 2 methods to edit the HTML source code of WordPress themes come in:

1. Via WordPress Dashboard

Access your WordPress Dashboard before following these steps:

  1. Click on Appearance in the left sidebar.
  2. When it expands to the right, click on Theme Editor.
  3. You’ll now see a “Heads up!” message that warns you of the dangers we mentioned.
  4. Click on I Understand.
  5. Select the document you want to edit in the right sidebar. We’ll click on style.css.
  6. After making adjustments to HTML, click on Save Changes or Update.

Using FTP

We already demonstrated accessing your WordPress website using FTP. You now have a path to all files it consists of. However, we presume you want to visit the root/wp-content/themes/(child)-theme-name/ folder specifically and adjust HTML code in one or more files there.

Note. The root folder may also be called www, public_html, or your-domain-name, or have a random name.

3. Editing HTML using WordPress Plugins

Another way to adjust HTML code includes installing WordPress plugins. Nearly all of them eliminate the need to make direct changes to your website. They also frequently have an improved Preview Mode, Live Customizer, advanced code checker, and stop poorly written HTML code from running. Although we don’t have personal preferences or ties with any, we’d like to help. Here are 4 examples so you get the idea:

  • Insert Headers and Footers by WPBeginner
  • WP Coder by Wow-Company
  • Insert Html Snippet by xyzscripts.com
  • Raw HTML by Janis Elsts