Applet Orchard

WordPress Child Page Menu (parent & subpages)

[ad_1]
In this lesson we learn about “parent” and “child” pages in WordPress. We also learn how to code a menu that will output links to any children pages relative to the currently viewed page. Check out my “Get a Developer Job” course:

To view a complete list of the WordPress lessons in sequential order visit:

Link to download .zip of theme files as shown in this video (note: this is not a “complete” WordPress theme yet and this download is only intended for educational purposes to dissect and review):

Want to share the WordPress website that you’ve been creating on your computer with the world? Learn about the web host I use and how you can get a domain + hosting for $4.95 a month ($60 savings):

Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at

Follow LearnWebCode on Twitter for resources and updates:

Posted

in

by

appletorchard

Tags:

, , ,

Comments

50 responses to “WordPress Child Page Menu (parent & subpages)”

  1. Mustafa RH Avatar
    Mustafa RH

    Absolutely great. thanks a lot

    Reply
  2. James Summers Avatar
    James Summers

    Hey guys, so I was trying to follow along with the custom function code, and I'm pretty sure I followed along correctly (I double and triple checked), but I kept getting an error from WP after I refreshed my site.

    It's August of 2017, so who knows how many changes were made between now and when this awesome tutorial was made. Anyway long story short I had a hunch to simply add and edit some "ul ul" css styles and was able to style a drop down menu perfectly within the header navigation.

    I just assumed that since WordPress' menu function uses typical html elements for site navigation – nav ul li a – then targeting sub menus (I placed a few menus under another menu in the WordPress dashboard making those menus sub menus or child menus) and targeted them with typical dropdown menu site navigation – nav ul ul li a – etc. I styled them how I'd normally style site navigation and everything works just fine. Basically I didn't have to include those custom lines of code to the header.php or the functions.php.

    If you're an absolute beginner then a lot of this stuff will be tricky to understand. I've been studying web development for 2+ years now and PHP is super foreign to me and I got lost in this video, but if you understand a bit of CSS and basic HTML/CSS structure then you could probably try my method.

    Reply
  3. Saiful Islam Avatar
    Saiful Islam

    Here float ; did'nt work

    Reply
  4. Saiful Islam Avatar
    Saiful Islam

    /*
    Theme Name:LearlingWordpress
    Author: Saiful Islam
    Version:1.0
    */
    body {
    font-family:Arial, sans-serif;
    font-size:14px;
    color:#333;

    }
    a:link,
    a:visited {
    color: #006ec3;
    }
    p{
    line-height:1.65em;

    }
    div.container {
    max-width:920px;
    margin:0 auto;
    padding-left:20px;
    padding-right:20px;

    }
    article.post{
    border-bottom:2px dotted #bbb;
    }
    article.post:last-of-type{
    border-bottom:none;

    }
    /* Header */
    .site-header{

    border-bottom:2px solid #999;
    }
    / Footer */
    .site-footer {
    margin-top:30px;
    border-top:2px solid #999;
    }
    /* Navigation Menus */
    site-nav ul{
    margin:0;
    padding:0;
    }
    .site-nav ul:before,
    .Site-nav ul:after{
    content:"";
    display:table;
    }
    .site-nav ul:after {clear:both;}
    .site-nav ul{*zoom:1;}

    .site-nav ul li{
    float:left;
    list-style:none;

    }
    /* Site Header Menu*/
    .site-header nav ul li{
    margin-right:5px;
    }
    .site-header nav ul li a:link,
    .site-header nav ul li a:visited{
    display:block;
    padding:5px 10px;
    border:1px solid #BBB;
    border-bottom:none;
    text-decoration:none;
    }
    .site-header nav ul li a:hover{
    background-color:#ECECEC;
    }
    .site-header nav ul li.current-menu-item a:link,
    .site-header nav ul li.current-menu-item a:visited{
    background-color:#006ec3;
    color:#FFF;
    }

    /* Footer Menu*/
    .site-footer nav ul li{
    margin-right:10px;
    padding-right:10px;
    border-right:1px dotted #BBB;
    }

    div.title-column{
    width: 30%
    float: left;
    }
    div.text-column{
    width: 70%
    float: right;
    }
    div.info-box{
    width:30%
    float:right;
    margin:0 0 30px 30px;
    padding: 20px;
    background-color:#EEE;
    }
    div.info-box h4{
    margin-bottom:6px;
    }
    div.info-box p{
    font-size:85%;
    }

    Reply
  5. L-Drac WarThorn Avatar
    L-Drac WarThorn

    I have the newer version of wordpress, and my menus have children twice on the basic menu, and also my children menu have all the pages, not only the children, how can I fix this?

    Reply
  6. Nathan Gueye Avatar
    Nathan Gueye

    Thanks for the tutorial it was really helpful!
    Anyway you can show how to add the home page to this navigation menu?

    Reply
  7. Alessio Cangemi Avatar
    Alessio Cangemi

    Is there a way to display the subpages with Ajax?

    Reply
  8. Piero Dauber Avatar
    Piero Dauber

    Hi, because I'm a beginner and I appreciate your work I would like to add some solution I found while yours wasn't working in my template.
    the function has_children(); wasn't given the result I expected so I just wrote this one.
    function has_children(){

    global $post;
    $args = array(

    'post_parent' => $post->ID,
    'post_type' => 'any',
    'numberposts' => -1,
    'post_status' => 'any'
    );
    $pages = get_children( $args);
    //$pages = get_children('child_of =' . $post->ID);
    return count($pages);
    }
    I hope it's useful and help people struggling like me to learning this wonderful tool.

    Reply
  9. slawero Avatar
    slawero

    This is the most difficult lesson so far. I tried to understand what was going on but it's hard with almost no experience in OOP PHP. With previous lessons it was mainly procedurar PHP but I guess wp_list_pages function has something to do with an array of objects. I am wondering if all those thrilled ppl in the comments understand what they are doing or it's just copying the code and being thrilled that it works.

    Reply
  10. Vincent Benzon Avatar
    Vincent Benzon

    how can I use script for a different theme on wordpress, please, I need help.( I tried doing the exact same thing with a different theme, but it started doing nothing after the bullet points part.) Thank you.

    Reply
  11. Khalil Pierre Avatar
    Khalil Pierre

    the second best video for php

    Reply
  12. madushan senevirathna Avatar
    madushan senevirathna

    NOT working

    if($post->$post_parent)
    {
    $ans = array_reverse(get_post_ancestors($post->ID));
    return $ans[0];
    }

    Reply
  13. Version Ori Avatar
    Version Ori

    Excellent

    Reply
  14. dinesh singh Avatar
    dinesh singh

    awesome tutorial

    Reply
  15. Stivn Cherenkor Avatar
    Stivn Cherenkor

    Why don't we just use "if(get_post_ancestors($post->ID))" instead of "if ( has_children() OR $post->post_parent > 0 )" ?????

    Reply
  16. Takuto Kira Avatar
    Takuto Kira

    For anyone having trouble with CSS in Chrome, try clearing the cache (clear browsing data)

    Reply
  17. Herimienne Adz Avatar
    Herimienne Adz

    make sure to put 0 instead of O in $acnestors[0]

    Reply
  18. d-_-b Avatar
    d-_-b

    hi! great tutorial. i am just dipping my feet into php and this really made it click in a few ways. this is working nearly perfect on my site but i am having one issue; on the pages i have set to anything but default for the template this works but any page with another template looses the menu. any chance there is a fix for this?

    Reply
  19. Nasim Ahmed Avatar
    Nasim Ahmed

    Great Video series . Very nice !

    Reply
  20. Luigi Octaviano Avatar
    Luigi Octaviano

    Hello, after we did the fourth part. My CSS seems to be not working. Even when I download your resources in your site. I tried to replace all files but the design seems to not work. What should be the problem here? The browser? (I use chrome btw.)

    Reply
  21. Marcos Di Paolo Avatar
    Marcos Di Paolo

    Hi, GREAT JOB with this tutorials!!!. Thank to these videos I decided to get my hands dirty and make my own theme!!!.
    I'm actually having an issue, the code to have a child pages menu works but only in the parent page (I get a blank page at the child pages), which is odd because the code is the same for parent and child pages, problem might be the function get_top_ancestor_id() because if i replace it with $post->ID child pages work which again is odd since the parent is using the same function and it's working. Any ideas??
    [p.s.: I'm using the video code, haven't downloaded any zip file]
    EDIT:
    FUNCTION WORKED when changed to:
    function get_top_ancestor_id() {

    global $post;

    if ($post->post_parent !==0) {
    return $post->post_parent;
    }
    else {
    return $post->ID;
    }
    }
    And when assigning the permalink to the top ancestor's title it worked with the_permalink(get_top_ancestor_id()); NOT WITH get_the_permalink(….);
    EDIt-2:
    Sorry, missed the echo in the get_the_permalink();

    Reply
  22. Michael Krogh Avatar
    Michael Krogh

    Great stuff so far.

    My site denies to load while the "has_children" function is in functions.php.

    I have tryed copying the directly from your zip file, with the same result.

    Any guess, whats wrong?

    Reply
  23. ARJUN Avatar
    ARJUN

    The best tutorial ever..massive respect sir….

    Reply
  24. babulal choudhary Avatar
    babulal choudhary

    Very good and solid video tutorial. Really Excellent. I like it. Thanks for sharing great video.

    Reply
  25. Gabriel Rivero Avatar
    Gabriel Rivero

    This doesn't seem to work with newer versions of WordPress :/

    Reply
  26. The one who licks his eyebrows Avatar
    The one who licks his eyebrows

    My children links are not editing in the css file.

    Reply
  27. Jennifer Blake Avatar
    Jennifer Blake

    I cant get the function to work, any chance there could be something that is clashing with it?

    Reply
  28. Shadowslip 71 Avatar
    Shadowslip 71

    For those of you having problems getting the menu to display properly: Opera doesn't display the menu properly but Chrome and Firefox does. If you're having difficulty then try it in different browsers.

    Reply
  29. Shadowslip 71 Avatar
    Shadowslip 71

    Why does this line, "<nav class="site-nav children-links clearfix">" have 3 classes all controlling the same code? Why not just use one class?

    Reply
  30. justin lazaro Avatar
    justin lazaro

    Call to undefined function has_children() in C:xampphtdocslguwp-contentthemeslearningthemepage.php:13 Stack trace: #0 C:xampphtdocslguwp-includestemplate-loader.php(74): include() #1 C:xampphtdocslguwp-blog-header.php(19): require_once('C:\xampp\htdocs…') #2

    got error in has_children

    <?php
    if(has_children() OR $post->post_parent > 0) { ?>
    <span>
    <a href="<?php echo get_the_permalink(get_top_ancestor_id()); ?>">
    <?php echo get_the_title(get_top_ancestor_id()); ?>
    </a>
    </span>
    <?php
    $args = array(
    // 'child_of' => $post->ID,
    'child_of' => get_top_ancestor_id(),
    'title_li' => ""
    );
    ?>

    <?php wp_list_pages($args); ?>
    <?php } ?>

    Reply
  31. HomeVideosNZ Avatar
    HomeVideosNZ

    Fantastic video, I'm really enjoying the series. At 14:20 I replaced cursor:default; with pointer-events:none; in the style.css file. I'm just fiddling with the code while learning how WordPress themes work.

    Reply
  32. Ευγένιος Μουστέι Avatar
    Ευγένιος Μουστέι

    I did exactly what i saw in the video but the result is different and incorrect. First of all it affects all pages and not only the page in which i have children pages. Secondly in every page in front of title there is a link (same as title) as i understand it is the parent link that we created. Same thing happens in every page. Lastly the title in every page moved to the right(mostly because of the wrong title that appeared) but in the page with the children too where everything seems to be ok too. Please help me!

    My code-page.php

    <nav class="site-nav children-links clearfix">
    <!-parent link on top of child->
    <span class="parent-link"><a href="<?php echo get_the_permalink(get_top_ancestor_id());?>"><?php echo
    get_the_title(get_top_ancestor_id());?></a></span>

    <!-child page managment->
    <ul>
    <?php

    $args = array(
    'child_of' => get_top_ancestor_id(),
    'title_li' => ''
    );
    ?>

    <?php wp_list_pages($args); ?>
    </ul>
    </nav>

    functions.php

    function get_top_ancestor_id(){

    global $post;

    if ($post->post_parent) {
    $ancestors = array_reverse(get_post_ancestors($post->ID));
    return $ancestors[0];
    }

    return $post -> ID;
    }

    Reply
  33. Sebastían Callejas Avatar
    Sebastían Callejas

    I doesn't work in my theme 🙁 I don't know why

    Reply
  34. Ilya Nice Avatar
    Ilya Nice

    Hi, thanks very much for the tutorial!

    Could you recommend a place where I could learn about the meaning of all those functions or methods like 'child_of' => … or get_posts?

    is the 'developer.wordpress' reference a good place for PHP and wordpress beginner developers?

    Reply
  35. Augusto Paredes Avatar
    Augusto Paredes

    Than you for a great introduction! better than other I paid for!

    Reply
  36. Beeblebrox Avatar
    Beeblebrox

    Outdated. I am plucking out my hair, never have I been so mad before.

    Reply
  37. Xu Wang Avatar
    Xu Wang

    dummy question: which editor is it?

    Reply
  38. a rhombus Avatar
    a rhombus

    May I know why my code in the css for .children-links section is not working? I know I copied the text exactly but it is not translated into the website. How do I check whether the css for .children-links is directly connected to the page.php?

    Reply
  39. Romy Kim Avatar
    Romy Kim

    Anyone else have problem with current-page-ancestor ? It's around 15:34. Adding those 2 new lines prevents portfolio / about us / contact us where active tab getting in blue as well.

    Reply
  40. Ravi Rawat Avatar
    Ravi Rawat

    How to get the submenus in drop down instead of appearing below

    Reply
  41. anugraha acharya Avatar
    anugraha acharya

    those who got problem in functions
    index.php

    <?php
    if($post->post_parent){
    $args = array(
    'child_of'=>$post->post_parent,
    'title_li'=>null
    );
    }
    else{
    $args = array(
    'child_of'=>$post->ID,
    'title_li'=>null);
    }
    ?>
    <?php wp_list_pages($args) ?>

    Reply
  42. Sulav Khadka Avatar
    Sulav Khadka

    you should get the "hero of the year " award!! This kind of charitable work can only done by a good human being!! Thank You

    Reply
  43. Paulo Cicero Avatar
    Paulo Cicero

    muito produtivo, gostei

    Reply
  44. Guru Sutra Avatar
    Guru Sutra

    when i click on the child page, my child nav is not seen on they child page, and my code is copy of your code ! so what is they problems ?

    Reply
  45. Abbas Ali Avatar
    Abbas Ali

    my children-link class is not being applied what should do i am following the code ?

    Reply
  46. Carlo Leonini Avatar
    Carlo Leonini

    Great tutorial thanks a lot. Could you please tell me where I find the description to check your code I don't seem to be able to find it anywhere.

    Reply
  47. Igor Aherne Avatar
    Igor Aherne

    For anyone wondering, $post is an in-built variable provided by wordpress. We haven't declared it anywhere, it just comes out of the box

    Reply
  48. Reinier G Avatar
    Reinier G

    My stylesheet isn't working on index.php but all the other files are reading it fine, any ideas?

    Reply
  49. Justin Urbaniak Avatar
    Justin Urbaniak

    Doesn't seem to work

    Reply
  50. Arshdeep Soni Avatar
    Arshdeep Soni

    Anybody know what text-editor he is using?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *