How to Edit Your WordPress site with HTML & CSS

This post will introduce you to tools and techniques to help you make additional styling changes to your WordPress website and give you a sneak peek at our workshop – An Introduction to HTML & CSS for WordPress Users Workshop. We created this workshop because many of our workshop participants have asked us to extend their WordPress knowledge.

WordPress comes with two ways to edit pages and blog posts, the Visual Editor and the Text Editor. Both editors use the same coding language — HTML (HyperText Markup Language). The Editors provide two different ways to write and edit HTML in WordPress.

To use WordPress you don’t have to learn HTML. The WordPress Visual editor writes the HTML for you. But the Visual Editor will only get you so far, learning a little HTML and CSS will save you a lot of frustration when you need to venture into the Text Editor to either fix something that has gone awry or add some styling.

Basic Formatting with the WordPress Visual Editor

The Visual Editor is a WYSIWYG (What You See Is What You Get) editor with formatting buttons.  The Visual Editor makes it easy to format text as bold, italic, create bulleted or numbered lists, align text, add links and headings easily.  The Visual editor displays the formatted results, not the code. If you bold text the visual editor will display the text as bolded.

If you are new to WordPress you want to get comfortable with the Visual Editor before switching to the Text Editor. Head over to our post 4 Tips every WordPress Beginner Needs to know for a couple of important Visual Editor pointers. When you’re comfortable adding posts in Visual Editor view, come back here to learn more about the WordPress Text Editor and some basic HTML.

Beyond the WordPress Visual Editor

The WordPress Visual Editor isn’t perfect. At some point, every WordPress user encounters a wonky layout that can easily be fixed by learning a little HTML and CSS and switching to the WordPress Text Editor. In the Text Editor view, you can add formatting that the isn’t available in the Visual Editor.

HTML Basics

HTML (Hyper Text Markup Language) is a markup language.  HTML tags “markup” how the web browser displays content.

When you highlight text and click the B the WordPress Visual Editor wraps the highlighted text between bold tags — the word strong wrapped in angle brackets, note that the closing tag begins with a slash /

 <strong>This is bold text</strong>

A hyperlink (or anchor) looks like this

<a href=”http://linkaddress.com/”>Anchor text is the visible clickable text in a link</a>

Basic paragraph tags <p> and </p> are hidden in the Text Editor unless inline css styling is added such as

<p style=”text-align: center;”>This text will be centered</p>

CSS Styling

CSS stands for Cascading Style Sheets. CSS add styles to define how HTML elements will be displayed in the browser.

Inline Styles

The WordPress Visual Editor writes inline styles using a style attribute in HTML elements such as the text-align:center; added to the paragraph tag in the example above.

If your display includes odd styling you may need to look in the Text Editor for inline CSS styles that have been pasted in or added by the Visual Editor.  To clean up the code look for spans with added styling. Delete span tags wrapped around the text to remove this styling and change the text back to regular paragraph text.

<span style=”color: #333399; font-size: 10px”>this text is a different colour and font size.</span>

Theme Style Sheet

Styling in WordPress is controlled by the theme you choose. WordPress Themes have a CSS stylesheet file — look for a file called style.css. To alter the styling of an element, you only need to edit the one file to make global changes to your theme.

Important WordPress Tip: Don’t customize WordPress theme files directly. WordPress features a built-in editor for editing files from within your browser online. We don’t recommend using it on a live website, too many things can go wrong. The better and safer way is to take a backup and edit files copied to your computer, and then upload the modified files to your hosting account.  And to ensure that your customizations are saved from future theme updates, you need a child theme.

The theme you are using may offer a demo and useful documentation of available classes or if your theme doesn’t offer styling you want,  you can also define your own CSS classes.

Here’s an example.

<div class=”box”>If I really had a class called box in my style.css file, this text would show in a box with a light blue background.</div>

The styling of the div is controlled by the class box. The class box is defined in the stylesheet.

.box {
background: #1668b5;
padding: .8em 1em;
border: thin solid #ccc;
}

Place styling in a style.css file to use it globally throughout your website.

Basic CSS will help you customize the way a plugin displays and add extra customization to your theme.

If you’re ready for another CSS & HTML Lesson give our step-by-step instructions for adding a call-to-action button a try.