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 :)

3 comments:

  1. Salman, 9. September 2008, 13:51

    Hey!

    Really helpful post - im trying to install smoothgallery into my wordpress theme (in fact trying to make it rotate the feature posts just like you)

    what i cant figure out is WHERE DO I UPLOAD the smoothgallery folder? I downloaded it, unzipped it, but i now need to place it somewhere in my wordpress installation or theme file on my server but i dont know WHERE to put it.

    PLEASE help me iv been trying to solve this problem for DAYS! I know exactly what to do once i have the files in place just dont know where to place the files. Thanks in advance!

     
  2. andy, 2. October 2008, 5:29

    put it in the plugins folder

     
  3. Edwin, 4. October 2008, 17:24

    Nope not in the plugin file. Sorry didn’t catched the question before.

    If you use smoothgallery in your theme it should be added just there…in your theme. So it should placed at something like http://www.yourdomain.com/wp-content/themes/thethemeyou-use/

    Next you need to edit your theme itself to insert the gallery in it. This is to long for just a comment so i either make it a small report or write a new post about it.

     

Write a comment: