Events

WordPress Tutorial: How To Add A Home Page Image To Your Post

1. Create the home page image you will use for your post. The image dimensions should be 470 pixels wide by 175 pixels high. Save as jpg, gif or png. Write down the name of your image. You will need to refer to the image name later.

For example, in my previous post about the Advent Pilgrimage Retreat for Married Couples, I created the item below by cropping the top portion of their PDF flyer and saved it as advent-pilgrimage.jpg.

2. Create your post the usual way. This includes writing the title, adding content, checking the categories, adding tags, and adding date of event (if appropriate). Remember to regularly save your work. Reference tutorial: How To Post a Blog.

3. To add a home page image in your post, upload the 470px x 175 px image you prepared for your blog. You will go through the same process as when you upload your regular pictures in your post. Reference tutorial: How to Add Pictures to Your Post,

a. Choose the image.

b. Upload image. Click “Full Size” and “Send to Editor.”



c. The uploaded 470px x 175px image will appear in your post


d. You can either:
- retain the uploaded image for the home page in your post where you posted it or move it to another location in your post, or
- delete the image from your post. The image has already been uploaded in the server and there will be no problem in making reference to that image in the next step.

4. Go to the “Custom Fields” Box and click the “+” sign to open.

5.a. Under the “Key” Column, select “latest_home_img” from the drop-down box. Then in the “Value” column, type in the name of the 470px x 175px image you made in number 1. In this example, I type “advent-pilgrimage.jpg” in the Value column.



5.b. Click on the “Add Custom Field” button and the link will be established. Sometimes, you might have to wait for a couple of seconds and you will see the successful custom link made as shown in the screen capture below.



6. Whatever the size of the image you post in your blog, to prevent text from rising beside the top level of your image (unless you want that effect) add the following code in the ‘Code” mode (beside Visual mode tab) right after the </a> tag of the image: <br clear=”all” />



7. If you’re finished with your posting, proceed to step 9.

8.a. If you’re posting an event, go to the “Event Editor” and click on “+” sign to open the box. Enter the date and time.

8.b. When you publish your post, the event information will appear in the “Upcoming Events” section on the right hand column of the website as well as in the Latest Posts section.



9. If you’re done with your posting. click on “Publish” button. Your latest blog will appear on the front page along with a home page image.