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

2 Views

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. This will act as a sub menu whic will be displayed on each child page. Each menu item needs to have the current class attached to the a tag. i’ve tried a number of different methods and have had no luck as my skill level is beginner at best.

the parent ID is 1064
the custom field is called ‘page_icon’ which was set up using ACF

Read More

the current menu is hard coded into the editor and the html looks like this: – 

<div id="attachment_1306" style="width: 160px" class="wp-caption alignleft"><a class="icon on" href="http://www.domain.co.uk/category/category/category/"><img class="wp-image-1306 size-thumbnail" title="Policy Manager" src="http://www.domain.co.uk/wp-content/uploads/2013/05/docs-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Policy Manager</p></div>

 <div id="attachment_1297" style="width: 160px" class="wp-caption alignleft"><a class="icon" href="http://www.domain.co.uk/category/category/category/"><img class="wp-image-1297 size-thumbnail" title="Risk Manager" src="http://www.domain.co.uk/wp-content/uploads/2013/05/risk-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Risk Manager</p></div>

 <div id="attachment_1307" style="width: 160px" class="wp-caption alignleft"><a class="icon" title="Controls Manager" href="http://www.domain.co.uk/governance-risk-and-category/category/category/"><img class="wp-image-1307 size-thumbnail" title="Controls Manager" src="http://www.domain.co.uk/wp-content/uploads/2013/05/controls-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Controls Manager</p></div>

 <div id="attachment_1301" style="width: 160px" class="wp-caption alignleft"><a class="icon" title="Incident Manager" href="http://www.domain.co.uk/category/category/category/"><img class="wp-image-1301 size-thumbnail" title="Incident Manager" src="http://www.domain.co.uk/wp-content/uploads/2013/05/incident-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Incident Manager</p></div>

 <div id="attachment_1289" style="width: 160px" class="wp-caption alignleft"><a class="icon" title="Workflow Manager" href="http://www.domain.co.uk/category/category/category/"><img class="wp-image-1289 size-thumbnail" title="Workflow Manager" src="http://www.corestream.co.uk/wp-content/uploads/2013/05/workflow-150x150.png" alt="" width="150" height="150" /></a><p class="wp-caption-text">Workflow Manager</p></div>

but this is not user friendly in terms of updating the page icons as you have to copy and paste this into each child page.

please someone help me?

Post Views: 2

Related posts

Leave a Reply

1 comment

  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.