learning WordPress Child Page Menu (parent & subpages) > WordPress learning

 

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
title
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
function
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
right
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