• Bit of a tough one to explain here, but I’ll do my best.

    I have this page template, which you can view here: http://goo.gl/y088X. The template firstly lists all the pages that are children of the category ‘Exhibitions Archive’ at the top as a sub menu, then the page outputs the attachments of these pages (images) on the page and uses some JS for presentation etc.

    Currently, the submenu (the list of the child pages) items link to the pages, which is the obvious thing to do.

    However, what I’d like to be able to do is keep everything on one page and have the sub menu items link to the post on the page and to scroll down to that section on the page (essentially, using anchor links). If you clicked on a exhibition title link in the sub menu, it would scroll to the title of the exhibition further down the page.

    I have most of it set up, but I need to be able to do this dynamically. The titles down the pages marking the start of each section would need be be an anchor tag with the id tag referencing the sub-menu item, so when the sub menu item is clicked it’ll scroll to that location with the sub menu item having the #anchor as the href, rather than a permalink to that page.

    Is this at all possible?

    This is what I’m using to list the items in the sub-menu, so I need a way of it dynamically creating a #anchor as the href rather than the permalink, and then the <h1> title down the pages marking each section to have the corresponding id.

    Hope this makes sense, and hope you can help. I’ll give some mega reputation for anyone who works this out 🙂

    Thanks in advance, R

    <?php wp_list_pages('title_li=&child_of=155'); ?>

Viewing 4 replies - 1 through 4 (of 4 total)
  • hey,

    you got it to work – can you share your solution?

    thx!
    Q

    Thread Starter richgcook

    (@richgcook)

    Sure thing:

    This is for the navigation list on the page:

    <?php
    		if( is_page(155) ){
    		    $args = array( 'child_of' => 155,
    		                   'sort_column' => menu_order,
    		                   'parent' => 155,
    		                   'hierarchical' => 0
    		                 );
    		    $mypages = get_pages($args);
    		?>
    		<ul>
    		    <?php foreach( $mypages as $page ) {
    		?>
    		   <li><a href="#<?php echo $page->post_name; ?>" class="smooth-scroll"><?php echo $page->post_title; ?></a></li>
    		<?php
    		    }
    		 ?>
    		 </ul>
    		<?php
    		}
    		?>

    And this is how I dumped out the images and added the anchor to them. You can see the ID for each title is the slug, and in the navigation at the top, each link echos the post/page name but with a # in front.

    <?php $postslist = get_pages('number=9999&sort_order=ASC&sort_column=menu_order&child_of=155');
    	foreach ($postslist as $post) :
    	setup_postdata($post); ?>
    	<ul class="main-projects-list">
    	<?php
    
    	$args = array(
    	   'post_type' => 'attachment',
    	   'numberposts' => -1,
    	   'post_status' => null,
    	   'post_parent' => $post->ID,
    	   'orderby' => 'menu_order',
    	   'order' => 'ASC',
    	  );
    
    	  $attachments = get_posts( $args );
    	     $post_title = get_the_title($post->ID); // We get the post title
    	     if ( $attachments ) {
    	        foreach ( $attachments as $attachment ) {
    	           $main_page_title = apply_filters( 'the_title', $post_title );
    			   $img_title = apply_filters( 'the_title', $attachment->post_title );
    			   $slug = basename(get_permalink());
    	           echo '<li class="each-image">';
    			   echo '<div class="each-exhibition-text">';
    			   echo '<h1 id="';
    			   echo $slug;
    			   echo '">';
    	    	   echo $main_page_title;
    		       echo '</h1>';
    			   echo the_content();
    			   echo '</div>';
    	           echo wp_get_attachment_image( $attachment->ID, 'large' , false, array('title' => $img_title));
    	           echo '<p>';
    	           echo $img_title;
    	           echo '</p>';
    	          }
    	     }
    
    	?>
    
    	<?php endforeach; ?>

    Hope this helps,
    R

    coolio, thx a lot.

    Q

    Hey R,

    Can´t get the second part to work. Maybe it´s because of the ‘post_type’ – i only wanted childpages to be listed, with just an anchor link on the h1 title, no links to individual pages. the pages might have an image, but i don´t want to just list these.
    or could it be the difference posts/pages? stuck here…

    maybe you got an idea.

    thx,
    Q

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘WordPress – List child pages but link them as an anchor’ is closed to new replies.