2008 April | SpiderMarket

home blog resumé

I wrote a WordPress loop generator to expedite my own site building process. So far, I have only been able to incorporate the standard loop option into WordPress. I will be adding to this as I go, making it evermore complex.

Tabber

Mimbo is a great magazine theme. It is easy to manipulate, the CSS is clearly written, and there are so many uses for it.

For an example of a site that uses the Mimbo theme, look at The Brown Spectator. The Spectator has modified the Mimbo theme to fit its own needs, which is skill you’re about to learn. This theme is pretty neat in that it uses arrays to display data. This means that the code for Mimbo is incredibly clean, which makes for easy modifications. Let’s take a look at the front page’s file, the Main Index Template or index.php

<?php get_header(); ?>

Okay, this is just retrieving the header.php file listed as header in the WordPress theme editor. We’ll worry about that file later.

This snippet of coding looks for all posts in category 3 and then displays 1. The problem with this methodology is that WordPress doesn’t allow you to know really easily which category is cat=3. There are ways, but if you don’t know how, an easier way to display something in my humble opinion, is to use category names. To do this delete cat=3 from the code snippet and replace it with category_name=the name of the category you want displayed.

I think this is pretty obvious, but since I’m assuming people reading this are noobs like I was, I’ll take nothing for granted. If you want more posts displayed, change showposts=1 to showposts=whatever number posts you want displayed

The final part of the code is the beginning of a loop that displays what you just asked it to display. Basically, it just says that while there is still a post to display in the category deliniated, execute the loop.

    <a href=”<?php
the_permalink() ?>” rel=”bookmark” title=”Permanent Link to
<?php the_title(); ?>”><img
src=”<?php bloginfo(’template_url’);
?>/images/<?php
// this is where the Lead Story image gets printed

   $values =
get_post_custom_values(”Image”); echo $values[0]; ?>” alt=”"
id=”leadpic” /></a>
    <h3>

This code snippet represents what makes WordPress so incredibly powerful. Custom values are a coder’s best friend as they allow you to customize wordpress in any way you want: show pictures, display posts or alternative CSS, or any other creative thing you can think of.

In WordPress, when the_permalink() appears within a loop that is retrieving posts, it will print the URL address of the post. Likewise, the_title() will print the title of the post being retrieved. The code snippet bloginfo(’template_url’), will print the URL of the file your template is located: www.X.com/wp-content/themes/YOUR_THEME’S_NAME. As a string, bloginfo is one of the most versatile and useful that WordPress has to offer.

bloginfo() or get_bloginfo(’name’) prints the title of your blog
bloginfo (’description’) prints your blog’s tagline
bloginfo(’template_directory’) prints your blog’s template directory’s URL
bloginfo(’charset’) prints the character set your blot is using like UTF-8
bloginfo(’url’) prints your website’s URL
bloginfo(’rdf_url’) prints rdf/rss1.0 url’s
bloginfo(’rss_url’) prints rss .92 url
bloginfo(’rss2_url’) prints rss 2.0 url
bloginfo(’atom_url’) prints atom feed url
bloginfo(’comments_rss2_url’) prints comment’s rss 2.0 feed’s url
bloginfo(’pingback_url’) prints Pingback’s url
bloginfo(’admin_email’) prints administrator’s email address
bloginfo(’version’) prints WordPress version your blog uses
bloginfo(’html_type’) prints Content type for your blog
bloginfo(’wpurl’) URL of WordPress installation
bloginfo(’template_url’) Current template’s URL
bloginfo(’stylesheet_url’) prints the URL of the current template’s stylesheet
bloginfo(’stylesheet_directory’) prints the directory of the current template’s stylesheet

(Most of this was synthesized from the WordPress website)

In this particular code-bit, however, the bloginfo(’template_url’) code is wrapped in a img src= code snippet and followed by a /images/ another bit of code which I’ll explain in a second. Anyhow, what it all means is that there is an images folder in the directory where the theme is located. The location of the image itself and the type of image (jpeg, gif, png) is specified by a custom value.

Now, as I said, custom values are pretty cool. But there are plenty of great blog posts on how to use them online. I’m concerned specifically with the Mimbo template. Sometimes when I’ve posted columns, there aren’t coinciding pictures. Mimbo’s way of handling this is to give a dummy location for an image that doesn’t exist. This renders on firefox as a little box with nothing in it, and in Internet explorer, this renders as one of those giant broken file images we all love so much. So here’s how you deal with that.

<?php
// this grabs the image filename
$values = get_post_custom_values("Lead-Image");
// this checks to see if an image file exists
if (isset($values[0])) {
?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_url'); ?>/images/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="" id="leadpic"/></a>
<?php } ?>

You flip things around a bit. The original Mimbo code is a bit backwards. It assigns the location of the image to a variable before it checks to see if there is even an image in existence. In this example, however, the variable is assigned the value in the string get_post_custom_value(). And then, it checks to see if the value is empty. If it is empty, then it knows to skip putting in the picture, however, if the value comes back with something in it, then it knows to put a picture next to the title. Problem solved.

   <?php
   // this is where the name of the Lead
Story category gets printed

wp_list_categories(’include=3&title_li=&style=none’);
?></h3>

Just like the comment says. This is where the name of the Lead Story’s category gets printed. It gets printed in between h3 tags. Usually, when I implement Mimbo, I remove this portion of code for the lead story. The story is at the top of the page, and I generally just let it sit there. It’s pretty obvious that it’s the lead story, the category doesn’t matter so much, in my opinion. Once again, you can see an example of this on The Brown Spectator’s website.

    <a href=”<?php
the_permalink() ?>” rel=”bookmark” title=”Permanent Link to
<?php the_title(); ?>” class=”title”>
    <?php
// this is where the title of the Lead Story gets
printed
   the_title(); ?>
    </a>

This simply adds a link to the lead story. You can change the title of the link, if you want to, by changing the_title(). But why would you want to?

    <?php
// this is where the excerpt of the Lead Story gets
printed
   the_excerpt(); ?>
    {<a href=”<?php
the_permalink() ?>” rel=”bookmark” title=”Permanent Link to
<?php the_title();
?>”>More»</a>}
    <?php endwhile; ?>
</div><!–END FEATURE–>

This code snippet prints an excerpt of your lead story right below the title that was printed in the previous snippet. And then, right after the excerpt is printed, the there is a link that is added that looks like {More»}. Sometimes, people don’t like the snippets at the end that link to the article. In case you’re wondering, it’s safe to delete from “{<a href=”<?php
the_permalink() ?>”… to …”More»</a>}”.

<div id=”leftcol”>
    <?php
// this is where the Features module begins


query_posts(’showposts=3&cat=4′); ?>
    <h3><?php
   // this is where the name of the
Features category gets printed

wp_list_categories(’include=4&title_li=&style=none’);
?></h3>
    <?php while (have_posts()) :
the_post(); ?>
    <div
class=”feature”><a href=”<?php the_permalink()
?>” rel=”bookmark” title=”Permanent Link to <?php
the_title(); ?>”><img src=”<?php
bloginfo(’template_url’); ?>/images/<?php
// this is where the custom field prints images for each
Feature
   $values =
get_post_custom_values(”Image”); echo $values[0]; ?>” alt=”"
/></a><a href=”<?php the_permalink()
?>” rel=”bookmark” class=”title”>
      <?php
// this is where title of the Feature gets printed

      the_title();
?>»</a></div>
    <?php endwhile; ?>
</div><!–END LEFTCOL–>

<div id=”rightcol”>
    <?php
// this is where you enter the IDs of which categories you want to
display
$display_categories = array(5,6,7);
foreach ($display_categories as $category) { ?>
    <div class=”clearfloat”>
      <?php
query_posts(”showposts=1&cat=$category”);

$wp_query->is_category = false;

$wp_query->is_archive = false;

$wp_query->is_home = true;
       ?>

<h3><a href=”<?php echo
get_category_link($category);?>”><?php
   // this is where the name of each
category gets printed
      single_cat_title();
?></a></h3>
      <?php while
(have_posts()) : the_post(); ?>
      <?php
// this grabs the image filename
   $values =
get_post_custom_values(”Image”);
// this checks to see if an image file exists
   if (isset($values[0]))
{


?>
      <a
href=”<?php the_permalink() ?>” rel=”bookmark”
title=”Permanent Link to <?php the_title();
?>”><img src=”<?php
bloginfo(’template_url’); ?>/images/<?php $values =
get_post_custom_values(”Image”); echo $values[0]; ?>” alt=”"
/></a>
      <?php }
?>
      <a
href=”<?php the_permalink() ?>” rel=”bookmark”
class=”title”><?php
// this is where title of the article gets printed

      the_title();
?>»</a>
      <?php
the_excerpt(); ?>
      <?php
endwhile; ?>
    </div>
    <?php } ?>
</div><!–END RIGHTCOL–>
</div><!–END CONTENT–>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Mimbo for Bimbos

SpiderMarket is an online resource for developers of magazine websites using opens source Content Management systems like Joomla, Wordpress, or Drupal.

Below are the list of and links to the programs that have made my my life easier.

CG-FlashyTitles is a wordpress plugin that implements sIFR. All I have to do is embed the fonts. This plugin makes sIFR installation easy as pi (which is my favorite number).

Google (XML) Sitemaps Generator generates a handy-dandy sitemap whenever the site is updated. It basically indexes every single bit of content on a website and helps guide Google’s spiders. They crawl every nook and cranny, and then list the nooks and crannies on google. Simple, fun, and painless.

The Mimbo Theme is a beautiful theme that works well for magazines. The code is easy to read and modify to fit your needs.

Tom Schneider’s Role Manager is a wonderful plugin that allows you to keep idiots from ruining everything. If you run a blog that publishes multiple people’s work, then this plugin is for you. It ayou to assign roles, and give people the ability to access only the parts of the site that are relevant to their role. voilla, your WordPress installation is safe from pokey little puppies.

sIFR allows users to use any font they want in their website’s headlines. Woohoo, pretty titles!!

Statpress is a wonderful little plugin that keeps track of a website’s stats. It doesn’t put a lot of load on your server, and it is pretty accurate. It’s not as detailed as Google Analytics, but it’s detailed enough for most websites.

Wordpress is a simple, but powerful blogging platform. It’s fully customizable, and it is generally pretty fast. Templating Wordpress websites is easy-peasy, and handing them off to a different end user is a lot of fun. The back end is so intuitive even a baby with the proper training and incredible motor skills could update a wordpress site.

The Brown University Spectator is Brown University’s monthly conservative publication. They needed a navigable site that looked good. The theme we developed for them (a heavily edited version of Mimbo 2.0) achieves exactly that. The site is easy to get around, content is indexed well by Google, and the site is easy to update.

Content Management
After evaluating the needs of The Brown University Spectator, we decided to go with Wordpress, a simple blogging platform that can do some pretty cool things if you know how to tweak it. Since the Spectator requires that lots of people load articles, we wanted to use the simplest, most powerful program we could find. Wordpress is that program. Simple to use but incredibly versatile.

Since The Brown University Spectator has a lot of people using the back end, we have made sure to implement features that allow some people to do everything, and others just some things. By restricting access to certain areas of the site we prevent those would-be Curious Georges from irreparably messing everything up for the man in the yellow hat.

sIFR Headlines
sIFR allows you to embed TTF and OTF fonts onto the website. We implemented sIFR on The Brown University Spectator’s Website, so that they can make their online publication look more like their print publication.

Custom Regions
We’ve added custom regions on the website that make it easy for editors to add cartoons and pullout quotes to each article.

Search Engine Optimization (Getting Google to Find You)
We made it really easy for Google to find The Brown University Spectator’s website. We generated an XML Sitemap, used Search Engine Friendly URLs, and implemented a few additional simple adjustments. Now, the site is easy to find on Google. In fact, 75% of The Brown University Spectator’s hits come from people finding them using search engines.

Statistics
We’ve implemented StatPress. It’s one of my favorite blogging statistics plugins. While it does put load on the server, it’s not significant, and it provides any user relevant, interesting information that will allow them to drive more traffic to their site.

W3C Compliance
I have just brought the Spectator’s template into W3C compliance, something I plan to do on every site (although my own site has yet to be brought into compliance). W3C is the internet’s standard for valid code, which is important if you want your website to display correctly forever and ever.

Advertising
There are three zones for advertisements on The Brown Spectator’s website. The most lucrative is the top zone right underneath the navigation panel.