How to Customize WordPress Page List Output

Posted by Art | Posted in Web Development | Posted on 05-12-2009-05-2008

0

UPDATE: I uploaded a newer version of the function after a few tweaks that I made recently. Same functionality, just fixing issues.

When you have to customize a WordPress theme typically as a developer you are left with the options that the default WordPress functions give you. As I have found after customizing multiple themes to fit a users website design being able to create some different output can help significantly. Now this can take multiple functions but if you start to save them they can come it handy.

This is meant to be a replacement for the wp_list_pages() function that is used in WordPress currently. The documentation for this can be found at: http://codex.wordpress.org/Template_Tags/wp_list_pages

The function that I have just developed should help to customize page output of the navigation for any theme. I personally have used this to create custom output for the top level navigation and bottom level navigation. I have included the documentation in the function declaration. Please feel free to copy and use this as necessary. I would greatly appreciate it if you could leave my information in the comments.

 
<?php
function wp_list_pages_custom($args, $custom_args, $debug = false) {
 
	//Usage
	/*
 
	This is meant to be a replacement function for wp_list_pages which can be found here:
 
	http://codex.wordpress.org/Template_Tags/wp_list_pages
 
	It takes in the same arguments as that function plus some other custom arguments to help
	change the output.
 
	$args
	--------------------------
	This is the same as the wp_list_pages function, a link can be found above
 
	$custom_args
	--------------------------
	This is where the user can customize the way the output is displayed, options can be found
	below.
 
	$debug
	--------------------------
	This is set to false by default, if you would like to change it to true you will see output 
	at a few places. This is mainly for testing purposes if you need to change something.
 
 
	The custom arguments have the following default options:
 
	<?php $custom_args = array(
	'tag_open'		=> "",
	'tag_close'		=> "",
	'use_link'		=> 0,
	'use_class'		=> 0  ); ?>
 
        Options:
 
	tag_open
	---------------------------
	This can take any opening string you wish to use. This could be something like "<p>" or "<div class='page_item'>".
 
	tag_close
	---------------------------
	This can take any opening string you wish to use. This could be something like "</p>" or "</div>".
 
	use_link
	---------------------------
	This takes a boolean value in numeric format. 0 = false, 1 = true.
 
	use_class
	---------------------------
	This takes a boolean value in numeric format. 0 = false, 1 = true.
 
 
	Example usage:
 
	<?php 
	echo wp_list_pages_custom("sort_column=menu_order&echo=0&title_li=", "tag_open=<p>&tag_close=</p>&use_link=1&use_class=1"); 
	?>
 
	*/
 
	//Default variables
	$tag_open = "";
	$tag_close = "";
	$use_link = 0;
	$use_class = 0;
	$custom_pages = "";
	$default_echo = 0;
	$default_pages = "";
	$get_args = array();
 
	//Get custom arguments
	parse_str($custom_args, $get_args);
	$tag_open = (array_key_exists('tag_open',$get_args)?$get_args['tag_open']:"");
	$tag_close = (array_key_exists('tag_close',$get_args)?$get_args['tag_close']:"");
	$use_link = (array_key_exists('use_link',$get_args)?$get_args['use_link']:"");
	$use_class = (array_key_exists('use_class',$get_args)?$get_args['use_class']:"");
 
	//By default dont echo, just return value
	$default_echo = 0;
	if(preg_match("/^(.*?)(echo=([0-9]))(.*?)$/msi", $args, $match)) {
		$default_echo = $match[3];
	}else{
		$default_echo = "1";
	}
	if($debug == true){
		echo "Default Echo Argument: $default_echo<br/>";
	}
 
	//Replace the echo so we can alter it
	if(preg_match("/^(.*?)(echo=[0-9])(.*?)$/msi", $args)) {
		$new_args = preg_replace("/^(.*?)(echo=[0-9])(.*?)$/msi", "$1"."echo=0"."$3", $args);
	}else{
		$new_args = $args."&echo=0";
	}
	if($debug == true){
		echo "Arguments Passed: $new_args<br/>";
	}
	$default_pages = wp_list_pages($new_args);
	if($debug == true){
		echo "Before Alteration Output: $default_pages<br/>";
	}
 
	//Change the output to use specified tags
	if(preg_match_all("/^(<li class=\"(.*?)\".*?>)<a (.*?)>(.*?)<\/a>(<\/li>)$/msi", $default_pages, $matches, PREG_SET_ORDER)) {
		foreach($matches as $match) {
 
			//Choose whether to use the default classes, it will insert into the tag
			if($use_class == 1) {
				$temp_tag = preg_replace("/>/msi"," class=\"".$match[2]."\">", $tag_open);
				$custom_pages .= $temp_tag;
			}else{
				$custom_pages .= $tag_open;
			}
 
			//Check how to display the text (with or without link)
			if($use_link == 1){
				$custom_pages .= "<a ".$match[3].">".$match[4]."</a>";
			}else{
				$custom_pages .= $match[4];
			}
 
			$custom_pages .= $tag_close;
		}
	}
	if($debug == true){
		echo "After Alteration Output: $custom_pages<br/>";
	}
 
	//Output
	if($default_echo == 1)
		echo $custom_pages;
	else
		return $custom_pages;
 
}
?>

To implement this function all that a user must do is copy the function below and paste it into the bottom of the functions.php file found in the theme directory that the current WordPress installation is using. This is a generalized installation method so be careful to backup that file before changing it. If it is not an extremely customized theme the function should be able to be pasted at the bottom of the functions.php page and used thereafter.

As a side note, this has not been developed to deal with the “depth” option for the wp_list_pages() function. As it is it will most likely replace all the <li> and </li> but leave the surrounding <ul> and </ul>.

WordPress Custom Comment Display

Posted by Art | Posted in BLUETUX, Web Development | Posted on 09-03-2009-05-2008

9

WordPress and I have become very good friends lately being that it is very versatile and a great open source blogging tool. One of the things that I find needs to be changed quite a bit for clients is how the comments are displayed once the new blog/news/information section of their website has been set up. The basics of it can be found here on the WordPress website and I am really just repeating what they already have but its something that I use enough I want to help others find it easier.

The first step is to go into the theme folder for whatever theme it is that you would like to customize. This is usually located in ~/wp-content/themes/theme-to-edit/ . Once you have found this folder you will want to open up the comments.php file and find the section that uses the wp_list_comments() function. Once you have found this you may see that it is encapsulated by <ol> or maybe <ul> tags. If the new way you would like to display the comments doesnt use these, get rid of them. Then you want to add ‘type=comment&callback=mytheme_comment’ into the function call so it should look like:

<?php wp_list_comments('type=comment&amp;callback=mytheme_comment'); ?>

Just change “mytheme_comment” to whatever you want to call your new function. Now comes the fun part, open the functions.php file that is located in the same theme folder and open it. Once it is open you just add a new function to the list, its probably best to put it after the opening “if” statement in the file. The basic function that WordPress provides is this:

function mytheme_comment($comment, $args, $depth) {
 
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
<div id="comment-<?php comment_ID(); ?>">
<div class="comment-author vcard">
<?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>
 
<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>
 
<div class="comment-meta commentmetadata">
<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?>
</div>
 
<?php comment_text() ?>
 
<div class="reply">
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
</div>
<?php
}

Now personally, I think this looks like garbage so I usually change it to use some


or some background colors that alternate but you can do almost anything with it. As you will probably guess this function runs in a loop displaying the information it finds to be true in the statement. If you want you can use a counter to find even or odd comments and change the display or anything. Luckily when using this wordpress function you have a lot of freedom and can change anything you want, unlike some of the others. Here is a quick example of a function that I made in about 5 minutes to give you an example of things to eliminate and condense.

function mytheme_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?>>
<div class="comment-author">
 
<?php printf(__('%s says: '), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>
 
<?php comment_text() ?>
 
<div class="reply">
<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
</div>
</div>
<?php
}

When I have some time I will put in an example of something with a counter for even and odd comments but otherwise go ahead and mess around, and good luck.

UPDATE!

Here is some basic code I just made up in about 5 minutes to show an example of some interval comments that could be used for some different backgrounds and such.

<code>
<?php if ( have_comments() ) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?></h3>
 
<ol class="commentlist">
<?
foreach ($comments as $comment) {
$only_comments[] = $comment;
}
 
foreach ($only_comments as $comment) {
?>
<dt class="comment<?php if ($alt_comment == 'alt') echo ('-alt'); ?>id="comment-<?php comment_ID() ?>">
<?php
//Output the comment text
comment_text();
?>
 
<?php
//Change the class of the comment for the output.
if ($alt_comment == '-alt')
$alt_comment = '';
else
$alt_comment = '-alt';
 
$comment_number++;
} // end foreach comment
 
?>
 
</ol>
 
<?php else : // this is displayed if there are no comments so far ?>
 
<?php if ('open' == $post->comment_status) : ?>
<!-- If comments are open, but there are no comments. -->
 
<?php else : // comments are closed ?>
<!-- If comments are closed. -->
<p class="nocomments">Comments are closed.</p>
 
<?php endif; ?>
<?php endif; ?>
</code>