Tìm Hiểu về Wordpress - part 12 pot

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>

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:
/>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 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: />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 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 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>