I’ve used Wordpress for two years, first as a conventional front-page blog, then as a simple CMS, then both. As Wordpress has evolved, the development team has done an excellent job providing documentation on how to bend and stretch the software’s functionality without requiring true PHP coding skills or unnecessary plug-ins. Ever since the release of v2.1, Wordpress has become a much more viable CMS option, and Template Tags are one key to maximizing its potential.
Sample scenario: you’ve been tasked with building a site powered by Wordpress, but the client doesn’t want the homepage oriented like a traditional full-blown blog with all the whistles. He wants instead a clean, minimal homepage whose only textual content is a chunk called “Latest News Excerpt”.
- Rearrange Your TemplatesThe first step is to assign the homepage its own template and stick the News section in a separate interior page where full-blown features like search, categories and comments can appear. How to do this? After building out the HTML and CSS for your homepage layout, save your markup to the relevant /themes/ folder and name it something like “homepage.php”. At the very top of the code, insert a snippet that looks like this:
<?php /* Template Name: Homepage */ ?>
Now log in to your Wordpress control panel, go to Write->Page and create a page called “News”. Save that, then repeat the step, naming the next page “Home”. But before you save it, make sure to click the blue tab on the right called “Page Template” and select the “Homepage” item (which appears now as an option because of the header code we inserted above). You have now expanded your ability to distinguish separate templates for pages with differing layouts.
Your last step is to visit Options->Reading in your control panel and set your preferences accordingly:
- Insert Your Latest ExcerptOpen your homepage.php file and insert the following:
<?php query_posts('showposts=1'); ?> <?php while (have_posts()) : the_post(); ?> <?php the_excerpt(); ?> <a href="<?php the_permalink() ?>" rel="bookmark">Read More</a> | <a href="/news">All News</a> <?php endwhile; ?>You have now created a Loop which tells the software to query for new posts, grab the latest one, and print the first 55 words. I’ve added two optional links (”Read More”, “All News”) which can be seen on the homepage of DarrenHoyt.com. More info on the_excerpt function here.
- Print The Last Three HeadlinesOur client has now changed his mind about the homepage. Instead of an excerpt printed to the homepage, the client now wants a little newsy module which pulls just the last three headlines. Easily done, the code will look like this:
<?php query_posts('showposts=3'); ?> <ul> <?php while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul>But wait—the client doesn’t want headlines from just any category but from only the category called “Financial News”. In this case you will alter the parameter of your PHP function. First visit your control panel and note that the Financial News category is listed as ID# 10. So instead of “showposts=6″ you’ll change the code above to read “showposts=6&cat=10″. Parameters allow for a variety of customizations, and I’ll try to cover more of them in a follow-up post.
- Print a Lead Story Plus Three HeadlinesYour client’s wife looks at the site one night before it launches and decides the homepage should no longer be clean and simple, but should more resemble the New York Times where a lead story excerpt appears at the top and beside it are the last three “Financial News” headlines displayed in an unordered list:
No problem, your code will now read like this:<?php query_posts('showposts=1'); ?> <?php while (have_posts()) : the_post(); ?> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a> <?php the_excerpt(); ?> <?php endwhile; ?> <?php query_posts('showposts=3&cat=10&offset=1'); ?> <ul> <?php while (have_posts()) : the_post(); ?> <li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></li> <?php endwhile; ?> </ul>The “offset=1″ parameter is included so the unordered list will pull the last three headlines except for the top headline, thus it won’t be printed twice.
- Display Third-Level NavigationDone with the homepage specs, your client has begun working on his “About Us” section and decided there will be three child pages within it. Lately he’s been admiring the Thomas Jefferson Center site (built on Wordpress by what’s rumored to be some handsome Virginia designer) and how subpage navigation is listed dynamically in the left sidebar. First you create a unique Wordpress template with the proper header code, and in the sidebar you insert:
<ul><?php if(wp_list_pages("title_li=&child_of=6")) { ?> <?php } ?></ul>The parameters in this example tell the PHP to display only the titles of child-pages in the section ID’d as #6 (”About Us”).
Your client now has a small-scale CMS armed with a searchable, categorized news database, aka, blog. I’ll try to follow up this post with a few more examples of useful template tags. Leave a comment if you’ve got suggestions or corrections.
4:16 pm
All bow down and worship the mighty WP! :)
You can also list subpages dynamically using this (much longer) code:
<?php /* Creates a menu for pages beneath the level of the current page */ if (is_page() and ($notfound != '1')) { $current_page = $post->ID; while($current_page) { $page_query = $wpdb->get_row("SELECT ID, post_title, post_status, post_parent FROM $wpdb->posts WHERE ID = '$current_page'"); $current_page = $page_query->post_parent; } $parent_id = $page_query->ID; $parent_title = $page_query->post_title; if ($wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = '$parent_id' AND post_status != 'attachment'")) { ?> <ul> <?php $parentpermalink = get_permalink($parent_id); if ($parent_id == $post->ID) { echo "<li class='page_item current_page_item'><a href=\"$parentpermalink\">$parent_title</a></li>"; echo "\n"; } else { echo "<li class='page_item'><a href=\"$parentpermalink\">$parent_title</a></li>"; echo "\n"; } ?> <?php wp_list_pages('depth=2&sort_column=menu_order&title_li=&child_of='. $parent_id); ?> </ul> <?php } } ?>9:57 am
Excellent work, this is what I have always wanted to do with my site. I am using your theme. Looking forward to your new tutorial on making wordpress differently.
8:27 am
Thanks your post is delightful. I like your site.. bye
5:24 am
This is absolutely amazing!!! I’m going to try and build my site with this. Thanks a million, Darren! And keep up the wonderful work.
11:43 pm
Using static page in the main page is great and it makes the site look less blogging style. We managed to create a new theme, have a look at this theme called Banteay Sreywhich we created for charity purpose to help Cambodia Kids.
5:16 am
Nice Site!
2:22 am
Your site is interesting, I will visit every day.Thanks
3:03 pm
Your site is interesting, I will visit daily thanks for the info
11:29 am
Thankiossi
It’s great
2:20 am
Thankiosst
Great!
5:11 pm
Thankiossk
Cool!
7:05 am
thankiosso
Cool!
9:41 am
Having never developed a wordpress theme from scratch I decided to start learning and have set a project to start with my own site. I scanned through the codex pages reading about all manner of templates, custom fields etc and was completely overwhelmed. Your little tutorial in it’s simplicity has managed to teach me more in a short space of time than all the time spent on the codex pages. You should write an e-book, I’d buy it.
4:24 pm
Kompliment du hast sehr gute Informationen. Nicht nur diese Info, sondern allgemein finde ich deine News / Angaben sehr informativ.
6:52 am
Cool template, thx !
5:30 am
Thanks.. I find here what i have been searching via google for last 2 hrs. Thanks
1:45 pm
I am worried me for the good info and hope you will continue to write qualitative contributions.
3:47 am
I do think you are right on the spot with this post.
3:48 am
very nice blog
8:36 am
I use on my site, “Print The Last Three Headlines” change with Print The Last Ten Headlines :D
It looks very nice