EasyWP: How to use WordPress Code Editor

It’s no wonder WordPress powers over a third of all websites. There’s no other free content management system (CMS) that offers such flexibility out of the box. With an idea in your head, you can create pretty much any type of website, without touching a line of code! For most users, themes and plugins are enough to make their website do what they want.  However, sometimes, a bit more flexibility is needed. 

Maybe the way something is displayed isn't exactly to your liking. You might even prefer to code a hyperlink by hand (if you have the know-how) or you may want to adjust the header size. Whatever the reason, these are the times you need to go one step further and tweak things. In the Gutenberg editor on WordPress, this means adding or editing HTML in the Code Editor.   

And so, in this post, we’ll cover when editing HTML in WordPress is needed and walk through how to do it. Let’s get started!

What HTML is (and why it matters)

HTML stands for HyperText Markup Language. We use HTML to add instructions or (mark up) content like text and images. 

In WordPress, you get two types of Editors, the straightforward Visual Editor where one click creates code for you behind the scenes, and the Code Editor where you can view and edit the code. You can switch between and use both views to develop your content.

If you’re unfamiliar with HTML, take a look at the image below:

On the first impression, it appears as someone fell on their keyboard. On closer inspection, however, you can see the content describing the page below: 

You can find the text, but everything surrounding it is the HTML and CSS instructions that control its appearance, formatting, and layout.

Why do you need to add HTML in WordPress?

Right out of the box, WordPress is designed so users can avoid looking at a single line of code. And, thanks to managed WordPress hosting from EasyWP, you can also install WordPress and start publishing in a matter of minutes, without any technical knowledge. It’s also the fastest WordPress hosting available so you don’t have to worry about your site speed, let alone server admin. 

Thus, it’s never been easier for anyone without any technical skills to create a WordPress site. When WordPress’s new Block editor Gutenberg landed, we got an even easier way to format content and add files, images, and videos. 

While the visual editor is more than enough for basic formatting needs like adding headings and changing fonts, for specific tasks, it can be challenging. To add a nofollow link for example. Inserting custom HTML code in your WordPress page or post is the only option to do this. 

Fortunately, you don’t need to be the most skilled front-end developer to deal with HTML. Just open up the Code Editor, and get to work. Now you’re ready to see what adding HTML to WordPress looks like in practice. Let’s get started.

  How to use the WordPress Code Editor — with examples

There are two ways to view your post and page HTML in the code editor. You can either edit an entire post or page or focus on an individual block to edit. 

Before we can start, make sure you are logged into the WordPress Administrator Dashboard, and open the post or page you wish to edit. 

Let’s walk through some basic examples of how you can use this markup language. 

Edit a post or page with Code Editor

Click on the three dots in the top right-hand corner of your post or page:

Click on the Code Editor to switch the editor to this mode. On this screen, you can make any changes you want to your post or page: 

For this example, we’ll assume you’re writing a blog post for your WordPress site, and it’s about which Tech you expect to see blow up in 2021. To introduce and discuss the merits of each technology, you introduce it as a new section. To do this, you’ll use a heading that stands out from the rest of the text.

Naturally, you can do this in one-click in the visual editor via the heading drop-down menu. We’re going to do it with HTML in the Code Editor option. 

Start by locating the text where you will add your heading:

Then add the heading tags to the beginning and end, like this:

Once you’re finished and ready to save your changes, click the Update or Publish button in the top right-hand corner:

Here’s a snapshot of how the page looks with the new header:

Edit a specific block

Now we’re going to hone in on a specific block to edit in HTML. The only difference to the example above is how to access the code. Again, you will need to be logged into the WordPress Administrator Dashboard. Then open a page or post ready for editing.

To begin, click on the individual block you wish to edit. To the right of the block, you will see 3 vertical dots. Click on the dots:

A pop-up menu will appear. Select the option Edit as HTML. 

You will now see the block displayed in the code. This is the place to make your changes or additions to the block: 

In this example, we’re going to add a no-follow link to a text block. A nofollow link is a tag that tells the search engine to ignore that link.

A typical HTML link search engines do follow look like this:

With a nofollow tag, it becomes:

As you can see, adding a nofollow tag simply means adding the rel="nofollow" attribute to the link: 

Once you are finished, you will need to click on the Update or Publish options in the top right corner of the editor in order to save your changes.

Congratulations, now you know how to add HTML to a WordPress Page or Post! If you’re interested in expanding your HTML skills you’ll find an abundance of resources that teach you the basics of HTML, and let’s face it, it’s pretty cool if you don’t have to rely on others to do small site changes. 

Happy customizing!

One of the best things about WordPress is how easy it is to use, which is why many people steer away from HTML. However, you can accomplish plenty more outside the limits of the visual editor. 

Learning any programming language is challenging, there are new terms to decipher and formatting to get just right. But as we’ve seen, the HTML markup language is remarkably straightforward and friendly to newcomers. Taking some time to get your head around the Code Editor will deliver a more rewarding experience editing your pages just how you imagined them — and might even save you some cash hiring someone to do the work for you.



Do you have any questions about the WordPress Code Editor? Let us know in the comments section below!