Progress: 35% Complete

This is my first foray into modding the WP Framework theme. This is also my first attempt at making use of the wp-e-commerce plugin and my first attempt at adding another loop to the mix. Lots of firsts in this project. Oh, and don’t go thinking that the pixelated logo is a failed attempt at being a trailblazer. I’m trying to keep it neutral until launch.

Thus far WP Framework has proven to be a bit more complicated than Starkers, but it may very well be for good reason. It seems like the packaged CSS files that come with the theme account for a lot of the discrepencies between IE and Firefox. I have run into very few issues thus far with browser compatibility. Before it was a nightmare, but my novice-level CSS skills play into that, I’m sure. I also think it is awesome that it came with a container-style div. No more Blueprint implementation. Rock!

The WP E-commerce plugin breaks the drag-and-drop widget interface in Wordpress 2.8.1, which is a real bummer. I’m hoping they iron that kink out before this site is ready to launch. I haven’t had much of a chance to play with the interface itself as of yet, but from what I can see in the admin portion of the site it all looks quite intuitive and easy to use, which is exactly what you’re looking for with a site like this. I’m not sure I’d be comfortable using it for a company with a large catalog and a lot of traffic, but for something like a botique tuning shop its lightweight, cost-effective… a good choice all around.

As for the loop, I’ll first say that Wordpress calls the while statement that pulls posts from the database “The Loop.” The goal was to split the blog entries in two. The top of the page was to have three boxes with an image and a line of text. These had to be dynamic (they could be changed without any hard coding). Because of the nature of the project it was unnecessary to display categories on the site. I am actually using categories to filter blog posts and change CSS instead. First, I wrote the CSS for the top boxes.

.topbox {
display: inline-block;
background-color: white;
vertical-align: top;
border: 1px dotted black;
margin: 18px 5px 5px 5px;
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size: 0.9em;
}

.topbox p {
margin: 5px;
}

.topbox p img {
margin: 0px 0px 5px 0px;
border: 1px dotted red;
}

Not the best look, but its something to work with. Now it was time to add the loop and the HTML to header.php. I consulted Wordpress’s documentation to get this piece of code to start a basic loop.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- do stuff ... -->
<?php endwhile; ?>

Turns out that the documentation left out an endif after that endwhile statement.  It should read…

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- do stuff ... -->
<?php endwhile; endif; ?>

Now, I wanted to filter by category.  The way to do this is to throw an extra line of code in after the second line…

<?php if (!in_category('TopBox')) continue; ?>

This says “if the post isn’t in the TopBox category, skip it and cycle back through the loop.”  The end user can make a new post, insert a 190×110 pixel image and a line of text and as long as the category is set to TopBox it will automatically kick into rotation at the top of the site.  Good way to add a type of feature section to your blog.  Now, this doesn’t account for the situation in which you have 4 posts in that category.  That would blow my page up.  I’ll jump that hurdle in the next session.

Next steps: kill the white borders on those nav buttons, figure out my mouseover CSS issues, figure out how to get those top boxes to appear on pages, figure a way to place the shopping cart widget on the sidebar.  Figure, figure, figure.

Patton and The Kingdom come from Netflix tomorrow, so it may be a couple days before I do any more work on it. Can you believe I’ve never seen Patton?