Writing a Post Using WordPress

Here are step by step directions on how to use WordPress to create and post a new blog entry. This tutorial will take you from logging in, writing your entry, uploading and inserting images, and publishing your entry. You can click on the images to see larger versions.

1. Login. For many WordPress (referred to as WP from here on out) sites, the login URL is usually located at http://sitename.com/wp-login.php. Once you are signed up as a writer for Gizmos for Geeks, we will provide you with our login URL. Enter the username and password you were provided with. You may and should change that password later by navigating to Users -> Your Profile within the WP interface.

1-login-t.png

Fig 1. Login Screen

2. Once you are logged in, you will see the WP Dashboard as in this screenshot below. Navigate to the Write Post screen, by hovering your mouse over the Write entry on the horizontal navigation bar and then selecting Write Post. Incidentally, depending on the plugins in use by the WP installation, navigating to the Write Post screen may take more than 1 click or be in a menu that’s laid out differently.

2-dashboard-t.png

Fig 2. Dashboard

3. In figure 3, you see the start of an article entitled “This is the Title of My Best Post Ever”. You can simply type into the input box labeled Post. Hit Enter to create new paragraphs. This is pretty much how your blog entry will appear when you publish it.

One other point here is the use of the “more” tag in WP. Essentially, if your post is very long, many times you don’t wish that appearing on the front page of the blog because it will push all of the other posts down and create a very long front page. To avoid this, when you insert the “more” tag, WP will automatically ‘break’ the post at this point on the front page and display a link usually entitled “Read more…”. Use the “more” tag wisely so that enough of the introduction of your article appears on the front page of the blog.

You can insert a “more” tag into your post by clicking the yellow highlighted button on the Post toolbar. You will then see where the “more” tag will appear in your post.

3-write-t.png

Fig 3. Writing an Entry

For every post you write, you should choose categories that your post should be placed into. Although a post can have multiple categories, it should have at least one. You can find the Categories choice box to the right of the writing box.

At any point while writing, you may click Save to save your work. You can always come back to it later even if you log out.

4. Uploading an image is relatively simply. Just scroll down a bit on the Create New Post page, click the Browse button and select the image you want to upload from your computer, then click the Upload button. Wait for your browser to upload the image.

4-uploadpic-t1.png

Fig 4. Upload an Image

5. Select and Insert an Image into Your Post

Once your image is uploaded, you’ll see a screen as in Fig 5. Select the following options next to it – Show: Full Size and Link to: None. Insert it into your post by clicking Send to Editor. You will then see it in your post as in Fig 6.

5-uploadpic2-t.png

Fig 5. Insert Image into Your Post

6-uploadpic3-t.png

Fig 6. An Image embedded in your Post

6. Here is how you modify the HTML code to include a reference to the CSS class that formats the image nicely on the page. First click the Code button (highlighted in Fig 7) at the top of the Post input box. Then insert the text class=”pimage-left” inside the <img /> tag. This floats the image to the left of the text and puts a nice border around it. If you would like the image to float to the right, then change the text to class=”pimage-right”.

At this point, you should also change the alt text to a brief description of the image. In this case, it’s “Bionic Lens”.

7-uploadpic4-t.png

Fig 7. Modify HTML to Float Image

Once you click back to the Visual tab, you will see the result of your code modification.

8-uploadpic5-t.png

Fig 8. Result of Modifying HTML

7. [Optional] If you are writing a post or story for publication in the future, go to the Post Timestamp and enter in a new date and time.

9-timestamp-t.png

Fig 9. Editing the Post’s Date and Time of Publication

8. Once you are done writing your post, you can click the Publish button to either publish it right away onto the blog or put it into the queue if you’ve edited the timestamp to be in the future. If you do not have enough permissions, you will not see the Publish button, but do click Save, and the blog’s administrators will be able to publish your story.

You can always view your Drafts as well as a complete listing of posts and their publication dates by navigating to the Manage->Posts page.

10-manage-posts-t.png

Fig 10. Manage Posts