Propaganda Party: The Pop Stalin Design Manifesto

The Creation of Manifesto ‘09

When I thought about the redesign of my blog, I wanted something that had a magazine feel to it but not the full functionality of a magazine theme. I didn’t need to display sections for different categories because I still wanted to run a blog and not a magazine–though in the future I could see myself actually adding that sort of functionality and turn my blog into a magazine.

I looked at all the available magazine layout themes, both paid and free, to get a feel for what it is that I like about them. The recurring theme that I liked about magazine layouts is the grid system. So I put pencil to paper and began sketching box after box attempting to get a simple grid layout that would satisfy my desire to have a magazine-esque layout. After a prototype or ten I had my creative juices flowing pretty well. I fired up Photoshop and played with color and layout until I came close to the design you see now. Just a side note, when it comes to my own sites, I often deviate from my Photoshop concepts after I start coding. For example, in my design concept, my footer was part of the five regular posts (limiting my posts to 4 on the front page). After playing about a bit with widths and other CSS styles, I decided to actually create a footer and use that space for additional posts.

After getting a close approximation of what I wanted it to look like, I started to think about how it would function. I wasn’t wild about the idea of having to create a “featured” category just to have a featured post. If I had a featured category, did I want to link to it and if I didn’t, what was the point of having a featured category to begin with. After deciding that a featured category was not an option, I looked for plugin’s but I didn’t want to use theme to achieve that option either. I decided not to allow my limited PHP knowledge hold me back from what I knew WordPress can do.

I set about researching my options and custom loops, finally figuring out a way to mix CSS and PHP to get what I wanted on the front page. I know there are probably ways that accomplish this with less code or more complex functions but I’m working within my abilities of PHP coding and learning as I go.

Without further ado, here’s how I accomplished my front page layout.

1. Featured Post Custom Loop Code

1
2
3
4
5
6
7
8

<?php get_header(); ?>
<?php
	$featured = new WP_Query();
	$featured->query('posts_per_page=1');
	while($featured->have_posts()) : $featured->the_post();
?>
// THIS IS WHERE MY META AND OTHER POST CONTENT GOES
<?php endwhile; ?>

The third line of code starts the loop. It tells WordPress that there’s a new database query about to happen. The fourth line of code tells the database to give us one post and the most recent one at that. The fifth line tells the database that the loop begins now if there is a post. The area of greatest interest for my needs is posts_per_page. Since my newest post was going to be “featured” I only wanted to show one and stop. Once I had that working, I went on the implement the second custom loop to display the additional posts on the front page.

2. Regular Posts Custom Loop Code

9
10
11
12
13
14
15

<?php
	$asides = new WP_Query();
	$asides->query('posts_per_page=5&offset=1');
	while($asides->have_posts()) : $asides->the_post();
?>
// THIS IS WHERE I PUT MY CODE FOR THE ADDITIONAL POST TITLES AND EXCERPTS
<?php endwhile; ?>

On line #11 I have similar code as the original query but I go a bit further in telling the database what I’m looking for. I want to display 5 posts now but I don’t want to show the “featured” or first post, so I tell the database to retrieve 5 posts but to ignore the first or newest one, which is what offset=1 does. If I were displaying 3 featured posts, I would set the offset at offset=3.

Another bit of custom coding I did was to use custom fields to display an image in my featured post. The nice part of this code, is that if I don’t want to attach an image to the post, I don’t end up getting any errors because of a missing image. First, I went into the Add New Post screen and created a custom field called featuredImage. Then I put the following code in my index.php and category.php templates.

3. Custom Fields for Featured Images

1
2
3
4
5
6
7
8

<?php
$values = get_post_custom_values("featuredImage");
	if (isset($values[0])) {
?>
<div class="featured-img">
<img src="<?php $values = get_post_custom_values("featuredImage"); echo $values[0]; ?>" alt="<?php the_title(); ?> Image" />
</div>
<?php } ?>

The second line of code is the variable that the third line of code works with to see if there is a value to display. If the value isn’t null, then my div class gets printed. If the value is null, then nothing gets printed at all, i.e., if you look at the source code, there is no image because I didn’t specify one in my post.

Wrapping Up Part 1

If you’re reading this article, you know the power of WordPress and are probably trying to harness that power to customize your site. What I’ve posted is how I handled having a “featured” post and not having to have a “featured” category in order to have a different style for my first post. I hope this post helps some folks because I wasn’t able to find a tutorial (or code) that showed how to accomplish this.

In the next part of this three part series, I’ll talk about how I accomplished the layout of my category pages–and in my case my archives as well, since they serve the same purpose. After coding my index.php page, I discovered another way that is much cleaner code to achieve having the first post having a different look than the rest. I used that method on the category pages so stay tuned to part two to learn how to use a custom loop and PHP to call specific CSS for your first post.