The Columnist

Benji — Sat, 08 May 2010 07:55:43 +0000

The Columnist WordPress theme is inspired by traditional newspaper layouts and the grid structures and typography techniques they employ.

Features & functionality include:

WordPress thumbnail support
Widget support
css3 column structures
jQuery functionality and animations
Helvetica in all its greatness
Custom fields for images
Custom meta fields
Featured latest post
Automatic latest post for each category

This theme can be applied to any content type; whether it be a photography portfolio, travel journal, tutorial service, news provider or a blog for your twelve cats, The Columnist theme will do the trick.

You can find The Columnist theme support and help documentation for topics such as: Adding images, Text styles, Downloading and installing, Video posts, The making of and Version control.

Version control

Benji — Fri, 07 May 2010 11:52:44 +0000

Version 1.0

10th May 2010

Features & functionality include:

WordPress thumbnail support
Widget support
css3 column structures
jQuery functionality and animations
Helvetica in all its greatness
Custom fields for images
Custom meta fields
Featured latest post
Automatic latest post for each category

Download this version (1.0)

Text styles

Benji — Wed, 07 Apr 2010 08:33:49 +0000

This post demonstrates the variable text elements and styles supported in The Columnist WordPress theme. If you see that I may have missed any, please let me know — a quick comment below will do the trick.

For the purposes of this demonstration, Latin dummy text will be used as a placeholder. Shall we start with the exponential typographic hierarchy:

Lorem ipsum

Curabitur vitae

Suspendisse etam

Praesent placerat

Regular paragraph text looks like this consectetur adipiscing elit.

Aenean a regular link magna. This link may appear as visited if you have already visited my website. Class taciti strong sociosqu torquent elit consect etam mordor.

The block quote uisque pulvinar neque eu lectus volutpat at porta tellus dapibus. Donec ut mi magna torquent elit consect etam mordor.

A couple of lists:

Lorem pulvinar nunc ipsum
Adipiscing etam
Donec ut mi magna
Morbi sit amet metus lectus
Suspendisse ultrices orci ut risus

Order that list:

Dolor sit amet
Etam meta mordor
Morbi malesuada
- Lorem ipsum
- Adipiscing etam

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar neque eu lectus volutpat at porta tellus dapibus. Fusce lobortis eros vel mauris viverra elementum. Nunc ac nunc erat, sit amet iaculis odio. Pellentesque tempor urna eu velit laoreet volutpat.

Column Structures

There are three classes: "one-column", "two-column" and "three-column" that can be applied to tags such as

and

. This basic paragraph text has the class "one-column" which enables it to span the full width of the column. By default, the post text is given this same column layout. Below are some examples of the useful classes which allow for varied column structures.

Two-column

This text has the class "two-column" and obviously is split over two columns. Nunc ac nunc erat, sit amet iaculis odio. Pellentesque tempor urna eu velit laoreet volutpat. Maecenas facilisis ante nec sem congue nec gravida lorem lacinia. Curabitur condimentum leo at mi lobortis etam mordor.

Three-column

This text has the class "three-column" and is split into three even columns. Nunc ac nunc erat, sit amet iaculis odio. Pellentesque tempor urna eu velit laoreet volutpat. Maecenas facilisis ante nec sem congue nec gravida lorem lacinia. Proin tristique condimentum neque, sit amet congue tellus fermentum eu. Suspendisse laoreet, metus eu eleifend. Curabitur condimentum leo at mi lobortis etam mordor.

The Columnist has a strong emphasis on typography. It uses an exponential formula for text hierarchy and the greatness of Helvetica along with column layouts and newspaper theme.

So, is there something I missed? Go ahead and let me know →

Adding images

Benji — Mon, 08 Mar 2010 13:14:55 +0000

Image usage

The Columnist theme is best suited to having one single ‘hero image’ that supports the story or article — much like a newspaper. The image above is an example of the hero image.

Hero Image: 625px × 390px
Thumbnail Image: 140px × 180px
One-column width: 452px
Two-column width: 218px
Three-column width: 140px

The hero image 625px × 390px

The hero image is 625 pixels wide and 390 pixels high. You can define which image you would like to use by entering the URL in the custom field titled: ‘Large Image (625×390)’.

The thumbnail image 140px × 180px

The post thumbnail image is 140 pixels wide and 180 pixels high. Similar to the hero image, you can define the thumbnail image by entering the URL in the custom field titled: ‘Thumbnail Image (140×180)’.

In-post images

You can easily insert images into your posts by using the regular tag. Your image is automatically re-sized in relation to the column structure being used. To demonstrate this, a single image below will be used for each column scenario. To learn more about defining the post column structure you can check out the Text style post.

One-column: 452px wide
Two-column: 218px wide
Three-column: 140px wide

The Columnist installation

Benji — Tue, 09 Feb 2010 11:29:01 +0000

This post demonstrates the step-by-step process to installing The Columnist WordPress theme and applying it to your blog or website.

1. Download

Download TheColumnist.zip file here or by the .zip icon anywhere on this website. It contains all the necessary files for functionality and styling of the theme.

2. Upload

Upload the unzipped file to your web server into the following Worpdress file structure:
/wp-content/themes/

3. Activate

Go to “Themes” which can be found under the “Appearance” section in the left-hand column of your Admin screen. Within Themes you will see the recently uploaded “The Columnist” appear as an available theme. Go right ahead and activate!

The making of

Benji — Sun, 10 Jan 2010 00:51:36 +0000

Inspiration

The Columnist is inspired by grid structures, Helvetica, jQuery, WordPress, photography, minimalism and the interwebs! Oh, and this YouTube clip.

Grid structure

The Columnist aligns to an underlying 12 column, a custom 6 column and a 16 pixel baseline grid. It plays on The Golden Ratio for major column structures and an exponential typography scale for headings and text.

The Columnist grid:

My ears are burning

Benji — Thu, 10 Dec 2009 04:04:04 +0000

People talking about The Columnist

This is a wonderful template. It is exactly what I have been looking for.

People using The Columnist

Easily one of the most beautiful and organically easy to use WordPress themes I have come across.

A video post

Benji — Tue, 10 Nov 2009 03:03:34 +0000

Embedded videos display the same as the hero imagery — positioned above the post and full width. This awesome tilt-shift clip is one of Keith Loutit’s amazing works.

The embedded videos are positioned and sized using CSS by selecting the object tag. When copying/pasting the embed code snippet, make sure it includes the object tag to achieve the Hero positioning. This technique will be revised in future releases…