6 Methods for WordPress HTML Editing

Custom HTML

WordPress HTML editing: a boogeyman?

 

Hold your horses…

 

It’s not like that.

 

We all know that WordPress is very flexible. Depending on the tools you use (themes, WordPress builders, plugins, add-ons, widgets) you can play with blocks and drag and drops. No coding required. 

From time to time you might want to tweak things a little bit, and then some HTML knowledge might come in handy.

Usually, HTML code doesn’t come alone. You will need CSS as well. While HTML will deal with the website structure, CSS handles the styling part.

 

Before starting with WordPress HTML editing

Before jumping into any editing, you need to take some precautions. 

 

First, make sure you know what you want to accomplish: test something, make some advanced editing? 

If you want to alter WordPress theme code, it’s usually recommended to work with a child theme and avoid going straight live. 

Now, you don’t need to be the most skilled front-end developer to deal with HTML when changing pages or posts code. There are a lot of resources out there that can easily teach you the basics. I took this Khan Academy course and loved it! If I have any questions I rely on Stackoverflow and W3Schools.

 

And you know what? It’s darn cool when you don’t need to rely on others to do tiny website or email changes. 

 

How to Edit HTML in WordPress

Editing your HTML can be pretty safe. But it would still be smart to create backups before doing anything. 

 

Now, let’s see how things will play out when we use:

    1. HTML editing in the classic WordPress Editor (TinyMCE)
    2. WordPress HTML Editing via shortcodes
    3. HTML Editing in the WordPress Block Editor (Gutenberg)
    4. WordPress HTML editing using Widgets
    5. HTML editing in the WordPress Customizer
    6. Editing your WordPress theme source code 
    7. Intro to the most popular HTML tags


    You can click one of the links above to go straight to that specific topic, if you want.

    HTML editing in the classic WordPress Editor (TinyMCE)

    Usually, you would edit a page or a post in the Visual Editor, like below.

    WordPress Visual Editor

    The Visual Editor icons allow you to format text, insert lists and links,  and more.

     

    Now, every time you edit something in here, behind the scenes, there is some HTML markup happening.

     

    For example, you are adding an image, behind it you’ll see an <img> tag. If you are adding a list of items, in HTML mode you’ll  see these tags <ol> or <ul>, and <li>. How can you access this code? Through switching from the Visual Editor to the Text Editor.

     

    You could work with both tools, and just add some extra markup in the Text Editor, if you want. The Text Editor comes along with some other benefits as well. Here you can even add different styling through CSS. If you add proper schema markup you can gain some SEO advantages as well. 

     

    For those that are more familiar with HTML and used tools such as Sublime for coding, you can rejoice because there’s a tool out there that can help out with getting similar results: HTML Editor Syntax Highlighter.

    html-editor-syntax-highlighter

    Careful though, they haven’t updated it in a while now, you might encounter some issues….

     

    WordPress HTML Editing via shortcodes

    WordPress builders such as Colibri may allow you to alter HTML code via shortcodes.

  1. Shortcode plugin
    Write HTML
  2. This means you can install the Shortcoder plugin that will let you insert HTML code via the Customizer. More details about this method here.

  3. HTML Editing in the WordPress Block Editor (Gutenberg)

    In the Gutenberg experience, you can also switch from the Visual Editor to a text one (the Code Editor). 

    Gutenberg code editor

  4. You can also edit blocks individually as HTML. Edit blocks HTML in GutenbergYou also have a custom HTML block.
  5. Custom HTML block in Gutenberg

  6. Pretty neat, don’t you think?

    WordPress HTML editing using Widgets


    The Custom HTML widget allows you to make homepage, header, footer, or sidebar changes. You can access this from Appearance -> Widgets-> Custom HTML.

    custom HTML widget

  7. HTML editing in the WordPress Customizer

     

    Widgets are available in the WordPress customizer as well. There are different approaches from theme to theme. 

    The Twenty Twenty theme, for example, lets you alter the footer via custom HTML as below.

    footer widget

  8. Editing your WordPress theme source code 

    Careful with this one, guys!

    You can access the Theme Editor in the menu under Appearance. The moment you select it you are warned: editing directly here might result in breaking your site. This is why it’s recommended to make a child theme.

  9. WordPress theme editor
    There are more files that you can alter: js, PHP, and CSS as well.WordPress theme files
  10. Intro to the most popular HTML tags

    Now, let’s dwell a bit into the most popular HTML tags that you could use.

    For every open tag, there is a matching closing tag. The symbol for opening a tag is this one: “<”, when you close them you usually repeat the tag and add this symbol “/>”.

    Let’s look at some examples: 

     

    • Paragraphs

     

    The basic text gets inserted in between paragraph (p) tags, like this: 

    <p> – I opened a paragraph tag

    </p> – I closed the paragraph tag

    The end result:

    <p> HTML tags

  11. I used CodePen for the exercise.
    • Images

     

    For images, things work a bit differently. You don’t need to add </img> for closing the tag, as seen below.

    <img> HTML tag

  12. Now, WordPress makes things even easier for you. Just click on “img” in the menu and it will prompt you to a window where you insert your URL
    • Headings

     

    Titles and subtitles go inside headline <h> tags. From the SEO perspective, it’s recommended to organize your content around h tags, so that the spiders can better crawl your content.

    We’ve got:

    <h1></h1>

    <h2></h2>

    <h6></h6>

    HTML headings

  13. In this particular example I used 2 more tags <strong> for bold text and <em> for italic text. Did you notice that the last opened tag gets closed first? This means you can insert tags inside other tags. Always be careful about how you close them.
    • Lists

     

    You are probably used to working in Word or Google docs with ordered and unordered lists.

    Lists in Google Docs

  14. In HTML you have the <ol> tag for ordered lists, and the <ul> tag for the unordered one. The things that get listed go inside <li> tags, as below.

    HTML lists

    • Links

     

    For this you use the <a> tag with a link as a reference:

    HTML link tags

    Now, going back a bit to WordPress, the Text Editor is making your life even easier.

    You do not need to manually insert your <img> tag, you just select it from the menu and paste the URL there, or simply add your image from the “Add  Media” option and it will automatically add the HTML code for you.

    HTML doesn’t look like rocket science, does it? Now, you might wonder about styling a bit…The examples above don’t look too nice, do they? For that, you need some CSS. We’ve covered this aspect in a previous article, make sure to check it out!

     

    Conclusion

    Now, do you really need to alter your HTML code?

    Do you have the skills to change the code?

    Isn’t anything that you could do via your theme options and additional plugins?

    What about using a WordPress builder? It can give you endless possibilities.

    Always think twice before such a decision and use backups!

    In my personal opinion, the Text Editor in the classic WordPress editor or the Code Editor in the Gutenberg version usually suffices. 

    Over and out!

     

+ posts

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]

FREE GUIDE