WyntonMagazine – The “3-Column Page”

28.01.2010 in Tutorials, WyntonMagazine 1 Leave a reply

Setting up the additional page template for the three-column-page in WyntonMagazine version 1.x is a bit different to the way it´s done for BranfordMagazine as of version 4.x. The main difference is, Wynton does not have an options panel yet and you need to do some minor code changes. This tutorial shows you how it works. Don´t worry. It´s easy as 1,2,3.

Start with the Categories

First thing you need to setup is the three categories for the three different columns. So open your 3-column template file (tpl_3-column-page.php) and look for three positions that say something like:

“9″ in this case is the ID of the category you want to show here. Now you need to enter the IDs that match your database. If you don´t know hoe to find the IDs, read this tutorial. Again: there are of course three positions that you need to edit because you have three columns.

A list of headlines from this category

A similar thing needs to be done for the three (or more) headlines below the article teaser in each column. You need to look for this piece of code:

In this case “3″ is the number of headlines to grap and “9″ is the ID of the category again. There are of course also three positions to edit .

That´s it for the code-part. The next part is about writing text and adding images.

Writing text and adding images

Asigning the template

Before you can use the template you need to write a page, assign the template to the page and simply save it. You don´t need to enter any text except the title because this will be grabed from the posts of the three categories you have defined before in the code.

Writing posts and uploading images

Now open your write post panel in your WordPress admin area and write some text. Asign the post to one of the categories you show on the 3-column-page template. Now upload an image and make sure it has the correct size. 260×150 is used in the Demo for example. Copy the URL of the image from the uploader.

Adding images with custom fields

Go to the “custom fields” section of your write post panel and either enter a new custom field or select one from the dropdownbox if you already have used custom fields on the site. Enter “3-column-image” as the name of the custom field and the URL of the image as its value. You need only the last part of the URL after …/wp-content/uploads/ (if that´s your upload directory). For example “2008/02/wynton1.jpg” instead of the full URL “http://domain.com/wp-content/uploads/2008/02/wynton1.jpg” as you can see in the screenshot. Click on “Add custom field” and save the post.

That´s it. Now the image is grabed from the custom field and will be displayed on the 3-column-page together with an excerpt of the text from this article. Here you can see how it should look like.

custom fields, WyntonMagazine