Blog

In Praise of Wordpress Template Tags

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”.

  1. 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:

    frontpage

  2. 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.

  3. 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.

  4. 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.

  5. 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.

Popularity: 3% [?]

73 Responses »

  1. 3stripe said:

    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 } } ?>
    --June 24, 2007 @ 4:16 pm
  2. June said:

    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.

    --August 6, 2007 @ 9:57 am
  3. Polaroid+T737 said:

    Thanks your post is delightful. I like your site.. bye

    --August 27, 2007 @ 8:27 am
  4. stanislaus said:

    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.

    --September 13, 2007 @ 5:24 am
  5. Henny said:

    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.

    --September 23, 2007 @ 11:43 pm
  6. dada said:

    Nice Site!

    --September 30, 2007 @ 5:16 am
  7. Garchoune said:

    Your site is interesting, I will visit every day.Thanks

    --November 6, 2007 @ 2:22 am
  8. Graphic Boards said:

    Your site is interesting, I will visit daily thanks for the info

    --November 28, 2007 @ 3:03 pm
  9. Ordittiva said:

    Thankiossi
    It’s great

    --December 1, 2007 @ 11:29 am
  10. Arorefoergo said:

    Thankiosst
    Great!

    --December 2, 2007 @ 2:20 am
  11. Ineseerep said:

    Thankiossk
    Cool!

    --December 2, 2007 @ 5:11 pm
  12. booneepek said:

    thankiosso
    Cool!

    --December 5, 2007 @ 7:05 am
  13. nomad-one said:

    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.

    --December 12, 2007 @ 9:41 am
  14. Suchen Sie Webseiten Optimierung said:

    Kompliment du hast sehr gute Informationen. Nicht nur diese Info, sondern allgemein finde ich deine News / Angaben sehr informativ.

    --December 21, 2007 @ 4:24 pm
  15. nowe samochody said:

    Cool template, thx !

    --December 31, 2007 @ 6:52 am
  16. essenzzo said:

    Thanks.. I find here what i have been searching via google for last 2 hrs. Thanks

    --January 12, 2008 @ 5:30 am
  17. Trinkhalm said:

    I am worried me for the good info and hope you will continue to write qualitative contributions.

    --January 20, 2008 @ 1:45 pm
  18. skanery antywirusowe said:

    I do think you are right on the spot with this post.

    --January 22, 2008 @ 3:47 am
  19. technika grzewcza said:

    very nice blog

    --January 22, 2008 @ 3:48 am
  20. problem cocuk said:

    I use on my site, “Print The Last Three Headlines” change with Print The Last Ten Headlines :D

    It looks very nice

    --January 27, 2008 @ 8:36 am
  21. bLack said:

    hi darren, first of all thank you for this great magazine wordpress theme mimbo. i am now trying to modify it but i am having problems.
    i removed left column and put something like right column but instead showing latest photos from selected categories i’d like to show latest 2nd 3rd and 4th post at the left column and at right column i’d like to show latest 5th 6th and 7th post without looking at their categories, i mean just looking by publish date.
    is it possible?
    i am trying to find a solution but still couldn’t do anything. i think php’s the loop function must be used but i am not so good at php so i need your help.
    i will be waiting for your reply.
    thanks again.

    --February 17, 2008 @ 10:00 pm
  22. TworzenieStron said:

    Thanks 4 Your info:) I think it will be usefull.

    --February 21, 2008 @ 5:49 pm
  23. Brentwood Charity said:

    Thanks for the informative article. It made me think up some things. :)

    --March 7, 2008 @ 4:33 pm
  24. Health News & Articles said:

    news.healtharchive.net - Health News & Articles

    --March 11, 2008 @ 5:54 pm
  25. Halo said:

    --March 15, 2008 @ 3:20 am
  26. Jane said:

    --March 15, 2008 @ 4:09 am
  27. Hero said:

    --March 15, 2008 @ 9:08 am



Trackbacks & Pingbacks

  1. oriolrius lifestream » Darren Hoyt Dot Com » Blog Archive » In Praise of Wordpress Template Tags:

    […] Darren Hoyt Dot Com » Blog Archive » In Praise of Wordpress Template Tags […]

    --June 30, 2007 @ 6:22 am
  2. Presseschau für Webentwickler - Ausgabe Juli 2007 | Dr. Web Weblog:

    […] In Praise of Wordpress Template Tags Über Template-Tags in Wordpress und alles, was man damit erreichen kann. […]

    --July 9, 2007 @ 8:06 am
  3. Best of May/June 2007:

    […] In Praise of Wordpress Template Tags About template-tags in Wordpress, their functionality, possibilities and advantages. […]

    --July 9, 2007 @ 8:06 am
  4. lost node » Blog Archive » Best of May/June 2007:

    […] In Praise of Wordpress Template Tags About template-tags in Wordpress, their functionality, possibilities and advantages. […]

    --July 9, 2007 @ 11:35 am
  5. Best of May/June 2007 | Webdesign (css, grafica e altro):

    […] In Praise of Wordpress Template Tags About template-tags in Wordpress, their functionality, possibilities and advantages. […]

    --July 9, 2007 @ 12:26 pm
  6. Cyber Space in One Hand » Blog Archive » Useful references, tutorials, services, tools, techniques and articles by smashingmagazine:

    […] In Praise of Wordpress Template Tags About template-tags in Wordpress, their functionality, possibilities and advantages. […]

    --July 9, 2007 @ 11:28 pm
  7. Best of May/June 2007 · Style Grind:

    […] In Praise of Wordpress Template Tags About template-tags in Wordpress, their functionality, possibilities and advantages. […]

    --July 11, 2007 @ 11:45 pm
  8. Customizing Wordpress the Easy Way!:

    […] miss the first part of these great series!) Share: These icons link to social bookmarking sites where readers can […]

    --July 25, 2007 @ 7:08 pm
  9. Skylog » Blog Archive » links for 2007-07-26:

    […] In Praise of Wordpress Template Tags (tags: wordpress) […]

    --July 26, 2007 @ 2:19 am
  10. Best of May/June 2007 at Design Resources:

    […] In Praise of Wordpress Template Tags About template-tags in Wordpress, their functionality, possibilities and advantages. […]

    --July 27, 2007 @ 8:19 am
  11. Mine del.icio.us-links den 30. juli:

    […] In Praise of Wordpress Template Tags - CMSifiser WordPress ved hjælp af template tags […]

    --July 30, 2007 @ 8:30 pm
  12. 10 Links für ein besseres WordPress-Blog | NanoPub:

    […] In Praise of Wordpress Template Tags (Part I) und Part II […]

    --August 2, 2007 @ 12:59 pm
  13. adventures of a blogjunkie » Blog Archive » links for 2007-08-03:

    […] Darren Hoyt Dot Com » Blog Archive » In Praise of Wordpress Template Tags (tags: wordpress template tags tips) […]

    --August 3, 2007 @ 10:23 am
  14. blogging:

    blogging…

    I do think you are right on the spot with this post, I could use a lot of stuff for my new study, thank you very much….

    --August 30, 2007 @ 8:25 am
  15. » Wordpress Magazine Theme Released:

    […] page called “Home” and be sure to apply our new “homepage” template (also described here) via dropdown menu. Then visit Options->Reading and assign your Home and News templates […]

    --September 20, 2007 @ 6:52 am
  16. » Managing Wordpress Template Tags with Dreamweaver Snippets:

    […] designers who don’t write PHP from scratch, the Wordpress template code mentioned in past articles can be cumbersome to type out for each new project. For me, that code is a perfect […]

    --September 20, 2007 @ 6:53 am
  17. » Build A Dynamic Design Portfolio with Wordpress:

    […] by definition, but there are varying degrees of how to break down and print that data. As seen in other articles, I’m a fan of exploiting Wordpress’s query_posts function for purposes other […]

    --September 20, 2007 @ 7:57 am
  18. Länktips 26/9:

    […] columns 11 trends that will define logo design in 2007 IE NetRenderer - Browser Compatibility Check In Praise of Wordpress Template Tags How to setup WordPress locally on your Mac Script.aculo.us Samplr Google Trends Publicerades: […]

    --September 26, 2007 @ 5:42 pm
  19. Darren Hoyt Dot Com » Blog Archive » Wordpress Magazine Theme Released:

    […] new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --October 19, 2007 @ 9:08 am
  20. josh fassbind » Blog Archive » Ladida, Ladida:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --November 3, 2007 @ 6:53 am
  21. Thème en préparation : Mimbo 2.1 « Calyptratus’ WordPress Corner:

    […] sur l’utilisation du thème : part 1 - part […]

    --November 14, 2007 @ 1:24 pm
  22. El portal de Angello Toro>>> » Portada » Post de la portada:

    […] el post de la portada Previously, we saw how Wordpress can capably handle data more like a small-scale CMS than a traditional blog, […]

    --November 30, 2007 @ 3:37 pm
  23. e l c r e e . c o m . a r » Lead Story » Cena de Egresados “Sociales 2007″:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --December 4, 2007 @ 2:07 am
  24. UnAbridged Excerpts » Lead Story » Test Lead Story:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --December 7, 2007 @ 3:36 am
  25. links for 2008-01-13 at The New Reader:

    […] Darren Hoyt Dot Com » In Praise of Wordpress Template Tags (tags: wordpress publishing cms howto template) […]

    --January 12, 2008 @ 10:18 pm
  26. Oxygen » Archive du blog » Build A Dynamic Design Portfolio with Wordpress:

    […] by definition, but there are varying degrees of how to break down and print that data. As seen in other articles, I’m a fan of exploiting Wordpress’s query_posts function for purposes other than […]

    --January 14, 2008 @ 4:14 pm
  27. Burwood » LEAD STORY WordPress » Wordpress Magazine Theme Released:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --January 26, 2008 @ 3:51 am
  28. vandervleuten.org » cover story » Mimbo Magazine:

    […] to articles on Darren Hoyt’s site with which you can modify this great magazine theme: In Praise of Wordpress Template Tags In Praise of Wordpress Template Tags, Part II: The Magazine Layout ‘Exutoire’ Blog Offers Video […]

    --February 12, 2008 @ 7:09 pm
  29. Moniteur » Ecran Ecran2 Ecran3 » Kool:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --February 22, 2008 @ 8:18 pm
  30. rein:MEOW - 我要努力之把theme弄好:

    […] 這兩篇文都是Minbo設計者針對template tag In Praise of Wordpress Template Tags, Part II: The Magazine Layout In Praise of Wordpress Template T… […]

    --February 26, 2008 @ 4:45 am
  31. » 我要努力之把theme弄好 | atdesign:

    […] 這兩篇文都是Minbo設計者針對template tag In Praise of Wordpress Template Tags, Part II: The Magazine Layout In Praise of Wordpress Template T… […]

    --February 27, 2008 @ 1:54 pm
  32. Blu Vintage » Lead Story » A New Day:

    […] Previously, we saw how Wordpress can capably handle data more like a small-scale CMS than a traditional blog, assuming the developer is willing to get creative with some Template Tags and The Loop. With that in mind, let’s move toward a more sophisticated homepage concept. […]

    --February 27, 2008 @ 7:36 pm
  33. The Fresh Press » Destacados » Checking…:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --March 3, 2008 @ 3:09 pm
  34. Art Service Pfleging » Wordpress Themes » Mimbo Magazine Theme:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --March 11, 2008 @ 8:13 pm
  35. Photoshop Art » Blog Archive » aser:

    […] Previously, we saw how Wordpress can capably handle data more like a small-scale CMS than a traditional blog, assuming the developer is willing to get creative with some Template Tags and The Loop. With that in mind, let’s move toward a more sophisticated homepage concept. […]

    --March 18, 2008 @ 12:46 pm
  36. FUZINE 2 » Téma » Téma d?a:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --March 22, 2008 @ 9:13 pm
  37. Hello World | Y e e e e e e:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --April 3, 2008 @ 2:05 pm
  38. Mimbo v2.2 - Wordpress Magazine Theme : Themes Blog’s:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --April 3, 2008 @ 9:55 pm
  39. for the life category | michael john grist:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --April 7, 2008 @ 8:54 am
  40. reviews | michael john grist:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --April 7, 2008 @ 10:37 pm
  41. study | michael john grist:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --April 7, 2008 @ 10:37 pm
  42. » prova3 » tbrbtr:

    […] Previously, we saw how Wordpress can capably handle data more like a small-scale CMS than a traditional blog, assuming the developer is willing to get creative with some Template Tags and The Loop. With that in mind, let’s move toward a more sophisticated homepage concept. […]

    --April 19, 2008 @ 12:14 pm
  43. Oltre il deserto » Senza categoria » rggg:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo […]

    --April 22, 2008 @ 5:01 pm
  44. Oltre il deserto » prima » primo articolo:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --April 22, 2008 @ 5:40 pm
  45. Oltre il deserto » quinta » ultimo:

    […] what’s new. Most importantly: if you are having trouble displaying the homepage, please note that this configuration step is no longer necessary! The latest version of Mimbo works like any other theme - it uses index.php […]

    --April 22, 2008 @ 5:47 pm
  46. Reading Circle Books » » WordPress 2.5 Widgets — Taking the Load Off Your Mind:

    […] hard. You need new code in the templates. For a while, WordPress sidebars worked the same way, via template tags, but then came widgets: “Widgets” is just a silly buzzword we’ve chosen for this […]

    --April 24, 2008 @ 5:04 am


Leave a comment

(required)

(required)



  • rssRSS feed for comments on this post.