get child pages of parent ID and display custom image field with link to page in WordPress

Question

I need to get list of child pages, but i need to exclude the first child. I also need to display a custom image field called\'page_icon\' with url and page title for each. T

Answer 1

Create a file called solutions_menu.php in your theme's directory (/wp-content/themes/your-theme/solutions_menu.php). This file will contain the menu, and will be included in to your pages.

Edit:

I replaced the for-loop with a foreach-loop. Then I added another ACF field for when post type == page to control whether to show the page in the menu or not. It's a simple boolean (true/false) field with the name "appear_in_solutions_menu". I'm not sure this is the best way to solve it but it's working at least.

Here's a working example using the code below: http://japmag.net/24909031/?page_id=6

solutions_menu.php

<?php

# Parent ID
$parent_id = 1064;

# Arguments for the query
$args = array(
    'post_parent' => $parent_id,
    'post_type'   => 'page', 
    'posts_per_page' => -1,
    'post_status' => 'publish' 
    ); 

# The parent's children
$kids = get_children( $args );

# Current pages ID
$page_ID = get_the_ID();

# Start iterating from 1, to skip first child
foreach( $kids as $kid ) {
    
    # Set variables
    $id = $kid->ID;
    $url = get_permalink( $id );
    $page_icon_array = get_field( 'page_icon', $id );
    $page_icon = $page_icon_array[ 'url' ];
    $title = $kid->post_title;
    $show = get_field( 'appear_in_solutions_menu' , $id );
    
    # Make sure the page shoul be in the menu
    if( $show ) {

        # If the current page ID matches the ID of the child, then $current will contain " on", which will be used to apply the class "on" to the anchor-element
        $current = ( $page_ID == $id ) ? " on" : "";
        
        # Echo out the menu ?>

        <div style="width: 160px" class="wp-caption alignleft">

            <a class="icon<?php echo $current?>" href="<?php echo $url?>">

                <img class="size-thumbnail" title="<?php echo $title ?>" src="<?php echo $page_icon; ?>" alt="" width="150" height="150" />

            </a>

            <p class="wp-caption-text"><?php echo $title ?></p>

        </div>

    <?php 
    
    }

}

?>

Now replace the hard-coded menu in your different page files with

<?php get_template_part( 'solutions_menu' ); ?>

This will include the menu in to your pages, and should hopefully dynamically populate itself with the correct data. So if you need to make changes to the menu, just change solutions_menu.php and all the pages that include it will be affected. I hope I understood the problem correctly. I'm at work right now so I haven't been able to test the code yet.