In Praise of Wordpress Template Tags

In Praise of Wordpress Template Tags

June 24, 2007 ( 90 )

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: 5% [?]

90 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 } } ?>
  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.

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

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

  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.

  6. dada said:

    Nice Site!

  7. Garchoune said:

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

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

  9. Ordittiva said:

    Thankiossi
    It’s great

  10. Thankiosst
    Great!

  11. Ineseerep said:

    Thankiossk
    Cool!

  12. booneepek said:

    thankiosso
    Cool!

  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.

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

  15. Cool template, thx !

  16. essenzzo said:

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

  17. Trinkhalm said:

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

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

  19. very nice blog

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

    It looks very nice

  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.

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

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

  24. news.healtharchive.net - Health News & Articles

  25. Halo said:
  26. Jane said:

Pages: 1 2 » Show All

Trackbacks
  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 [...]

  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. [...]

  3. Best of May/June 2007:

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

  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. [...]

  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. [...]

  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. [...]

  7. Best of May/June 2007 · Style Grind:

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

  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 [...]

  9. Skylog » Blog Archive » links for 2007-07-26:

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

  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. [...]

  11. Mine del.icio.us-links den 30. juli:

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

  12. 10 Links für ein besseres WordPress-Blog | NanoPub:

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

  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) [...]

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

  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 [...]

  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 [...]

  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 [...]

  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: [...]

  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 [...]

  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 [...]

  21. Thème en préparation : Mimbo 2.1 « Calyptratus’ WordPress Corner:

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

  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, [...]

  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 [...]

  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 [...]

  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) [...]

  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 [...]

  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 [...]

  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 [...]

  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 [...]

  30. rein:MEOW - 我要努力之把theme弄好:

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

  31. » 我要努力之把theme弄好 | atdesign:

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

  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. [...]

  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 [...]

  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 [...]

Leave a Reply