Deblogging - Magazine style - Wordpress as a CMS

Well over a year ago I created deblogging.com Deblogging because i love wordpress and still do but didn’t liked the blog feel and look for all my sites. As many of my endevours i ran into the time problem and altho i did created over 50 sites in the deblogging style ( like fi http://fietsen-winkel.info ) i didn’t created any more themes around this idea.

Now as i took my next goal in creating 10k a month i am once again at the lookout for a nice standard theme to use with wordpress but that doesn’t has a blog feel. I did a bit of research and found the following magazine style templates that I like and that give me a bit of insperation.

So what’s the next step in creating a magazine style template?

I discovered a nice tool at Yahoo that will help you in laying the foundation of your template. http://developer.yahoo.com/yui/grids/builder/ using this grid builder you can easily create the outline of how your template should look like.

In my case i want of coure the header, a sidebar of 310 at the right so the nice ads of 300px x 250px will fit and it can be split like it’s done at the right at http://www.revolutiontheme.com/news/

The first row should hold the featured article and i want it to be like it’s on http://gazette.premiumnewstheme.com/

Creating a featured article that rotates is a nice feature that you also see a lot in joomla based templates. Making this is not that hard. What you need is a category that is made pure for holding featured articles. As you know you can assign a post to multipal categories. So if you write a ost and want it to be in the featured category select that one also.

Next is the code… first you want to download the mootools archive and Smoothgallery you can get both at this place http://smoothgallery.jondesign.net/
At the getting started page of the gallery code you will find this part


<div id="myGallery">
<div class="imageElement">
<h3>Item 1 Title</h3>
<p>Item 1 Description</p>

<a href=”mypage1.html” title=”open image” class=”open”></a>
<img src=”images/brugges2006/1.jpg” class=”full” />
<img src=”images/brugges2006/1-mini.jpg” class=”thumbnail” />
</div>
<div class=”imageElement”>
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<a href=”mypage2.html” title=”open image” class=”open”></a>
<img src=”images/brugges2006/2.jpg” class=”full” />
<img src=”images/brugges2006/2-mini.jpg” class=”thumbnail” />
</div>
</div>

So you need to replace that with the code to display the posts from the featured category

<?php query_posts('showposts=5&cat=5'); //selects 5 articles of the category with ID 5 ?>
<?php while (have_posts()) : the_post(); ?>
<div class="imageElement">
<h3 class="leadtitle"><?php the_title(); ?>></h3>
<?php the_excerpt() ; ?>
</div>
<?php endwhile; ?>

You can add anything inside this loop but it’s a start.

The rest of the page i will make 2 columns like on http://www.wp-themes.der-prinz.com/magazine/ and at the bottom i like it how it’s done at http://www.fembusiness.nl/

Nice job for the weekend :)