4.05.2010

How to edit HTML in Wordpress

Dionna of Code Name: Mama and I are writing a few blogging tutorials of particular use for our Carnival of Natural Parenting participants. Today I would like to welcome Tom & Dionna, who have written a guest post about editing HTML in Wordpress, to help in pasting the carnival code blurbs. Tom is an IT guru, Dionna is a lawyer turned work-at-home mama, and together they form the natural parenting duo responsible for one amazing son. You can normally find Dionna over at Code Name: Mama where she shares information, resources, and her thoughts on natural parenting and life with a toddler.

When you are writing posts in Wordpress (for example, when you are preparing your entry for the Carnival of Natural Parenting), it is often helpful to know how to edit in HTML. This tutorial (like Lauren's earlier tutorial on editing HTML in Blogger) will show you how to:
  • add HTML code to a post and
  • copy your post's HTML for use elsewhere.

How do I add HTML code?


Most people probably use the Visual tab for writing blog posts in Wordpress (if you use the HTML tab exclusively, this mini-tutorial is stuff you already know). Let's look at the basic steps for adding HTML code to a post.

1. Identify "Visual" or "HTML":

2-1-Visual_or_HTML-300x229

You know you're in the Visual tab if you have all of these extra formatting options that work like Microsoft Word. The HTML tab has very few options available.

2-2-Visual_Post

2. Write your post in the "Visual" tab. Once you've got your post written and saved, it's time to insert the HTML code.

3. Switch to the "HTML" tab:

2-3-Switch_to_HTML

4. Paste your HTML code.

This is the screen where you can add in HTML code. Simply navigate to the area of the post where you want to insert the code and paste it in.

Let's say, for example, that you have received the intro blurb for this month's Carnival of Natural Parenting from Dionna (at Code Name: Mama) and Lauren (at Hobo Mama). The intro blurb should go at the very top of your post, so copy the code from the Carnival email, position your cursor at the beginning of the post, and paste. Voila!

If you have the ending blurb (the list of all of the Carnival participants), you'd copy and paste that at the very end of your post. Easy peasy.

A helpful hint: if you are copying HTML code from a Word document, then you are also copying all of Word's weird styling and formatting code automatically. Instead of copying and pasting straight from Word, copy it, paste it first into Notepad, TextEdit, or a similar simple text editor, then copy and paste from Notepad into Wordpress. Notepad does not retain any styling/formatting code, and Wordpress will be happier.

2-4-Paste_Code

5. Save the draft.

Before you switch back to the Visual tab to see how pretty everything looks, you should save your draft.

A word of warning: Wordpress doesn't always "work right" when you switch between Visual and HTML and go back-and-forth and switch it more and more. We don't know why. Our advice would be to switch between them, make your changes, and then "Save Draft" prior to switching back to the other tab. Without doing this (who knows why) Wordpress will "lose" the code you just typed/pasted in HTML, or it won't display your text the way it was formatted in Visual.

2-5-Save_Draft

6. Preview before you Publish.

Once it's saved, feel free to check out the Visual tab, or "Preview" your post to see how it will look on your site.


How do I copy my post's HTML code for use elsewhere?



There are at least two instances that we can think of that it would be helpful to copy/paste a blog post.

First: if you have written a long post and want to split it into several smaller pieces, you are more likely to retain all of your formatting by copying and pasting from the HTML tab rather than from the Visual tab.
Second: if you are submitting a guest post to another site, it is customary to send your post in HTML format.

And it's really quite easy. Just write and save your post, switch to the HTML tab (see Step 3 above), hit "Control + A" ("Control" = "Command" in Mac) to select all of your text, "Control + C" to copy it, and then paste it (either into an email or a Notepad document).

We hope that was helpful! If you have any questions or need clarification, please leave a comment or contact Dionna and Tom directly at Code Name: Mama.

3 comments:

Anonymous said...

That doesn't work - WP still messes up with my HTML. I figured this out myself (the HTML button), but as said, it doesn't keep WP from adding P tags and encoding special characters, etc.. I think I'm gonna install the "raw HTML" plugin.
Could it be that you're using another version of WP? I have 3.0.3

Dionna @ Code Name: Mama said...

Could you give a little more info on what exactly it is that's not working?
Also, are you writing directly into WP, or are you writing somewhere else and then copying/pasting it in?
Finally, WP does have a few bugs when you switch back and forth between the HTML and Visual tabs. I'd suggest avoiding switching back and forth. For example, if I go in and add div class="clear" (with the <> around it) to my post and then switch to visual, if I switch back to html, all of my divs are gone. Every. Single. Time. It's just a WP quirk.
What I try to do is do most of my work in Visual, switch over to html and add in anything I need, then save it. If I have to do any editing, I make sure that I'm in html when I click into the post.

A Teachable Mom said...

This worked beautifully for me! Thank you!!! Great info, great post!

Related Posts Plugin for WordPress, Blogger...