WordPress under the Hood: Beginner HTML & CSS

Do you have a little experience with WordPress? But now you want to dig a little deeper and get a look under the hood? Let’s take a step beyond simply publishing a page, uploading images and installing plugins.

In this beginner tutorial, we’ll focus on HTML and CSS. In related tutorials, we’ll peek at PHP & JavaScript and also Files, Folders & Templates.

Do you need to know HTML and CSS to use WordPress? No. But the more you know, the better off you’ll be at managing your WordPress website (self-hosted version). We won’t dig too deep, just enough to get a little dirty.

white screen of death - WordPressAs you probably already know, WordPress has an admin side (dashboard) for creating and editing content, and a front end that your site visitors see.

You can create a WordPress website without knowing how to code by selecting a theme, publishing pages, creating a custom menu and adding pages to that menu.

But sooner or later, you’ll want to tweak your site or solve a problem. You have to understand the files and code just enough to pull this off. By going under the hood, you’ll take a giant leap forward and be better prepared if you’re ever confronted with the dreaded white screen of death.

Ready? Let’s start digging.

You may not know that WordPress is built upon mainly three languages, PHP, CSS and HTML. JavaScript is gaining increasing importance too.

Why learn HTML when you can already publish posts and pages? Learning basic HTML (along with CSS) will help you gain greater control over the look of your individual posts and pages.

What is HTML?

HTML CSS frame

HTML is the main language used to create web pages. It’s all about organizing and controlling how your website content is displayed. Its purpose is to apply meaning, not presentation. Using HTML elements, you can define content as paragraphs, headings, lists, links, images etc..

How to View HTML in WordPress

You may already be familiar with HTML if you’ve written a WordPress post and switched to the TEXT view in your WordPress (TinyMCE) VISUAL/TEXT editor.

(FYI: The WordPress VISUAL/TEXT editor for posts and pages can be found when you go to Admin > Posts > Add New or Admin > Pages > Add New.)

Go to your WordPress admin section (dashboard) and edit a post or page you’ve written. Click on the TEXT tab above the editing area (next to the VISUAL tab). Do you see a lot of angle brackets < >? You’re looking at HTML.

WordPress visual/text editor

How to recognize HTML (syntax)

HTML is all about elements and tags. HTML elements are the building blocks of HTML pages. An HTML element generally consists of a start tag, content and an end tag.

  • HTML tags normally come in pairs like <p> and </p>.
  • The first tag in a pair is the start tag. The second one is the end tag.
  • The end tag has angle brackets like the start tag, but also has a forward slash inserted before the tag name.

<h1>This is a Heading</h1>

<a href=”http://www.crimsondesigns.com“> This is a link.</a>

  • The <h1> element is used to define a large heading.
  • The <a> element defines a link.
  • The <img> element defines an image. (It doesn’t come in a pair. There is no end tag.)
  • The <strong> element is used to make text stand out from the surrounding text. Browsers show <strong> text in a bold typeface.

In a web page (source code), you may notice that <html> is the opening tag. It starts things off and tells the browser that everything between that and the </html> closing tag is an HTML document.

The content between <body> and </body> is the main content that will appear in the web browser screen.

HTML on computer

To learn the nitty-gritty details of HTML, read: Smooth Strides from HTML to HTML5.

Keep in mind, web browsers (ex. Chrome, Firefox) do not display HTML tags, but use them to determine how to display the document. Web browsers read HTML documents and display them on a screen.

Did you know that if you work strictly in your WordPress VISUAL Editor (as opposed to the Text Editor), you’re still adding HTML to your post? It is just taking place “under the hood” where you can’t see it.

Once you make the move to the TEXT editor, you will be taking your first step towards better WordPress management and you’ll gain some HTML skills. Of course, you can switch back and forth between the VISUAL editor and the TEXT editor.

Go ahead and practice.

Add a new post, write something in the VISUAL editor, make something bold (strong) and then take a peek at the TEXT editor to see the HTML. Keep the post as a draft and try to make some changes in the TEXT editor. Have some fun with it!

In your TEXT editor, you’ll likely see <h1> tags, <a> tags, <img> tags and <strong> tags.

HTML elements frame

FYI: One of the HTML tags you do not need to add is the paragraph <p> tag. WordPress will do the work for you.

  • In the VISUAL Editor, press ENTER/RETURN between paragraphs.
  • In the TEXT Editor, press ENTER/RETURN twice between paragraphs.

WordPress automatically detects these added spaces and converts them to paragraphs. Keep in mind, if you write paragraph <p> tags in the TEXT editor, switch to the VISUAL editor and then go back, WordPress will strip out the <p> tags. (But they will be visible if you look at the source code of your page in a web browser.)

NOTE: If you’re frustrated with how WordPress treats paragraphs and line breaks, you should look into something called “wpautop.” It is a WordPress filter that sometimes causes issues when you are inputting HTML markup in the editor. (It can be disabled.)

 TEXT/ VISUAL Editors in a Nutshell

Basically, the TEXT editor shows you the HTML markup. The VISUAL editor does its best to interpret that HTML markup and present it to you similar to the way it will look in a web browser.

By switching to the TEXT editor, you can add your own custom styling to your content. You can use any HTML tag, not just those in the Text Editor toolbar. (You can add a little inline CSS too. We’ll dig into CSS next.)

Here’s a Useful WordPress Plugin to help you use the TEXT editor: HTML Editor Syntax Highlighter.

HTML Editor Syntax Highlighter

This plugin adds syntax highlighting to the TEXT Editor to help you distinguish between content and the HTML. It can also change to a black background and larger fonts if you like. You’ll see different colors in your TEXT editor to help you view and understand the HTML better.

You’re off to a great start now. Let’s move on to CSS.