WPSanjit - Blog on deep wordpress stuff

Day 5- How to add a sidebar of child pages + some required functions of HTML

Sanjit Chakrabarti's photo
Sanjit Chakrabarti
·

3 min read

Day 5- How to add a sidebar of child pages + some required functions of HTML

Welcome to day 5! Hajimemasite!

Today I am going to add a sidebar to list all child pages for their parent pages.

Check this code below on page.php:-

  <?php 

//check if the current page has any parent, return its ID else 0
 $theParent = wp_get_post_parent_id(get_the_ID());

  //only returns the page's name. Check if the current page has any children, and return them
  $checkChild = get_pages(
    array(
      'child_of' => get_the_ID()
    ));

//show sidebar only if it's has a parent or a child
  if ($theParent or $checkChild ) {
  ?>

  <!-- Sidebar html starts -->
  <div class="page-links">

  <!-- Only show the title of the parent page here -->
    <h2 class="page-links__title"><a href="<?php echo get_permalink($theParent); ?>">
        <?php echo get_the_title($theParent); ?>
      </a></h2>

    <ul class="min-list">
      <?php
    if ($theParent) {
      $findChildOf = $theParent;
    } else {
      $findChildOf = get_the_ID();
    }

    //echos the name of pages, not return it
    wp_list_pages(
      array(
        'title_li' => NULL,
        'child_of' => $findChildOf,
        'sort_column' => 'menu_column')
      ); ?>

    </ul>
  </div>
 <!-- Sidebar html ends -->

  <?php
  }
  ?>

Here, $theParent and $checkChild check whether the current page is a parent or child page.

Then we added an if statement to check whether to show the sidebar like below, if parent or child pages are present.

image.png

Then we get the title and permalink of the parent page using this code:-

 <h2 class="page-links__title"><a href="<?php echo get_permalink($theParent); ?>">
        <?php echo get_the_title($theParent); ?>
      </a></h2>

Fun fact: You pass the post ID of the page to function like get_the_title() and get_permalink() but if you pass 0 then it will show for the current page.

Now using the following code we first check if we are on the parent page or if we need the parent page ID.

 if ($theParent) {
      $findChildOf = $theParent;
    } else {
      $findChildOf = get_the_ID();
    }

Then using that ID we echo all the child pages using the following code:-

//echos the name of pages, not return it
    wp_list_pages(
      array(
        'title_li' => NULL,
        'child_of' => $findChildOf,
        'sort_column' => 'menu_column')
      ); ?>

Without 'title_li' => NULL, btw, it will show like below:-

image.png

'child_of' => $findChildOf, echo all the child pages of the parent page ID.

'sort_column' => 'menu_column' sorts the pages by menu order, which you can set while you edit the page on wp backend, as shown below:-

image.png

Now, let's go over some necessary functions of WordPress to add in HTML:-

1) language_attributes() -> Add language to use to show the website, based on language set on WordPress settings. Add like this:-

<!DOCTYPE html>
<html <?php language_attributes(); ?> >

It will show in developer tools like:- image.png

2) bloginfo( 'charset' ) -> To be add in meta tag under head section to tell browser which character set to use. 

<head >
    <meta charset="<?php bloginfo( 'charset' ); ?>>

It will show in developer tools like:-

image.png

3) body_class() -> To be added in body tag so extra classes are added based on which page is loaded. Quite handy function. Great for using to change elements in particular pages based on classes added.

</head>
<body <?php body_class(); ?>>

It will show in developer tools like:-

image.png

Here, it adds all extra classes which you can use to change elements using javascript based on page/post visited.

That's about it for day 5. Look forward to day 6 now.

WordPressdevelopmentDeveloper