WordPress Little one Web page Menu (father or mother & subpages)

by birtanpublished on July 3, 2020

hello everyone welcome to another

WordPress tutorial in this lesson we'll

be learning how to manage links to and

from parent and child pages or in other

words top-level pages and subpages if

you're new to WordPress and unfamiliar

with the term parent page child page

here's a quick explanation WordPress

makes it very easy to link pages

together so that your visitors can see

that there's some sort of hierarchy or

structure or relevancy between the pages

so for example you might have an about

Us page but maybe you have enough

content that you want to separate it

into a mission statement page and in our

future page and at our history page but

the key fact is that they're all

intrinsically related to the about Us

topic or parent page so in this case we

can see that these dashes indicate that

these pages are children of the about Us

page it's incredibly simple to assign a

parent to a page if you click on the

page that you want to edit you'll see

that under page attributes there's a

drop down menu defining what the parent

should be so now you can imagine how

incredibly useful it would be to have

WordPress automatically output a list of

relevant children links depending on the

page you're currently on so you can see

if we navigate to about us we can see

the children pages and then even if we

click on one of them we still have this

nice navigation which is letting us know

that we're in the about Us section and

here are the different sub pages we can

choose now obviously looking at a

finished product isn't very educational

or helpful so behind the scenes really

quick I'm going to go ahead and remove

this sub page child page navigation menu

and then the remainder of this video we

will be working together to rewrite the

code to make it possible so you will

learn all of the PHP HTML and CSS

required to add something like this to

your theme so let's get started I just

removed all of the code that was

outputting the parent-child navigation

so we're starting together from square

one so let's take a look at our code in

this case we're working with the page

PHP file in the theme folder and we want

to add a bit of code right before the


so right above this title so the new

code that we will add looks something

like this

drop into PHP we want to use a wordpress

function named WP list pages if we

refresh we can see that a list of every

page on the website is being output

which we do not want we only want to

output links to children pages relative

to the current page that we're viewing

so right now we're viewing the about Us

page that means that really only these

three links that I just highlighted

should be showing so we need to adjust

the WP list pages function and give it a

bit of options or parameters so that it

understands to only show pages relative

to the currently viewed page so within

this WP list pages function we'll

provide some options or parameters will

say args which is pointing towards an

array named args so let's create that

array args equals an array with a few

options for now we only need one option

we will use more in the future so child

of and then we want to specify the

current page being viewed so to do that

we'll get the post and then we'll get

the ID it's that simple so now if we

refresh we can see that only children

pages of the currently viewed page are

being shown let's go ahead and remove

this pages keyword that WordPress is

automatically adding we don't want that

so we'll simply include another option

in this arguments array I'll say title

list item equals nothing but an empty

quote so if we refresh you can see that

that is now gone now we've laid the

foundation for our children links with

our code and I wish it was this simple

but it's actually a little bit more

complicated because you can see that if

we actually click on one of these

children links so now that we're on our

future the children links have

disappeared and that's because our code

is saying get the children of the

currently viewed page and obviously the

children pages don't have children of

their own so instead we need to

customize this child of options value a

little bit so instead of post ID we need

a way to say get the topmost ancestor

of the currently viewed page now as of

the filming of this lesson there's no

built-in wordpress native function to do

that for us so instead we're going to

create our own function and we can name

our function anything we would like I

will name it get Top ancestor ID so now

that we invented a function name we need

to write the code that actually powers

the function so open up the functions

PHP file in your theme folder go to the

bottom of the file and we're going to

create a comment that says get top

ancestor okay now we're going to write

some new code to power this function

function get top ancestor ID okay now

any code between this bracket in this

bracket will run when this function gets

called so now it's time to write the

actual meat and potatoes for this code

but first let's ask ourselves what we

need the function to do what do we need

it to return we simply want it to return

the value and in the form of an ID

number of the topmost ancestor page

relative to the current page being

viewed so that means if we're viewing a

parent page it can simply return its own

ID value but if we're on a child page we

want it to return the ID of its parent

page so we're going to set up an if

statement so we'll say if the current

page has a parent do something but if it

doesn't then we can do something else so

if the current page does not have a

parent page so if it's the parent page

itself we simply just want to return the

ID of the page it's that simple but if a

condition is met so if the page does

have a parent so we'll say if the post

how the parent we want to return

something else so in this scenario we're

looking to simply get the ID of the

topmost page now WordPress has a neat

function named get post ancestors now

the issue here is that it's not doing

exactly what we want this will actually

create an array with the parent the

grandparent the great grandparent the

great great grandparent but we're not

looking for an array we're looking for

just a single value so what we can do

is create a variable and store this

array inside the variable and then say

return that array but we only want to

return the first value in the array now

we're almost there but not quite

remember when I said that get post

ancestors this built-in wordpress

function that it will get the parent ID

the grandparent the great-great grand

parent well it stores it in an order so

that the first value is actually just

the most direct parent instead the

topmost parent so when we're saying only

give us the first value in this array

what we actually need to do is reverse

the order that this array is storing the

orders in so that the topmost ancestor

is the first value so all we need to do

is simply wrap this value excuse me this

function inside another function named

array reverse okay now we just need to

make sure that when we're saying post we

need to make sure that that variable is

available from within this function so

I'll go ahead and make that available so

now if we refresh even if we go to a

child page our navigation still stays in

place so our children links are now

complete we'll worry about styling them

so that they look nice in just a moment

but for now let's give ourselves another

functional goal we also want to output

the name of the topmost parent page

above the child links so we want the

phrase about us to sit above these

children so let's head over to our code

we will go into Page PHP so we can see

that this is where the children are

being output so directly above that we

want to include the link of the topmost

parent page so we'll create a span class

of parent link and then we'll output the

name and the link right here so the

permalink will go here in just a moment

and then inside this hyperlink element

the title will go so we need to write a

little bit of code that uses this

function that we just created that gets

this relevant ID number and then

displays the correct title so we'll drop

into PHP and we'll use the WordPress

function named get the title so now all

we need to do is use that ID that our


returns and place it inside this get the

title function so we'll say get top

ancestor ID that simple now we also need

to do something similar in the hyperlink

so that it is a link to the about Us

parent page so we'll say PHP echo and

we'll use the WordPress get the

permalink function and then again we'll

just use our function that we created

ourselves so we'll say get top incest

ancestor ID now if we refresh we can see

that there is a link to the topmost

parent page about us so we're currently

on the mission statement page now we're

on the our future page and now we'll

always have this link near the children

links to go back to the parent page so

now the heavy lifting for the most part

is complete we can move on to the fun

part which is the CSS the styling making

these links look good so let's clean up

our markup a little bit clean up our

HTML before we head directly into CSS so

let's add an entire wrapper for all of

these children and parent links so we'll

say nav with a class of site nav

children links clearfix okay and then

we'll indent all of this and then

obviously we'll close this nav section

another thing to note this WP list page

is function it outputs the children

links each one inside a list item but

those list items need to live within an

unordered list so we'll include that and

then we'll close the tag here and then

we can indent this code to stay

organized okay so now our HTML has a bit

more structure so our CSS can play off

these different elements so if we

refresh you can see that things already

look a bit better just by adding this

class of site nav to the nav element now

in a previous lesson we created this

class and all it does is it removes the

bullets and it floats the list items so

that they all sit on a single line but

let's take things a step further and set

up styles that you saw in the very

beginning of this video where the links

are spaced out the about us sits on the

left and then the current page gets

underlined so let's go ahead and set up

all those styles so let's hop over to

our style dot CSS file scroll to the

bottom and we'll create a new comment

and we'll call it children lengths okay

so we'll start by creating some space

around the children links so that it's

not touching the content below it and

also let's make the font size a little

bit smaller so that already looks a

little bit better now let's work on some

of the spacing between each link

children links list item margin right 20

pixels that already looks a lot better

now let's adjust the style so that about

us sits to the left of the children

links so we simply want to float

children links parent link remember

that's the class that we gave to the

parent link so we'll float it to the

left we'll add a bit of space to the


padding in margin 20 pixels will give it

a very subtle border one pixel solid and

we've been using this very light gray

it's very subtle let's also make it a

bit larger font size since it's the

parent section and it can also be bold

and then let's go ahead and float the

children links as well they sit in an

unordered list so we'll float that okay

so now if we refresh you can see that

the layout is really starting to take

shape let's give ourselves a few

additional goals let's remove the

underline from the links and let's make

the parent about us link dark grey

instead of blue so to remove the

underline it's very simple

we'll just target all of the links

within the children links section so

children links

text-decoration:none and then we also

wanted to make the parent link use a

dark grey instead of a blue so we'll

take this selector target the link

within it and color dark gray so now if

we refresh you can see that those

changes are now in place what about an

active state for these children links so

if we click on our future we have no way

of knowing just by looking at the

navigation which page were on so maybe

we should set up some Styles so that we

add an underline or a bottom border to

whatever page we're currently on so if

we hop over to our CSS create a new

selector children links current page

item so WordPress automatically adds a

class of current page item to the list

item the LI to the relevant page that

you're currently on so now we can simply

say board or bottom one pixel light gray

we'll make the color not blue because

it's the page you're already on so let's

make it look a little bit less enticing

and for those users that are using a

desktop or a laptop instead of a

smartphone let's change the cursor so

that it's the default pointer instead of

the hand that looks like a link so if we

refresh we now have some sort of

indication that this is the page we're

on now you'll notice when we're on the

about Us main page in the main

navigation it's lit up about us but when

we go to one of the children pages it

doesn't stay lit up and I think it would

make sense for it to stay lit up even on

the children pages now fortunately

WordPress makes it very simple to adjust

let's head over to our CSS file will

search for site header here it is and

we're looking for the section AHA

current menu item so if you remember in

an earlier lesson we learned that

WordPress automatically adds a class of

current menu item so that's what we see

when we're on the about Us page

well WordPress also adds a different

class for when the current ancestor is

being viewed

I might have raised that wrong but

you'll see in just a moment so header

nav current page ancestor whoops so now

if we go to one of these children pages

you can see that about us stays lit up

because WordPress is automatically

adding a class of current page ancestor

when any of these children pages are

being viewed WordPress knows that they

are associated with about us now at this

point our lesson is almost complete but

there's one final edit we must make to

our code so if we go to contact us it's

a different page a different section

entirely but you can see that even

though this page doesn't have any

children or sub pages our children link

menu is still trying to output itself so

we need to add a bit of logic to our

code we need to wrap this code in

conditional logic that's saying only

output this code if the currently viewed

page either has children or is a child

itself otherwise just do not output this

code so we'll begin with an if statement

will drop into PHP we'll say if this

page has children or if it is a child

itself so if the current post has a post

parent then include this navigation so

I'll drop out of PHP paste this

navigation into the if statement that's

running and we'll close the PDF

statement and then we'll drop back out a

PHP okay now I must say that has

children is not a native default

WordPress function we need to create

this function ourself so we're going to

head over to functions PHP and write a

function named has children that will

take care of that logic for us so we'll

hop over to functions PHP go to the

bottom and we'll add a new comment that

says does page have children and this is

where we'll create our new function so

it's called has children

okay in our code the meat and potatoes

will go between these brackets so the

first thing we want to do is make the

global variable

excuse me make the post variable

accessible from within this function and

then we're just going to use a bit of

magic from the git pages function so

WordPress has a function named get pages

get any pages that are a child of the

page that we're currently viewing okay

so now let's store this and this

function returns an array so let's store

that array and a variable named pages

and then we just want to be aware of

what that number is how many items are

in the array now the reason we want to

return this numerical value the number

of pages that are a child of the current

page is because if it's zero if a page

doesn't have any children pages zero

will evaluate as false in this if

statement but if this function returns

any number that's larger than zero then

it will evaluate as true which will work

really nicely for our if statement logic

now really quickly just looking at this

code I'm realizing that we forgot to

open the if statement bracket so let's

add that and let's test out our function

so we can see that now that we're on the

contact page since it has no children

it's not outputting the menu any longer

but if we navigate to about us our menu

is still in place so that means we now

have a fully functional parent child

menu and it will only display on pages

where it makes sense to display so that

concludes this lesson to review we

learned about parent pages child pages

and we learned a lot about PHP logic and

how to create our own functions so thank

you very much for watching this lesson I

hope you feel like you learned something

and stay tuned for more web development

and WordPress tutorials Thanks bye

Related Videos

Be the first to comment “WordPress Little one Web page Menu (father or mother & subpages)”

Your email address will not be published.

There are no comments yet.