{"id":5336,"date":"2020-09-10T14:14:08","date_gmt":"2020-09-10T14:14:08","guid":{"rendered":"https:\/\/colibriwp.com\/blog\/?p=5336"},"modified":"2021-05-06T11:10:18","modified_gmt":"2021-05-06T11:10:18","slug":"wordpress-html-editor","status":"publish","type":"post","link":"https:\/\/colibriwp.com\/blog\/wordpress-html-editor\/","title":{"rendered":"6 Methods for WordPress HTML Editing"},"content":{"rendered":"

WordPress HTML editing: a boogeyman?<\/span><\/p>\n

Hold your horses\u2026<\/span><\/p>\n

It\u2019s not like that.<\/span><\/p>\n

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.\u00a0<\/span><\/p>\n

From time to time you might want to tweak things a little bit, and then some HTML knowledge might come in handy.<\/span><\/p>\n

Usually, HTML code doesn\u2019t come alone. You will need CSS as well. While HTML will deal with the website structure, CSS handles the styling part.<\/span><\/p>\n

 <\/p>\n

Before starting with WordPress HTML editing<\/span><\/h2>\n

Before jumping into any editing, you need to take some precautions.\u00a0<\/span><\/p>\n

First, make sure you know what you want to accomplish: test something, make some advanced editing?\u00a0<\/span><\/p>\n

If you want to alter WordPress theme code, it\u2019s usually recommended to work with a child theme and avoid going straight live.\u00a0<\/span><\/p>\n

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

And you know what? It’s darn cool when you don\u2019t need to rely on others to do tiny website or email changes.\u00a0<\/span><\/p>\n

 <\/p>\n

How to Edit HTML in WordPress<\/span><\/h2>\n

Editing your HTML can be pretty safe. But it would still be smart to create backups before doing anything.\u00a0<\/span><\/p>\n

Now, let\u2019s see how things will play out when we use:<\/span><\/p>\n

    \n
  1. \n
      \n
    1. HTML editing in the classic WordPress Editor (TinyMCE)<\/span><\/a><\/li>\n
    2. WordPress HTML Editing via shortcodes<\/span><\/a><\/li>\n
    3. HTML Editing in the WordPress Block Editor (Gutenberg)<\/span><\/a><\/li>\n
    4. WordPress HTML editing using Widgets<\/span><\/a><\/li>\n
    5. HTML editing in the WordPress Customizer<\/span><\/a><\/li>\n
    6. Editing your WordPress theme source code\u00a0<\/span><\/a><\/li>\n
    7. Intro to the most popular HTML tags<\/span><\/a><\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

      <\/a>
      \nYou can click one of the links above to go straight to that specific topic, if you want.<\/span><\/p>\n

       <\/p>\n

      HTML editing in the classic WordPress Editor (TinyMCE)<\/span><\/h3>\n

      Usually, you would edit a page or a post in the Visual Editor, like below.<\/span><\/p>\n

      The Visual Editor icons allow you to format text, insert lists and links,\u00a0 and more.<\/span><\/p>\n

      \"WordPress<\/p>\n

      Now, every time you edit something in here, behind the scenes, there is some HTML markup happening.<\/span><\/p>\n

      For example, you are adding an image, behind it you\u2019ll see an <img> tag.<\/span><\/p>\n

      If you are adding a list of items, in HTML mode you\u2019ll\u00a0 see these tags <ol> or <ul>, and <li>.<\/span><\/p>\n

      How can you access this code? Through switching from the Visual Editor to the Text Editor.\"WordPress<\/span><\/p>\n

      You could work with both tools, and just add some extra markup in the Text Editor, if you want.<\/span><\/p>\n

      The Text Editor comes along with some other benefits as well.<\/span><\/p>\n

      With proper <\/span>schema markup<\/span><\/a> you can gain some SEO advantages.\u00a0<\/span><\/p>\n

      Here you can even add different styling through CSS.<\/span><\/p>\n

      For those that are more familiar with HTML and used tools such as Sublime for coding, you can rejoice because there\u2019s a tool out there that can help out with getting similar results: <\/span>HTML Editor Syntax Highlighter<\/span><\/a>.<\/span>
      \n      <\/a>
      \n\"html-editor-syntax-highlighter\"
      \nCareful though, they haven\u2019t updated it in a while now, you might encounter some issues\u2026.<\/span><\/p>\n

       <\/p>\n

      WordPress HTML Editing via shortcodes<\/span><\/h3>\n

      WordPress builders such as Colibri may allow you to alter HTML code via shortcodes. This means you can install the Shortcoder plugin that will let you insert HTML code via the Customizer.<\/span><\/p>\n

        \n
      1. \"Shortcode
        \n        <\/a>\"Write<\/li>\n
      2. This means you can install the Shortcoder plugin that will let you insert HTML code via the Customizer.\u00a0<\/span>More details about this method <\/span>here<\/span><\/a>.<\/span><\/li>\n<\/ol>\n

         <\/p>\n

          \n
        1. \n

          HTML Editing in the WordPress Block Editor (Gutenberg)<\/span><\/h3>\n

          In the Gutenberg experience, you can also switch from the Visual Editor to a text one (the Code Editor).\u00a0<\/span><\/p>\n

          \"Gutenberg<\/li>\n

        2. You can also edit blocks individually as HTML.\u00a0<\/span>\"EditYou also have a custom HTML block.<\/span><\/li>\n
        3. \"Custom<\/li>\n
        4. <\/a>
          \nPretty neat, don\u2019t you think?<\/span><\/li>\n<\/ol>\n

           <\/p>\n

            \n
          1. \n

            WordPress HTML editing using Widgets<\/span><\/h3>\n

            <\/a>
            \nThe Custom HTML widget allows you to make homepage, header, footer, or sidebar changes. <\/span>You can access this from Appearance -> Widgets-> Custom HTML.<\/span><\/p>\n

            \"custom<\/li>\n<\/ol>\n

             <\/p>\n

              \n
            1. \n

              HTML editing in the WordPress Customizer<\/span><\/h3>\n

              Widgets are available in the WordPress customizer as well.\u00a0<\/span>There are different approaches from theme to theme.\u00a0<\/span><\/p>\n

              The Twenty Twenty theme, for example, lets you alter the footer via custom HTML as below.<\/span>
              \n              <\/a><\/p>\n

              <\/h3>\n

              \"footer<\/li>\n

            2. \n

              Editing your WordPress theme source code\u00a0<\/span><\/h3>\n

              Careful with this one, guys!<\/span><\/p>\n

              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\u2019s recommended to <\/span>make a child theme<\/span><\/a>.<\/span><\/li>\n

            3. \"WordPress
              \n              <\/a>There are more files that you can alter: js, PHP, and CSS as well.<\/span>\"WordPress<\/li>\n
            4. \n

              Intro to the most popular HTML tags<\/span><\/h3>\n

              Now, let\u2019s dwell a bit into the most popular HTML tags that you could use.<\/span><\/p>\n

              For every open tag, there is a matching closing tag. The symbol for opening a tag is this one: \u201c<\u201d, when you close them you usually repeat the tag and add this symbol \u201c\/>\u201d.<\/span><\/p>\n

              Let’s look at some examples:\u00a0<\/span><\/p>\n

               <\/p>\n