Archive for December, 2007

The Ideal Magazine-style Theme

Tuesday, December 18th, 2007

I’ll keep this one simple: What do you look for in a magazine-style theme design?

Thus far, I’ve released four themes, three of which are specifically targeted at start-up news/magazine sites. Based on the demand, I’d think it’s fair to say that we are making things that you like. Tubular blogs always seemed boring to me, which is one of the reasons that GPP puts all this effort into magazine themes. Our next theme design, which is currently being worked on in the shop, is looking pretty cool. It includes a minimal five-post column display below the four main AJAXed posts with room at the right for ads. Here is a peek:
demo screenshot

Develop Better Wordpress Themes using CSS Frameworks

Sunday, December 9th, 2007

CSS Frameworks have freed me from the headaches involved with the many repetitive tasks involved with developing Wordpress themes. Generally speaking, CSS frameworks break down your stylesheets into components, which can be reused across projects. This allows rapid development of sites using pre-written and tested components with logical nomenclature. I would be remiss if I didn’t share a few of resources that I use when building my sites.

Welcome to Graph Paper Press

Sunday, December 9th, 2007

Graph Paper Press is a repository for Wordpress themes created by photographer and multimedia artist Thad Allender. Graph Paper Press pedals sophisticated modular designs that can transform your blog from a tubular list of posts into an aesthetically-pleasing news magazine website.

History
Graph Paper Press started as a side-project for Thad Allender in 2004 by designing multi-author blogs and social websites for non-profit organizations, small businesses and individuals. As the Wordpress blogging community grew, so did the demand for new designs that stretched the limits of the popular CMS. Enter Graph Paper Press.

Today
Graph Paper Press focuses on creating graphically minimal, content-rich designs that provide your readers with multiple entry points to access your content.

Tomorrow
Graph Paper Press will release one theme every two weeks on Monday starting in January of 2008. If you have a specific request, please get in touch.

Gridline News

Sunday, December 9th, 2007

Gridline News is a clean and modular news magazine theme for Wordpress 2.3 and up that is packed with AJAX to add flexibility to the important home page real estate. The main story section contains four of your latest posts layered on top of each other, accessible via tabbed navigation. Gridline News can transform your tubular blog into a full news magazine website.


Get Gridline News for Personal Use

Buy Now
This $24.99 package is for individuals who intend to use this theme on a single website. This is the full version and includes all scripts, theme files, and images. The credit link is not required to stay in tact.

Get Gridline News for Developers

Buy Now
This $99 package is for developers who intend to use this theme on multiple websites. This is the full version and includes all scripts, theme files, and images. The credit link is not required to stay in tact.


Buyout Rights for Gridline News

Don’t want another site on the world wide web to look like yours? Buy the full rights to Gridline News and it will no longer be available for purchase on our website. It is yours to do with as you please! Contact us for inquiries and rates.

Installation

  1. Unzip the downloaded file
  2. Upload the entire “Gridline News″ folder to your “/wp-content/themes/” folder
  3. Log in into your WordPress control panel
  4. Click the Presentation tab
  5. Select the “Gridline News” screenshot

Configuration

  1. GETTING STARTED: To get Gridline News off and running, you will need a minimum of 5 categories to populate the homepage. The main section on this page is the latest article posted in category 1, followed by category 2, 3, and 4. The three posts at right are all from category 1, offset by 1 to avoid duplication. The other sections display the latest articles in their respective categories.
  2. YOUR CATEGORIES: In the “home.php” you will find a series of query_posts functions which refer to specific category ID numbers from my database.
    You will need to change the category numbers to reflect the ID numbers of the categories that you want to display on your homepage. Category numbers can be found in your control panel under Manage->Categories. There are a total of 6 spots in the home.php file to change to reflect the post categories that you want to display on the main page.
  3. YOUR PHOTOS: To have thumbnails in each post, crop the thumbnail to 150px wide by 100px tall, upload it to the web and copy the URL to the photo. Within Wordpress’ Write Post page, scroll down towards the bottom and click on the Custom Fields section. Add a key called “small_photo” and then paste the link to the thumbnail photo into the key value field. Photos posted within each entry’s post will should not exceed 350px wide by 225px tall, otherwise, the images will bleed out and make you site look icky. View a screenshot of the custom fields used for the Gridline News Theme. Make sure your custom field values and keys match those in the screen shot above (but change the key value to the exact url to your images.) Custom fields are one of the most overlooked, yet powerful, tools in Wordpress. Read more about using custom fields.
  4. YOUR AUTHORS PAGE: Gridline News comes packaged with an author archive (authors.php), which will display some author specific info pulled from the Users page in your Wordpress installation. In order for the author’s image to show up, you’ll need to place a jpg of the author titled by the author’s last name in the wp-content/themes/gridline/images/authors/ folder. For instance, mine is Allender.jpg, sized at 75px X 75px. Here is an example author page.
  5. STYLES.CSS: Unlike most Wordpress themes which plug all the css in one file called styles.css, Gridline utilizes the Blueprint CSS framework to help separate positioning, typography, forms and what I’ll refer to as custom or gridline specific styles. To edit all custom gridline specific styles, you’ll need to edit the style.css file located in your wp/wp-content/themes/gridline/ directory.
  6. COMMON ISSUES JQuery, the javascript framework used in this theme, and Prototype, the javascript language that powers some Wordpress plugins, don’t like each other. To create a pleasant user-experience, deactivate all plugins that use the Prototype javascript framework.

ABOUT BLUEPRINT


All Gridline Themes utilize the CSS framework called Blueprint. Who is credited for the ideas behind Blueprint? Some of the best designers on the web. They include Jeff Croft, designer for Blue Flavor, Khoi Vinh, design director for NYTimes.com, Nathan Borror, Christian Metts, Eric Meyer, Wilson Minor, Angus Turnbull, Olav Bjorkoy and a few others. Most major websites use some form of css framework to allow for rapid, consistent development and design. Take the Blueprint 101 course to learn about all the possibilities.


CAUTION


If you are new to Wordpress, HTML or CSS, Gridline probably isn’t the best theme to try to learn on. Gridline is, however, perfect for those who want to learn by doing, reading and practicing life inside a sophisticated Wordpress magazine theme.

Gridline Lite

Sunday, December 9th, 2007

Gridline Lite is a free minimalist theme for Wordpress 2.3 and up with full sidebar and bottombar widget support that utilizes a CSS framework to help streamline development and customization. Gridline pulls in the most recent post, with five recently posted stories listed in offset backgrounds below to keep your readers attention.


Download Gridline Lite

DOWNLOAD

This free Wordpress theme is for individuals who intend to use this theme on a single website. This is the full version and includes all scripts, theme files, and images. The credit link is required to stay in tact.

You might also like…


Installation

  1. Unzip the downloaded file
  2. Upload the entire “Gridline Lite″ folder to your “/wp-content/themes/” folder
  3. Log in into your WordPress control panel
  4. Click the Presentation tab
  5. Select the “Gridline Lite” screenshot

Configuration

  1. GETTING STARTED: To change the number of main entries listed on your homepage, click Options > Reading in your Wordpress interface.
  2. Photos posted within each entry’s post will should not exceed 590px wide, otherwise, the images will bleed into the sidebar and make you site look icky.
  3. YOUR AUTHORS PAGE: Gridline Lite comes packaged with an author archive (authors.php), which will display some author specific info pulled from the Users page in your Wordpress installation. In order for the author’s image to show up, you’ll need to place a jpg of the author titled by the author’s last name in the wp-content/themes/gridline/images/authors/ folder. For instance, mine is Allender.jpg, sized at 75px X 75px. Here is an example author page.
  4. STYLES.CSS: Unlike most Wordpress themes which plug all the css in one file called styles.css, Gridline utilizes the Blueprint CSS framework to help separate positioning, typography, forms and what I’ll refer to as custom or gridline specific styles. To edit all custom gridline specific styles, you’ll need to edit the file style.css in your wp/wp-content/themes/gridline/ directory.

ABOUT BLUEPRINT


All Gridline Themes utilize the CSS framework called Blueprint. Who is credited for the ideas behind Blueprint? Some of the best designers on the web. They include Jeff Croft, designer for Blue Flavor, Khoi Vinh, design director for NYTimes.com, Nathan Borror, Christian Metts, Eric Meyer, Wilson Minor, Angus Turnbull, Olav Bjorkoy and a few others. Most major websites use some form of css framework to allow for rapid, consistent development and design. Take the Blueprint 101 course to learn about all the possibilities.


CAUTION


If you are new to Wordpress, HTML or CSS, Gridline probably isn’t the best theme to try to learn on. Gridline is, however, perfect for those who want to learn by doing, reading and practicing life inside a sophisticated Wordpress magazine theme.

Gridline Magazine

Saturday, December 8th, 2007

Gridline Magazine is a theme for Wordpress 2.3 and up that makes extensive use of custom queries and custom fields to create an unique blogging format. Gridline can transform your blog into a full-blown Magazine or news Web site. Gridline utilizes Blueprint, a CSS framework that streamlines development by utilizing an easy-to-use grid and sensible typography. View an example Wordpress page created with Gridline.


Get Gridline for Personal Use

Buy Now
This $24.99 package is for individuals who intend to use this theme on a single website. This is the full version and includes all scripts, theme files, and images. The credit link is not required to stay in tact.

Get Gridline for Developers

Buy Now
This $99 package is for developers who intend to use this theme on multiple websites. This is the full version and includes all scripts, theme files, and images. The credit link is not required to stay in tact.


Buyout Rights for Gridline

Don’t want another site on the world wide web to look like yours? Buy the full rights to Gridline and it will no longer be available for purchase on our website. It is yours to do with as you please! Contact us for inquiries and rates.

Installation

  1. Unzip the downloaded file
  2. Upload the entire “Gridline″ folder to your “/wp-content/themes/” folder
  3. Log in into your WordPress control panel
  4. Click the Presentation tab
  5. Select the “Gridline” screenshot

Configuration

  1. GETTING STARTED: To get Gridline off and running, you will need a minimum of 6 categories to populate the homepage. The main section on this page is the latest article posted in category 1. The three posts at right are all from category 1, offset by 1 to avoid duplication. The other sections display the latest articles in their respective categories.
  2. YOUR CATEGORIES: In the “home.php” you will find a series of query_posts functions which refer to specific category ID numbers from my database.
    You will need to change the category numbers to reflect the ID numbers of the categories that you want to display on your homepage. Category numbers can be found in your control panel under Manage->Categories. There are a total of 6 spots in the home.php file to change to reflect the post categories that you want to display on the main page.
  3. YOUR PHOTOS: To have thumbnails in each post, crop the thumbnail to 150px wide by 100px tall, upload it to the web and copy the URL to the photo. Within Wordpress’ Write Post page, scroll down towards the bottom and click on the Custom Fields section. Add a key called “small_photo” and then paste the link to the thumbnail photo into the key value field. Photos posted within each entry’s post will should not exceed 590px wide, otherwise, the images will bleed into the sidebar and make you site look icky. View a screenshot of the custom fields used for the Gridline Theme. Make sure your custom field values and keys match those in the screen shot above (but change the key value to the exact url to your images.) Custom fields are one of the most overlooked, yet powerful, tools in Wordpress. Read more about using custom fields.
  4. YOUR AUTHORS PAGE: Gridline comes packaged with an author archive (authors.php), which will display some author specific info pulled from the Users page in your Wordpress installation. In order for the author’s image to show up, you’ll need to place a jpg of the author titled by the author’s last name in the wp-content/themes/gridline/images/authors/ folder. For instance, mine is Allender.jpg, sized at 75px X 75px. Here is an example author page.
  5. STYLES.CSS: Unlike most Wordpress themes which plug all the css in one file called styles.css, Gridline utilizes the Blueprint CSS framework to help separate positioning, typography, forms and what I’ll refer to as custom or gridline specific styles. To edit all custom gridline specific styles, you’ll need to edit the style.css file located in your wp/wp-content/themes/gridline/ directory.

ABOUT BLUEPRINT


All Gridline Themes utilize the CSS framework called Blueprint. Who is credited for the ideas behind Blueprint? Some of the best designers on the web. They include Jeff Croft, designer for Blue Flavor, Khoi Vinh, design director for NYTimes.com, Nathan Borror, Christian Metts, Eric Meyer, Wilson Minor, Angus Turnbull, Olav Bjorkoy and a few others. Most major websites use some form of css framework to allow for rapid, consistent development and design. Take the Blueprint 101 course to learn about all the possibilities.


CAUTION


If you are new to Wordpress, HTML or CSS, Gridline probably isn’t the best theme to try to learn on. Gridline is, however, perfect for those who want to learn by doing, reading and practicing life inside a sophisticated Wordpress magazine theme.

Visualization

Friday, December 7th, 2007

Visualization is a grid-based, magazine-style theme for Wordpress 2.3 and higher that is easy to customize and make your own. The theme utilizes Blueprint, a CSS framework, which streamlines development time by utilizing an easy-to-use grid and sensible typography. Visualization can transform your blog into a full-blown magazine or news Web site.


NOW JUST $24.99

Get Visualization for Personal Usage

Buy NowThis $24.99 package is for individuals who intend to use this theme on a single website.

NOW JUST $99.99

Get Visualization for Developers

Buy NowThis $99 package is for users who intend to install this theme on multiple websites.


Buyout Rights

Don’t want another site on the world wide web to look like yours? Buy the full rights to this theme and it will no longer be available for purchase on our website. It is yours to do with as you please! Contact us for inquiries and rates.

Visualization Includes
  • Widgetized sidebar and bottombar
  • Optional custom header images
  • Dynamic sidebar to maximize homepage real estate
  • Nine spots on the homepage to pack with content
Getting Started

To get Visualization off and running, you will need a minimum of 9 categories. The main section on this page is the latest article posted in category 1. The other sections display the latest articles in their respective categories. If you want a post a Sports article and have it show up in the main section, you would simply put the article in category 1 and Sports categories. The Sports section below will offset by one, enabling the main page to never publish duplicated content. See the screenshot below for reference.
Visualzation tutorial

Using Photos

Visualization utilizes Wordpress’ custom fields to display and manage each individual entry’s thumbnail photos. These include the 270 X 100 px skinny horizontal images (custom field key value=thumbnail) and a 75 X 75 pixel images (custom field key value=square). The screenshot below demonstrates the custom fields used for Visualization. The “photo” key value is optional if you prefer to program in additional lead photos measuring 590px wide into your theme design. Visualization Custom Fields

Common Issues

JQuery, the javascript framework used in this theme, and Prototype, the javascript language that powers some Wordpress plugins, don’t like each other. To create a pleasant user-experience, deactivate all plugins that use the Prototype javascript framework.