Bud Kraus: Well welcome everyoneto today's session about
demystifying the navigationblock with Bud Kraus. I'm gonna
go ahead and hand it over tohim.
Okay, Courtney, thank you verymuch. And I want to thank the
Learn WordPress team for lettingme present this. And let me turn
on my, let me see if I can getthis cookin' here. And you tell
me if I'm, if I got it, right.How are we doing? Can we see
everything? Well yet? Just giveme one second
Courtney P.K.: Yes.
Bud Kraus: Over here and we'llget started. I want to hide
something. So let me hide —
Yeah, here we go. Okay. I thinkthat's good. And let me just do
this over here. Oops, we don'tneed to see that. And just give
me another minute or two, somehousekeeping so I can get
started. And then come backhere. And here we go. Okay, you
don't need to see me anymore.And it's enough of me.
All right. Hi, everybody. Myname is Bud Kraus. I'm talking
to you today from beautifulNutley, New Jersey, 12 miles
west of New York City, where theweather is 84 degrees
Fahrenheit. And it's pretty goodday. It's not very humid. And
it's sort of a nice, typicalsummer day here.
So the aim here is to demystifythe navigation block, do a
little introduction first, andthen we'll really get into it.
So yes, that's me. And I promiseyou won't see any more pictures
of me today. And why am I sayingthis? Let me get this out of the
way here. Okay. And I got allkinds of UI in the way. So just
give me another second. Okay.And just want to get this out of
the way. All right, see if I cando this now.
And I am principally a WordPress— I'd like to say that I create
WordPress content for WordPressbusinesses these days. So that's
videos, training materials, blogposts. This would be for web
hosts for plugins for themes forWordPress services, anything to
do with WordPress, I'm ready todo content for those businesses.
And yes, I am an instructor. SoI do teach WordPress, mostly
online these days, but I used toactually teach it in something
called a school. They don't havethose anymore, I guess. And then
I'm also a reluctant sitedeveloper. That is you really
have to twist my arm to get meto make a website. It's not
really what I like to do, but Icertainly have made a few.
Okay, and let's see. Here we go.So we're gonna do a little
survey to start us off. I'm justgoing to get a little feeling
for who's here and what youknow. So number one — oh, by the
way, before I continue, some ofyou know this, but maybe you
don't, I am visually impaired.So sometimes it takes me a
little longer to read somethingthat you might wonder what's
going on here. So number one, “Iuse the navigation block and I
like it”. Number two, “I'm usingit but boy, it confuses me”.
Number three, “I am thinking ofusing it”, and number four,
“Give me that old time classicmenu the way we used to have
it”. I mean, in fact, weactually still do. But I want
you to go into chat and give meyour reply, please, if you don't
mind and Courtney will do aquick tabulation as to what
people are thinking when when wethink about the navigation
block.
Courtney P.K.: So so far, wehave three folks that chose four
Bud Kraus: Okay.
Courtney P.K.: There are 13people that chose number three
Bud Kraus: “I'm thinking ofusing it”. I guess that's why
you're here, right? But youknow, there might be some number
twos and there might even be aone a number one.
Any more coming in?
Courtney P.K.: Twos, yeah.
Bud Kraus: Seven twos...
Courtney P.K.: Seven numbertwos.
I have one person that says 1.5.
Bud Kraus: Good answer, notallowed, but okay.
Courtney P.K.: And let's see...1, 2, 3, 4... Four number ones.
Bud Kraus: Four number ones.
Okay. So that kind of gives mean idea. I'd have to say I'm
somewhat in the two stage,believe it or not, and, you
know, whatever. Okay, so let'sgo. I know you say really,
you're number two? This is kindof scary. All right. So what
exactly are we going to covertoday? And what are we not going
to cover today? And let's, letme just say real quickly, we are
absolutely going to delve intothe navigation block, I'm going
to do a demonstration. So don'tworry, this is not just going to
be a PowerPoint demonstration.What we're not going to do
though, is I'm not going to talkabout other kinds of navigation,
meaning, like sidebarnavigations, where you put in a
list of your categories andthings like that. I am talking
about the main menu navigationfor your site that you normally
find in a header. And you caneven find in footers, too.
And I don't know why this isn'tworking the way I want it to.
Okay, what happened here? Allright.
Now, where can you use thenavigation block, the truth of
the matter is, it doesn't reallymatter if you're using a — well,
it does, actually. But you canuse it in a classic theme, and
you can use it in a block theme.And if you don't know the
difference between the two, I'lltell you right now, the classic,
a classic theme is what you'reused to. And you could use this
with a Classic Editor or youcould use it with Gutenberg and,
or the Gutenberg Block Editor.And this is the kind of theme
that you can only use blockswithin the page content or post
content of your site. So youcan't use blocks in the header,
the footer, the sidebar, therepeating content, or repeating
areas of your site. You can dothat with blocks and a classic
theme. In a block theme you canuse, and you do use, Gutenberg
blocks throughout the entiresite. So in the header, footer,
everything. Sidebars, everythingin a block theme is built, with
using blocks. And for thisdemonstration. Well, you'll see
I'm going to use a block theme.We'll get to that in a second.
Courtney P.K.: Bud, can Iinterrupt you for a second?
Bud Kraus: Sure. Yes.
Bud Kraus: Alright, how's that?
Courtney P.K.: So we have an askfrom the attendees if you can
turn on your video. So for folksthat need to lip read or
Courtney P.K.: Yeah.
Bud Kraus: Okay, sorry.
visually connect with you canyou do that?
Courtney P.K.: Is that okay,everyone? No worries.
Bud Kraus: Yeah. Okay. So if wecan do it that way, and people
can see me and they're betteroff that way. Why not?
Okay, so how the navigationblock fits into the big picture?
Well, navigation, so and I'malso going to do a little more
about this in a second or two.But we have templates and in a
block theme, a template, so thatyou'll have one for every page
that you see, whether it's apage or a post or an archive
page, there's always one, andonly one template that controls
or sets the design of thatparticular page. Okay. And
within a template, we could havetemplate parts, well, like a
header or a footer or somethingelse, something that could
repeat a part. And we'll seethat in a few minutes too, and
in within a template part or a,or an example of a template part
would be a header or a footer.And then within the header, we
have the navigation block. Sothere's sort of a organizing
principle behind how all of thisworks. And I just wanted you to
see how this all fits together.Okay, now, the navigation block,
as we'll see, has some of itsown special like, in essence,
dedicated blocks that go withit. And you can see there's the
navigation block, there's thepage list, which I'll show you
in a second and page links too.There's other blocks like that I
call these associated blocksthat are connected to the
navigation block, such assetting sub menus, and custom
links, and category links. Andwe'll delve into all this in a
second. I'm just setting thisall up for you. And then
additional navigation blocks. Sowe don't just have to put links
now within the navigation block,we could put in a site logo, or
we could put in a social linksor we could put in a search
tool, and we'll get to that too.Okay. Now, one thing that I'd
like you to know is thatalthough the navigation block
has come a long way, it isprobably the most complex block
in the Gutenberg universe.Complex in terms of its
development, complex in terms ofits UI. And it's no wonder that
I and other people stumble onit, and I probably will today,
because it has some complexity.And and although I have seen its
development from the verybeginning, which started, I
don't know, a couple of yearsago, it has come a long way. But
yes, it still needs work.
Okay, so let's, let me stoptalking. I can't really stop
talking, but let me do a littledemonstrating. So let's clear
this out here. And let me justget this out of the way again.
So let's give me a second here.And we'll do this.
Okay, and we'll get rid of that.And we'll go to here. And we
don't need that. And let's takea look at now I'm going to see
if I can do this in full screen,because it'll look a little bit
better. So let's do full screen.Okay.
And so for this demonstration, Iwant you to know that I'm using
WordPress 6.2, that is thecurrent version. Now, I will
also make reference to, and timepermitting, show you a little
bit about WordPress 6.3, whichwill be released on August 8th,
okay. And we'll have somechanges and some refinements and
so forth. And basically thefinishing up of what they call
phase two, which is thedevelopment of the site editor,
something that we'll beabsolutely looking at today. So
we've got the theme that I'mgoing to use is Twenty
Twenty-Three. It's the stockbaseline WordPress theme. And
it's just really good fordemonstration and for production
as well. And also, I want you tosee that there are no plugins,
so I'm not hiding anything, I'mnot trying to do anything, I
just working with the theme. Sowe get a feeling of what does
this thing do without trickingit up with a plugin or different
kinds of theme, whatever. Thisis a real kind of default
understanding of how thenavigation block works. And just
for show — oops, I don't wantagain, I just clicked on
something that I just don'twant, just for show — I better,
just give me a second here.
It's not working, I better goback to the non full screen,
because that's not going to workfor me today. Okay. Let's go
over here.
Okay, so here's what our websitelooks like now. And you can see
it does not have a navigationbecause we're going to build it.
And the site has well, I'll showyou right now. So let's go into
here. It has posts, okay, justyour garden variety posts. And I
must be using Categories too. SoI've already assigned categories
to one category to every singlepost. And I also have pages,
okay. And, boy oh boy, let's getthis out of the way.
And I also have these pages overhere. So we could do some work
with the navigation. And let'sjust jump right into it. So here
we are, Appearance, and Editor,okay, and this is that full site
editor, or they just call it thesite editor now. And let's just
break this down as follows. Now,there are two sections in the
site editor, there's thetemplate section. And then
there's template parts, let'sjust take a quick look at
templates. And you can see rightover here for different kinds of
content, there is a template. Sofor example, let's just click on
Page. So this is, we're notgonna spend too much time with
this, but this would be the pagetemplate. And of course, a page
template here is really whereyou do your work to set the
mold, if you will, for a page.Or maybe it would be for a 404
error page and archive page andso forth. You see them all over
here. In fact, a better way tosee them is if I go over here,
they're all over here, okay. Andthese are the templates that
come with the TwentyTwenty-Three theme. And you can
add templates, but that'sanother day. Okay, that's
another demonstration. We'llstay away from that. But you can
create your own templates too.
Well, we're going to focus alittle more on is we go into
template parts. And you can seethe template parts are arranged
like over here, and I want tojust drill into header, okay.
And I am going to create aheader that will be attached to,
in essence, every template in mysite. Okay. And so remember, we
had template parts, header, andnavigation blocks, sort of one
block fitting or one conceptfitting into another. And over
here in header, I'm going toclick on this over here, or
here, it doesn't really matter,we're going to have the same
result. And now I can begin towork on the header. So it would
make sense to have thenavigation block inside the
header. Now, again, you can usethis block anywhere in the site,
and you could use it on a page,although it doesn't really make
any sense just to put it inwithin the content of a page.
What you want is in a header sothat it'll apply across the
entire site. And let's take alook at this.
So, right now — it, now I shouldtell you before I go any
further. If you're using thisblock for the first time, let's
say you do a fresh install ofTwenty Twenty-Three, I think
what Twenty Twenty-Three does aswell as other things, it'll
pre-populate your menu. Sothat's very possible that you'll
see something totally different.You'll see like, all your links
will be like listed over here,okay. That's possible, you don't
have to worry about that you canstart from scratch, which is
what I want to do. And I want todo this by — let's just open up
list view. And List view hasthis group lock, which I don't
want this for thisdemonstration. So I'm just going
to kill this. All right, we'regoing to remove this. And then
I'm going to open this up again.And right over here, I'm going
to type in the word or just typein slash, and it's going to be
nav for navigation. Of course, Icould have used the inserter as
well right over here. But it'sjust a lot easier just to type
that slash in and look for theblock that you're working with,
and of course, it is thenavigation. And there's a whole
slew of settings that we'regoing to look at in a bit once
we start building our menu out.
Now, there's a couple of ways todo this. Remember, the
navigation block is a lot likethe group block in that it just
holds other blocks, it doesn'treally do much, those blocks
being links, or a search tool orsite logo or something like
that. It holds other blocks. Sothat's really its purpose is to
hold all this stuff together.And you can get started with
your links, building your linkswithin the navigation, there's a
couple of ways to do that. Thisis one of the things that
confuses people about using thenavigation block is that there's
sometimes not one way to dosomething, not two ways to do
something. But three ways to dosomething. I didn't find
anything that you, there werefour ways to do something. But
so no wonder people like me getconfused using this, because
like, whoa, there's so manychoices, how do I, well, you
know, how do I figure this out?So you know, if you're a little
confused sometimes about howthis works, well, I'm in your,
you have company. So what I'mgoing to do is I'm going to
start with over here. Now, youcan start this way, and I'm
going to add a block, okay. Andthe block I'm going to add is
called Page List. Let me justsee if I have it, or here I
don't. Page Link and Page Listare not the same thing. So Page
List. Oops. Let me, I guessspelling counts, huh? Let me
see. Oops, not page lost. List.
And here it is over here, pagelist. Now what's kind of cool
about this is that all the pagesof my site, not blog posts, or
anything else, but just pages,remember page list, will
automatically be pre-populatedover here into my navigation.
And you can see something, hereI am in that navigation block.
And you can see something thatlooks like the list view. So
this is kind of confusing, Ithink, because here's List view
over here. And here's list viewover here. Alright, so you have
page — and you notice like,wait, whoa, whoa, whoa, these
are all locked. What the heckdoes that mean? Well, don't
panic. Now if it's locked, thatdoes mean you can't move
anything. All right. So youknow, and I think WordPress just
takes a guess or the theme justtakes a guess as to what order
they should be in. But you canchange this. And we'll do this
right now, what we're going todo is we'll close up this, we
don't really need that. And wewill go down to— I'm trying to
remember where it is — yeah, wewill go into page list, I'm
going to click on that. Noticethis just changed to page list,
now this is a little bitdifferent user interface that
you're used to, you're not usedto clicking on something over
here on the right hand side andtaking you to another block. But
that's exactly what justhappened. And I'm going to click
on the word Edit. And now you'llsee I can now move these blocks
around, I just flip this outagain here. And I took away all
the blocks, or the locks. And ifI want to move these, it's
pretty simple to do. I can dragand drop this into place. So for
example, if I wanted to movethis down over here, I could do
it that way. Okay.
Another way, I could do it overhere. So I could change the
order of these, I could do thisover here by, let's go back to
the navigation. And I could dragand drop it this way too. Notice
too I can change the labels overhere so I don't have to stay
with the title of the page. Ican just change it right over
here. You are familiar with thatif you've used the classic menu,
which most people have, youcould always change the label
for the link to go back to overhere. Let's see what we have.
Yeah, so I can drag and drop andchange these positions. I also
can do this over here which isto, I could add a link, or I'm
sorry, I could add a sub link,which we'll get to, or I can
remove the link altogether. Sothis is sort of, I guess the
best way to describe this overhere, there's sort of a
truncated user interface of thelist view itself. And if you
click on it, you can dosomething.
But what about another way tochange? Yes, there's another way
to change the order here. Andthat is, I can click on, let's
say, the navigation, no, I don'twant to do this over. Well, I
can do this over here.
So now I've clicked on to anactual page link. And you can
see this over here, page linkover here. And I can move it
this way. So here's another wayto do, so this is the page link
toolbar. Notice that page linkis within the navigation block
itself. That's what thisindicates over here. And you can
also make changes to if youclick on this, and you want to
make a change, for example, youneeded to change the link, or
you needed to change anything,well, here's your edit button.
So you can change the URL if youwanted to do that, as well. And
you can again, change the label.So yes, I don't blame you. Well,
there's like two or three waysto do the same thing. Right?
Right. And it's, you know, howyou want to work with this is,
you know, you're, if that's, ofcourse, your workflow is your
workflow.
Now, I do want to take anotherlook, actually at a different
way of creating the menu. Sowhat happens if you say, I don't
want to start with how I startedhow Bud started with using that
page list block, I just wantedto start from total scratch, can
I do that? Yes.
And what we're gonna do, we'regonna go over here, and we're
going to select all of theseblocks, okay. And we're going to
delete them all. And we're goingto remove, and now we can start
from scratch. Now, I'm reallygoing to start from scratch, I'm
going to delete this too. Andthis time, I'm going to say,
let's start, let's get rid ofthis. Okay, so let's start with
a cover block. So we're reallygoing to make, you know, a
better, we're going to make agood header here, or what I
think is pretty good. So we'llstart with the cover black, and
right over here, okay. And we'llput in a cover block background
image. I'm gonna go over here. Iwent to Italy last year, so I
could take pictures for thisvery day. Okay, that's the only
reason why I went. And so I takea picture from here.
Okay, and then I am going toselect over here, the cover
block. Well, let's make sure I'min the cover block would seem
like I am right now. Okay.Again, I want to get rid of List
view. And we'll make somechanges over here. Let's have a
fixed background. So that's whatI'd like. And I also would like
to have in the style area overhere, I want to change that
overlay to make it a little bitlighter. Okay. And I would just
like to put in over here, justthe words.
Okay, and oops, not okay.
Why am I — oh, I know why. Holdon, we'll get this straightened
out here. Okay, and I'm two fortwo. Okay, and I think it's a
little better.
And we'll just leave it rightover here. And then on top of
this, so that's my cover blockwith, yeah, I really should
probably change this over hereto transform this to a heading.
And we'll make that an H1. Okay,and we'll just leave it right
like that. Now on top of this, Iwant to insert my navigation
block. So in fact, I don'treally want to put it on top of
this over here. This is a whole— what I'm really working on
again is the header. And you canjust see over here it says
header. Remember I clicked onthe header to start. So I want
to add right into this area overhere. I want to add a
navigation. So for that, let'suse a list over here. And so
right above the cover block, I'mgoing to insert before. Let's go
over here —
And we'll put in the navigation.Okay, so now I could put the
navigation on top of the coverblock if I wanted, but I'm not
going to do it that way. I'mjust gonna do it right over
here. And let's get out of here.And you'll see I've got
something started over here. Notreally, I'm going to put in my
links right over here. So beforethe first example, I showed you
how to add your links to startwith. Remember, I went over
here, clicked on right over hereand started, you know, page, I
used those page link block thistime, I'm going to add them in
one at a time.
So, home. Okay, the next one Iwant is contact. You notice when
it says contact right over here,it says page. So it tells you
the type of content that you'reworking with. Might be a
category, it might be a customlink, it might be a blog post,
but I don't want any of those. Ijust want pages. ITI —
itinerary. Okay. And then thelast one I want to add is blog.
Okay.
Courtney P.K.: We have aquestion, Bud.
Bud Kraus: Okay. Oh, that'sright. We do questions. That's
right.
Courtney P.K.: Okay, just one sofar from Michelle, can you get
rid of the space between thatnav block and your cover image?
Bud Kraus: No. I mean, I thinkwhat you're talking about is
this space over here. It's afunction of the theme itself.
Now, could you do it with customcode? The answer is, yeah, you
could do it with CSS, okay. ButI'm not gonna do that for today.
And well, let's take a look athow this all shakes out in a few
minutes, how it's going to look.So I'll address that I think
when we see it a little better,when you know, I actually show
it to you.
Okay, so, so we have blog overhere. And I am going to just
save this. I don't know why thisis... this isn't that my day for
UI popping up, Zoom UI poppingup all over the place on my
screen.
I'm going to save this, andlet's save this over here. You
got to save it twice. Whenyou're dealing with templates
and template parts, there's atwo save step operation. Let's
have a look now at what it'sgoing to look like. Alright, so
we now have, before we just hadhome, and we're starting to have
something that's going to looklike the navigation. All right.
And if I click on let's just seeanything over here, contact.
Let's look at blog. And here'smy blog. And oh, you say like,
well, you know, you don't wantthis. Well, this is something in
the template that I think I'mgoing to address in a minute or
two. So hang on to that one. Andlet's just go back to home.
Okay.
And I want to work on this alittle bit more, more
specifically, I want to work onthe navigation. And I wanna look
at some of the options I have inthe nav, navigation toolbar.
Now, this has been changed, thisused to be a lot more options,
and they've really pushed themall into over here. So that's
where if you've been using thisa little while or confused, they
stuffed a whole lot of theseoptions over here on the right
hand side, in the navigationsettings. There's really not
much left, what they really haveleft to do is to, let's say
justify in the center. Okay, sothat's really about it. And the
usual three dot options that youget in any toolbar.
Now I'm going to do a littlemore work there. I want to style
it. Yes, I'm going to give it atry. So again, here's the
navigation settings, you havethree main panels, one is that
list view that we talked aboutearlier. Now I'm going to take a
look at over here, some of thesettings settings, if there's
such a thing. And you can see,here's the orientation just, so
are the justifications. So,again, it was just, you know, we
had the toolbar, and now youhave it over here. And then this
one too is kind of interesting.You can also orient your, your
list or your navigationvertically. I don't want it, I
want horizontal. We'll skip downto over here. When it comes to
design, let's say you want, nowdo you want the mobile hamburger
icon or the mobile icon toappear, let's say well, you'll
see in a second if I just openup this. Okay, so here you see
it over here. Or do you neverwant it to show, okay, no matter
what screen resolution or whatdevice the design as in? Or do
you always want it to show,which is kind of like what
everybody's doing these days orit's a very typical design
feature. I see now no matterwhat site it is, you get the
hamburger menu. I think it'skind of an interesting approach
to design. Anyway. I'm going toleave it over here the default
which is in mobile that justlike that, to get rid of this
over here. And then you couldalso change if I click on this
over here, you can change thestyle of the icon. So do I want
two or three lines for themobile, or for that. Yeah. For
the...
Courtney P.K.: We have aquestion.
Bud Kraus: Okay. You don't likeyou don't like the hamburger
icon?
Courtney P.K.: [Laughter]
Bud Kraus: Okay.
Courtney P.K.: We have aquestion/comment from Jean.
Bud Kraus: Okay.
Courtney P.K.: If you put thenavigation and cover in a group
and have block spacing as zero,would that work?
Bud Kraus: Yeah, not for this.Well, let me just show you
something.
Courtney P.K.: Mmhmm.
Bud Kraus: So you're talkingabout, let's just do, let's just
save this, okay. And...
Courtney P.K.: Jean said, notsure if the two different blocks
can be set to have margin zero.
Bud Kraus: All right. Well,that's yeah, that's going to
say, ask that question again.And I'll give you my quickie
answer without doing it.
Courtney P.K.: Yeah, if you putthe navigation and cover block,
er the navigation and cover in agroup...
Bud Kraus: Right.
Courtney P.K.: and have theblock spacing zero, would that
work?
Bud Kraus: I don't know. Butthat's a good approach, a good
thing to try. Maybe we'll get achance to try it. I'm probably
gonna run out of time. But thatis something you can, you can
definitely try. I don't know theanswer to that question. Okay.
I'm sorry.
Courtney P.K.: No worries.
Bud Kraus: But if we get achance, we'll have a look.
Courtney P.K.: Yeah.
We have one more question.
Bud Kraus: Okay. All right.
Courtney P.K.: Actually, we havetwo. Can you put one block on
top of another, like can the navbe positioned in the middle, or
top of the cover image?
Bud Kraus: Well, sure. I'll dothat one real quick. Okay. So
for example, if I want thenavigation block to be, let's
say, inside the cover block,like so, let's see if we can get
that to, to work. Now. It shouldwork.
See, sometimes this thing can bea little stubborn. Let's, let's
close this up over here. Andlet's try it now this way. Oh, I
know what I want to do. Let'stry this. Okay. All right.
Okay, so now, you can see it'sbelow. Okay. And the answer to
the question is, I guess thequestion is, can you put the
navigation block on top of thecover block? That's the beauty
of the cover block is that youcan put all kinds of stuff on
top of what is a backgroundimage, or it could be a video
too. So I hope that kind ofhelps answer the question. Yes?
Courtney P.K.: I think so.
Bud Kraus: Okay.
Courtney P.K.: Yeah, let us knowif we didn't answer the
question. And the last questionis, can we change the background
color of the navigation bar orthe individual links?
Bud Kraus: Okay, okay. Allright. You're getting way too
far! You know, come on. Did youread all my notes here is that
somebody got a hold of all myshow notes? Okay.
So what we're going to do is,we're going to undo that. And
here we go. So the answer tothat question is what I'm about
to do, which is I'm going totake this out. And let's take a
look at styling options here. Sohere we are in the navigation.
Yes, I want to make sure.Settings over here, navigation.
And over here, so we've alreadyexplored these two. Let's take a
look at the styling options overhere. And you can see, yes, you
can set let's do the backgroundcolor first. And we'll use
something kind of funky, Iguess. So at least it shows up.
All right. And, and then we willuse a little text color over
here. Let's say we would do...okay, not a great color
contrast, but you get the ideathat you can do it. Now let's
have a look at where we are. Andin fact, one other thing I want
to do is as long as we'redealing with style, we can go
down over here. And let's justmake this for, because I like
things large. Okay. And let'sjust save this. Alright, and
we'll go over here and take alook. And all right, so you see
you still have the space overhere. I think somebody was
asking about that question. Now,I don't know the answer to the
question whether or not, maybewe'll get a chance. I don't
know. What if you threw thewhole thing into a group block,
would this space go away? I'mnot sure. But we can try that
later on. So hold that thought.And what, how are we doing on
time, Courtney?
Courtney P.K.: We have about 18minutes to the hour.
Bud Kraus: Okay. All right. So,I know so yeah, I usually go a
little bit long winded, butwe'll get there. Alright, so
let's let's go back to here,and...
Now I do want to do I want toadd, so I said there's more to
just adding links. But before Iget to that, I want to show you
you could add sub links.Alright, so you know, a lot of
times are obviously sub menus.So I'm going to click on where I
want to add a sub link. And youcan see yes, I'm in the page
link over here. And what I wantto do right over here, this is
the sub link logo. So I click onthat. And now you can see I'm in
the sub link. And where it saysadd a link. I'm going to click
on that. And I'm going to say,Arlene, because she's a
category. So not Arlene overhere, but this Arlene over here.
Let me see, where's my Arlene?Right over here. Okay. So I want
to use categories now as mylinks. And I'm also going to add
another one. And it's a littletricky to see. But here's a
little plus sign over here thatyou can add. Is there another
way to do it? Yeah, there's twoother ways to do it. But I think
this is the fastest way to doit. And then I'm going to do
scenes, right? And that's acategory. Okay, and one more.
And come on, how could you nothave food when you think about
Italy, right? I mean, no suchthing is a bad meal. And again,
it tells me I don't want a post,I don't want food one, food two.
I just want food, the category.Alright, so I want to make sure
I have the right link to put in,in its category. And you could
actually change if you wantdifferent backgrounds over here
for the sub menu and the submenu links, you could do it
differently. And then I'm goingto...
Okay, and now we'll just take alook over here, we're going to
refresh. And as you can see,here's my sub link. So if I
click over here, I will getcategory Arlene. Okay, so you
get the idea. So for all thoseposts that has the category,
Arlene, she has her own archive.Okay.
Now, I'd said that you can addjust more than just links into
the navigation. And so for that,let's find where the navigation
is. Okay, we're right over herewhere we should be the
navigation. Fine. And I'm goingto add it just by now I could
add it over here. Okay, I couldsay because these are all this
little button here is going togive you, and you can now see
too, look at the blog the waythat's set up. Same thing over
here, I'm, I'm interrupting whatI was going to say, so if you're
wondering what's going on here.So right over here, you can see,
right over here, you have thethree links over here. There
they are, okay, and you can seethese are category, different
little icon here for categories.Okay.
Now, I wanted to add new, orsomething that's other than a
link, and the one I'm going topick is, I'm only gonna pick,
there's only a couple, you couldadd a site logo, you could add
search, add social icons, andI'm gonna go do social, I'm
sorry, I think I'm gonna dosearch. So let's go back to
here. And I'm in the navigation.And I'm going to put it right
over here. And you can see downover here, you can see, I don't
know why they say transform. Itdoesn't make any sense to me.
But you could add the searchblock. Okay. And that's exactly
what I'm going to do. That'skind of nice. Now I know, it
looks kind of weird. I'm goingto save it. And we'll just take
a look over here.
And, okay, so yes, it's not athing of beauty. Okay, I get it.
But you can see, you can atleast have a search tool now
built into your navigation, aswell as, as long as I'm here.
Let's just do this over here. Iwanted to add, no, that's not
the way to do it. Right overhere, just the way to add, it's
a way to add, I'm going to dosite.
Let's do site logo. And now Ithis is something I picked out
earlier. And I'm going to notput it over here, I'm going to
move it. So let's just move itover here real quick. Or as
quick as I can. And, and yes,you can change it. This just
came from earlier, one of thethings that you'll notice when
you're working with a navigationblock is very persistent. That
is if you've done something inthe past, WordPress will
remember what you did and usethat as a basis to start what
you want to start and then ofcourse you can change it. So by
changing it, you would justclick on Replace and find a new
image for it. So I'll leave itlike that. Okay. And if you
notice, to look at this, you geta little, your little icon here,
your little site logo goes upover here.
Now one real important thing,and that is if I go over to the
navigation. Let's see, let's goover here. And let's go into
navigation. Okay. And I'm goingto click out of here. Now look
at this over here. So I'm in thelist view or I'm in the set, I'm
in this list section over here,navigation. If I click on these
three buttons over here, theseare navigations that I've
already made from previous, youknow, exercises. Now, one thing
I've learned is that althoughyou can clear all the contents
out of your navigation, youcan't get rid of these, okay?
Yes, you can in WordPress 6.3.But at WordPress 6.2, which is
where I am, you cannot. If I amwrong, please, somebody tell me,
“You're wrong!” Because I'd liketo know, how do you get rid of
them. What you can do, now thisis kind of cool over here,
notice it says, import, where'sit over here? Import from a
classic theme. So I was playingaround earlier with a classic
theme. And I created a menuinside of the classic theme,
like, you know, we used to beable to do. So if you did create
a menu, let's say you weremoving from a classic theme to a
block theme, here's a way toimport that menu in into the
navigation block. So that's kindof interesting. I didn't try it.
But that's what it's saying. Andif I want to create a new menu,
or new navigation, I would justclick on over here. And I could
start all over again. Okay,which I don't really want to do.
But look at this and click on.So you can see now there's four,
this is a new navigation, you.So a drawback of this, which is
going to be resolved in 6.3, isyou can't rename these, you
can't duplicate them, and youcan't delete them. Oh, but
that's why we have WordPress6.3. Because all that is
addressed in the coming versionof WordPress 6.3.
Now, what else do I want to showyou before I start wrapping
things up? Or show you some of6.3. I actually have to look at
my notes for a second while I'mdoing that. Does anybody have
any questions?
Courtney P.K.: Yeah, we actuallydo have some questions that have
built up over time.
Bud Kraus: I'm nervous.
Courtney P.K.: I didn't want tointerrupt you.
Bud Kraus: This is a good timeto do it.
Courtney P.K.: Yeah, definitely.So first question was, what
happens if the name or phrasesin the nav becomes longer than
one line?
Bud Kraus: There is a... I don'tknow. So let's say you use a
label that's really long. Youcould get it, there is a
function or a feature, I guess,let's go back to see if you
change these up, you can see, uhhuh. All right. And right over
here. Let's, we'll click out ofthere. And right over here,
there is right down over here. Ithink that was like wrapped to a
different line, or I forgotwhere it was show arrow, maybe
it's in style.
Courtney P.K.: I think I justsaw it before you collapsed
the...
Bud Kraus: By the way before,before I move on any further.
You can, uh this is, you canchange your spacing over here
between the links with blockspacing. It's kind of clunky,
but you can do it. And as far asthe question about wrapping,
here, right? So this is thedefault position, right? This is
the default, and I've nevertried it. Like what happens if I
had a really long text link? Igenerally like to have and most
people do, too, is have these asshort as possible for for some
obvious reasons. But okay. Any,any other, there's something
else?
Courtney P.K.: Yeah. Do you knowif the sub links are
automatically navigable usingthe keyboard only or a screen
reader?
Bud Kraus: I don't know. That isa really good question. Yeah.
Wow. Let's have a look. Okay, soI'm going to just use the tab
key. Okay. Just tabbing around.Let's just refresh. And let's
just see if we can take a lookat that.
Yeah, it's up here. Yeah. Okay.
Nope, it didn't open it up. Didyou see it didn't open up? So it
doesn't look like it does. Letme just try it one more time.
And while I'm doing that, let'sanswer another question, if I
can.
Courtney P.K.: Sure.
Bud Kraus: Okay.
Courtney P.K.: Next question wascan we edit links to display the
resulting page in its new, ownnew browser window?
Bud Kraus: Is that question, canwe open up a page in a new tab?
Courtney P.K.: Yeah, so can youedit the links in the nav?
Bud Kraus: Yeah, yeah. So here'show you can do it. So real
quick, if I was in home, andlet's say, right here, very good
question. See, I like whenpeople ask questions, because
then I realize, Oh, I forgot totell you. So right over here,
open a new tab. Okay. And thatwould do it.
Courtney P.K.: Easy.
Bud Kraus: Okay. Yeah. You know,by the way, you can also do
custom URLs. So, you know, youcan just add a link, let's say
you wanted to add a link overhere. Type in a URL over here,
and then and then save it, andyou would automatically no...
Yeah, let me just see if I gotthat right. Before I go any
further with what I was about tosay.
Right? Navigation? Hold on asecond.
Yeah, you could do like a customlink over here, then type in the
URL. And it would, let's say, toan external website, or even to
your own website, you couldjust, you could do it that way,
too. That's called custom URL.So all these different types of
links, page links, post links,category links, custom URLs,
they're all, you could all,these are all link types that
can fit within the navigationblock. Okay, take my word for
it. This I know. All right, anyany other questions?
Courtney P.K.: The last one is,what's the best way to edit the
search option? I've found iteasy, not if — sorry, I've not
found it easy to change it tomake it look nice.
Bud Kraus: Yeah. That is areally good question. And there
is no real easy answer. Except Ithink you might be able to do
this better with, well, let's...let me just take a quickie look
at that in 6.3. And it'll bedefinitely different. I mean,
6.2, it'll definitely bedifferent in 6.3.
Colors... I don't know, I guess,let's see. Background. I just am
going to I'm sort of guessinghere. No. Yeah, that's just for
the whole thing. No, I don'tknow the answer to that. But I
do want to show... how much timedo we have? Because I want like
a couple of minutes to show 6.3,if that's possible.
Courtney P.K.: Yeah, we're,we've got...
Bud Kraus: We're at the end?
Courtney P.K.: So...
Bud Kraus: Let's do thequestions. Okay.
Courtney P.K.: We're done withthe questions actually.
Bud Kraus: Okay. All right.
Courtney P.K.: So, about sixminutes to the hour.
Bud Kraus: So perfect. Okay, solet's take a quickie look at
6.3, which does not have what Iwould call breakthrough changes
with some exceptions. Okay. Soit's more of a refinement and a
finishing up of phase two. Let'sdo here over here. And WordPress
6.3 over here. Okay, so this onenow is the same site using
WordPress 6.3 beta three, sostill kind of buggy. And I hate
buggy stuff. Because I say whydoesn't this work? But it's
because it's beta. That's why.But if we go over here, and
you'll see right away somepretty major changes. So now,
instead of before in 6.2 we havetwo sections, we have template
and template parts, no more. Westill have templates. Okay. But
template parts now has been allbusted up and changed. And you
can see, navigation now has itsown section. Okay. And if you
click on that, you can start tocreate your own navigation.
And let me just get somethingagain, this UI stuff is just
driving me nuts. So with thenavigation, let's go back here.
Let me just see if I canremember Yeah.
Right, so here is the big newthing that I was talking about.
You can rename it, you can, youcan delete it, or you can delete
and you can duplicate. Now, howwould you start a new one, you
would think there would be aneasy way to do that you just
really start a new one. Or youreally, I think the best way to
do is just to duplicate andstart and rename. Okay, so there
isn't really a real nice way ofstarting something new. Like for
example, by that, I mean, lookat this over here, if I go over
now to patterns. And this iswhere a lot of the template
parts are going to be now inpatterns, because they really
are patterns. So for example,header, I could create a new
header. Or I could just click onthis over here. And this will
look familiar if you've beenusing the Block Editor. Except
it's now over here. So there's alot of things in, in 6.3 that
are like, Oh, it's over herenow. Because there's a lot of
reasons why it's evolved from6.2 to 6.3, there's there is
some rationale behind it. Butyou would just put in your name
over here, and you would justcreate a new header and you can
create a new header this way.And then inside that new header,
you can start a new navigation.And you can have different
headers for different types ofcontent for your site. So you
don't have to have the sameheader throughout the entire
site. But I already did thatwebinar. One thing that as long
as I'm just talking about 6.3,and I'm about to create a video
for InstaWP on what's going towhat's, what's new in WordPress
6.3. But one of the, I think,big highlights if there is such
a thing, and there is, let's goover here real quick and I'll
just show you, that if we goover here to templates, you'll
see that there's now a thingcalled pages. That's not right.
Where is it? Manage. I'm losingmy... no, it's right over here.
Any other questions? Because Ido want to share one final thing
I'm sorry.
It's right over here, pages, notin templates pages. So all of
your pages will be listed here.And if you want to edit, let's
say, I created this page calledcontent, I can now edit the
content of this page. This isnot a template, but I can now
edit the content right in here.Rather than having to go out of
the editor, the full siteeditor, and into the actual
page, it's all going to be a,what they call a unified editing
experience or unified blockexperience or something like
that. In other words, what we'reused to having sort of a
bifurcated approach to workingwith WordPress, that is, we have
the site editor for design, andwe've got the, you know, the
pages and posts over here forcontent. They are merging those
two together. That is the bigbreakthrough in 6.3. And, you
know, wow, that should be reallyconfusing. I'm still working my
way through how that all works.
before we go. Courtney, are wegood?
Courtney P.K.: Yeah, we're good.
Bud Kraus: Okay, so Oh, givethem that link.
Courtney P.K.: Yes.
Bud Kraus: So remember, we hadthat link?
So, here we go. So one lastlittle piece over here. And
we'll pick this up. And we'llfinish right now in a second or
two. Just give me... Yeah, let'sjust go through here. And I've
cut this stuff to get out of theway. Right. Okay. And we'll just
go over here. All right.
So where to find me, stop. Yes,I'm on Twitter. Get this out of
the way here. So am Joy of WP.Because that's me, and please
follow me and I will follow you,I promise. And then I'm also on
Slack. So you can meet me thereand talk to me on Slack in the
Make WordPress workspace or inPost Status, one or the other,
or both? And then finally, let'ssee. So I just want to thank you
for coming.
But wait, there is a littlemore. So if you want to email
me, you can see my emailaddress, or you can take a
screenshot or use your... Theseare actual QR codes, they
actually work. So you can getyour email address, my email
address and my website intothere's two little codes there.
And that is all I wrote.
So I'm happy to answer anyquestion now. Or if you want to
email me and ask me a question,I'm usually pretty responsive.
I'm very responsive. So I'd behappy to do that.
Courtney P.K.: You are.
Bud Kraus: Yeah, I know. Tooresponsive, too available, way
too available! But I hope, youknow, I know, that was a bit of
a whirlwind because there's alot to pack in there. And, you
know, don't get confused bythis. Remember, the most
confusing thing is that there'susually more than one way to do
something. Okay, that's, youknow, and always keep in mind
that all the stuff we're talkingabout fits inside of the
navigation block. It's just ablock. Okay, don't let it like,
ooh, it's so scary. It's notreally, okay.
So, Courtney, thank you, andthanks to the Learn WordPress
folks too for letting me dothis.
Courtney P.K.: Yeah, thank you,Bud. We don't have any other
questions that came in. So itlooks like we're all set, but
yeah, if you, something comes upfor you afterwards, definitely
reach out to Bud at his contactinfo that we shared. And if
folks are interested incontributing to Learn WordPress
as well, I'm also on the MakeWordPress Slack, so you can find
both of us there.
Bud Kraus: Now, what's the onething before we go? You did send
out my link to my blog, right?
Courtney P.K.: Yes, I did.
Bud Kraus: And if you subscribe,I promise I won't bug you with a
million things like a millionnewsletters. Okay, I don't have
time to send out a newsletterevery day. I wish I did. But you
know, once in a while I talkabout something that's new or
upcoming or pay attention to orwhatever. So you'll find it
pretty easy. All you have to dois go to any page in my blog,
and you'll get that annoyinglittle pop up to ask you to
subscribe, to subscribe. Yeah,yep.
Courtney P.K.: Excellent. Well,we know where to find you...
Bud Kraus: Yeah you do. I'm nothiding.
Courtney P.K.: Thank youeveryone for being here. There's
a lot of gratitude coming in inthe chat, but just...
Bud Kraus: Thank you.
Courtney P.K.: So you know,folks are thanking us for the
session.
Thank you guys.
Bud Kraus: Thank you.
Courtney P.K.: Yeah. Thank you,everyone. I'm going to go ahead
and stop the recording.