Step-by-step write posts and use images on the homepage of BranfordMagazine

The purpose of this tutorial is to provide a step-by-step manual that allows an unexperienced WordPress user to write posts and add images by using the basic WordPress and advanced BranfordMagazine theme functionalities, especially custom fields (German: benutzerdefinierte Felder).

The BranfordMagazine theme uses an advanced WordPress functionality to display images on the homepage as teasers or thumbnails. These images don´t need to appear in the post itself. They are completely independent from the images that are integrated into the post. Only the homepage is effected by this feature.

The theme uses three areas on the homepage where you can use images which have to be integrated by using the custom fields functionality. The first one is the tabbed section containing the leadarticle on top of the homepage. The two others are the left column containing the featured articles and the middle column (called “rightcol”) with the square thumbnails.

The tabbed section

Any article that is written in the WordPress write post panel and assigned to the “News” category will appear in this area. This is the default setting on the demoblog and can be different on any specific website.

If you now want to add the image that appears in the Homepages tabbed section just upload the image you like to use or select it from your WordPress media library.

Here is how to upload an image from your computer.

Copy the last part of the imagepath after …/uploads/ which is the default upload directory.

Then close the media library and go back to the write post panel. Scroll down to the custom fields area. Either type in the name or “key” of the custom field (leadimage in this case) or select it from the dropdown menue. You have to do typing just once. Any key that has once been used will be available from the dropdown menue. Paste the part of the imagepath into the “value” field.

Then click on “Add custom field”. It should look like this.

Save and publish your post and you´re done for the first article.

The featured articles (left) and the rightcol (in the middle)

There is not much to say about these areas because they work exactly the same as the leadstory. The only differences are the “keys” of the custom fields which are called “featuredarticleimage” and “rightcolimage”. Also check out the tutorial for the featured articles.

Always make sure you chooose the right size for the images otherwise it will kill your design. 255×88px for the images of the featured articles and 75×75 for the rightcolumn images are just fine.

Hope this little tutorial helps to get the first steps managed. Also check out my other tutorials and the support forums.