97 <?php get_header(); ?> <?php get_sidebar(); ?> <div id="main-content"> // Loop </div> <?php get_sidebar("secondary"); ?> <?php get_footer(); ?> The two get_sidebar() template tags seen in this code should be placed in all of the major template files that are responsible for a full page layout (index.php, archive.php, single.php, page.php). You would then customize your two sidebar templates, “sidebar.php” and “sidebar-secondary.php”, with any markup and template tags that you would like. Here is a very basic example showing the HTML that might be generated from our dual-sidebar code: <div id="sidebar"> <! place markup and template tags here for your rst sidebar > </div> <div id="main-content"> <! place markup and template tags here for your post loop > </div> <div id="sidebar-secondary"> <! place markup and template tags here for your second sidebar > </div> <div id="footer"> <! place markup and template tags here for your footer > </div> Modular Semantics Notice we didn't actually call the right sidebar “right,” we called it “secondary”. If someday it was decided that the sidebars should be ipped, “right” wouldn’t make a whole lot of sense anymore. That’s what semantics means in web design – describing without specifying. first sidebar appears here second sidebar appears here 98 Loop of most recent content List of categories as main nav Breadcrumbs Prominent Search RSS Feed Link Static Page get_search_form(); bloginfo('rss_url'); wp_list_pages("include=7"); while (have_posts()) <ul> <li><a href="/">Home</a></li> wp_list_categories(); </ul> http://net.tutsplus.com 99 This gives us the structure we need to create our three-column layout using CSS: #sidebar { width: 200px; oat: left; } #main-content { width: 500px; oat: left; } #sidebar-secondary { width: 200px; oat: right; } #footer { clear: both; } 4.3.1 Menus, Archive Lists & Tag Clouds There are all kinds of ways to create dynamic navigation from within WordPress. This is a great thing because good navigation is key to the success of any website. When we create Pages and Posts in WordPress, at the same time we are creating that content we are creating ways in which to navigate to that content. Let’s look at two examples. A category-rich blog Look at the popular web development blog Nettuts+. They have a fairly traditional blog structure, where Posts are published from day to day in a chronological format. The homepage features new Posts of all types, starting with the most recent. On a blog like this, it is likely visitors are coming to do one of two things: See what’s new or find something they are looking for. The site does a good job at both, displaying a prominent search bar, and featuring new content first. For that latter group, search might not be the only thing they need. What if they aren’t looking for something specific enough for search, or they can’t think of a search term they would need to find it. In this case, breaking down the site into categories is perfect, because that gives that visitor an option to drill down into the site and likely get closer to what they are looking for. For example, if they were looking for an icon set to use, their intuition might lead them to click on the Freebies part of the navigation. You can see some of these key layout elements, along with the WordPress code that goes with them, on the adjacent page. 100 Hierarchical content Of course we know that WordPress isn’t limited to a blog structure. Equally viable is using the Page system to create hierarchies of content. Take for example the Snippets section on CSS-Tricks. The homepage for the Code Snippets is the proud parent of six Child Pages, which each serve as a category for a particular coding language. Then, each of the six Child Pages is the parent of many more Child Pages, which together comprise the growing army of code snippets. This is a whole hierarchy of content that presents all kinds of opportunities for menu creation. In this Snippets example, the Snippets homepage has a unique page template which uses wp_list_pages to output all of its own Child Pages. By default, that function lists not only Child Pages, but also the entire hierarchy of pages beneath it. In other words, Child Pages of Child Pages, also known as grandchildren. In the markup, nested lists represent the Hierarchical relationship of these pages. In the CSS, the different levels of nested lists are targeted and styled differently to emphasize their hierarchy and provide intuitive navigation of the individual snippets. A little jQuery is also in effect, which makes the list act like an accordion, where each group can be opened and closed for browsing. On the left, the Pages are set up in a hierarchy in the Admin area of WordPress. On the right, that page structure is output with wp_list_pages() and styled with CSS and jQuery. wp_list_pages For a great collection of delicious recipes for Page menus and Page listings, check out this article at Digging into WordPress: http://digwp.com/u/403 101 4.3.2 Page-Specific Menu Styles In the Snippets section on CSS-Tricks (see previous section), we have a three- layer deep hierarchy of Pages. Each different level of the hierarchy has different navigational menu needs. Here is a closer look into the page-specific menu styles used for CSS-Tricks’ Code Snippets. • Parent Page = Snippets Home Page The parent page uses a special template file called “page-snippet-cat.php.” This unique page template allows us to do anything we want with this page, but ultimately it won’t be all that different than the rest of the pages on the site. For example, the custom Snippets Page includes the exact same header, sidebar and footer as every other page on the site. The difference between the custom page and other pages is a special header section that displays all child pages with this: <?php wp_list_pages('title_li=&exclude=3285,3473&child_of='.$post->ID); ?> This function generates all of the markup required to display a nested-list menu of every single snippet posted to the site. In the parameters of this function, the title is eliminated, a few pages are excluded (e.g., the Submit Snippet page doesn’t need to be shown), and the ID of the current page is specified to ensure that the menu displays only children of the Snippets page. • Children Pages = Code Languages Conveniently, all six children pages use the exact same page template as the parent page, which keeps things nice and compact. Anytime you can make a template flexible enough to handle many pages, you should. Because our wp_list_pages function lists pages that are the child pages of the current page, it works just fine here as well, and already includes the special Snippets section header. With both the parent and children pages of this hierarchy, we need some special CSS and JavaScript. The CSS will apply some special styling and the JavaScript will produce the “accordion” display effect. Why can’t we include this CSS code in our site’s CSS file and the JavaScript code in our site’s JavaScript file? Well, we 102 could… but 95% of the pages on this site don’t need them, so it’s a waste of bandwidth 95% of the time. Better to go with the extra file request only when needed. The following code is used in the <head> section of header.php: <?php if (is_page_template("page-snippet-cat.php")) { ?> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_ directory'); ?>/css/snippets.css" /> <script type='text/javascript' src='<?php bloginfo('stylesheet_directory'); ?>/js/snippets.js'></script> <?php } ?> • Grandchildren = Individual Snippets Pages The actual code snippets will have their own unique page template. At this point we no longer need to list child pages (the grandchildren aren’t parents), so the wp_list_pages function is gone. Now that we are two generations down the hierarchy though, it makes sense to offer the user a navigational trail back up the directory tree. For this, we can use the excellent NavXT plugin, available at http://digwp.com/u/114, which makes outputting a breadcrumb trail as simple as: <?php if (function_exists('bcn_display')) { bcn_display(); } ?> So this was all a rather specific example, but the main point is that when you use a unique page template to create a page, the sky is the limit for what kind of navigation/menu you want to offer. Think of the needs of your user when they have reached that page and try to accommodate. 103 4.3.3 Create the Perfect Archives Page Of course “perfect” is a very relative term and the perfect page for your site depends on your site’s particular content and purpose. But if you want to create an effective Archives Page, here is a pretty solid approach. Create a new page template just for archives, something like “archives.php,” and include a good variety of template tags to produce archive links to all of your content. Here are some useful tags to use on your Archives Page: • List of all posts organized by year <?php wp_get_archives('type=yearly'); ?> • List of all posts organized by month <?php wp_get_archives('type=monthly'); ?> • List of all posts organized by day <?php wp_get_archives('type=daily'); ?> • List of all authors <?php wp_list_authors(); ?> • List of all categories <?php wp_list_categories('title_li='); ?> • List of all tags <?php wp_tag_cloud(); ?> • List of all pages <?php wp_list_pages('title_li='); ?> Putting these template tags together, the page template for our Archives would look like this: Archive vs. Archives In WordPress, “Archive” refers to page views including categories, tags, dates, and so on. The term “Archives” (note the “s”), on the other hand, refers to a page that is used to display organized links to all of your site's content. Random Bonus Info If you ever see code in WordPress like this: __("string"); Where the string could be anything, that is actually a function for “localization” in WordPress. If a different localization is active, it will search for the translation for that word and return that, otherwise return what is provided. 104 <?php /* Template Name: Archives */ ?> <?php get_header(); ?> <div id="content"> <h2><?php the_title(); ?></h2> <div class="col"> <h3>Archives by Year:</h3> <ul><?php wp_get_archives('type=yearly'); ?></ul> <h3>Archives by Month:</h3> <ul><?php wp_get_archives('type=monthly'); ?></ul> <h3>Archives by Day:</h3> <ul><?php wp_get_archives('type=daily'); ?></ul> <h3>Archives by Category:</h3> <ul><?php wp_list_categories('title_li='); ?></ul> <h3>Archives by Author:</h3> <ul><?php wp_list_authors(); ?></ul> </div> <div class="col"> <h3>All Pages:</h3> <ul><?php wp_list_pages('title_li='); ?></ul> <h3>Archives by Tag:</h3> <?php wp_tag_cloud(); ?> </div> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> 105 4.3.4 Impress Your Visitors with a Tag Cloud One of the coolest things about tags is that you can display them as a giant “cloud” of links. Tag clouds are awesome not because they are great navigational tools, but rather because they give the visitor a glimpse at the “big picture” of what your site is all about. In WordPress, tag clouds are easy to display and highly configurable, enabling anyone to customize the perfect tag cloud for their site. We could go on and on for days just talking about tag clouds, but instead we’ll just show you the code needed to make your own: <?php wp_tag_cloud(array( 'smallest' => 10, // size of least used tag 'largest' => 18, // size of most used tag 'unit' => 'px', // unit for sizing 'orderby' => 'name', // alphabetical 'order' => 'ASC', // starting at A 'exclude' => 6 // ID of tag to exclude from list )); ?> At this point in the game, the parameters used in the wp_tag_cloud template tag should be pretty straightforward. Just use the comments in the code to set a desired value for each of the parameters and you are off to tag-cloud heaven. Of course, for more information on how to configure these parameters, refer to the Codex: http://digwp.com/u/404. 4.4.1 Side Content and Useful Menu Items One of the funnest things to build is your site’s sidebar. Let’s look at some things to include in your sidebar that might be useful and appealing to your visitors. 106 4.4.2 Displaying Recent Comments There are three possibilities here. Let’s go from easiest to hardest. 1. Widget - If the sidebar is widgetized, simply drag the “Recent Comments” widget (built-in) into the sidebar zone. Give it a title, specify the number you’d like to show, and save it. Done. 2. Plugin - The Get Recent Comments plugin at http://digwp.com/u/115 provides a simple function, customizable through the Admin, for displaying recent comments. It is built to be a widget, but as we just learned that functionality is obsoleted now by WordPress’ own widget. 3. Custom Function - Because comments are stored in our database, getting that data ourselves is possible. In a nutshell, we create a new function in our functions. php file and craft an SQL query that would gather all of the most recently approved comments and return them to us. Then we’d loop through those returned results and display them one by one (code and more information available from WPLancer at http://digwp.com/u/116). Here it is: <?php // display recent comments function dp_recent_comments($no_comments = 10, $comment_len = 35) { global $wpdb; $request = "SELECT * FROM $wpdb->comments"; $request .= " JOIN $wpdb->posts ON ID = comment_post_ID"; $request .= " WHERE comment_approved = '1' AND post_status = 'publish' AND post_password =''"; $request .= " ORDER BY comment_date DESC LIMIT $no_comments"; $comments = $wpdb->get_results($request); if ($comments) { foreach ($comments as $comment) { ob_start(); ?> <li> . article at Digging into WordPress: http://digwp.com/u/403 101 4.3.2 Page-Specific Menu Styles In the Snippets section on CSS-Tricks (see previous section), we have a three- layer deep hierarchy. look into the page-specific menu styles used for CSS-Tricks’ Code Snippets. • Parent Page = Snippets Home Page The parent page uses a special template file called “page-snippet-cat.php.” This unique. structure we need to create our three-column layout using CSS: #sidebar { width: 200px; oat: left; } #main-content { width: 500px; oat: left; } #sidebar-secondary { width: 200px; oat: right;