Online Magazine Tutorial: Part 1

This post is part of a series (Online Magazine):

  1. Online Magazine Tutorial: Part 1
  2. Online Magazine Tutorial: Part 2
  3. Online Magazine Tutorial: Part 3

Note: This post is over a year and a half old. You may want to check later in this blog to see if there is new information.

Natural Communities LayoutAs I’ve mentioned before, I’m going to post a few code examples from our online magazine, basically to compile some knowledge I’ve picked up from around the net and share a few developments of my own. In this first part I’ll cover our system for “sticky” banner and secondary articles on the homepage.

Categorizing the Headlines

Category ScreenshotThe system runs off of categories. Rather than use a plugin, the queries for particular categories are harcoded into the “home.php” template. The home.php file is the file that Wordpress looks for to create the front page of the blog, allowing for the creation of a static or pseudo static homepage. We created 2 categories, “banner” and “secondary”, underneath a main category called “articles”. Every article gets categorized as “article”, and then the article intended to show up as the main headline on the page is categorized as “banner”. The current version of the magazine shows 2 secondary articles, which are just articles classified as “article” and “secondary”, but the number shown is easily changed.

Then a particular category id is queried using query_posts(), and the number of posts to be pulled is defined as a parameter. The code for the banner category looks like this:

	
< ?php query_posts("cat=1&showposts=1");	?>
< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	<div class="banner" id="post-<?php the_ID(); ?>">
	<h2></h2>
		<div class="entry">
			< ?php the_excerpt(); ?>
			
		</div>
	</div>
  < ?php endwhile; endif; ?>
< ?php edit_post_link('Edit this entry.', '<p>', "); ?>

The part that gets the post is the second line:

< ?php query_posts("cat=1&showposts=1");	?>

where cat=1 tells it to get posts in the banner category, and showposts=1 grabs the first post using the default sort order, which in this case will be the newest post in the category. For the purposes of this setup, it’s wise to uncategorize old banner articles, but it won’t break the system to have more than one checked. The rest of the code is a standard Wordpress loop to display the banner post. To get the 2 secondary articles, you simply need to change the code to:

< ?php query_posts("cat=2&showposts=2");	?>

and run the loop again.

The Rest of the Best

To create the list of non-headline articles at the bottom of the page, we ran the following query:

< ?php query_posts("cat=3&showposts=13");	?>
<ul id="headlines">
< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
	< ?php if (!in_category(1) && !in_category(2)) { ?>
		<li>
			Posted < ?php the_time('F jS, Y'); ?></li>
	< ?php } ?>
< ?php endwhile; endif; ?></ul>

This grabs 13 posts and the if statement in the fourth line excludes posts in the banner and secondary categories, assuming that there are 3 total, leaving 10 posts for the unordered list of headlines.

Next I’ll show the code for featuring sponsors and randomizing the diplay at the top of the homepage and sponsor directory.

» » »

4 Comments

Jump to comment form | comments rss [?] | trackback uri [?]
  1. Dougal Campbell 03.21.07 / 2pm

    Thanks for sharing this sort of info. It’s always interesting (to me, anyhow) to see what techniques others use to customize their sites.

    Any plans to wrap something like this up as a theme that others can download?

  2. brett 03.21.07 / 2pm

    Not currently planned, but I intend to share enough code that, if you know a little about making templates, you should be able to pull off an online magazine. Because the system depends so heavily on the category customization, it doesn’t really work as a distributable theme, but would have to be a full package and that would have a pretty short life as WP gets upgraded.

  3. Circle Six Blog » Blog Archive » Online Magazine Tutorial: Part 2 03.21.07 / 5pm

    […] levels. This was accomplished in much the same fashion as the banner and secondary categories from Part 1. We just created three categories, one for each of three tiers, and then made them subcategories of […]

  4. Circle Six Blog » Blog Archive » Online Magazine Tutorial: Part 3 03.23.07 / 3pm

    […] we used our categories up creating the fixed position banner and secondary articles, and the tiered sponsorship levels. How do we organize our articles and create the archives now? […]

Have your say

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>




Safari hates me