[I know I still owe the second part of my Two-level menus article regarding the styling of the menus but today this little trick came up and I thought I'd share it.]
Since WP 2.2.x in the Options > Reading there is the possibility to assign an existent(!) WordPress “static” Page as frontpage of your Wp powered website. Warning: in the same time at the same place you should assign a Page also as “posts page” to display your blog entries, otherwise they will not be visible.
This is a fairly simple operation in the admin panel, so I am wondering why the WP Forum is full of questions re this issue. Normally, any standard WP installation would display as “front page” the index.php of your theme with the usual setup: showing x number of posts, latest on the top.
When we select a Page to be the front page – this action overrides the default WP settings and it is using that WP Page (created in admin > Write > Write Page) instead of the index. Since every decent theme has a template file called page.php, your main or front page will be displayed via that template file.
If you really want to make that first main page special, you can create a special Page template and while creating the new Front Page you can select the newly added template. Till now this is still a relatively simple task, any newbie can follow the instructions to do it. Things might get a bit more complicated if the user wants some “static” Page content and dynamic content combined on the same Front Page. Let’s say, you create your Welcome Page and in the Write > Write Page section you composed your welcome message. After that you select this Page to be your front page. However, in the next step you would like to have the latest five posts’ title or title and excerpt – but only from your “news” category, and displayed underneath the welcome message.
In your favourite text editor (I always use PSPad) open the page.php template file for editing. Save it as main.php – although you can name it whatever you want…
Add this lines at the very top of it:
<?php /* Template Name: Main */ ?>
Now find the last line of the Loop:
<?php endwhile; endif; ?>
(There might be another line after it with the edit_post_link – it this case add the following after that line!)
So, after the lines above we add some code snippet from the Codex, an example for multiple Loops (see the link above).
Let’s say we have a category called “News” and we want to display only the titles of the latest five posts from that category, as a list – under our welcome message.
We need a second Loop for this:
My latest news <?php $temp_query = $wp_query; ?> <?php query_posts('category_name=news&showposts=5'); ?> <?php while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <ul> <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li> </ul> </div> <?php endwhile; ?>
(Of course, if your category has a different name/slug, you should change that in line #3 accordingly.)
If we want the title and the excerpts (post summary), the method is very similar, just modify the code above, e.g. like this:
My latest news <?php $temp_query = $wp_query; ?> <?php query_posts('category_name=news&showposts=5'); ?> <?php while (have_posts()) : the_post(); ?> <div class="post" id="post-<?php the_ID(); ?>"> <h3><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h3> <?php the_excerpt(); ?> </div> <?php endwhile; ?>
You can have a look at it and/or copy the sample main.php file for the default template from here.
UPDATE. If you don’t need the posts to be filtered by category, just leave out the
category_name=news& part of it, and it will show the last X number of posts from any category.
Now, you have a front page with the welcome message at the top (and you can update it any time from the admin panel!), plus your latest news posts on the same page. You can customize that second Loop in any way you wish, using different template tags and div classes or other HTML tags – the limit is only your fantasy and skills.
Update, June 15, 2008. It was brought to my attention that the code presented above has been modified, probably during the move, and had an obsolete “amp;” in it. Corrected.