So basically i have an Main Parent page with sub-category pages where each sub-category page has child pages and using the code provides, it works perfectly fine displaying each parent with its children.
I would like to know can have full control over the listing, because for only the parent tabs, i would like to add an image using ACF (advance custom fields) , meaning if that parent page in the CMS has a logo($tab_logo = get_field('parent_tab_logo');) add it to the listing with the parent name.
Code:
<?php
// find parent of current page
if ($post->post_parent) {
$ancestors = get_post_ancestors($post->ID);
$parent = $ancestors[count($ancestors) - 1];
//Display Parent post Title
$parent_post_id = $parent;
$parent_post = get_post($parent_post_id);
$parent_post_title = $parent_post->post_title;
} else {
$parent = $post->ID;
}
$children = wp_list_pages("sort_order=asc&title_li=&child_of=" . $parent . "&echo=0");
if ($children) { ?>
<div id="side" class="col-lg-4 col-md-4 col-sm-12">
<h4><?php echo $parent_post_title; ?></h4>
<div class="row">
<div class="col-lg-10 col-md-12 col-sm-12">
<ul id="side-navi" class="list-unstyled mb-0 ">
<?php echo $children; ?>
</ul>
</div>
</div>
</div>
<?php } ?>
Current outcome: (example)
Main Parent PAGE
Parent-1 (child of Main Parent PAGE)
child1 (child of Parent-1)
child2 (child of Parent-1)
Parent-2 (child of Main Parent PAGE)
child1 (child of Parent-2)
child2 (child of Parent-2)
Expected outcome: (example)
Main Parent PAGE
Parent-1 (IMAGE from this page using acf = $tab_logo = get_field('parent_tab_logo');)
child1
child2
Parent-2 (IMAGE from this page using acf = $tab_logo = get_field('parent_tab_logo');)
child1
child2
This should be as simple as what the ACF docs say.
You need to get the field when you check for a parent then display the field in the relevant section, passing the post id might also save you some headaches so it only targets your parent items.
Hope this helps.
<?php
$parent_image = get_field('image', $post_id);
if( !empty($parent_image) ): ?>
<img src="<?php echo $parent_image['url']; ?>" alt="<?php echo $parent_image['alt']; ?>" />
<?php endif; ?>
You should be able to do something like the below, where you pass the parents post id into the get_field() function. Depending on how you have set up the image in ACF, you may need to update how you are pulling out the image.
<?php
// find parent of current page
if ($post->post_parent) {
$ancestors = get_post_ancestors($post->ID);
$parent = $ancestors[count($ancestors) - 1];
//Display Parent post Title
$parent_post_id = $parent;
$parent_post = get_post($parent_post_id);
$parent_post_title = $parent_post->post_title;
$parent_image = get_field('parent_tab_logo', $parent_post_id);
} else {
$parent = $post->ID;
}
$children = wp_list_pages("sort_order=asc&title_li=&child_of=" . $parent . "&echo=0");
if ($children) {
?>
<div id="side" class="col-lg-4 col-md-4 col-sm-12">
<h4><?php echo $parent_post_title; ?></h4>
<?php
if( !empty($parent_image) ){
?>
<img src="<?php echo $parent_image['url']; ?>" alt="<?php echo $parent_image['alt']; ?>" />
<?php
}
?>
<div class="row">
<div class="col-lg-10 col-md-12 col-sm-12">
<ul id="side-navi" class="list-unstyled mb-0 ">
<?php echo $children; ?>
</ul>
</div>
</div>
</div>
<?php
}
?>