Anatomy of a Magazine Style Premium WordPress Theme – Part 1 “The Loop”

Share Your Thoughts ↓
01.11.2008 - 1:31 pm

Welcome back! Have you subscribed to my RSS feed? If not, please consider doing so. Thanks for again for visiting!

Let me say it for the millionth time “content is king” and we all know that, don’t we?

Since content is the most important part of a site, your WordPress powered theme must emphasis on content presentation. Most cookie cutter themes come with a post list that runs based on the time your posts were published, in other words a chronological list of posts irrespective of its importance. Let’s face it, not all posts are created equal. Some posts are special, some are important and then some not quite so. Why then should all posts get the same treatment?

Magazine styled themes do a fine job of addressing this by introducing the featured posts option. Posts of a certain category got “top of the page” real-estate, which helps the site highlight the more important content.

Creating such category specific presentation on demand requires both PHP script manipulation within the WordPress Loop and some changes to the CSS stylesheet. In continuing with the series on dissecting magazine style themes, we will attempt three hacks that will allow you to do the following:

Create a featured post that is displayed at the very top of the page, followed by regular posts; all of which happens taking into consideration the pagination aspects of the site so as to not repeat the featured post on every paginated page.
Create a simple featured and non-featured posts distinction using minimal PHP hack, keeping it simple enough so as to not worry about pagination.
Create asides to highlight useful bits of information without hogging potentially critical presentation real-estate, or in other words, creating non-intrusive side posts without using a plugin.

Sub-pages: 1 2 3 4 5 6

HTML, JavaScript, Magazine Style WordPress Themes, Tag, Toolbox, Tutorials, XHTML

Design, How to, Resources, Techniques, Tips

Pierre K.

January 12, 2008 • 4:46 am

Thanks a lot for that very useful article. It’s one of the more interresting posts I have read on Wordpress themes. I’m very impatient to discover the two next ones. “Bravo” as we say in french…

Sunny

January 12, 2008 • 7:02 pm

@ Pierre K

Merci, je posterai les articles autre bientôt! Let me know if my French is legible.

sveinson

January 14, 2008 • 10:32 pm

Bravo, love the concept of making a blog more like a magazine. I’ll be sending this off to the tech guy in my life.

January 15, 2008 • 12:09 pm

@ sveinson

There is more to come, the next part is about tabbed interfaces for widget presentation.

Gio

February 27, 2008 • 11:48 am

Is it possible to have a feature article for each of my categories. For example, if you click any of the categories in the News theme at http://quommunication.com/demo/news/ it has a feature article dynamically listed.

February 27, 2008 • 2:11 pm

@ Gio

Yes, it is possible to replicate that. All you need to do is copy and paste all the code from index.php onto the category.php file (create one if your theme does not have one).

Replace just one line of code, look for:

< ?php $my_query = newWP_Query(’category_name=Featured&showposts=1′); while ($my_query->have_posts()) :$my_query->the_post(); $do_not_duplicate = $post->ID; ?>

make that

< ?php $my_query = newWP_Query(’showposts=1′); while ($my_query->have_posts()) :$my_query->the_post(); $do_not_duplicate = $post->ID; ?>

Essentially you deleted

category_name=Featured&

Which will mean the featured post will now have one post from the cateogry that you clicked (since WordPress automatically displays only the chosen category in a category page). I am pretty sure you can do that with just the archives.php page if you don’t feel like or unable to create a new file.

Erica

July 23, 2008 • 6:48 pm

I have been fiddling with my site’s redesign, and I’m really confused about how to code for the Wordpress Loop.

I’m trying to set it up this way:

1) Latest post, 2) Featured, 3) Asides, and 3) Other latest posts, other than post #1

Basically, “Featured” and “Asides” are interrupting the first post from the other recent posts.

Please let me know how to do this.

http://www.ResponsibleChina.com

July 27, 2008 • 11:30 am

@ Erica

Since you are pulling only one Latest and Featured posts each, you can use conditional queries to pull only one of each from categories designated for each of the post type. The asides and the other latest posts can both fall within a regular loop. The strategy is to use the above technique that creates featured posts in a magazine style theme and use it instead to pull one latest and one featured. You can do this by setting the number of posts in the 2nd loop also to 1 just like you will for the 1st.

Next, you start a new conditional multiple loop that pulls 10 posts, then within that, you set the asides styling and have it display in the 1st loop. Hope I am making sense, if you still have trouble, email me via contact page.

Chico

July 31, 2008 • 9:27 am

I have been looking around for good examples of multiple loops use in WP.

I am desperately trying to make something similar work for my blog. My desired setup would have:

On front page, the latest post from categoryX, followed by the latest post from categoryY then two lists outside the loop ( I think ) with the top 5 rated articles in one and the 5 most viewed posts in the other. Both of these lists would be generated by plugins (and repetition of posts not an issue on the frontpage which would not show posts in the loop after the two featured ones)

However in my archives page I would need to show all posts grouped by month.

Any help/tip/idea to modify the code above for my needs would be immensely appreciated.

p.s I realise my request is similar to previous comment but still need help.

July 31, 2008 • 3:51 pm

@ Chico

One loop can display posts from X and then Y, use this method from Codex.

To display archives on a monthly basis try using a plugin such as this.

Anatomy of a Magazine Style Premium WordPress Theme – Part 1 “The Loop”

23 Responses to “Anatomy of a Magazine Style Premium WordPress Theme – Part 1 “The Loop””

Trackbacks

Leave a Response

Some Useful Info

About

Archives

Categories

Popular Tags

Bookmarks