Behind The Scenes With WordPress HTML

Right at the start of this tutorial I said that you don’t need to know HTML to use WordPress. This is true, I wasn’t lying. But if you are someone who knows a bit about coding then it can be handy to know how to insert HTML or JavaScript or same other coding language into your website. You might need to use HTML to display something not covered by WordPress or maybe you have ads or some other special requirements.

But if you know you will never want to use this option then you can skip this lesson.

HTML stands for ‘Hyper-Text Markup Language’ and is the code that, originally, people had to use to create and maintain a regular website.

The beauty of WordPress is that it shields you from all this in its user interface but, behind the scenes, WordPress generates all the necessary code for you. And it does it (mostly) very efficiently.

I’m not going to teach you HTML here but I’m going to show you how to use it if you have written any of your own code or if you have a code snippet provided for you to perform some function not supported by WordPress.

Add HTML Code To A WordPress Page

WordPress presents you with an alternative window to use on Posts and Pages if you want to insert your own code. To do this, click on the ‘Text’ tab (next to ‘Visual’) in a post or page.

When you click on that you are taken to the HTML window and WordPress expects that there will be some HTML or other code included in the text. You can see that the word processing icons have been replaced by HTML short cuts.

You can write any text as normal and WordPress will display it as normal text, but when it encounters any HTML it will execute it rather than displaying it as text.

This is the HTML code to display a table, which WordPress currently does not provide an icon for.

Note: if you do want to display a table on your website it is worth looking for a plugin to provide this for you. I am just using this as an example of HTML rather than recommending that you use this code.

When you use this Text tab there can be occasions when WordPress doesn’t render the HTML code as you might expect. This is because it does a further layer of verification before accepting the code and this can mean that it strips out anything that it doesn’t like.

This can be annoying, but you can force WordPress to accept your code if you temporarily change your User profile.

Disable The Visual Editor

From the dashboard, go to ‘Users’, ‘Your Profile’ and you’ll see a screen like Figure 19.4:

Check the ‘Disable the visual editor when writing’ box and then scroll down and click ‘Update Profile’.

Now you can enter the code you want into your post or page and it should retain the code ‘as is’ when you publish it.

If you do this, you will have to go back to your User profile and uncheck this box if you want to re-enable the visual editor for use in future posts.

But you’ll have to remember to repeat the disabling if ever you want to go back to edit the original post because, if you don’t, WordPress will strip out all your code!

Add HTML Code To A WordPress Sidebar

You can use a Text Widget to insert code into a sidebar or footer.

From the dashboard, go to ‘Appearance’, ‘Widgets’ and click on the Text widget. Select where you want the widget to appear and then copy and paste the HTML code into the Content box of the widget. Add a title if you require. Then Save the widget and close it. The code should execute when you view the website.

I suppose I ought not to leave this lesson without a health warning. Inserting HTML code into a WordPress post or page can have unintended consequences. This can be because the HTML code may contain an error, or maybe something in the code clashes with the site’s theme, or simply that you are trying to do something that WordPress considers to be invalid.

If you get problems with HTML you have two choices: remove the offending code, or call for help from someone who knows what they are doing.

Action Steps

  • Experiment with clean, error-free HTML in a draft post or page
  • Experiment with clean, error-free HTML in a widget 
  • Trash trial HTML items

FAQ

I’m a total non-techie and all this stuff gives me a headache. Do I really need to know about HTML?

No. You don’t have to worry your pretty little head about it at all, if you don’t want to. You can leave it all to WordPress.


Note: If you are reading this, you are probably building an online business. Do you know that using some powerful marketing software can help your business scale to the next level? As the marketing technology develops very fast in recent years, there is a lot of new software being launched every month. To help you decide what marketing software you should use, you can read the detailed reviews of the most innovative marketing software below:

Leave a Comment