custom design wp_list_pages() WordPress
- SOLVED
Hi,
I would like to customize the <li> section of the wp_list_pages.
For the moment I use the following code to get the children of a parent page.
The wp_list_pages() tag generates the <li> section with only the title. See the code below
<?php
$children = wp_list_pages('title_li=&child_of='.$post->ID.'&echo=0&depth=1');
if ($children) { ?>
<ul>
<?php echo $children; ?>
</ul>
<?php } ?>
The <?php echo $children; ?> generates the <li>.
But I would like to repeat the following in the <li> tag:
<img src="featured image" />
<h2>"page title"</h2>
Anyone who can help me out?
Thx.
Answers (3)
Nilesh shiragave answers:
i think better use get_pages() function to display all pages.
http://codex.wordpress.org/Function_Reference/get_pages
i think following code will help. let me know if you want anything different.
<?php
$mypages = get_pages('child_of='.$post->ID.'&sort_column=menu_order');
if($mypages)
{
echo '<ul>';
foreach($mypages as $page)
{
?>
<li>
<?php the_post_thumbnail(); ?>
<h2><a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a></h2>
</li>
<?php
}
echo '</ul>';
}
?>
Filip Van Reeth comments:
Hi,
See the live url: [[LINK href="http://www.soulsister.be/discografie"]][[/LINK]]
The thumbnail does not work, should show up at "Closer". I also notice that het shows all depths instead of only the child pages of 'discografie', one level deep.
Can you fix this?
Thx.
Filip Van Reeth comments:
Sorry, this is the link: http://www.soulsister.be/discografie
Nilesh shiragave comments:
try this code
<?php
$mypages = get_pages('child_of='.$post->ID.'&sort_column=menu_order&parent=0');
if($mypages)
{
echo '<ul>';
foreach($mypages as $page)
{
?>
<li>
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?>
<h2><a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a></h2>
</li>
<?php
}
echo '</ul>';
}
?>
Filip Van Reeth comments:
Nopes, blank page :-)
Nilesh shiragave comments:
sorry try this i think only issue is with the subpages which causing blank page
<?php
$mypages = get_pages('child_of='.$post->ID.'&sort_column=menu_order&hierarchical=0');
if($mypages)
{
echo '<ul>';
foreach($mypages as $page)
{
?>
<li>
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?>
<h2><a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a></h2>
</li>
<?php
}
echo '</ul>';
}
?>
Filip Van Reeth comments:
Hi,
Almost perfect, only the depth does not work. It shows all pages.
http://www.soulsister.be/discografie
Nilesh shiragave comments:
try this code
<?php
$mypages = get_pages('child_of='.$post->ID.'&sort_column=menu_order&parent=0&hierarchical=0');
if($mypages)
{
echo '<ul>';
foreach($mypages as $page)
{
?>
<li>
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?>
<h2><a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a></h2>
</li>
<?php
}
echo '</ul>';
}
?>
I think it will work
Filip Van Reeth comments:
White page now ;-)
Nilesh shiragave comments:
sorry depth problem
try this
<?php
$mypages = get_pages('child_of='.$post->ID.'&sort_column=menu_order&parent='.$post->ID.'&hierarchical=0');
if($mypages)
{
echo '<ul>';
foreach($mypages as $page)
{
?>
<li>
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?>
<h2><a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a></h2>
</li>
<?php
}
echo '</ul>';
}
?>
Nilesh shiragave comments:
worked?
Nilesh shiragave comments:
I tested that code it is working. and displaying only top level child pages of current page.
let me know
Filip Van Reeth comments:
Hi worked like a charm.
Thanks.
Is it possible to list the pages by the custom field "discografie_release"?
<li>
<?php echo get_the_post_thumbnail($page->ID, 'thumbnail'); ?>
<h2><a href="<?php echo get_page_link($page->ID) ?>"><?php echo $page->post_title ?></a>
<p><?php $key="discografie_release"; echo get_post_meta($page->ID, $key, true); ?> / <?php $key="discografie_copyrights"; echo get_post_meta($page->ID, $key, true); ?></p></h2>
</li>
Nilesh shiragave comments:
so you want to display only those pages which have custom field 'discografie_release' or order them according to the custom field 'discografie_release'
Filip Van Reeth comments:
order them ;-)
Nilesh shiragave comments:
not possible with these easy codes. we can show pages order by that custom field value but the depth option will not work and all pages will be displayed.
Nilesh shiragave comments:
do you want that?
Filip Van Reeth comments:
No, the depth level should stay?
Hmm pitty
Nilesh shiragave comments:
question is solved... can we close it...
Andrzej answers:
Hi Filip,
You can do it for example by:
<?php
$children = str_replace('<li>','<li><img src="image.gif" /><h2>text</h2>', $children);
echo $children;
?>
It might be bit more complicated depending on how custom you wish it to be. I'd say try that and tell me how it works for you.
Filip Van Reeth comments:
Hi,
This is what every <li> should generate:
<li>
<?php the_post_thumbnail(); ?> (this generates the used featured image of the linked page)
<h2>"Title of the linked page"</h2>
</li>
Andrzej comments:
Ok, try this:
<?php
$children = get_posts(array('post_type' => 'page', 'post_parent' => $post->ID ));
if ( $children ) {
foreach ( $children as $child ) {
echo'<li>';
echo get_the_post_thumbnail( $child->ID, 'thumbnail' );
echo'<h2>'.$child->post_title.'</h2></li>';
}
}
?>
Andrzej comments:
Soz quick update, 1 tag was missing:
<?php
$children = get_posts(array('post_type' => 'page', 'post_parent' => $post->ID ));
if ( $children ) {
echo'<ul>';
foreach ( $children as $child ) {
echo'<li>';
echo get_the_post_thumbnail( $child->ID, 'thumbnail' );
echo'<h2>'.$child->post_title.'</h2></li>';
}
echo'</ul>';
}
?>
Filip Van Reeth comments:
Nopes; does not work correctly.
See image