Adding a New Post in WordPress

Posts are the lifeline of a blog. Once you are done with the initial setup of your blog, most of your time would be spent adding posts to it.

On your WordPress dashboard, you’ll find Posts on the left sidebar, near the top.

In this lesson, we’ll quickly look at the very basic stuff regarding posts (title, formatting etc) first and then go on to actually publish a post so you can see how easy it all is.

Let’s get rolling.

Head to Posts -> Add New. Your screen should look like the one below:

The main stuff first:

Title Box

At the top, is a textbox that says “Enter title here”. This is where you enter the title of your post. To see an example of a post’s title, look above – “Adding a New Post in WordPress” is the title of this post that you are currently reading.

Once you fill in your title, clicking anywhere outside the title box will cause a “permalink” detail to materialize underneath it with a button next to it that says Change Permalinks (unless you’ve already changed that). This permalink is what the web address of your post would be, once you publish it. You can change it to look a lot more presentable but at the moment we will leave it as it is.

Post Editing Area

Right below the title box is the post editing area. This is where you compose your post. You can enter text, format it in many ways, add images and captions, add links to other web pages and a whole lot of other things all from within this area.

There are two tabs in the top right hand corner labelled Visual and HTML. The mode you are in currently is the Visual mode where you get to see your text as it will appear on your website (for the most part). Clicking on HTML will give you the HTML (the code) equivalent of whatever you have typed in. This is how your post is actually stored by WordPress internally but you needn’t bother with it unless you know HTML and want to edit it directly.

The array of buttons along the top of this area are all used for formatting your text, in other words, managing how your text looks – does it look bold, underlined or italicized on the screen? Hovering your mouse on each of the buttons would give you a tooltip (with the keyboard shortcut for activating the button) that tells you what each button stands for.

The last button (15 in the above image) on the first line shows a tooltip that says ‘Show/Hide Kitchen Sink‘. Clicking it brings another set of options below the first one.

If you are already familiar with formatting text using editors like these (and you should be if you have worked with word processing software like Microsoft Word) or if you want to come back to this later, feel free to skip the following section on formatting options and jump to its end.

Formatting Options

The number in the braces next to the option names is the number of the corresponding button in the above image.

Bold (1) – Bolds the text
Italics (2) – Italicizes the text
Strike Through (3) – Strikes-through the text
Underline (17) – Underlines the text (this option on second line)

In order to apply any of these effects, key in the text, select it using your mouse (or keyboard) and then click on the appropriate button. Alternatively, you can click on the button (this depresses the button), write the text and then click the button again.

Unordered List (4) – This one lets you create an unordered list, that is, a list in which each item starts with a dot (aka “bullet”), just like the following:

• First item
• Second item
• Third item

Ordered List (5) – This is same as the above list, except that instead of bullets, you’ll see numbers to mark off the beginning of each item:

1. First item
2. Second item
3. Third item

Pressing Enter on your keyboard after each list item automatically creates a new line, indents it and displays the next number in the list. When you reach the end of the list, press Enter twice and the list will end.

Blockquote (6) is used to highlight a particular text so that it stands out from the surrounding text. This can be used for quoting what someone said, for example:

Be the change you want to see in the world – Mahatma Gandhi

The next three buttons are Left Align (7), Center Align (8) and Right Align (9) respectively. Selecting a paragraph and “left aligning” it makes it so that the characters at the beginning of each line are aligned vertically to the left most position possible. Right aligning does a similar thing, except in this case the last character in each line is made to align vertically along the right most position. In center aligning, the words in each line are arranged so that the middle of each line is vertically aligned.

The Full Align (18) option on the second line makes both the left and right ends of each text line vertically aligned.

This text that you are currently reading is left-aligned.

Insert/edit link (10) – This button is used for creating links to other webpages (like this) and it is depressed by default. When you want to create a link, write the text and select it. This will cause the link button to become undepressed. Now click on it and you will see the following dialog box (you will have to click on the ‘Or link to existing content’ arrow to unfurl the bottom half of the dialog box):

URL is the web address to which you want to link. In other words, when someone clicks on your “link”, this is the web address they will get directed to. The Title is the text that will appear when someone hovers their mouse on the link. If you tick the checkbox below the title option, WordPress will modify the link so that whenever someone clicks on the link, it will open up in a new browser tab/window (instead of in the same window/tab in which they clicked the link).

Finally, you see the “link to existing content”. Clicking on it will bring up titles of posts and pages on your own website. If you’ve been following this tutorial from the beginning, chances are you only have the two default entries here right now – Hello world! and Sample Page – that come with a fresh installation (can be seen in the image above).

Choosing any of them will automatically fill in the URL as well as the URL title. This is especially useful when you want to link to some post/page within your website and you don’t have its URL handy. Even if you do, choosing the post/page from here is a much faster way of doing it.

Once a link is created, you can highlight (or select) the linked text again and click on the link button. This will bring up the same dialog box with the details you entered earlier. You can edit the URL or other details and save them again. But if you want to remove the link completely so that the selected text is no longer clickable, then you should select the link-text and click the Unlink button (11).

Spellchecker (13): As you type your text into the editing area, WordPress simultaneously keeps checking for any spelling mistakes in your text. Whenever it finds one, it underlines the text in red, giving you a visual cue so that you can correct it.

Right-clicking on the underlined text will list zero, one or more potential corrections. These corrections can simply be the correct spelling of the word you actually intended or another word that matches very closely (spelling-wise) to the one that is underlined.

There’s another interesting thing about the spell-checker. Notice that there is a small arrow right next to the spellchecker button. Clicking on it will spill down a list of languages. If you are actually typing in some other language, say French, choosing it here will make sure that WordPress uses the appropriate language’s dictionary to spell-check your text and doesn’t complain about every word you type mistaking it for a wrongly-spelled English word.

Full Screen mode (14): WordPress calls this the Distraction Free Writing mode. True to its name, this button places the post editing area in a full screen mode where only the formatting buttons, the title and the editing area are visible. This helps you in concentrating on the content and not getting distracted by all the other options on the screen.

Format (16): This is a drop-down list that has Paragraph as its default. In this mode, everything you type is considered as part of a paragraph and every time you press Enter you actually start a new paragraph.

Address (in the drop-down list) is used for entering any kind of address, like a web addresses or a physical address within your content.

Preformatted is probably not all that intuitive, so I’ll explain it a bit. Whenever you enter some text in WordPress and save it, WordPress removes what it perceives as unnecessary extra spaces and lines, unless you tell it to preserve them as they are (and you can do that by setting the format to Preformatted). This can be useful if you are trying to display text based images (also known as ASCII images) on your site which depend a lot upon the exact indentations and spaces in them. Web developers also find this a handy way to display code on their websites, since code can look extremely confusing without all the spaces.

Headings 1 through 6 are meant to be used for various headings and sub-headings in your content. Heading 1 appears largest in size on screen. Thereafter each heading becomes a little lesser in size than the previous one.

Text Color (19): The default color of your post’s content depends upon your theme (we haven’t discussed themes in detail yet, but we’ll come to them soon). However, you can change the color of any of your text by simply selecting the text and choosing a color from the drop down palette next to the text color button.

Some people prefer to write their posts on their computers in software like Microsoft Word and then copy-paste the entire text into the post editing area. While doing so, you can use the Paste as Plain Text (20) or the Post from Word (21) buttons. The plain text option will remove all the extra formatting that you had done to the text within your desktop text editing software while the latter option will retain all the formatting as it is.

Remove Formatting (22) does what it says. You can select any text that has a bunch of formatting applied to it (made bold, colored etc) and click this button to remove all the effects and leave just the plain text behind.

Insert Custom Character (23) is useful if you want to insert stuff like mathematical symbols (like Ω, Σ), letters from languages that have an English-like alphabet (like î, ö) or other common symbols (®, ™) into your content.

Outdent (24) and Indent (25) can be applied to selected text to push them towards the border or away from it respectively.

This is an example of text that is indented once.

This is indented twice.

You cannot outdent a text and make it go outside the border, hence you can only outdent a text that has already been indented (one or more times). In order to do so, place your cursor on a line that has been indented and the Outdent button will become clickable. You can now click it to outdent the text till it reaches the border.

Undo (26) and Redo (27) apply to any actions that you do. If you just deleted a line by mistake, you could ‘undo’ it, for example.

There is also a Help button (28) that gives you a brief introduction to the editor used by the post editing area in WordPress.

With that, we finish our brief roundup of the various formatting options.

A Few Other Small Things

Once you start composing your post, you’ll find that a small update gets displayed in the bottom right hand corner of the editing area. Something like:

Draft saved at 2:39:11pm. Last edited by Sai on July 30, 2013 at 2:29 pm.

WordPress automatically saves your post as you type it, at regular intervals. That way, even if something unintended happens, like if you close your browser window by mistake, much of your post’s content is not lost. All you have to do in such a scenario is to login to WordPress again, find your post in the Posts -> All Posts screen and click on ‘Edit’. You’ll find the last saved version of your post ready to be further edited or completed.

Another cool thing about this area is that you can see an active word count of your post at any time, displayed in the bottom left.

Also, just above the word count, you might find a text that says ‘Path:’ followed by a few letters or words. This is information that can be used by web designers and developers for styling elements in a post.

Publishing Your Post

With the formatting options behind us, let’s just go ahead and publish a post. Type a few sentences into the editing area. It doesn’t have to be anything relevant to your site. Just something that spans a few lines.

Format it using some of the buttons if you wish. Make sure you have some title filled in as well, then click the blue Publish button on the right side of your screen.

You’ll soon see a message at the top saying “Post published” and a link to your new post next to it. That’s it. You’ve published the post. Wasn’t that simple? 🙂

Now click on the link to the post and have a good look at it. Then click on your website’s name. That will take you to the home page (the main page) of your website. At this point, it should look something like the following:

Let’s see what just happened one-by-one.

Understanding What Just Happened

The first thing is whatever you just typed (title and content) has been published for the whole world to see.

At the end of your post, you’ll see “This entry was posted in Uncategorized on …“. If you remember what we discussed about classifying content into categories in the last lesson, this ‘Uncategorized‘ is actually the name of a category itself. It gets created automatically during the WordPress installation and any post that you don’t care to assign to a specific category gets slotted into this one.

I personally feel Uncategorized doesn’t feel all that great a name, even for posts that don’t have a particular category. Thankfully, we can rename this category and create our own categories as well. We’ll look at both of these in the next few lessons. That way, your posts can have a more meaningful categorization when they need it.

You will also see that the date you created the post is automatically added and displayed next to the category information, even though you didn’t explicitly type it out anywhere while posting.

The third thing in the same line is a link that says ‘Edit‘. This won’t appear to your visitors, but since you are logged into your WordPress admin area, this link shows up here. So if you want to edit this post, you could simply click Edit here instead of fishing for your post in the Posts -> All Posts screen.

Below the post you just created, you’ll also see another post called ‘Hello World!‘. This is WordPress at play again. It creates the first post automatically, right at the moment when you install it on your web host.

Your new post appears on the top and it ‘pushes’ the older ‘Hello World!’ post down. As you keep creating new posts, the old ones will keep going lower on this page until there are about 10 posts (this number can be changed by you) on this page. After that the older posts will get successively pushed further into separate pages with 10 posts each and you will be able to access them, among other ways, by clicking on a link at the bottom of each page that says ‘Older posts‘.

Now let’s look at the sidebar on the right side of the website. The first thing that shows up is Recent Posts. Links to both the posts are stacked up neatly here, so readers need not even scroll down the home page to see your recent posts. They can just click on the link here if they find the title inviting.

Recent Comments shows a Mr.Wordpress having commented on Hello World! By this time, you know whom to attribute this to. Clicking on the post title takes you to all the comments made on that post. When you start getting visitors to your blog, comments can become an important way to engage with them. This section is not only useful to you but it can be to your visitors too (which is why it is shown on the website as people can get pulled into discussions when they see others commenting on something).

Archives lists the current month. As time goes by, this Archives section will list every month during which there has been at least one post. Clicking on the month takes you to a separate page with all the posts created in that month, in reverse chronological order.

Finally, comes Categories. Here you can see only one category called ‘Uncategorized’ as that’s the only one present right now. When you create more categories from within the dashboard, you’ll see them all listed here. This becomes yet another way of accessing your posts in a very organized manner. Clicking on Uncategorized takes you to a page with both the posts, since both of them are assigned to the same default category.

Let’s come back to the main area for a moment. Click on the title of the post you created and you’ll be taken to its own page. In this page you won’t see any other post. Plus, look at your address bar. This URL is the one that you saw as the permalink detail just below the title while creating the post. If you had edited it then, this would have been what you set it to be. Even now you can go back to the post and edit it, though generally you’ll want to get it right the first time (once you go live with your website). Right now, at the end of this tutorial series, we will delete all the posts that we created while learning and start afresh; so it doesn’t really matter.

Overall, you see how beautifully WordPress organizes everything on the site automatically. All that you really had to do was create a post and so many things popped up on your front page, making it easier for your visitors to navigate around the site.

A number of questions could be arising in your mind at this moment. What if you don’t want your posts to appear on the first page and you want something like a permanent page describing your business or passion there instead? What if you don’t want the categories or archives or other sections to appear on the sidebar? Plus, why does the site look so plain? Can we do something about the design right away? I am sure there are more questions. But don’t worry, we’ll handle them all in the coming lessons.

In the next lesson, we’ll discuss the other options on the post creation screen that we haven’t yet looked closely at.