Adding HTML to a WordPress Page/Post

featured image with text adding html to a wordpress post or page
featured image with text adding html to a wordpress post or page

In this tutorial, we’ll show you all the methods for viewing and adding HTML code to a Page or Post in WordPress. There may be times when you want to use HTML in your WordPress website. For example, you can code a hyperlink by hand or view the entire post in HTML and make several changes at once.

So, follow along as we cover the steps for the latest editor (Gutenberg) as well as the classic editor.

Don’t have time to read our full guide? Watch our walk-through video.

How to Add HTML to a Page/Post

In the latest version of the WordPress editor, there are 3 ways to add HTML to a page or post. You can add a Custom HTML block, edit a single block as HTML, or edit the entire page/post HTML with the code editor.

Add a Custom HTML Block

Keep in mind that if you use this option, you will not be able to switch back to the visual editor.

  1. Login to your WordPress Dashboard.
  2. In the navigation menu click the Pages or Posts link, depending which one you want to add HTML to. For the purpose of this tutorial we’re modifying a Post.
    Accessing the Posts Listing in WordPress
  3. Roll your mouse over the one you want to add HTML to and click the Edit button.
    Editing a Post in WordPress
  4. Navigate to the section you want to add HTML to and click the plus + button.
    Add New Block to Page/Post
  5. Type HTML in the search box.
  6. Click the Custom HTML option.
    Selecting the Custom HTML Block
  7. A new block will be created where you can add your HTML code as needed.
    Adding Code to a Custom HTML Block

Edit A Single Block as HTML

If you have an existing block WordPress allows you to switch to the code editor. You can then view and modify the HTML as needed. This is a good option if you only want to make changes to a single section of the page or post.

  1. Edit a page or post in the WordPress Dashboard.
  2. Click the block you want to modify.
  3. Select the options link, it looks like 3 dots.
    WordPress Block Options
  4. Choose the Edit as HTML option.
    Editing Block As HTML
  5. You will then see the HTML code for that block and can modify it as needed.
    Using the Code Editor
  6. If you want to switch back to the Visual editor click the block again, select option, then choose Edit visually.
    Edit Page/Post Visually

Edit Full Page/Post With the Code Editor

The third option is to edit the entire page or post with HTML. This method is a quick way to make HTML changes to several sections of the page or post at the same time.

  1. Edit the page or post you want to modify.
  2. Click the Options menu on the top right of the screen. It looks like 3 vertical dots.
    Edit Page Options in WordPress
  3. Choose the Code editor section under Editor. Another option is to click the Ctrl+Shift+Alt+M keys at the same time.
    Accessing the Page/Post Code Editor
  4. Will then see the entire page/post as HTML and can add code as needed.
    Full Page Code Editor in WordPress

Add HTML to a Page/Post With the Classic Editor

  1. Navigate to the page or post you want to modify and edit it.
  2. Click the Text tab. You will then see the text of the page or post and you can enter the HTML.
    Accessing the Text Tab in the Classic Editor
  3. Add your HTML as needed.
    Classic Text Editor in WordPress

Congratulations, now you know how to add HTML to a WordPress Page or Post! Looking for more guides? Check out our WordPress How To Articles!

Small Business Owners Guide To WordPress

Get our Free Step-by-Step Guide to Creating a WordPress Website

Learn the ins and outs of creating a winning WordPress site step-by-step, from start to finish.

Download for Free

 

Share this Article
IC
InMotion Hosting Contributor Content Writer

InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!

More Articles by InMotion Hosting

2 thoughts on “Adding HTML to a WordPress Page/Post

  1. It is quite helpful. I have a question. I know pretty much about html, CSS and JavaScript. So I have designed many calculators using them. Is it advisable to the code block and embed my code there? Or simply I use plugins for this purpose?

    1. You can certainly try the code block first as it should work, however if it does not, you may be able to add code directly to core files or use a plugin.

Comments are closed.