Customizing Wordpress: Advanced
On a day where more of the focus is on 9Rules, we're back to finish the layouting elements of our Wordpress Customization series.
In our last few articles, we've covered the importance of the Wordpress Header file, and beginning layout changes, which were mostly minor code edits to accomplish certain things. Now we get to the heart of Wordpress - taking advantage of it's features to use it as much more than a blog.
Here We Go Again
Most beginners accept Wordpress as what it is - a simple way for them to get their own ideas and opinions out by posting blog entries. Then there are the designers or more code-knowledgeable people who take Wordpress to the next step, by adding there own graphics and customizing design elements in css files. Finally, there are those who understand everything wordpress is capable of, and they take advantage of all those features.
Multiple Post Queries
One great feature of Wordpress is it's ability to run multiple post queries. So, what does that mean in English? First, you must understand that Wordpress knows what it's doing by using a function called "The Loop". The loop is how everything is done in Wordpress, and it is used over and over again (hence, the loop ;)).
The loop decides how each post will be displayed, and what parameters go into certain functions. So what exactly is multiple queries? By default, Wordpress themes tend to have a standard loop on their main index, which gathers all posts from every categories, and displays a certain amount as set in the options page. Sometimes by making small changes like indicated last week, the posts can be full or excerpts. Multiple queries allow you to layout posts from different categories in different areas of the site. For example, a three column layout with posts from one specific category in each.
In our case, we use multiple queries to display posts from our "Articles" and "Interviews" categories in their own columns, spacing them out from regular site news so they are more easily recognizable.
Let's take a look at our code to see how we did this:
-
<div class="cusleft">
-
<?php $my_query = new WP_Query('category_name=articles&showposts=1');
-
while ($my_query->have_posts()) : $my_query->the_post();
-
$do_not_duplicate = $post->ID; ?>
-
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
-
<div class="fentry">
-
<?php the_excerpt(); ?>
-
</div>
-
<?php endwhile; ?>
-
</div>
-
-
<div class="cusright">
-
<?php $my_query = new WP_Query('category_name=interviews&showposts=1');
-
while ($my_query->have_posts()) : $my_query->the_post();
-
$do_not_duplicate = $post->ID; ?>
-
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
-
<div class="fentry">
-
<?php the_excerpt(); ?>
-
</div>
-
<?php endwhile; ?></div>
The first thing we did was enclose both sets of code in their own css classes, allowing the posts to appear in two columns, rather than crammed together. As you can see in line 1, we start with a opening div class tag calling for "cusleft". The tag is closed on line 10, before an opening tag for div class "cusright" is opened for the next column of posts.
Let's take a closer look at lines 2-9, which contain the php code for displaying posts.
-
<?php $my_query = new WP_Query('category_name=articles&showposts=1');
-
while ($my_query->have_posts()) : $my_query->the_post();
-
$do_not_duplicate = $post->ID; ?>
-
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
-
<div class="fentry">
-
<?php the_excerpt(); ?>
-
</div>
-
<?php endwhile; ?>
The php code starts off by stating that you're starting a new Wordpress query, then goes in to ask for category name and showposts. In our case, the category name we wanted to pull articles on the left for was called "articles". We wanted to pull only one post, so our showposts number was one. Let's say you had a category called "reviews", and you wanted to show the last 10 posts from that category. Your php code would look like this:
-
<?php $my_query = new WP_Query('category_name=reviews&showposts=10');
-
while ($my_query->have_posts()) : $my_query->the_post();
-
$do_not_duplicate = $post->ID; ?>
-
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
-
<div class="fentry">
-
<?php the_excerpt(); ?>
-
</div>
-
<?php endwhile; ?>
Notice that the category name has been changed to "reviews", and the showposts number has been increased from 1 to 10. The function continues, this time saying to itself, do not repeat the post (which eliminates the post showing more than once.) The next part of code determines how the post will be displayed. Let's say you wanted the title to link to the full post content, and you wanted to display the whole post content. The code would look like this:
-
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
-
<div class="fentry">
-
<?php the_content(); ?>
-
</div>
Notice how we changed "php the_excerpt to php the_content. By wrapping the code in a div, we tell it to output each post the same way. In this way, you can define style elements to be applied to each post being displayed.
Want an avatar? Get a gravatar! • You can link to this comment
I think an easier way of running the loop multiple times is just by using query_post. For example, lets say you want to have all the posts from a certain category in your sidebar, just copy and paste the loop where you want it, and before that inset something like query_post(category=3&showposts=5).
Very simple.
Want an avatar? Get a gravatar! • You can link to this comment
Yeah, I forgot to mention query posts. Only reason there not used on devlounge is because I kept running into errors, maybe because I have so many loops, or just how things were setup. Anyways, thanks for reminding me of the alternative
Want an avatar? Get a gravatar! • You can link to this comment
I think the query_posts() method overwrites any current loop you are in, so if you want to run loops within one another, you need to use WP_Query() method.
I ran into a few problems on my site when trying to use query_posts().
Incidentally, I presume using too many WP_Querys will have performance implications, escpecially at high usage?
If I only want the post titles or excerpts (of a certain category), say, is there no ‘better’ method?
Want an avatar? Get a gravatar! • You can link to this comment
Yeah, I’m sure too many loops will downgrade performance on your server. I’m not sure if there’s any other methods, for say, displaying just headlines as links, but I’ll take a look into it for you
Want an avatar? Get a gravatar! • You can link to this comment
Ummn… nice article, it should help me with the future development of my website
Want an avatar? Get a gravatar! • You can link to this comment
Aj,
Updated & nice article.
Want an avatar? Get a gravatar! • You can link to this comment
Is there a way to do the following :
I have created a website using Wordpress. Now there is one Introduction post in “Uncategorized” showing in the frontpage and I want to place all posts made in “News” category in the frontpage too just below the Introduction Post.
All works great except the final step that I was unable to accomplished. It is to place a “News” Category Name for all the news post but not the category name of the Introduction Page (all in frontpage)
Can you advise me how to do it. Thanks in advance.
Want an avatar? Get a gravatar! • You can link to this comment
By default, most WP templates will show all category posts on the front page. If you want to keep one post on the homepage at all times and have just “news” posts show up, you’ll have to get two loops going in the index.php file.
Have a look at the Wordpress codex for loops:
http://codex.wordpress.org/The_Loop
Want an avatar? Get a gravatar! • You can link to this comment
I test of this tool with version 2.0.5 and it works completely well.
Want an avatar? Get a gravatar! • You can link to this comment
Is there a way to make it display previous posts when a person clicks on the previous posts link at the bottom of the page? When I go on to page 2, it generates the same posts that are on the home page.
Want an avatar? Get a gravatar! • You can link to this comment
I’ve been trying to figure out a way to display sidebar news and when i ran across this tutorial it solved that problem! I have a question though. I have a featured section on my index page. Then i have my sidebar news sections and lower level sections under my featured. They are all seperated categories. What i want to do is display the previous old featured news in my sidebar news at the bottom so that anyone who didnt get a chance to read it can still see the last previous post from that category before. Is there a way for me to be able to do this?
Want an avatar? Get a gravatar! • You can link to this comment
MaryJane, I’d look through the Wordpress Codex for that. I do know it’s possible, I’m just a little unsure about how to set it up. Btw, great looking site.
Want an avatar? Get a gravatar! • You can link to this comment
Thank you aj. I can’t take credit for the design though. I’ll look around and see what i can come up with. Thank you.
mj
Want an avatar? Get a gravatar! • You can link to this comment
Several googles and attempted solutions for multiple loops failed to solve my issue - a loop in my sidebar would cause the previous_post_link / next_post_link functions in the main one to fail horribly.
Yours resolved it quite well. Thank you very much for taking the time to document. Someone could make themselves a lot of money imho if they were to write a full proper book about how to customize with wordpress. The codex has most of the meat, but compared to how Java and other full programming languages are documented, it’s rubbish.
Want an avatar? Get a gravatar! • You can link to this comment
This has way of running the side loop has allowed me to use Exec-PHP and run this “loop” within a post/page itself. Thanks for the tips!
Something that I have been running into that you may be able to help with is that the more function doesn’t work when I call a category using the following example:
Newspapers
have_posts()) : $my_query->the_post();
$do_not_duplicate = $post->ID; ?>
I may be overlooking something very easy, but I have been working on (and searching for solutions for) this all night to no avail. Any suggestions?
Want an avatar? Get a gravatar! • You can link to this comment
Complete WP newbie here… I’ve spent weeks surfing and reading various sites, trying to understand WP and how it finctions. This is THE ONLY article that I’ve come across that breaks this down into language that’s easy to understand with clearly defined examples. The thousands of people writing tutorials across the web forget one thing… not everyone knows WP language and PHP. The basic, fundamental, and primary golden rule of writing… “Don’t assume your reader knows what you’re talking about.”
Thanks very much. Honestly, you deserve a huge pat on the back. Well done.
Want an avatar? Get a gravatar! • You can link to this comment
Now that WordPress 2.6 is out, will this still apply?
I ask because I tried to use your code above to call for a category by name. Right now I am having to use the following code to only pull one category:
But I would prefer to use the category name instead of the category number. As I am using the same template over and over again for different clients, this would prevent me from having to manually go in and make sure I had the category number correct as long as I have the category name universal.
Any ideas?