This post describes the basics of working with wp_list_pages.

wp_list_pages overview

The wp_list_pages function generates a list of links to pages in your WordPress site. The list is generated as an li tag with a title and a nested ul containing a list of links. For example, if your site had pages named About and Contact wp_list_pages()  would generate:

<li>Pages
	<ul>
		<li><a>About</a></li>
		<li><a>Contact</a></li>
	</ul>
</li>

Styling the page list heading

By default the wp_list_pages displays “Pages” within the li tag. You change the label and or add a tag to it by using the title_li option. For example the following prints Pages as an h3.

<?php wp_list_pages('title_li=<h3>Pages</h3>'); ?>

Or display no title at all:

<?php wp_list_pages('title_li='); ?>

Note! In this case the outer li and ul are removed. For example if your pages were About and Contact you would have:

	<li><a>About</a></li>
	<li><a>Contact</a></li>

Styling the page list

Each of the li tags generated by wp_list_pages is assigned the following class names:

• page_item
• page-item-id – Where id is the id number of the page

The class page_item is very useful. Note that it uses the _ rather than the -.

The class page-item-id on the other is less useful. WordPress generates an id number for each page. This number is a little unpredictable. Id numbers really have no rhyme or reason.

When a page is currently displayed the link that matches the page will also have the class:

• current_page_item

This is a very useful property that can be used to assign a style to the current page link.

Sample Selectors

The first step to creating a style for the page links is to define a selector that will target the links. Since all links will end up in li tag within the container element the descendant selector works well. For this example imagine the pages links are contained within an element with the id name nav

#nav li {...styles...}

To be more specific and target only the page links rather than all of the list items, the class page_item is assigned to all page links.

#nav .page_item {...styles...}

To style the selected page differently from the other pages links, use the class current_page_item.

#nav .current_page_item {...styles...}

To target the anchor tag within each of the list items generated by wp_list_pages, use the descendant or child selectors any of the following should work.

#nav li a{...styles...}
#nav .page_item a{...styles...}
#nav .current_page_item a{...styles...}

Sample Styles

Here’s a few ideas on styling the page links. Be sure to use the :link, :visited, :hover and :active styles.

#nav li a:link{...styles...}
#nav li a:visited{...styles...}
#nav li a:hover{...styles...}
#nav li a:active{...styles...}

Be sure to style the current_page_item after the other links styles.

Here’s a few more ideas. Make every link appear as a box. Set each anchor tag to display block:

.page_item a { display:block; }

Make a horizontal list of links with float. Floating the list may require that you clear the floated elements later in your page.

.page_item a {
display:block;
float:left;
}

Adding padding on all sides to expand the link boxes. Here’s an idea use the border-radius property to add rounded corners. You could easily create some tabs by rounding only the top corners.

Other options
The wp_list_pages method provides many options. For a full list of options see the WordPress Codex.

Here are a few possibilities. Since pages can be nested, use the depth option to set the number of levels of pages that will be displayed. For example depth=1 displays only the top level pages.

Use the & between properties. For example, the line below creates a list of pages with no title and a depth of 1.

<?php wp_list_pages("title_li=&depth=1"); ?>

PHP allows you to write functions similarly to the way functions are written in other languages. Functions in PHP provide the same advantages that they provide in other languages also. Functions provide a way to encapsulate a block of code so it can be reused as often as needed. This allows you to avoid rewriting the same blocks of code over again. Which makes your job easier by writing less code. This also keeps your from having to write similar or the same block of code more than once.

The basic syntax is very similar to what you may already be familiar with.

function  function_name() {
... code ...
}

Function names must be unique. The same name may not appear in different documents.

Use a function by defining it then call it by name. For example:

<?php
function hello_Wrold() {
echo  "<p>Hello World</p>";
}

hello_world();
?>

The code block above defines a function, named hello, and then calls the function on the line below. Each time this function is called PHP should print a paragraph containing the words Hello World. The code block below would print three paragraphs.

<?php
function hello_world() {
echo  "<p>Hello World</p>";
}

hello_world();
hello_world();
hello_world();
?>

This might not seem very exciting at this point. Where functions become very useful is when they are set up to accept parameters. Parameters are variables that hold values passed along to a function. These values can be used to tell a function how to do what it does.

For example, the following modifies the original hello function so that we can tell it how many paragraphs to print.

<?php
function hello_world( $n ) {
while( $n > 0 )  {
echo "<p>Hello World</p>";
$n --;
}
}

hello_world( 3 );
?>

The example above calls the hello function and includes the parameter 3: hello(3). This causes the function to print the paragraph 3 times.

If you have a default value for a parameter that you use often you can assign that to a parameter like this:

<?php
function hello_world( $n = 1 ) {
while( $n > 0 )  {
echo "<p>Hello World</p>";
$n --;
}
}

hello_world();
?>

If no parameter is included the function uses the default value. For example, the following would print one paragraph: hello(), this would print 5 paragraphs: hello(5).

Functions can also return a value. The following rearranges the code above to have the function return paragraphs.

<?php
function hello_world( $n = 1 ) {
$str = "";
while( $n > 0 )  {
$str .= "<p>Hello World</p>";
$n --;
}
return( $str );
}

echo hello_world();
?>

Here the function creates a string which is returned and echoed at the point where the function was called.

Where to place functions
It’s best to define all of your functions in the same place. A good strategy is to place them all in a PHP file and use include or require to make the code available on any page that might use it.

These would be characters like: <, > and &. It also includes characters like: é,?, ø and the curly quotation marks.

At the point you are printing these characters into a page you’ll want to run them through the php htmlentities function. Here’s an example:

htmlentities( $str, ENT_COMPAT, 'Windows-1252' );

Where $str would be any string you wanted to convert to compatible characters.

For more info: http://www.php.net/manual/en/function.htmlentities.php

http://newmedia.academyart.edu/~mhudson/doodle/

So what’s the idea anyway? Anyone can make a user account, login and create a small drawing, and then list all of the drawings that have been created. My idea was to create a sort of Twitter for the visual set. Instead of typing a short message of the moment. You can draw a small picture of the moment, and post it for everyone to view.

The basic functionality works now, but to make this really useful will require more features. At this point you are viewing all of the drawings in the database. The real idea is to show only drawings from people that you feel like seeing.

so-you-want-to-create-wordpress-themes-huh

Interesting to note that the plugin is supposed to work with Flash anywhere it appears. So you can use KimiliFlash to put Flash into your header or other areas of your site.

Another interesting item is that the Kimili plugin uses SWFObject: Javascript Flash Player detection and embed script which is XHTML valid. The default Flash HTML code written by Flash and Dreamweaver will not validate.

There is an article about this on A List Apart.