Or any other word processor.
The goal of this post is to minimize the learning curve for getting your first blog post published in WordPress.
WordPress does a great job providing a word processing tool that converts rich text to clean HTML that looks good on the web page. But even experienced bloggers still use old-school word processors to author and create new blog posts or pages for WordPress.
Note – as of Aug 2, 2013: WordPress 3.6 or greater has added much better auto-save features for drafts, so that you will not lose your work if you decide to write a post using the WordPress visual editor. It is nice!
Sometimes the Old-School Way is the Best Way
Down the road, you may want to experiment with blog editing software for a slightly more streamlined experience.
But at first, there are a couple good reasons to stick with the tools you already use to write with.
- You will get your first post published sooner. Don’t worry; it gets much easier with practice.
- You are much less likely to quit or fall behind.
- This is way more concrete way to work with your website, which helps you to visualize it, and in turn helps you to build your website more intentionally.
I recommend you create some files and folders on your computer where you will save blog drafts and images. Here is a generic hierarchy. You will want to give these folders your own unique names.
Then you can save your document file and images into the folder for each post and page. This process will give you a good visual representation of your website content and structure, which helps you stay motivated, focused and also understanding how to make your site easier to navigate for your readers.
This also reduces frustration and makes working with other collaborators much easier. (What if you shared your blog folder privately with your writers and developers, using Dropbox or Google Drive?)
Minimal change. Easy as Possible
“I thought this was supposed to be easy!” a client told me after getting started with a new WordPress blog.
“It’s as easy as it gets, I’m afraid,” said I.
I learned something from this experience. WordPress editing takes a little time and a little guidance before it becomes easy.
Here is the magic incantation: “visual sink paste.” Repeat that a few times, and you will have unlocked the mysteries of WordPress publishing for beginners. I’ll explain why momentarily. Right now, go ahead and visualize the word “visual” written in paste at the bottom of your kitchen sink, to lock in the mnemonic.
Alright, are you ready to write, edit and publish your first post or page in WordPress? This is the easiest/best way to get started.
1. Write Your Post in Word
You can write a blog post in Word as normal, with a few exceptions.
- Use only the basic formatting options, pictured here:
- Set up your paragraph spacing appropriately. (Most WordPress themes automatically enter a space after paragraphs. Be sure your Word draft does the same. Otherwise you may end up with extra lines on your webpage).
- Don’t add pictures to your draft in MS Word. They will not be transferred. Instead, save the pictures you want to use in a folder on your computer where you will organize all your blog images. Then add and edit those images to your post using the WordPress visual editor.
2. Navigate to the Posts –> Add New section of your website.
Sign in to your self-hosted WordPress website, and you will now be on the WordPress dashboard page. From the dashboard, hover on “Posts” and click “add new.”
This opens the post editing area.
I’m assuming this is the first time you have seen this WordPress admin screen, and I bet it looks a little overwhelming. There will probably be a bunch of boxes, and you should ignore all but one for now. Just focus on the main box, the visual editor, pictured below.
The visual editor box has a few components you should understand.
- Post/Page Title. Put your headline or working title into this box.
- The “tiny MCE” is a the technical name for the menu of buttons that allow you to apply formatting—such as bold, italics, bullets, etc.—to your posts. Very similar to Word Processors.
- The visual editor content box is where you content shows up. It comes in two formats. Notice the tabs in the upper right corner: Visual and text. The first time you arrive here, it will probably be in “text” mode, which scares off a lot of folks, but never you fear. There is an easy way out of the common mishaps faced by your average WordPress initiate. Just follow the “visual sink paste” shortcut and you will be just fine.
3. The Secret Shortcut: “Visual Sink Paste”
Press three buttons, and the door of easy WordPress publishing has been opened unto you.
“Visual sink paste” is a 1-2-3 of buttons to press so that you can simply copy and paste your blog post draft from MS Word, or another word processor, click insert, make a few edits, publish, and you’re done! (Until you want to edit your page/post again).
Here is a breakdown of what each of these 3 buttons do.
- Visual. When the visual tab is selected you are in “Word Processor” mode, which works similar to your standard word processors like Google Drive, Open Office and MS Word. When the “text” tab is selected, you are in “code mode.” Code mode is not necessary for publishing, and as a beginner, you should avoid it for now.
- Sink. The “Show/Hide Kitchen Sink” Button. This shows and hides some extra buttons. The button we want is one of those extra buttons.
- Paste. The Paste from Word button. This removes all the messy formatting that normally comes from content that is copied from MS Word, or any other “rich text” word processor. This button is really important, the ultimate goal of visual sink paste. You may notice a similar button next to it called “paste from notepad,” which is ideal for copying and pasting from simple text editors like notepad, if that is what you prefer to use for authoring. Either way, the steps are the same.
The visual sink paste operation will open up this box. Now, go back to your MS Word document that you want to copy.
- Press Ctrl + A (Cmd + A on the Mac) to select all the text.
- Press Ctrl + C to copy all the text.
- Return to your browser window where your “visual sink paste” has just been executed on WordPress, and click inside the box.
- Press Ctrl + V to paste the content into this box.
- Then press insert. Your content should show up in the visual editor.
4. Do Necessary Edits
The way your content appears in the visual editor is generic, completely different than how it will look on your website. But you can add subheads, numbered lists and bullets to make your content a bit more readable.
This is where the Tiny MCE editor comes into play. I recommend using Header 3 formatting for your subheads.
- Short paragraphs, of 1-3 sentences look better on the web.
- Bullets and numbered lists are great for breaking up content.
- If you need to add images, you can do that now. Click here to learn how.
Right now, all this editing is optional. Why? Because you can always edit later. Why not skip ahead to “Save Draft” and “Preview” so you can see what your post looks like now? Then you can come back and edit.
Make Sure Your Code is Clean
Go ahead and click on the text tab in the upper right hand corner of the visual editor box, (next to the visual tab from “visual sink paste.”) Here, you will see how your content looks in HTML code, which is the common language of all web page content.
You want to see clean text, with perhaps some <p></p> tags and <h3></h3> tags and such mixed in. If it is all plain text, that is fine too (but you might want to add least add some subheads to make the content more readable).
What you don’t want to see is <span></span> or <div></div> tags. If you have those, you have messy HTML code. Go back through this post and be sure you did the 1-2-3 steps right.
If your HTML is still clogged up with those span and div tags, then you may want to erase all of the content in this box and start again. If there is anything else weird, it probably has to do with the formatting of your word processor, which is why it is best to use only the most basic formatting options available (as detailed above in “Authoring inside Word”).
You can, but you should never, paste directly into the box, without using visual sink paste. Why? Because it adds a bunch of code to your post that makes it look weird and sloppy. It is hard to clean up too. So make sure it is clean first.
5. Save as Draft, Preview and Publish
On the right of your “Edit Post” dashboard, you will find the Publish box.
Here you can:
- Save draft
- Preview the post before publishing
- Schedule your post to appear later
You can save your draft as many times as you like without having anything show up on the internet. Your draft revisions will be saved in your WordPress database.
Get in the habit of always previewing your changes (after saving the draft) so you know what they look like on the page. If anything looks weird, you should go back to the section “make sure your code is clean”, before you publish.
When you click this button, your page/post will be immediately available on the internet, at the web URL that displays under the “Title” section of the WordPress visual editor. (If this button says “Schedule,” that means your post will not appear right away. You can edit the scheduled publishing time in this same “Publish” meta box).
You did it! You are officially a digital publisher, published in every country in the world!
If you accidentally published a draft? Well, it isn’t the end of the world. You can update the post right away.
The cool thing is that if you are browsing your website while you are logged in, you will have a menu at the top of your screen that allows you to edit the page/post you are looking at.
When I am on a post, it says edit post. When I am on a page, it says edit page. When I am on a category archive, it says edit category. Super handy!
When I click on that button, it takes me straight to the visual editor for that page / post, where I can make edits immediately.
So I make a change and click “Update” (where the “Publish” button was when this post was still a draft). To let you know the update was successful, your WordPress admin screen will display this message: Post updated. View Post.
Click on that and you can now view the newly published or updated page. You can share this page just like you can share any other page on the internet. So it makes sense to only publish stuff you are proud of.
Now you know about 80% of everything you will ever need to know to publish or update your site. I hope it has been easy as pie.
Any questions for me? Did that help any of you first-timers to get through the process in ease and style?
- Editing your posts for SEO
- Understanding categories and tags
- How to add images to your WordPress posts and pages