Setup the homepage of WyntonMagazine with categories and images

17.01.2010 in Tutorials, WyntonMagazine 1 5 Comments

WyntonMagazine, my prominent Wordpress magazine style theme, unfortunately does not have an optionspanel in the backend in the current version 1.1. That´s why you need to adopt some things right in the code. But don´t worry: It´s no rocketscience and this tutorial shows you how.

Using custom fields

Since WyntonMagazine uses custom fields to display images on the homepage, you should know what custom images are and how they work. Read all about custom fields here at the WordPress codex.

Getting started with the lead article

Open the index.php file in your favorite editor and look up this code snipped:

The code “showposts=1&cat=1″ means it displays 1 article from the category with ID 1. You need to change this ID to whatever category you like to show here. If you don´t know how to detect the category IDs read this article.

Also use the same ID where it says “include=1″ because this is the category headline.

The image of the leadarticle

Now lookup this code:

Here “Leadimage” is the name of the first custom field. You add this custom field in your write post panel of the WordPress admin area. Below the texteditor you will find a box called “custom fields”. You need to add a custom field if you use this function for the first time. Enter “Leadimage” (big “L”) into the “name” of the custom field and put the URL of an image into the “value” field as you can see on top of the screenshot. As you can see you only have to put a part of the image URL. It´s the part after the uploads folder where the images are stored.

If you have used the custom field once (in any article) you can use the dropdown menue like it´s also shown on the screenshot. In the screenshot you can also see the list of all custom fields that you can use in WyntonMagazine.

The featured articles on the right side

Another three articles are teasered on the top-right of the homepage. If you display the second, third and fourth article of the same category as the one in the leadarticle you need to be aware that the teasers can only be displayed if there are articles. For example if you set everything up and have only one article in this category you cannot expect the featured articles to display something because there is nothing to display. You will see it if you have another article written in this category.

Look up this code in index.php:

“showposts=3&cat=1&offset=1″ means that 3 articles from the category ID 1 are displayed. The offset is 1 which means the second latest article is the first to show. The latest article is already the leadarticle.

The images of the featured articles

Again a custom field needs to be set in the article in order to make an image appear here.

The name of this custom field is “featured-article-image” and you can set it up just like described before.

The lower area of the homepage

In the lower ara below the advertising space you find the latest articles from 6 different categories. You need to setup the IDs again by changing the three areas as follows:

“array(3,4,)” means the IDs 3 and 4 for the first column called “homeleftcol”. Also look for “homemidcol” and “homerightcol” and change the IDs acordingly.

The custom field for the image in this section is always “home-category-image”.

Imagesizes

As WyntonMagazine currently does not use TimThumb script to crop and rezize the images automatically you have to use the images in the correct sizes. You don´t need to use the exact sizes that I use in the demosite but I do reccomend to use them since they fit very good. The used sizes are:

• 350×250 pixels for the leadimage
• 258×80 pixels for the featured images
• 100×100 pixels for the thumbnails in the lower area

As you need the correct image size for the specific area where the post will be displayed, you will need more than one image for many articles. For a newsarticle that will be displayed as the leadarticle as long as it is the most recent newsarticle you will need two images and their custom fields. One will be the “Leadimage” and the other one will be the “featured-article-image”. Why? Well, because the leadarticle will become a featured article once it is not the latest from this category anymore.

I know this is not the best way of doing that and a next version of WyntonMagazine will use TimThumb script to crop and resize images automatically and will also get an optionspage for easier setup. But due to a lack of time there are no clear plans when this is going to happen.

custom fields, Homepage, setup, WyntonMagazine