In the last tutorial I demonstrated how to
create a custom menu in WordPress, and that
menu appears here in the top primary menu
position in the theme that we're using.
In this tutorial I want to demonstrate how
to create a sub menu item and illustrate how
the parent/child relationships work in WordPress.
First, let's go back to the dashboard and
select "Appearance" from the "Menus" flyout.
To get started, we want to create a ghost
menu item or a menu item that really doesn't
link to anything at all and we're going to
use this "Links" feature here to do that.
We can use this feature to add in an external
URL if we'd like, but we're going to replace
this http prefix with a # sign.
We'll also add in "Link text" and this is
the way the text appears for this menu item
on the front end of the WordPress site.
Once we've added in that link text, I'll click
on the "Add to Menu" button and notice how
that menu item has been added to the menu
structure.
Next, we'll click on the "Save Menu" button
to save the menu and once it's saved we'll
return to the front end of the WordPress site
and we'll refresh the page.
Notice how the "Browse our Inventory" menu
item appears in our main menu, but if I click
on it, it doesn't go anywhere.
That's because we added in the # sign instead
of an external link.
Let's return to the dashboard now to create
a new page that we can have as a child page
of that menu item.
I'll first add in a title, of course, and
then I want to go to a Microsoft Word document
that I created and I'm going to copy that
text.
Remember, when I copy that text out of a Word
document and I want to erase any formatting
that goes into the WordPress site, I'll click
on the "Paste as text" feature within the
editor.
To liven up this page a little bit, I also
want to embed an image so I'll put my cursor
here and click on the "Add Media" button to
select an image I've already uploaded to the
WordPress site.
I demonstrated how to do this in more detail
in tutorial #8 of this series.
Remember, you can always select a parent for
any page that you create, but that doesn't
automatically mean that that page will be
a sub menu item.
Let's go ahead and publish this page so we
can create a new page by clicking on the "Add
New" button here.
We'll follow the same process as before by
adding in a title and both pages that we're
creating will be sub-menu items of the "Browse
our Inventory" menu that we created.
I'll again go back to the Microsoft Word document
and copy the text that I've created for this
page, I'll return to the dashboard and I'll
paste this in as plain text.
Once I've pasted that text in I'll do the
same thing that I did before by placing my
cursor and clicking on the "Add Media" button
to select an image that I've uploaded to my
WordPress site so I can embed that image into
the page.
Next I'll click on the "Publish" button.
Both of the pages that I just created are
now available on the front end of the WordPress
site and if I return to the front end and
refresh the page I"ll see that I can access
the "Acoustic Guitars" and "Electric Guitars"
pages here, however I don't want these pages
to appear in top primary menu as a primary
menu item.
I'll return to the dashboard and I'll select
the "Menus" item from the "Appearance" flyout.
We'll see all 5 of these menu items in our
menu structure and all I need to do is simply
drag and drop each of the pages created so
that they are indented below "Browse our Inventory".
Once I save the menu I can return to the front
end of the WordPress site and I'll refresh
the page so I can see the changes.
Notice how the two additional pages are now
removed and they reappear as sub menu items
or drop down menu items below "Browse our
Inventory".
Both of these menu items are now considered
drop down or sub menu items.
In the text tutorial I'll demonstrate how
to use WordPress widgets and widget-ready
areas.
