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!

Now for some styling

One more step and we are done. In order to style the various options, we will have to create and style the following divs and classes:

In the first example (featured and non-featured), define:

.featurepost (to style featured posts)
.post (to style regular posts)

The second example has only one distinctions between the featured and the non-featured post, that is the length of the posts (full and excerpt), so the styling will remain common for both.

The third example (asides), we need to define the following:

.asides_entry
.asides_entry ul
.asides_entry ul li

What I did here was adopt a stylesheet by David Herreman with some personalization to style our demo theme; you can see it in action here or download the original CSS from David’s site if interested.

Next up, we will build cool tabbed interfaces for your sidebar using DOMtab, tabber and other free JavaScripts.

So there you have it. Happy hacking and share these ideas with all. Enjoy!

References: Codex, David Herreman, MandarinMusing, Solostream, wpSnap and a whole bunch of premium theme demo’s

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”

Now for some styling

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