bencic.net

I recently got my WordPress site up and running.
I had a need to have a “Parent Page” which would dynamically lists its child pages as a list. Example

Initially I thought there would be a method to call the wp_list_pages() function from the page content but I couldn’t find how (or doesn’t exist).

I explored my options there was exec-php however I didn’t want add any potential security holes by allowing php code to be executed (I have been stung in the past with something similar).

Searching through the internet, I couldn’t find any help out

I ended up creating a custom pages template.

———————————————-

Start off by making a copy of the “page.php” file and call this copy “page_with_menu.php”. This “page.php” is located in the /wp-content/themes/default/page.php. There are many ways to do this (SSH, FTP, WebDav, Web file management) which I will not go into details here.

These next steps will demonstrate how to edit the new “page_with_menu.php” php file to add the menu listing. This example below shows how achieve this by using the admin area of your WordPress site.

1) Navigate to the admin area of your website. This is usually http://YourDomain/wp-admin

2) Click on the “Design” link from the main menu

3) A sub menu will appear underneath the main menu. Click on the “Theme Editor” link of the “Design” sub menu

4) I am assuming that you are using the “Default” theme which come with WordPress, if not then change the theme by select it at the “Select theme to edit” dropdown box and click select.

5) On the right side of the page under “WordPress Default theme files” click on the link which will be called something like “page_with_menu.php” to view and start editing the contents of “page_with_menu.php”

6) You should now see the contents of “page_with_menu.php”.

7) Modifying the code

Were going to give the page a name so that we can select this as a template when creating a page. Add the following code to the top of the page changing the template name as desired.

<?php
/*
Template Name: MenuList Template
*/
?>

8 ) Underneath the line

<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

. Add the following code

<?php if($post->post_parent) { // page is a child

echo "<ul>";

wp_list_pages('sort_column=menu_order&amp;amp;amp;amp;amp;amp;title_li=&amp;amp;amp;amp;amp;amp;child_of='.$post->post_parent);

echo "</ul>";

}
if(wp_list_pages("child_of=".$post->ID."&amp;amp;amp;amp;amp;amp;echo=0")) { // page has children

echo "<ul>";

wp_list_pages('sort_column=menu_order&amp;amp;amp;amp;amp;amp;title_li=&amp;amp;amp;amp;amp;amp;child_of='.$post->ID);

echo "</ul>";

} ?>

9) The final product should look something like this.

<?php
/*
Template Name: MenuList Template
*/
?>
<?php get_header(); ?>

	<div id="content" class="narrowcolumn">

		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
		<div class="post" id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
			<div class="entry">
				<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

				<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

				<?php if($post->post_parent) { // page is a child
					echo "<ul>";
					wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->post_parent);
					echo "</ul>";
				}

				if(wp_list_pages("child_of=".$post->ID."&echo=0")) { // page has children
					echo "<ul>";
					wp_list_pages('sort_column=menu_order&title_li=&child_of='.$post->ID);
					echo "</ul>";
				} ?>
			</div>

		</div>
		<?php endwhile; endif; ?>
	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
	</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

10) Click on the “Update File” button to save the changes.

Using the custom template

11) from the top menu click on “Write” then underneath “Write Page”

12) Enter a title into the page title box.

13) On the menu under the “Page Template” section, Click on the dropdown menu and select the new template “MenuList Template”

14) Click on “Save” and test the page.

If there is anything I missed or can make a better suggestion please comment…

This entry was posted on Saturday, January 5th, 2008 at 5:17 pm and is filed under IT Related. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.