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":
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. 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:
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.
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.
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.