IntroductionWelcome| 00:04 | Hi, my name is Morten Rand-
Hendriksen and welcome to Create an Online
| | 00:08 | Portfolio with WordPress.
| | 00:10 | In this course we will use WordPress
to build an online portfolio showcasing
| | 00:14 | different types of content, as well as
all the regular WordPress items like
| | 00:18 | static pages and a blog.
| | 00:19 | I will start by showing you how to
create new custom post types for content
| | 00:24 | like photos and videos.
| | 00:25 | We will create custom taxonomies to
facilitate better organization of the custom content.
| | 00:30 | We will build custom post templates and
index templates for each of the custom
| | 00:35 | post types, as well as for the custom
taxonomies, and finally, we will tie
| | 00:40 | everything together by showcasing the
five latest posts from each of the custom
| | 00:44 | post types in the footer sidebar.
| | 00:46 | With the skills from this course in
your WordPress toolkit, you will be well
| | 00:50 | equipped to handle advanced
portfolios and other sites.
| | 00:53 | Now let's get started with Create
an Online Portfolio with WordPress.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium member of the
lynda.com Online Training Library or if you
| | 00:05 | are watching this tutorial on a DVD-ROM,
you have access to all the exercise
| | 00:09 | files used throughout this title.
| | 00:12 | I have downloaded the exercise files on to my
computer to show you how they are organized.
| | 00:15 | If I go into the folder, you will
see we have three sets of files.
| | 00:21 | We have an Assets folder, the chapter
folders for each of the chapters, and also
| | 00:26 | a file called code-snippets.
| | 00:28 | Inside the Assets, we have a set of
content that can use throughout the course.
| | 00:32 | Some of this content will be used
throughout the course, while in other parts, it's
| | 00:36 | just added for you, so
you can play around with it.
| | 00:39 | We have a set of icons we will be
using for the custom post types.
| | 00:43 | We have large-scale JPEGs that you can
scale down to whatever size you want.
| | 00:48 | We have smaller scale versions of the
same images, we have some dummy text items
| | 00:55 | that you can use throughout the course,
and we have three videos you can upload.
| | 01:01 | In addition, there is this folder
called uploads and also this file called
| | 01:04 | culinaryartistryContent.
| | 01:07 | These two comprise a fully
populated WordPress site with content.
| | 01:11 | Finally, there's this file called chefHeader.
| | 01:13 | It's just an image that we will
be using as a header for the site.
| | 01:16 | These files are provided, so you have
something to work with but you can always
| | 01:20 | replace them with other
files of your own if you want to.
| | 01:23 | For the chapters, we've created breakpoints
for each of the movies within each chapter.
| | 01:29 | As you follow along in this course, let's
say you're in Chapter 6 movie number 4,
| | 01:37 | you can reset your themes folder
to match what I'm working with.
| | 01:40 | The way you do that is, you keep the
folders open, and then you navigate to your
| | 01:46 | WordPress installation,
and go to the themes folder.
| | 01:51 | From here, all you have to do is grab
all the content from the movie chapter
| | 01:55 | you're currently in and drop
that into the themes folder.
| | 01:58 | You will have to overwrite what's
already there and after doing that you'll be
| | 02:05 | at the exact same starting point
I am, at the beginning of each movie.
| | 02:10 | This approach applies to all the
different chapters and you will notice,in the
| | 02:14 | beginning we have far fewer files and
folders than at the end, but the method
| | 02:20 | is exactly the same.
| | 02:21 | You take whatever's currently in the
folder for your movie and then you drag it
| | 02:26 | into the themes folder.
| | 02:27 | Of course, if this is your first time
opening this course and you are cutting
| | 02:31 | into the middle, even if you copy those
files over to themes folder, that's not enough.
| | 02:36 | You will still be running the stock
theme, either 2011 or 2010, so you need to
| | 02:41 | go into WordPress admin, go to
Appearance > Themes, and then activate this one
| | 02:48 | called Culinary Artistry.
| | 02:53 | Now your front page should look
something like this and you are good to go.
| | 02:57 | Finally, in the exercise files
there is file called code-snippets.
| | 03:04 | You can open code-snippets in the
text editor and in here you will find the
| | 03:08 | code-snippets for each of the movies.
| | 03:10 | They are numbered and separated by
these lines, so they're easy to pick
| | 03:14 | apart and generally I've put in a
small comments like In functions.php,
| | 03:20 | followed by the actual code.
| | 03:21 | As we work through the course,
you'll see me taking code out of the
| | 03:25 | code snippets and paste it in.
| | 03:27 | Where it's confusing, I have also added
at the bottom of each code snippet the
| | 03:31 | complete code for an entire file or for
an entire function, so it's easy for you
| | 03:35 | to simply grab the code and dump it
into your files, save it, and then have the
| | 03:39 | exact same result I have in the course.
| | 03:43 | If you are a monthly subscriber or an
annual subscriber to lynda.com, you don't
| | 03:47 | have access to the exercise files, but
you can still follow along from scratch
| | 03:51 | with your own assets.
| | 03:52 | Let's get started.
| | Collapse this transcript |
| Using the code snippets file| 00:00 | Before we get started, I'd like to
introduce you to an important file that we will
| | 00:04 | be using throughout this
course, the code-snippets file.
| | 00:08 | Whether you're a Premium member or a
standard member of the lynda.com Online
| | 00:12 | Training Library, you will
have access to this file.
| | 00:15 | If you're not a premium member, you
can download this file from the free
| | 00:18 | exercise files link on the course page.
| | 00:21 | I have downloaded that file to my desktop here.
| | 00:24 | It's called code-snippets.txt.
| | 00:27 | Please note, if you are a Premium
member this file is also included in your
| | 00:31 | exercise files here.
| | 00:35 | The code-snippets file provides you
with code snippets for each of the chapters
| | 00:39 | where we use code snippets.
| | 00:40 | I've laid it out in such a way that
each chapter is marked and then inside
| | 00:45 | you'll have the actual code snippets to
paste in and I have also added some comments,
| | 00:49 | you see them like this, that indicates where
these code snippets are supposed to be entered.
| | 00:54 | If in the movie, we are using
several different code snippets, or we are
| | 00:58 | using variants of a code snippet, I
have also added a complete stack of all
| | 01:03 | the code necessary.
| | 01:04 | So can you simply copy all the code
out and paste it into your file to be at
| | 01:08 | the same place I am.
| | 01:10 | In addition, I made sure that older code
snippets in this course are generic, so
| | 01:15 | that you can use them even if the
project you're working on is not identical to
| | 01:19 | the one I'm working on.
| | 01:20 | I will be using code-snippets file
extensively throughout this course, but even
| | 01:24 | when I'm not referencing the code-
snippets file, you will find the code snippets
| | 01:28 | for each movie in this file.
| | 01:30 | So you can always copy it out
and paste it into your theme.
| | 01:33 | Now that you know how it
works, let's get started.
| | Collapse this transcript |
|
|
1. Introducing the Online PortfolioWhat is an online portfolio?| 00:00 | Having an online presence is becoming
more and more important in our ever more
| | 00:04 | connected world and though most of
us have accounts on different social
| | 00:08 | networks and sites and maybe even
a blog on the cloud hosted service
| | 00:11 | somewhere, having an online portfolio that is
completely in your control can be a huge benefit.
| | 00:17 | In the past these portfolios were more
for companies than individuals, but for
| | 00:21 | many professionals and individuals
who want to showcase their talents,
| | 00:24 | this kind of website can be a huge benefit.
| | 00:27 | That said, there is no one size fits
all or default when it comes to online
| | 00:31 | portfolios, at least not where I am concerned.
| | 00:34 | What you see here is one of these
typical online mashup sites, where you can
| | 00:38 | attach all the content from
all your different streams.
| | 00:41 | This is mine, and this one
is for my friend Phil Wu.
| | 00:45 | What this site does is it grabs
content from all these different places.
| | 00:48 | you will have this Twitter account,
his Flickr account, and all of this.
| | 00:53 | But this site doesn't contain anything.
| | 00:55 | It's all pointing elsewhere.
| | 00:57 | So we can go and see Phil's photo sets on
Flickr, we can see them on 500px and he
| | 01:03 | has a blog on Posterous.
| | 01:05 | The problem with all this is, when a
person is looking for Phil's content, they
| | 01:09 | will find it in many different places
and many of them will only find one of
| | 01:13 | these different places and
will never link to the next one
| | 01:16 | Another example is my friend Dan.
| | 01:18 | He's a commercial photographer and he
has a really advanced site that features
| | 01:21 | his photographic work.
| | 01:23 | But if you want to see his blog, you
have to go somewhere else, to Tumblr.
| | 01:27 | Here he has his blog on Tumblr.
| | 01:29 | Now of course, this
could be a deliberate choice.
| | 01:32 | You don't want to drive your
commercial clients to your blog or vice versa.
| | 01:36 | But if you want to have a cohesive
presence online, you should really have all
| | 01:41 | of these things in one place.
| | 01:42 | What a lot of people do to solve this
is to use a service like Carbonmade, and
| | 01:47 | they upload all their content in one
location and then they make some extra
| | 01:51 | pages, like an About page here.
| | 01:53 | The problem with all of this is now
that it lives on a service like Carbonmade
| | 01:57 | or WordPress.com or somewhere else, you
are not really in control of it and if
| | 02:02 | the service goes down, so does your website.
| | 02:04 | So how do we solve this, how do we
consolidate everything into one package
| | 02:09 | so you have complete control over
everything and everything is found in the same place?
| | 02:13 | One solution is to use WordPress
combined with custom post types to create a
| | 02:19 | web site that has multiple different types of
content, depending on what you want to showcase.
| | 02:25 | In this course we are going to create
just such a web site, an online portfolio
| | 02:29 | for a chef that wants to showcase not
only his blog posts about food, but also
| | 02:34 | recipes, photos, and videos in a
cohesive and structured system, so that people
| | 02:39 | understand it and it's easy to access.
| | Collapse this transcript |
| Tour of the finished project| 00:00 | When I am learning something new, I
find it's always easier to get where I want
| | 00:04 | to go if I can see the
end product before I begin.
| | 00:08 | That way I have reference points and
I know where I'm moving towardsm and I
| | 00:12 | don't have to wonder why am I doing this
right now and what does this have to do
| | 00:15 | with what I want to end up with?
| | 00:17 | So before we start, I am going to show
you the end result: what we are going to
| | 00:21 | end up building through this course.
| | 00:23 | It's an online portfolio for a chef who
wants to showcase information about himself
| | 00:28 | and a way to contact him as well as
recipes, photos, videos, and blog posts about
| | 00:33 | what he does for living.
| | 00:35 | So let's take a look at this online portfolio.
| | 00:36 | On the front page we have a basic
Welcome page, and if you scroll down to the
| | 00:41 | bottom, you will see we have lists of
his most recent recipes, his most recent
| | 00:45 | photos, and his most recent videos.
| | 00:47 | One the top we also have the same items
on our menu, Recipes, Photos and Videos
| | 00:52 | as well as the standard pages
About and Contact and even a Blog.
| | 00:57 | What sets this website apart from a
regular WordPress website are the Recipes,
| | 01:02 | Photos, and Videos and how we handle them.
| | 01:04 | If I click on Recipes, you will
see that we have all this extra
| | 01:08 | information about the recipes.
| | 01:10 | We have Meal type, Preparation time,
Serving, Difficulty, Ingredients and so on
| | 01:15 | and each of these are links.
| | 01:16 | What you're looking at here
is actually a custom post type.
| | 01:20 | We have created a new type post just
for Recipes and in that custom post type,
| | 01:26 | we have what's called custom
taxonomies, new ways of ordering your content.
| | 01:30 | So, whereas with posts in general
in WordPress, you will only have
| | 01:34 | categories and tags,
| | 01:36 | when it comes to recipes, we have
Meal type, Preparation time, Serving,
| | 01:40 | Difficulty, and Ingredients as sorting
options, and we can click on any one of
| | 01:45 | these and see all the other items that are
associated with that same taxonomy or sorting type.
| | 01:52 | This makes it an extremely powerful
web site because we can cross-reference
| | 01:56 | different types of content and at
the same time display only the types of
| | 02:00 | contents the visitor wants to see.
| | 02:02 | If we go to the backend of our website,
you will see that in addition to the
| | 02:05 | regular WordPress content, we have
three new post types, Recipes, Photos, and
| | 02:12 | Videos, and under each of these you can
see these custom taxonomies, Meal type,
| | 02:17 | Level of difficulty, Ingredients,
Preparation time and Servings for recipes.
| | 02:22 | And then for Photos and Videos, we have
some of the same taxonomies, Meal type
| | 02:26 | and Ingredients, and also custom
taxonomies just for those post types,
| | 02:30 | Techniques for Photos
and Video types for Videos.
| | 02:33 | Going in and creating a new recipe, you
will see that we have access to all of
| | 02:37 | these in the regular way on the side
here. Rather than having categories and tags,
| | 02:42 | we now have Meal type, Level of
difficulty and so on, all the way down to the bottom.
| | 02:48 | By creating these custom post types,
we are separating out specific types of
| | 02:52 | content in our site and
making it easier to navigate.
| | 02:56 | We are also making it easier for us to
manage as site owners, because we know
| | 03:00 | where everything is and everything isn't
just stored under different trees of categories.
| | 03:04 | So now you know where we are going
and as a wise man once said, every great
| | 03:10 | journey starts with a single step, so
we will go all the way back and start
| | 03:13 | at the beginning.
| | Collapse this transcript |
| Setting up a WordPress development environment| 00:00 | I created this course to help you build
an online portfolio using WordPress as
| | 00:04 | easily and effectively as possible.
| | 00:06 | This is a jump right in kind of course,
so if you have no previous experience
| | 00:10 | using WordPress, you maybe a bit overwhelmed.
| | 00:12 | But fret not my friends, we got you covered.
| | 00:16 | If this is your first time using
WordPress or you have only limited experience
| | 00:20 | with a publishing platform, I recommend
you check out the WordPress 3 Essential
| | 00:24 | Training course right here on lynda.com.
| | 00:27 | It'll give you a firm understanding of
how WordPress works out of the box and
| | 00:30 | what you can do with the application itself.
| | 00:32 | In this course, we will be
building an advanced child theme.
| | 00:36 | If you're unfamiliar with the
concept of child themes, or you want more
| | 00:39 | information about what they are before you
get started, go check out the WordPress 3:
| | 00:43 | Building Child Themes course
also in the lynda.com library.
| | 00:47 | These courses were created to form a
natural progression, so watching them in
| | 00:51 | order will give you a firm footing for
developing advanced WordPress websites.
| | 00:55 | Throughout this course, I will be using
the Google Chrome browser, but you can
| | 00:59 | use whatever browser you want,
because, as we all know, browsers pretty much
| | 01:02 | all work the same way.
| | 01:03 | I will also be using the Eclipse code
editor to write all my code. Again, you
| | 01:08 | can use whatever code editor you want,
either WYSIWYG editor or just something
| | 01:12 | simple, like Notepad.
| | 01:14 | Now for the WordPress part.
| | 01:15 | WordPress is a dynamic web publishing
application that lives on a web server.
| | 01:20 | It consists of two main parts:
the application itself and the database that
| | 01:24 | contains all the contents.
| | 01:26 | When developing a new WordPress site,
it's always a good idea to set up a
| | 01:29 | WordPress development environment on
your local computer so you can do all the
| | 01:33 | building and testing first, before
you published the website to the web.
| | 01:37 | This is not mandatory. You can follow
this course and do everything on live
| | 01:41 | site on the web, but as we move along,
you are likely to make changes that will
| | 01:45 | break the site temporarily, and
that's not a good experience for your
| | 01:48 | unsuspecting visitors.
| | 01:49 | Setting up WordPress on your local
computer is made easy using one of
| | 01:53 | several available tools.
| | 01:55 | I use something called BitNami.
| | 01:56 | You just go to bitnami.org, find the
Download button, and then install it.
| | 02:01 | You can also use WAMP if you are on
a PC or MAMP, if you are on a Mac.
| | 02:07 | If you want a further explanation of
how to do this, you can either go check
| | 02:10 | out the WordPress 3 Essential Training course,
where there's a complete walk-through of all these
| | 02:15 | processes, or you can go check out
David Gassner's course, Installing Apache,
| | 02:20 | MySQL and PHP, right in the lynda.com library.
| | 02:24 | When all this is done, you will be at
the same point I am when we start, having
| | 02:28 | WordPress installed locally on your
computer, and now you can start working.
| | Collapse this transcript |
|
|
2. Taking the Preparatory StepsCreating site architecture| 00:00 | The purpose of a portfolio site is
to showcase different kinds of work in
| | 00:04 | an easily accessible way, both for the person
who owns the site and for those who visit it.
| | 00:09 | Because of this the portfolio site
we will be dealing with different types of
| | 00:12 | content in different places.
| | 00:15 | To make sense of it all, creating a
site architecture enables a designer or
| | 00:18 | developer to think through all the
different elements in advance and figure out
| | 00:23 | what needs to be built and where these
different components should be housed.
| | 00:26 | But before we can build the site
architecture, let's look at how WordPress
| | 00:30 | handles contents by default.
| | 00:33 | When installed, WordPress has two
main content types: posts, which is the
| | 00:37 | regular blog posts, and pages.
| | 00:40 | The posts are organized by category,
and further organized by tag, and they are
| | 00:45 | usually displayed in reverse
chronological order, so the newest post first and
| | 00:51 | then all the older ones underneath it.
| | 00:53 | You can also add custom fields to
posts and they sometimes come with the
| | 00:56 | featured image functionality,
and most of them have comments.
| | 01:00 | In contrast, pages are independent
elements that don't really relate to each
| | 01:05 | other, except for parent-child relationships.
| | 01:07 | So you can make one page and then
underneath it you can have a child of that page.
| | 01:12 | Pages also default to the main menu,
unless you tell the site otherwise, and
| | 01:16 | with pages you can have custom page
templates so you can display different
| | 01:20 | pages in different ways.
| | 01:22 | Pages also have some common features
with posts, including the featured image
| | 01:25 | functionality and comments, but
pages do not have custom fields.
| | 01:30 | Taking into consideration the WordPress
only has these two content types, posts
| | 01:34 | and pages, we can apply them to this
standard online portfolio item structure.
| | 01:39 | You see we have a Home page, a Bio/About
page, a Portfolio with some sub items,
| | 01:44 | including Photos, Videos, Articles,
and then a Contact page and a Blog.
| | 01:49 | If we take the standard structure,
you'll see that the Home page and
| | 01:52 | Bio/About Page are standard pages,
and so is the Contact page, and then the
| | 01:57 | Blog is the regular blog post.
| | 01:59 | But what happens to this content in
the middle, the Portfolio, where you have
| | 02:03 | the Photos, Videos, and Articles?
| | 02:04 | That's the general question that we're
going to answer in this course and I
| | 02:08 | will teach you how to handle it.
| | 02:09 | The obvious and simple solution to
this issue is to create a new category
| | 02:15 | underneath the Blog called Portfolio,
and then give that Portfolio category
| | 02:19 | subcategories for each of your items.
| | 02:22 | But this is really clunky,
because now you have all of your items,
| | 02:25 | regardless of what kind of
content it is, listed under the Blog.
| | 02:29 | So if you want to display the blog
without these items, you have to write a huge
| | 02:33 | pile of code just to exclude these
items and then you have to create a new
| | 02:38 | template to include only those items.
| | 02:40 | A better solution is to create new
custom post types for each of these
| | 02:45 | different types of content.
| | 02:47 | That way the blog lives on its own with
its own categories and you'll have a new
| | 02:51 | custom post type for each
of the new types of items.
| | 02:55 | So you'll have a custom post type for
videos, one for photos, and one for articles.
| | 03:00 | What's really cool about this is
once you have custom post types, you can
| | 03:04 | assign specific types of categories or
taxonomies to each of the post types so
| | 03:09 | that they're all different.
| | 03:10 | That means you can create
organizational tools that only relate to each of the
| | 03:15 | individual post types and you can
organize each post type item in relation to
| | 03:20 | the other items on their own.
| | 03:21 | So using custom post pipes and custom
paxonomies, you can create a site that's
| | 03:26 | much easier to navigate and has very clear
firewalls between different types of content.
| | 03:31 | Now let's look at a concrete
example of how this would work.
| | 03:35 | Throughout this course we'll be
building a site for an imaginary chef. The site
| | 03:39 | is called Culinary Artistry.
| | 03:41 | This chef has four types of
content he wants to display.
| | 03:45 | He has his regular blog, but he
also has recipes, photos, and videos.
| | 03:50 | And under Recipes, Photos, and Videos,
he has different kinds of ways of
| | 03:54 | organizing the content.
| | 03:56 | For Recipes, he has Meal Type,
Ingredients, Difficulty, Time, and Portions.
| | 04:01 | Whereas in Photos he has Meal Type,
Ingredients, and Technique for the
| | 04:06 | photography, and in Videos he has
Meal Type, Ingredients, and Video Type.
| | 04:10 | You'll notice that some of these
categories, or custom taxonomies as they
| | 04:14 | are called, are the same across all
three post types, while others are
| | 04:19 | individual for each post type.
| | 04:21 | This really harnesses the true
power of using custom post iypes.
| | 04:25 | You can hook them together and relate
them to each other using some taxonomies
| | 04:29 | and then you can still
keep them separate for others.
| | 04:32 | So what we're seeing here is the
general site architecture for the site we're
| | 04:36 | going to be creating.
| | 04:37 | We'll build three new post types,
Recipes, Photos, and Videos, and under
| | 04:42 | them create a set of new custom taxonomies, so
we can organize the content in a logical way.
| | 04:48 | With a basic site architecture drawn
up before the real work begins, you have
| | 04:52 | a clear plan of what needs to be done and
how that information is going to be organized.
| | 04:56 | This makes the actual process of
building the course site much easier.
| | Collapse this transcript |
| Creating a child theme| 00:00 | To start this project we'll
create a child theme to work in.
| | 00:03 | Using a child theme ensures that
whatever we do won't impact or break the core
| | 00:07 | theme and also gives us a
clean slate to work with.
| | 00:11 | Using a child theme you can create a
completely customized look and feel for
| | 00:14 | your WordPress website.
| | 00:16 | Under lynda.com library you'll find Themes,
my course WordPress 3: Building Child
| | 00:21 | which shows you how to build
advanced child themes and customize them
| | 00:25 | to look the way you want.
| | 00:26 | In this course I'm going to build a child
theme using the stock 2011 theme as the parent.
| | 00:32 | However, if you've already completed
the WordPress 3: Building Child Themes
| | 00:36 | course you can use your own child
theme instead or you can use any other
| | 00:41 | theme for that matter.
| | 00:42 | All the code examples in this course
are ubiquitous and will work in any theme.
| | 00:47 | The only thing that changes is where and
in what files you place the code snippets.
| | 00:51 | So like I said we're going to
start off by creating a child theme.
| | 00:55 | The first thing we need to do is
create a new folder for the child theme.
| | 00:58 | So I'll go into my code editor,
navigate to wp-content and themes, and then
| | 01:06 | create a new folder under this.
| | 01:08 | I'll call that folder
cooking and click to open it.
| | 01:15 | Inside the Cooking file I now have to
create a file that called style.css.
| | 01:19 | This is the file that tells WordPress
that in here there is a child theme.
| | 01:23 | So I'll just call it style.css and
take out the default code here and in here
| | 01:33 | I'm going to put in the
definition of the new child theme.
| | 01:36 | Now to make it easy for you I put all
the code snippets in the code snippets
| | 01:40 | file you're going to
find in your exercise files.
| | 01:42 | So let's go to the exercise files and
open the code-snippets file, and here at
| | 01:49 | the very top you'll find the code
necessary to create a child theme.
| | 01:53 | Now first let's just grab this
commented out code here that starts with /*, so
| | 01:58 | I'll copy this and paste it into
the beginning of my style.css file.
| | 02:04 | If you look briefly at this
you'll see this defines the theme name,
| | 02:09 | Culinary Artistry, and then it sets a
Theme URI. This is where you would put the
| | 02:13 | URL for your site for example.
| | 02:15 | It has a description, information about
who you are, and version, and the line
| | 02:19 | that really matters here is this one, Template.
| | 02:22 | The Template line tells
WordPress what the parent theme is.
| | 02:26 | So right now it says twentyeleven. If
you wanted to point to twentyten instead
| | 02:31 | you'd just say twentyten, and this
word here points to the name of the folder
| | 02:36 | that contains the parent theme.
| | 02:38 | So if you use another theme that's not
on my list you just put in the name of
| | 02:42 | the folder and WordPress will
automatically assume that that's the parent theme.
| | 02:45 | If I now save this style.css file
and go to WordPress admin and login and
| | 02:57 | then I'll go to Appearance > Themes,
then you see by default 2011 is
| | 03:02 | activated and down here we now have a
new theme, Culinary Artistry version
| | 03:07 | 0.0.1, and I can activate this.
| | 03:11 | And when I now go to the front page and
reload it, you'll see we have the same
| | 03:15 | site but it has no styles.
| | 03:18 | This is because we created a new style
sheet for our theme and that style sheet
| | 03:21 | contains nothing, as you can see right here.
| | 03:25 | Now rather than copying over all the
styles from the 2011 theme we're just going
| | 03:29 | to import them into this file dynamically.
| | 03:32 | So if you go back to your code snippets
file, you'll see at the very top here we
| | 03:36 | have this line that says import url
and then points to /twentyeleven/styl.css.
| | 03:40 | If you copy that, go back into your
style.css file in the Cooking folder and
| | 03:48 | paste it in at the very top.
| | 03:49 | What we're doing is we're telling the
browser to import the style sheet at this
| | 03:54 | URL, which is the style sheet inside of 2011
folder, as if it was content in this file.
| | 04:01 | So when we save it and reload the
front page, we now have a site that looks
| | 04:05 | exactly the same as the old site
except we're now running the child theme.
| | 04:09 | Now before I move further I'm going to
do some quick customizations of this site
| | 04:13 | using the Theme functions within 2011.
| | 04:16 | So I'll go back to Appearance and
first I'll change the header image.
| | 04:21 | So I'll go to Header and Choose File.
| | 04:25 | I'll navigate to my exercise files,
and under Assets you'll find this
| | 04:32 | chefHeader image. If you don't have
the chefHeader image you can just upload
| | 04:37 | any image. As long as it's 1000x288
pixels it will fit exactly; if not, WordPress
| | 04:42 | will help you to crop it.
| | 04:43 | When you click Upload, my new image is
uploaded and I can save changes, reload
| | 04:51 | the page, and we now have the header we want.
| | 04:55 | The next thing I want to do is get
rid of this extra text at the top here
| | 04:58 | because we already have the
text inside this image itself.
| | 05:00 | So I'll go back to Header, go down to
the bottom where it says Display Text.
| | 05:06 | I'll say No, save it, reload
the page. Now we have no text.
| | 05:12 | And the final thing I'm going to do is
change the layout so we have a one-column
| | 05:16 | layout instead of a two-column layout.
| | 05:18 | So I'll go back, select Theme Options
under Appearance, and then change Default
| | 05:25 | Layout to One-column, no sidebar.
| | 05:28 | Save changes, reload, and we now have
a completely different look to our site
| | 05:35 | using a child theme and
the theme options in 2011.
| | 05:39 | When adding new functionality to a
WordPress theme it's always a good idea to do
| | 05:43 | this in a child theme rather
than working in the original.
| | 05:46 | That way if you make a mistake or
something doesn't work quite right, you can
| | 05:50 | just delete it and start over
without damage being done to the original.
| | 05:53 | And again, if you want to dive further
into the world of child themes check out
| | 05:57 | the WordPress 3: Building Child
Themes course and then come back here.
| | 06:01 | But for now we're going to work with
this new child theme we just created
| | 06:05 | and move forward.
| | Collapse this transcript |
| Creating an external file to manage functions separately from the theme| 00:00 | This course revolves around using
custom post types and custom taxonomies to
| | 00:04 | create separate buckets for
separate types of content.
| | 00:07 | These custom post types and
custom taxonomies are defined in the
| | 00:11 | functions.php file in the theme.
| | 00:13 | The functions.php file is where
core theme functionality is called or
| | 00:18 | created and custom post types and
custom taxonomies are core theme
| | 00:22 | functionalities in WordPress.
| | 00:24 | The problem with using custom post
types and custom taxonomies is that since
| | 00:28 | they are defined in the functions
file for each theme, if you switch to a
| | 00:32 | different theme, the post
types and taxonomies disappear.
| | 00:36 | To avoid this we will create the custom post
types and custom taxonomies in a separate file.
| | 00:41 | This file can then be called with
an Include function from within the
| | 00:44 | functions.php file in the current theme,
and can also be called from any of the
| | 00:48 | other themes, if you're using those instead.
| | 00:50 | I like to call this an obstruction layer.
| | 00:53 | The first step in this process is to
create the file where we are going to put
| | 00:56 | all the functions to create the
custom post types and custom taxonomies.
| | 01:00 | So we will do that going into themes
and then I will create a new file and call
| | 01:06 | it posttypes. Click Finish and you will see
it appears inside the themes folder rather
| | 01:12 | than inside one of the actual themes.
| | 01:14 | Now that I have a file, I am going to
put in some dummy content, so that we
| | 01:18 | can see that it works.
| | 01:19 | So I will simply go echo, so that it
types out whatever I put in there, and I
| | 01:24 | will say "Hello!", end the
line, and end my php delimeter.
| | 01:31 | Now if I save this and go back to my
browser and reload the front page, you will
| | 01:38 | see that nothing happens.
| | 01:40 | That's simply because although we made
the file, we haven't yet called it into
| | 01:43 | the theme. So that's the next step.
| | 01:45 | I will go back and into my cooking theme folder.
| | 01:50 | Like I said before, all functions inside
WordPress live in a functions.php file
| | 01:56 | inside the theme, so what we need to
do now is create that file as well.
| | 02:00 | So I will go to New, create a file, and
create a file called functions.php that's
| | 02:06 | saved under the cooking folder.
| | 02:08 | So now we have a functions file that
we will append next to the functions file
| | 02:13 | from a parent theme.
| | 02:15 | So we don't need to copy the functions
from the parent theme over; all we need
| | 02:18 | to do is add new functions inside here.
| | 02:21 | What we need to do first is to
create a function that calls this
| | 02:24 | posttypes.php file.
| | 02:27 | The great thing about php is there's
an actual function that does this for us
| | 02:31 | and it's called include.
| | 02:32 | So if simply say include and I only
want it once, I will say include_once, and
| | 02:37 | then we give URL to the file we
want to include, it will work.
| | 02:42 | Now theoretically, we should be able to
just say ../ and then poststype.php to
| | 02:48 | jump back one folder and then open
posttype.php, but that's not going to work.
| | 02:53 | In this case, we need to hard core the
actual URL in. But if I hard core the URL
| | 02:58 | to the file in saying, localhost/
WordPress/da-da-da, it won't work, if we move
| | 03:05 | the child theme somewhere else.
| | 03:06 | So what we need to do is use another
function to grab the actual live URL dynamically.
| | 03:12 | That function is called ABSPATH.
| | 03:19 | Next to ABSPATH we need to append the
actual URL, so I go space, dot, to append it,
| | 03:25 | and then quotation, and I will say wp-
content/themes/and then posttypes.php, end
| | 03:37 | the line with a semicolon,
and end the PHP delimeter.
| | 03:41 | Using this, we should now see
that word Hello! appear inside our theme.
| | 03:45 | So I will Save it, go back to my
browser, Reload, and you will see Hello!
| | 03:52 | appears here at the very top.
| | 03:54 | That means our child theme now grabs
the posttypes.php file living outside the
| | 04:01 | child theme and appends it into the functions.
| | 04:05 | Now just for ease-of-use, I've added
this code into my code-snippets file,
| | 04:10 | so you can simply go in here and copy that
code out, if you can't remember that exact syntax.
| | 04:15 | Well, just to reiterate, it's include_
once, ABSPATH, which points to the core
| | 04:20 | sites of where the site is. So it will
be www.yoursite.com and then we append
| | 04:26 | the rest of the address here.
| | 04:28 | Although not technically necessary,
placing custom post type and custom
| | 04:32 | taxonomies functions in a separate
abstraction layer or file makes it easier
| | 04:37 | for you to move the functions to a
different or even multiple themes without
| | 04:40 | having to copy and paste or to make
changes to the existing functions file.
| | 04:45 | Furthermore, if you run several themes
with the same post types, you can change
| | 04:49 | one file and have these changes
permeate throughout all the themes.
| | 04:53 | Simply put, you put all the important
stuff in one central location and just
| | 04:57 | call it from there, rather than
putting all the important stuff in each
| | 05:00 | individual location.
| | Collapse this transcript |
|
|
3. Creating Custom Post TypesWhat is a custom post type?| 00:00 | By default, WordPress has two main
types of content, posts and pages.
| | 00:05 | The posts are further organized based
on categories and tags, while the pages
| | 00:09 | are organized in parent-child relationships.
| | 00:12 | This structure is fine if you have a
site with, for example, some static pages
| | 00:16 | and a blog, but it does lend itself
well to more complicated sites that have
| | 00:20 | multiple types of content.
| | 00:22 | This is where custom post type come in.
| | 00:25 | A custom post type is
exactly what it sounds like.
| | 00:28 | A new type of post with its own name,
its own selection in the admin menu, and
| | 00:33 | its own templates, taxonomies, and functions.
| | 00:36 | The benefit of a custom post type is
simply that it separates from your regular
| | 00:40 | posts and allows you to put different
types of content in different buckets.
| | 00:45 | To show you what I mean, here is
a website we build for the 12X12
| | 00:48 | Vancouver Photo Marathon.
| | 00:49 | It's a photo contest in Vancouver.
| | 00:52 | In that site we needed a way of
organizing information about the participants or
| | 00:56 | marathoners, as we call them.
So we created a new post type.
| | 01:00 | As you can see in the admin menu, we
have posts, we have pages and down here we
| | 01:05 | also have a new item called Marathoners.
| | 01:08 | When I click on it, you'll see a list
of all our marathoners. You can add a new
| | 01:14 | marathoner if you want to.
| | 01:16 | Add new marathoner, with a title,
description, and also a bunch of extra
| | 01:21 | custom field information.
| | 01:23 | The marathoner can also be organized
based on the year he or she participated.
| | 01:29 | Rather than having a new post and then
categories, we have new marathoner and Year.
| | 01:37 | This is a very basic example of what
you can do with a custom post type and you
| | 01:41 | can get way more advanced with it,
but it shows the general principle.
| | 01:45 | Instead of having everything under
Posts or Pages, we can add additional New
| | 01:49 | types of content in our sidebar
that are then handled separately.
| | 01:54 | custom post types allow you to separate
the content on your site into different
| | 01:57 | buckets or areas, so they don't get mixed up.
| | 02:00 | More importantly, they allow you to
treat different content differently both
| | 02:04 | by organizing them in new custom
taxonomies, collecting different kinds of
| | 02:07 | information, and displaying them with
custom templates depending on the contents,
| | 02:11 | and that's what we're
going to do in this course.
| | Collapse this transcript |
| Setting up a custom post type| 00:00 | Custom post types can be added through
plug-ins or they can be hardcoded into
| | 00:05 | the theme you're using.
| | 00:06 | I find the latter to be a far more
solid way to go and it also ensures that
| | 00:10 | everything works properly
even if your plug-in doesn't.
| | 00:14 | Setting up a basic custom post type
is easy and only requires a few simple
| | 00:18 | lines of code in functions.php, or in our
case, in the abstraction file, posttypes.php.
| | 00:25 | The project we are working on, Culinary
Artistry, requires three custom post types:
| | 00:30 | one for recipes, one for
photos, and one for videos.
| | 00:34 | The code to create these is exactly the same.
| | 00:37 | The only thing that changes is the
function names and the names of the
| | 00:41 | post types themselves.
| | 00:43 | Now before we go there, if you look at
your Admin panel right now, you'll see
| | 00:46 | that you have this word Hello!
| | 00:48 | at the very top even in the Admin panel.
| | 00:50 | If you remember, this is the same Hello!
| | 00:52 | we added inside the posttypes.php
file to make sure it works and this just
| | 00:58 | proves the point that when you add
something to the functions file it applies to
| | 01:02 | everything that has to do with your
WordPress installation, both on the
| | 01:06 | front-end and the back-end, and
that's what we are going to use now.
| | 01:09 | So the first thing we need to do is
of course take out this echo Hello!
| | 01:16 | and then we can start
building our first post type.
| | 01:20 | Because building a post type requires
exact code, I have created a code-snippet
| | 01:24 | for you, so you can go to the code-
snippets file and find here it says In
| | 01:28 | posttypes.php and then it
lists the actual function.
| | 01:32 | So if we copy it from Add new post
types for Recipes down to the end curly
| | 01:37 | bracket here and paste it into posttypes
.php, we have the function that creates
| | 01:45 | the post type Recipes.
| | 01:47 | I will just explain it to you quickly.
| | 01:49 | At the very top we have a comment that
just explains what it is, I always tend
| | 01:53 | to add comments to every new function I
make, so that when I come back later I
| | 01:57 | know what's going on.
| | 01:59 | The function itself is here.
| | 02:01 | It's called cooking recipes init and
this is the function that creates the
| | 02:06 | actual custom post type.
| | 02:08 | It consists of a set of arguments and
then the function register_post_type and
| | 02:13 | then the name of the
post type and the arguments.
| | 02:16 | So this post type is called recipes
because it's recipes, and the arguments
| | 02:21 | have labeled, recipes, which is the
name of the post type itself as it is
| | 02:25 | displayed inside WordPress.
| | 02:27 | It also has the singular label recipe
for singular instances and then it has a
| | 02:32 | bunch of other values.
| | 02:33 | It says public to true because it's
supposed to be publicly visible so when
| | 02:37 | people visit your site they can see it.
| | 02:39 | It's publicly_queryable.
| | 02:41 | It shows the UI as you can see the UI
when you are logged into WordPress, the UI
| | 02:46 | being where you can add a title,
description and all this kind of stuff.
| | 02:49 | The query_var is set to true.
| | 02:51 | This is how you are able to query the
content, whether or not you can say I want
| | 02:55 | the information from this post
type and I only want the titles.
| | 02:59 | The rewrite is set to true so
that WordPress can rewrite the URL.
| | 03:03 | We will get back to that later.
| | 03:05 | The capability_type is set to post right now.
| | 03:07 | You can also set it to page.
| | 03:09 | This just has to do with how
WordPress handles the content.
| | 03:12 | It's not hierarchical right
now because I set it to false.
| | 03:15 | There is no need to have it
on true unless you want to.
| | 03:18 | And the menu_position is set to null.
| | 03:20 | We will get back to that later too.
| | 03:22 | And finally there is a support
variable that tells WordPress what content is
| | 03:27 | supported within the actual individual posts.
| | 03:30 | We will also get back to that later.
| | 03:32 | The final thing that happens is
after this function is built we have this
| | 03:36 | add_action at the top.
| | 03:38 | The add_action actually calls
the function into WordPress.
| | 03:42 | Right now it's been called add init,
which is when WordPress Admin boots up, and
| | 03:48 | the function called is this cooking_
recipes_init which is the one we just made.
| | 03:52 | If we save this file and go into
WordPress Admin, you will see that the Hello!
| | 03:58 | disappears and something else happens as well.
| | 04:00 | So just reload it and you will see Hello!
| | 04:03 | disappeared and down here at the
bottom we now have a new post type, Recipes.
| | 04:08 | If we click on it, you will see it
looks just like posts except it says Recipes
| | 04:14 | and you can add a new recipe and in
time you will also be able to manage it.
| | 04:18 | When we go in and Add New, you will
also see we have Title, Content or
| | 04:25 | Editor, and Discussion.
| | 04:27 | If you go back to our code, you will see
here under supports that we have title,
| | 04:34 | editor, and comments.
| | 04:36 | To add a second custom post type, all
we need to do now is simply copy this
| | 04:40 | batch of code and paste it in.
| | 04:44 | Then we will just make some quick
changes, we will call this Photos instead,
| | 04:50 | call it cooking_photos and change the
actual function, and now we change the
| | 04:58 | label and the singular_label.
| | 05:01 | And Photo and finally down here
register_post_type, we will call it photos.
| | 05:10 | Save it, reload WordPress Admin, and
now we have both Recipes and Photos.
| | 05:16 | We will do the same for videos.
| | 05:20 | Copy it into our function, paste it in,
change to Videos, and change the actual
| | 05:30 | function, call it cooking_videos,
and now we change the label and the
| | 05:37 | singular_label and at the bottom here.
| | 05:43 | Save, reload WordPress Admin, and
we now have three custom post types:
| | 05:49 | Recipes, Photos, and Videos.
| | 05:53 | If you didn't quite follow along here, I
created a complete code snippet for you.
| | 05:58 | You can just copy out the
entire batch of code here.
| | 06:01 | Under In posttypes.php, you can copy
everything from the beginning PHP delimiter
| | 06:07 | all the way till the end PHP
delimiter and simple mark all your content in
| | 06:11 | posttype.php, delete it, and then just
paste this in instead and you will get
| | 06:15 | the exact same result you just saw that I made.
| | 06:18 | As you can see, adding basic custom
post types to your theme is very easy as
| | 06:23 | long as you keep your code in order and
creating new ones is as easy as copying
| | 06:27 | an existing one and just renaming
the functions and the post type itself.
| | 06:31 | But we're not quite done here.
| | 06:33 | Though these post types work,
they are not very well-refined.
| | 06:37 | That's the next step.
| | Collapse this transcript |
| Adding advanced variables to the custom post type| 00:00 | In the previous movie, we
created three basic custom post types.
| | 00:04 | But as you saw, when we went to
WordPress Admin, when creating a new post under
| | 00:08 | them, the text displayed inside
WordPress still calls all of them just Post.
| | 00:14 | Though, this doesn't look like much right away.
| | 00:16 | It's a bit sloppy and it
can also lead to confusion.
| | 00:19 | After all, when you click Add New under
Recipes, why does it say create new post?
| | 00:25 | Fortunately, we can fix out this with a
few more lines of code in our function.
| | 00:30 | Each of the custom post type definition
functions can have a variable called labels.
| | 00:35 | This is where we put all the
labels for a custom post type.
| | 00:38 | This variable can take an array of labels.
| | 00:41 | So we are going to create a new
separate array and then call it from within
| | 00:44 | the function itself.
| | 00:47 | If you go to your code-snippets, you see
here under 03_03, there's an example of
| | 00:51 | a new array for recipes.
| | 00:53 | It starts with recipe_labels and
then it goes down to this end bracket.
| | 00:57 | So, if you copy this, go into your
posttypes, scroll to the top, and find your
| | 01:04 | arguments for the register_post_type,
and then paste in the new array directly
| | 01:10 | above it, we now have an array we can
call from inside a basic function to
| | 01:16 | display all the information about the content.
| | 01:19 | If we look at this array, you will
see we have more specific definitions
| | 01:22 | about all the text.
| | 01:24 | We have the name of the posttype, Recipes,
we have the singular_name Recipe, and
| | 01:28 | these correspond to the
previous label and singular_label.
| | 01:32 | We also have the text for all_
items, so it says All Recipes.
| | 01:36 | We have add_new, Add new recipe,
we have edit_item, we have new_item.
| | 01:43 | This stuff just makes it clear inside
WordPress Admin what is going on when you
| | 01:47 | are working for the recipes.
| | 01:49 | So how do we activate this array?
| | 01:50 | Well first, we should take out this
singular_label, because we already have a
| | 01:55 | repeated up here, so I will take that
whole line out, and then instead of saying
| | 02:00 | label, we will say labels and call the array.
| | 02:05 | The array is called $recipe_
labels, so that's what you put in.
| | 02:13 | And when we now save the posttypes.php
file, and go back to WordPress admin, and
| | 02:18 | reload, you will see a subtle change.
| | 02:21 | We now have all recipes under Recipes,
Add new recipe, and in the actual single
| | 02:28 | view, you see it says Add new
recipe rather than saying Add New Post.
| | 02:34 | We can do the exact same thing for
Photos and Videos, just because it's a lot
| | 02:37 | of code, I've created it for you, so
what you can do if you don't want to do
| | 02:42 | this manually is simply go to the code
-snippets, find it where it says Full
| | 02:46 | code for posttypes.php and copy all the code
all the way down to the end of the php delimiter.
| | 02:53 | Copy this, go back to the code editor,
under posttypes.php, delete everything
| | 03:00 | and just paste in this new content.
| | 03:04 | When I save it, reload WordPress Admin,
we now have all the new post types and
| | 03:11 | as you can see when we open them,
under Photos we have All Photos, Add new
| | 03:15 | photo, under Videos we have All Videos,
and when we select them, it will say Add
| | 03:21 | new video here as well.
| | 03:23 | Setting up the proper labels for a
custom post type not only makes the post type
| | 03:27 | easier to use, but also adds a
new layer of professionalism to it.
| | 03:31 | And as you've seen, it's easy
to do, which is always a bonus.
| | Collapse this transcript |
| Advanced custom post type functionalities| 00:00 | One of the really cool things about
custom post types is that you can define
| | 00:03 | what kind of functionalities they support.
| | 00:06 | That way you can customize your custom
post types to only ask for the kind of info
| | 00:10 | you want and you can shape it to fit
with the content you want to display.
| | 00:14 | You can get pretty advanced with this
stuff, but in this course I will spare
| | 00:17 | you to madness and show you the
standard functions and how to call them.
| | 00:20 | All of this is done in an array
placed in the supports variable.
| | 00:25 | So if we look at the recipes, custom
post type, when we scroll down a bit,
| | 00:30 | you'll see we have this
variable called supports.
| | 00:33 | And in the array, it says
title, editor, and comments.
| | 00:37 | If we go to the site itself and create
a new recipe, you'll see we have a title,
| | 00:45 | the editor, which is this area,
where you put the regular content and
| | 00:49 | comments, and comments is basically
just the ability to turn comments and
| | 00:52 | trackbacks on and off.
| | 00:54 | What if we want to add some
additional functionality to it?
| | 00:58 | Well, there is a whole bunch of
functionality we can add if we want to.
| | 01:02 | So if you go to your code snippets, you
see I have added the supports variable
| | 01:07 | with a long array of content.
| | 01:09 | You can simply copy the whole thing and
paste it in, in place of what is already there.
| | 01:16 | I'll take away the comma for
now and then we'll read it.
| | 01:20 | The supports array says title, here is
the title, the editor, and the author.
| | 01:24 | We already have that, but in addition,
it now says thumbnail which is the post
| | 01:29 | thumbnail or featured
thumbnail that we have in each post.
| | 01:33 | It also says excerpt, which is the
excerpt you can write if you want to, and of
| | 01:37 | course we have comments
and then also custom-fields.
| | 01:39 | So you can new custom fields.
| | 01:42 | If we save this and go back to our
editor and just reload the page, you will see
| | 01:49 | that in addition to the title, editor,
and comments, we now also have Featured
| | 01:54 | Image here on the side, where
you can add a new featured image.
| | 01:58 | We have Excerpt, where you can add an excerpt.
| | 02:01 | We have Custom Fields, Discussion and
also Author, where you can define who
| | 02:05 | wrote this. If you have multiple authors you
can assign a different author to your content.
| | 02:12 | You can also add another variable at
the end here, so if you say comma and then
| | 02:17 | go down a line, you can add
another variable called has_archive.
| | 02:23 | Then give it an archive-name.
| | 02:25 | So I'll copy that and paste it in.
| | 02:28 | Now I'll just space it with equal.
| | 02:32 | Now this has_archive variable is
something we will come back to later.
| | 02:36 | But for now, I will just say the archive
-name as recipes, and leave it at that.
| | 02:42 | The reason why you have this has_
archive value is because later on we'll
| | 02:47 | create an index page just for the recipes post
type, and that recipe page has to have a name.
| | 02:53 | So this name, has_archive name,
| | 02:56 | actually defines the name of the index page.
| | 02:59 | But like I said, we'll get back to that later.
| | 03:02 | Now that we've added this supports
array and the has_archive, to the recipes
| | 03:07 | post type, we want to add
it to all the other ones too.
| | 03:09 | So I will simply go here and copy these
two lines of text, copy it, scroll down
| | 03:16 | until I find the same call inside the
photos, custom post type, paste the old
| | 03:22 | one in, and then change has_archive to
photos, and I will scroll down and do
| | 03:29 | the same for videos.
| | 03:31 | So here is the support.
Paste it in and change to videos.
| | 03:38 | And I now save it and go back to my
editor, you will see when we create, a new
| | 03:44 | Photo, we now have Featured Image,
Excerpt, Custom Fields, Discussion, and
| | 03:50 | Author, and the same for Add new video,
Title, Editor, Excerpt, Custom Fields,
| | 03:58 | Discussion, Author, Thumbnail.
| | 04:02 | If you want to make sure you have
exactly the same thing I have, again you can
| | 04:06 | go into the code-snippets and copy out
the full code for posttypes.php and just
| | 04:10 | paste it in and place it what you
currently have and you'll end up for the
| | 04:13 | exact same thing I have right now.
| | 04:16 | By adding different functionalities to
different post types, you can customize
| | 04:20 | your post types to fit with
the content you want to display.
| | 04:23 | It's another simple way of making your
site easier to administer and it gives
| | 04:27 | you complete control over your content.
| | Collapse this transcript |
| Changing the menu position of the custom post type| 00:00 | So far we've created three new post
types, we've changed the labels of those
| | 00:05 | post types so they display the right
names for each of the post types and we've
| | 00:09 | added a lot of functionality to each
of the post types, but there are still a
| | 00:13 | few things that we need to do
to make this a complete project.
| | 00:17 | First of all when you look at the new
post types you notice they appear at the
| | 00:20 | very bottom of this first section of
the menu. So you have Posts and they have
| | 00:24 | Media, Links, Pages, Comments,
and then you have got the post types.
| | 00:28 | What you want to do is probably
move these post types up so they appear
| | 00:32 | underneath Posts rather
than underneath Comments.
| | 00:35 | We can do that with one of the variables
that's inside the post type definition.
| | 00:39 | If we go back to posttypes.php and
scroll down, you'll see that in the
| | 00:46 | arguments array for each of the
register post type functions there is a
| | 00:50 | variable called menu_position.
| | 00:52 | It's right here, and it's
always set to null by default.
| | 00:55 | If it's set to null it will always
appear on the bottom of the first main part,
| | 01:00 | so under Comments, and then each of
the post types will appear as they appear
| | 01:04 | inside the functions.php file or
in our case the posttypes.php file.
| | 01:09 | If we want to change that, we can
change this null to an actual number.
| | 01:14 | Now there is a reference scale for
this and I'd put it into the code-snippets
| | 01:18 | file so you always know what's going on.
| | 01:20 | What you see here is menu_position
and it's set to 5 because I want it to
| | 01:24 | appear directly under Posts, but as
you can see from this list you can set it
| | 01:29 | to 0 where it appears at the very top,
you can set it to 10 or just below
| | 01:33 | Media, 15 below Links, 20 below Pages,
25 below Comments, etcetera, etcetera,
| | 01:38 | all the way to the bottom.
| | 01:40 | So depending on what number you give
menu position, the items will appear
| | 01:44 | underneath or above each other.
| | 01:46 | So if we go back to posttypes.php and
for recipes we set the menu_position value
| | 01:54 | to the number 5 and save the file.
| | 01:57 | When we go into admin you'll see that
Recipes, which is currently down here, will
| | 02:02 | move up directly under Posts.
| | 02:04 | So now we have Posts, Recipes and then
Media, Links, Pages, Comments, etcetera,
| | 02:11 | and if we do this same for Photos
and Videos, we can get them to appear
| | 02:14 | directly underneath too.
| | 02:16 | For them we can either go and set each
of the values just to 5 or if we want
| | 02:22 | them to appear in a certain order, you
can for example set recipes to 4, photos
| | 02:28 | to 5, and then videos to 6, or you can
set videos to 4 and it would appear over
| | 02:36 | recipes, but I'll set them all to 5 for
now, reload the page, and you'll see the
| | 02:42 | structure now makes a lot more sense.
| | 02:44 | We have Posts, Recipes, Photos,
and Videos at the very top.
| | 02:49 | It's a subtle change but it's again
one of those changes that makes a huge
| | 02:52 | difference, because it tells the user
something about the priority of content.
| | 02:57 | Now Recipes, Photos, and Videos have
become first level citizens of the site
| | 03:02 | rather than being afterthoughts
that are stacked underneath Comments.
| | 03:06 | By changing the menu position of
your custom post types you're taking
| | 03:09 | control not only over what kind of
content can be published, but also what
| | 03:13 | is more important on the site. It's a
subtle distinction, but one that makes a
| | 03:17 | lot of difference.
| | Collapse this transcript |
| Adding a custom post type icon| 00:00 | By default all new custom post types
have the same default icon as the regular
| | 00:05 | posts, but they don't have to.
| | 00:07 | Using a simple batch of code along
with some graphics, we can change the
| | 00:11 | icons for each of the post types to
further identify them as separate and
| | 00:14 | different entities.
| | 00:16 | To do this we first need some new icons.
You can go online and you can find a
| | 00:21 | free icon set and use that or
you can make your own icons.
| | 00:25 | The sizes change a little bit between
the icons that are on the sidebar here and
| | 00:30 | the icons that are larger in the actual view.
| | 00:32 | So you basically need to create one icon
for the sidebar and one for the main view.
| | 00:38 | If you gave access to the full set of
assets for this course, I've created some
| | 00:42 | icons for each of these three new post
types and that's the ones we're going
| | 00:45 | to hook in, but like I said you can
use any icon you want. You just have to
| | 00:49 | create the graphics for it.
| | 00:52 | First we need to place the images
that we're going to use into our themes
| | 00:56 | folder. So I'll go to wp-content in my
WordPress installation and then into themes.
| | 01:01 | Like would the posttypes.php file we
want the images to be available for all the
| | 01:06 | themes that will be using these post types.
| | 01:09 | We're going to put the images folder
in the themes folder rather than in the
| | 01:13 | individual folder for the themes.
| | 01:15 | This is not technically proper to do
in WordPress, but it'll help us have one
| | 01:19 | set of files that we can use for all our themes.
| | 01:22 | So I'll go into my Exercise Files under
Assets and find a folder called images.
| | 01:27 | I'll copy it into the themes folder.
| | 01:32 | Under images you'll see we have images
for photo, recipes, and video, so there
| | 01:39 | is a small one and regular size one smaller.
| | 01:41 | The small one goes on the menu;
the regular size one goes when you open
| | 01:45 | each individual item.
| | 01:47 | Now though we have the images in the
right folder we need to call them in using
| | 01:50 | cascading style sheets, but we're going
to do this from the posttypes.php file
| | 01:55 | using some clever code.
| | 01:58 | So first I'll go to the posttypes.php
file and scroll all the way to the bottom,
| | 02:03 | then I'll go to my code-snippets
and find the code-snippet under 3.6.
| | 02:09 | As you can see here I commented in. It
says Add new Custom Post Type icons and
| | 02:13 | the batch finishes at this
incomplete PHP delimiter.
| | 02:16 | This is very important and
I'll show you why in a second.
| | 02:19 | If you copy this code all the way up
to the comment and paste it in, you'll see
| | 02:28 | that the PHP delimiter starts here
and then it ends down here, because our
| | 02:31 | original posttypes.php file had
an end PHP delimiter at the bottom.
| | 02:36 | This is happening because this function
actually introduces a set of style code
| | 02:41 | and this is not PHP. This is straight up
CSS and HTML. We have to escape our PHP
| | 02:47 | delimiter so that we can display the
regular content and then we have to
| | 02:51 | reintroduce it at the bottom of the function.
| | 02:55 | From the top this function called
cooking_icons introduces new style code for
| | 03:00 | the icons in WordPress Admin.
| | 03:03 | As you can see there are two
icons per post type. You see it says
| | 03:07 | menu-posts-recipes where recipes is
the post type and then it says menu-image
| | 03:12 | and then we're calling a background
image. We're calling the url to decide
| | 03:18 | itself, so that we can use this
regardless of what side we're using it on and
| | 03:22 | then it navigates to wp-content/themes/
images and then recipessmall because this
| | 03:27 | is a small one and then the same thing
for icon32, which is 32x32, posts, and
| | 03:34 | recipes. This is the large icon
then we'll call the recipes.png file.
| | 03:40 | It's just the same thing happening for
each post types we have recipes, we have
| | 03:46 | photos, and we have videos.
| | 03:48 | When this is called this new style
code will be appended in the header of our pages
| | 03:54 | and therefore we'll
display when you're in the Admin Panel.
| | 03:58 | As you can see here at the top of this
new function it says add_action and it's
| | 04:02 | inserted at admin_head rather than at
in it. That means it'll be injected into
| | 04:07 | the head tag of the site and then it's
just calling the cooking_icons function
| | 04:12 | directly underneath.
| | 04:13 | When I save this in posttypes.php and
go to WordPress Admin, you'll notice that
| | 04:20 | the icons on the side here will
change. So reload it and you see that now
| | 04:26 | Recipes has a recipe book, Photos
has a camera, and Videos has a video camera.
| | 04:32 | And when I click on Recipes, we get a
large recipe book. When I click on videos
| | 04:37 | we have a large video camera.
| | 04:39 | Again these are subtle introductions,
but they make a big difference because we
| | 04:42 | now see that there is a visual
difference between each post type, and you can
| | 04:47 | use this on every single item in
WordPress Admin so that you can truly identify
| | 04:52 | what's going on and make it easier for
the end-user to use the Admin Panel to
| | 04:56 | understand what they are doing.
| | 04:58 | By adding a custom icon to each of
your custom post types, you give the admin
| | 05:02 | user a visual cue that they are now
working with something other than a regular post.
| | 05:06 | It's again a subtle thing,
but it makes a huge difference.
| | Collapse this transcript |
|
|
4. Creating Custom TaxonomiesWhat are custom taxonomies?| 00:00 | When I say custom taxonomy, you may very
well wonder, what on earth is taxonomy?
| | 00:06 | A taxonomy is a system of
classification that allows you to order items into
| | 00:11 | groups or categories.
| | 00:12 | In the regular posts, you have two
types of taxonomies: categories and tags.
| | 00:18 | Taxonomies are found everywhere in real
life, from libraries to music stores, to
| | 00:22 | the local farmer food stand.
| | 00:24 | A taxonomy is simply a method of
grouping and organizing content.
| | 00:28 | So it follows that in WordPress,
a custom taxonomy is a new way of
| | 00:33 | organizing content.
| | 00:34 | WordPress allows for two types of taxonomies.
| | 00:37 | You have the hierarchical taxonomy like
Categories. You can see it if we go in
| | 00:42 | and create a new post.
| | 00:44 | You have Categories down here and you
can make subcategories of each category.
| | 00:49 | Now we also have non-
hierarchical taxonomies, like tags.
| | 00:54 | Tags live on their own and you can
stack multiples next to one another.
| | 00:58 | These are used for different purposes.
| | 01:00 | Which one works better for your type
of organization depends on what kind of
| | 01:04 | information is gathered.
| | 01:05 | This is easier to explain if
we'd look at our example project.
| | 01:10 | Under the Culinary Artistry
website, we have a large set of
| | 01:13 | different taxonomies.
| | 01:14 | Some that span multiple post
types and some that are individual.
| | 01:18 | If you look at them we have of course
under Blog, the standard Categories and Tags.
| | 01:22 | Under Recipes, we have Meal Type,
which is to indicate things like dinner,
| | 01:26 | desert, lunch ,and so on.
| | 01:29 | We have Ingredients, we have Difficulty
level, and you have Time and Portions.
| | 01:35 | Now of the five of these,
one should be non-hierarchical.
| | 01:39 | Can you guess which one?
| | 01:40 | It should be the Ingredients.
| | 01:42 | That's simply because when you insert
Ingredients, you are really just inserting
| | 01:46 | a long list of different items that
don't really have a relation to one another.
| | 01:51 | It's hard to say that, for instance,
bananas relate to tomatoes in a certain way.
| | 01:56 | Whereas Meal type, Difficulty, Time and
Portions actually can relate to each other.
| | 02:01 | You can say you could have time, one to
two hours, and under there you can have
| | 02:04 | a more specific time like an hour and
40 minutes, or under Meal Type you could
| | 02:08 | say, dinner, and then under there you could
have appetizer, main course, stuff like that.
| | 02:15 | We also see that we have some
taxonomies to work across all the new post types
| | 02:18 | while others are individual for them.
| | 02:20 | That's because each individual post
type might have specific sorting systems
| | 02:24 | that don't apply to the other ones.
| | 02:26 | This also becomes clear if we
think about other types of items.
| | 02:29 | Let's say you make a website
that's about cars and motorcycles.
| | 02:33 | Then under both cars and motorcycles
you may have a taxonomy called Mak, that
| | 02:38 | defines what make the car or
motorcycle is, and many companies make both, so
| | 02:42 | therefore,it should go across both.
| | 02:44 | Whereas if you have one that's
called Model, then maybe each should be its
| | 02:48 | own taxonomy, because the models for cars are
quite different from the models for motorcycles.
| | 02:54 | Choosing what taxonomy is to use
really depends more on what kind of content
| | 02:58 | you are sorting and how you want to sort it
| | 03:00 | than it does what can and
can you not do in WordPress.
| | 03:04 | The basic premise is you can add as many
taxonomies you want, you can apply them
| | 03:07 | in any post type, including the
original blog post types, and you can apply them
| | 03:12 | in any way you want.
| | 03:13 | It's simply a matter of how you set it up.
| | 03:16 | By adding custom taxonomies to your
custom post types, you add the ability to
| | 03:20 | sort the content and find
what you're looking for easier.
| | 03:23 | Understanding the difference
between hierarchical and non-hierarchical
| | 03:27 | taxonomies, and when to use each can
make the site easier to navigate both for
| | 03:31 | administrators and for visitors.
| | Collapse this transcript |
| Setting up a basic custom taxonomy| 00:00 | Creating a basic custom taxonomy is
not all that different from creating a
| | 00:04 | basic custom post type.
| | 00:06 | All you have to do is create a new
function that defines the new custom taxonomy
| | 00:10 | and define a name and type of taxonomy
and WordPress will do the rest for you.
| | 00:14 | And of course, all this is
done in that post_types.php file.
| | 00:19 | So first let's open it and scroll down
to the bottom where we'll start it, and
| | 00:25 | then we're going to add to
new custom taxonomy functions.
| | 00:28 | Now like before, I added them into the
code snippets file, so it's easier for
| | 00:32 | you to manage, because it's a lot of text and
I don't want you to have to write everything.
| | 00:36 | So if you go to Chapter 4, 02, you'll
find In posttypes.php. Here we have
| | 00:41 | the complete function.
| | 00:42 | So I'll copy it out, paste it in,
and then we'll take a closer look.
| | 00:48 | As before it starts off with the
comment that explains what this is.
| | 00:54 | This is a function that creates custom
taxonomies. Unlike the custom post types,
| | 00:59 | this is one function that
will create all the taxonomies.
| | 01:03 | So as we add new taxonomies, we're
adding them inside the same function, and
| | 01:06 | you'll see how that works in a bit.
| | 01:08 | As before, it starts within add_action
that adds a new action at init, which is
| | 01:14 | one where it starts, and the
function that's being called is
| | 01:17 | cooking_create_taxonomies, which
is the function directly below.
| | 01:21 | Inside the cooking_create_taxonomies
function, we have a new register_taxonomy
| | 01:26 | function that has an array
that displays a specific taxonomy.
| | 01:30 | I've commented in what taxonomy it is
because, as I said, we'll add multiple
| | 01:34 | taxonomies within the same function.
| | 01:36 | So I've added Meal type because that's the
taxonomy, and then I've added the basic array.
| | 01:42 | So you'll see it says resister_taxonomy.
| | 01:44 | It defines the taxonomy name as meal-type.
| | 01:47 | Now this is the machine name, so
this is what WordPress will refer to.
| | 01:51 | And then inside there is an array
that points to whether or not it's a
| | 01:54 | hierarchical taxonomy. It is,
because it's the Meal type.
| | 01:57 | It gives it a label, so Meal type.
| | 02:00 | It has a singular_name, 'Meal type', show_
ui, which is the UI for the taxonomy itself, true,
| | 02:06 | query_var => true, so you can query it, and then
finally rewrite and then I set the slug to meal-type.
| | 02:13 | So if you remember back to when we
created the post types, you'll see that the
| | 02:17 | stuff is pretty much the same.
| | 02:19 | It's just that it's inside a register_
taxonomy function instead of create a
| | 02:23 | new post_type function.
| | 02:24 | If I save this now and go to WordPress
> Admin and I reload it, you'll see that
| | 02:32 | nothing has changed.
| | 02:34 | There is simple reason for this.
| | 02:35 | The taxonomy is a sorting system for a
post type, but so far if we look at our
| | 02:40 | function, we haven't assigned
this taxonomy to a post type yet.
| | 02:45 | Although the taxonomy exists, it's not
hook to anything, so we can't organize
| | 02:49 | anything based on it.
| | 02:51 | That's the next step.
| | Collapse this transcript |
| Hooking a custom taxonomy to a post type| 00:00 | With the custom taxonomy created, it's
time to attach it to some post types.
| | 00:05 | What's cool here is that you can attach
the same taxonomy to multiple different
| | 00:09 | post types so that a visitor can
get results from several different post
| | 00:13 | types when navigating
based on the taxonomy items.
| | 00:16 | Actually hooking a taxonomy to a post
type is very easy and I'll show you how.
| | 00:22 | If we look at our current function,
the registered_taxonomy function,
| | 00:25 | it says meal-type and then it says array and
it has the entire array of all the variables.
| | 00:31 | If we now simply go in right before
the array and add a post type name, so I
| | 00:36 | will call recipes and then
add a comma and save this,
| | 00:42 | we can now go to the browser, reload it,
and you will see that under Recipes we
| | 00:48 | now have the taxonomy Meal type.
| | 00:50 | You can go in and administer Meal type
| | 00:53 | taxonomy just likely would otherwise,
and you can go in and Add new recipe,
| | 00:57 | and you will see Meal type appears on
the side where you would normally see a category.
| | 01:00 | But if we go to Photos or Videos, you will
see we still don't have that taxonomy here.
| | 01:06 | So what we need to do now is instead of
adding a single post type, we will add
| | 01:11 | an array of post types.
| | 01:13 | An array is simply what you
see here. It says array(, and
| | 01:16 | then you have a list of items.
| | 01:19 | So what we can do is replace this
recipes with an array, and then inside the
| | 01:25 | array we can put our post types.
| | 01:27 | So I will say, 'recipes', and 'photos',
comma again, and finally videos.
| | 01:38 | Now it's very important here that you
retain all of these quotation marks, that
| | 01:43 | you have commas everywhere, and that
you put this in the exact order you need it,
| | 01:48 | because if you make any mistakes
here, it will take down your entire site.
| | 01:52 | It's simple to fix, but even a simple
spelling error here could cause some thing
| | 01:56 | that looks like a catastrophic failure.
| | 01:58 | I will save this, reload the page, and
you'll see the Meal type taxonomy now
| | 02:04 | appears under Recipes, Photos, and Videos.
| | 02:08 | We can also attach it to Posts, if we want to.
| | 02:11 | If you go down here you will see that
right now we have Categories and Post Tags.
| | 02:15 | If you go into our array again and
simply add post, save it, reload admin, and
| | 02:23 | you will see Meal type now
also appears under Posts.
| | 02:27 | Now you can see what happens here.
| | 02:29 | We create a simple taxonomy and then we
attach that taxonomy to the post types
| | 02:33 | we want to attach it to and
then everything automatically works.
| | 02:36 | You can also take them out again if you
don't want. For instance, I don't want
| | 02:39 | the Meal type taxonomy to be attached to
post so I will simply take it out from
| | 02:43 | my array, save it, go back
to admin and it's gone again.
| | 02:49 | So the true power here is that you have
complete, detailed control of each item
| | 02:54 | and where it appears.
| | 02:55 | With a taxonomy hooked to several
post types, we can now fully test and
| | 02:59 | populate them with content.
| | 03:01 | More importantly, we can also attach
them to new posts for easier sorting.
| | 03:06 | But this is a hierarchical taxonomy.
| | 03:08 | What happens if we want to
introduce a nonhierarchical taxonomy?
| | 03:12 | That's the next step.
| | Collapse this transcript |
| Adding advanced variables to a custom taxonomy| 00:00 | Just like with the custom post types,
when you make a basic custom taxonomy
| | 00:04 | WordPress defaults all the names to, well,
the default, so either category or tag.
| | 00:10 | You can see it here on the side.
| | 00:12 | You'll see it says Meal type at the top
here over the header, but on the bottom
| | 00:16 | it says Add New Category.
| | 00:17 | And that's kind of confusing.
| | 00:19 | It should really say, Add New Meal type, right?
| | 00:21 | Fortunately, just like with the custom
post types, we can add an array of custom
| | 00:26 | labels to our custom
taxonomy, so it makes more sense.
| | 00:30 | This is pretty much done in the exact
same way we did for the Custom Post Type,
| | 00:34 | and again I put the code into the code snippet,
so you can just copy it out and paste it in.
| | 00:38 | So let's go to code-snippets file and
you'll see under 04.04, we have this new
| | 00:44 | array, m$eal_labels = array.
| | 00:46 | We'll just copy the whole thing, go
into our posttypes.php file, find the Meal
| | 00:52 | type function and attach the
array directly over register_taxomony.
| | 00:59 | Looking at this, you'll see it's very
similar to what we did for the custom post type.
| | 01:03 | In the array, we have the name of the
post type, so Meal type and it's a bit
| | 01:07 | funny because Meal type is kind of the
same plural and singular, but we still
| | 01:11 | have to add the singular_name as well.
| | 01:13 | We also have search_items, so
you can search in meal type.
| | 01:16 | all_items, All meal types, and then
we've this function for most_used_items,
| | 01:21 | parent_items, and parent_item_colon.
| | 01:24 | These you can turn on and off if you
want to and you can see what they do.
| | 01:27 | They are quite interesting,
but they don't always apply.
| | 01:30 | And then we of course have edit, update,
add_new, add new, and menu_name.
| | 01:36 | All these things are fairly obvious what they do.
| | 01:38 | We've created the label, so now we
need to remove our label down here in our
| | 01:42 | similar_name just like
we did for the Post types.
| | 01:45 | So I'll take out the similar_name line
and under label, I'll change it to labels.
| | 01:50 | Then I'll take Meal type out and
replace it with $meal_labels, which is the
| | 01:58 | name of the array just up here and
when I save it and go back to my Admin Panel,
| | 02:04 | you'll see that it now says Add new
meal type down here, instead of just meal type.
| | 02:11 | And you'll also see, when we go to
Meal type up here, you'll see that it now
| | 02:16 | says Add new meal type up here.
| | 02:17 | It says Add new meal type on the button,
and it even says Search in meal type
| | 02:22 | rather Search bar in the side here.
| | 02:24 | This is again very simple stuff that
doesn't seem all that important, but trust me,
| | 02:28 | when people start working with this
and they didn't build it, if you don't
| | 02:32 | provide this information, they
will get very confused really fast.
| | 02:35 | And it's one of those small things,
just like when you're building a house and
| | 02:38 | you put in floorboards that makes that
final touch of professionalism, and it
| | 02:43 | makes it easier to use in general.
| | 02:45 | So always remember to put in all the
way of labels using this exact code.
| | 02:49 | And like before, if you want to get the
exact function I'm using and you don't
| | 02:53 | want to just copy and paste and hope
that you're right, you can scroll down here
| | 02:56 | to the Full function and simply copy
the whole thing, all the way from Add
| | 03:01 | custom taxonomies down to the end curly
bracket, and just paste that into your
| | 03:06 | posttypes.php file and you'll be good to go.
| | Collapse this transcript |
| Using hierarchical and nonhierarchical custom taxonomies| 00:00 | So far we've created a single custom
taxonomy called Meal type that's applied to
| | 00:05 | all three custom post types and
this taxonomy is hierarchical.
| | 00:09 | You can see it displays down here as
hierarchical => true, and when we go to
| | 00:13 | WordPress Admin, it
displays as a regular category.
| | 00:18 | But in WordPress we've two types of taxonomies.
| | 00:20 | We have the hierarchical taxonomies
like the categories, or in our case Meal
| | 00:25 | type, and we also have the
nonhierarchical ones like tags.
| | 00:28 | Now I want to introduce a
nonhierarchical taxonomy.
| | 00:33 | You would think that the simplest way
to do it would be to simply copy our Meal
| | 00:37 | type taxonomy and just paste it in
and change the labels and the name.
| | 00:41 | But that nonhierarchical taxonomy is
slightly different from the hierarchical
| | 00:46 | one and we have to do it
exactly right to make it work.
| | 00:50 | Instead of doing the copy and paste, let's go
to the code snippets and copy it from there.
| | 00:54 | You'll see under 04.05 we have the
complete stack for the Ingredients taxonomy.
| | 01:00 | So simply copy it all the
way down to the end bracket here.
| | 01:04 | Go back into posttypes.php, under my
cooking_create_taxonomies function, and the
| | 01:10 | time I'll place the new
variables inside that function.
| | 01:13 | That's because we only run one
function to create all our taxonomies.
| | 01:17 | What I mean by inside is it has to be placed
before this end curly bracket at the bottom.
| | 01:22 | So I'll create a few more lines and
then paste in my new Ingredients taxonomy.
| | 01:26 | You'll see when we read it from the top,
that it looks pretty much the same.
| | 01:30 | We have commented out
Ingredients, so I know what it is, and then we
| | 01:34 | have the name, the singular_name, search_
items and so on and so forth, all the way down.
| | 01:39 | The change happens at the bottom here.
| | 01:41 | First of all, the hierarchical is set
to false this time, which means it's a
| | 01:44 | nonhierarchical type of taxonomy.
| | 01:47 | And more importantly, down here
we've this new variable called
| | 01:50 | update_count_callback.
| | 01:52 | What this variable does is it helps
WordPress count how many items are listed
| | 01:57 | under a certain taxonomy, and
also how many taxonomies are listed.
| | 02:00 | This is extremely important if you
have a large site, because otherwise
| | 02:04 | WordPress will have a really hard time
finding all the items that are related to
| | 02:07 | a certain taxonomy, and it
will start acting really sluggish.
| | 02:10 | Simply adding this variable,
update_count_callback, with its value,
| | 02:15 | update_post_term_count, will
make all the difference here.
| | 02:19 | So you should always put it in. And this
only applies to a nonhierarchical post types.
| | 02:24 | It will work fine even if you don't
put it in, but you'll see performance
| | 02:28 | issues, which is why it's so important.
| | 02:30 | When I now save this and go back to
WordPress Admin, you'll see whereas before
| | 02:36 | we only have the Meal type on the side
here, when I reload it we have both Meal
| | 02:41 | type, which is a hierarchical or
category type taxonomy, and we also have
| | 02:46 | Ingredients which is a nonhierarchical taxonomy.
| | 02:49 | And because we added all our labels,
you'll see it says Ingredients, Separate
| | 02:53 | ingredients with commas, Choose from
the most used ingredients, and so on.
| | 02:58 | Now I just want to show you what
happens if you make a mistake here, because
| | 03:01 | it can be quite jarring and I just want to
show you that it's not as dangerous as it seems.
| | 03:06 | If I make a simple error somewhere in
this, for instance, I can take out one of
| | 03:10 | these apostrophes and I save it,
it has quite jarring consequences.
| | 03:16 | When I try to reload the page, I simply
get a server error because I've broken
| | 03:19 | the functions file in my theme, and this
is disturbing when you first experience
| | 03:24 | it, because you are like, oh my God!
| | 03:25 | I just broke the site.
| | 03:27 | The reality is you didn't break
the site; you just made a file that
| | 03:30 | WordPress can't read.
| | 03:32 | So all you have to do is reintroduce
that apostrophe, save it, reload Admin, and
| | 03:38 | you're back up and running.
| | 03:40 | The same goes if you take this entire stack
and place it outside of the curly bracket.
| | 03:44 | You'll get the same result.
| | 03:45 | So in general what I recommend is when
you're working with custom post types or
| | 03:49 | custom taxonomies, anything in the
functions file or the post types file, make
| | 03:54 | incremental changes at a time, so that
if your site tanks, then you know that it
| | 03:59 | must have happened in that last change
you did and then you can revert back to
| | 04:02 | what you had before.
| | 04:04 | That's also why I've provided you with a
complete code for all these post types,
| | 04:08 | so that you can just paste
them in and you know it works.
| | 04:11 | What I'm talking about is if you go
back to the code-snippets file and
| | 04:15 | scroll down, you'll see it says
Full function with all seven custom
| | 04:19 | taxonomies for posttypes.php:
| | 04:21 | So if you copy this from Add custom
taxonomies all the way down, and there is a
| | 04:27 | lot of code here, to the end curly
bracket, you can then go to our function and
| | 04:34 | highlight it from the curly bracket,
all the way up to where it starts, delete it,
| | 04:41 | and then paste in the code we just copied.
| | 04:45 | Save the posttypes.php file and reload
our Admin Panel and you'll see now our
| | 04:51 | Recipes have five custom taxonomies.
| | 04:54 | Meal type, Level of difficulty,
Ingredients, Preparation time, and Servings.
| | 04:58 | Photos have Meal type, Ingredients, and
Techniques, and Videos has Meal type,
| | 05:02 | Ingredients and Video types, and
all these taxonomies will then work.
| | 05:07 | This also means that if you're working
on some other project, like something
| | 05:10 | cars or skis or whatever, you can
simply take these custom taxonomies that
| | 05:15 | we've built inside our posttypes.php file,
copy them, simply change the names and labels,
| | 05:21 | and then you have your own custom
taxonomies customized specifically to your needs.
| | 05:26 | It really is as simple as
going in, changing the names.
| | 05:30 | Video type can be changed to
anything else and then it becomes a custom
| | 05:34 | taxonomy just for you.
| | 05:36 | When making nonhierarchical custom
taxonomies, it's important to remember to add
| | 05:40 | all the extra elements to avoid
database trouble down the road.
| | 05:44 | For this reason, I suggest you keep
two separate snippets of your code handy.
| | 05:48 | One for hierarchical taxonomies
and one for nonhierarchical ones.
| | 05:52 | That way you'll never forget.
| | Collapse this transcript |
| Using custom taxonomies in admin| 00:00 | When you've created new custom
taxonomies, they are administered in the exact
| | 00:04 | same way you would administer
categories or tags under posts.
| | 00:08 | So if we go in under Recipes and create
a new recipe, this is just going to be a
| | 00:12 | dummy one so I'll just call it
Dummy, and it can have some text.
| | 00:16 | It doesn't really matter.
| | 00:17 | In this recipe, I'm going to add
taxonomies for all the different elements.
| | 00:21 | So I'll go under Meal type, click
Add new meal type, and I'll say Dinner.
| | 00:27 | Click Add new meal type, and then maybe
it is a specific kind of dinner, so I'll
| | 00:31 | make a sub-category called Meat, and
then I'll assign it under Dinner category.
| | 00:37 | Now you see it appears
underneath. This is why it's called a
| | 00:42 | hierarchical taxonomy.
| | 00:44 | I'll set in the Level of difficulty.
| | 00:46 | The Level of difficulty here is Medium.
| | 00:49 | As you go along you can also collapse these
panels so that you see what's coming next.
| | 00:56 | Under Ingredients I'll say beef and onions,
and you see they appear at the bottom here.
| | 01:05 | Under preparation time I'll say 30 minutes.
| | 01:11 | Under Servings I'll say 2
and then we're good to go.
| | 01:18 | Now you noticed as I was doing this,
I can add new items whenever I want to or I
| | 01:23 | can pick existing ones, and
this becomes important later on.
| | 01:27 | So I'll publish this post and then
we can go into any of these taxonomies.
| | 01:32 | So I'll say Meal type and we can
see the taxonomies we just created.
| | 01:35 | So here under Meal type we
now have these meal types.
| | 01:39 | We have Dinner and then the sub-category Meat.
| | 01:41 | For each of these, first of all we see
the names themselves and the slug and if
| | 01:46 | there was a fescription we'd also see
the description, and we also see how many
| | 01:49 | posts are associated with
each of these categories.
| | 01:53 | Furthermore, we can do a quick edit for
each of them and just change the name quickly.
| | 01:56 | So for instance, if you spell dinner
with one n, you can go in and change it or
| | 02:01 | you can do a full edit, so you go and
click Edit and then you get a full view
| | 02:05 | and then you can add things like
"Dinner is the most important meal of the day,
| | 02:14 | except of course for
breakfast," and click Update.
| | 02:19 | Now what's cool is because this is
all dynamically handled, even if we
| | 02:26 | change the name or description or
anything, the taxonomy is still attached to
| | 02:30 | that individual item.
| | 02:31 | We'll also see this when we go into
Ingredients, which is a nonhierarchical
| | 02:36 | taxonomy, it looks almost the same,
except if we go to Edit you'll see we don't
| | 02:40 | have the option of setting a parent.
But otherwise, it's exactly the same.
| | 02:44 | You can give it a name, you can
give it a slug, you can give it a
| | 02:47 | description, you can update it.
| | 02:50 | And because some of these taxonomies
carry across multiple post types even
| | 02:54 | though we're now under Recipes and
Ingredients, if we jump down to Photos and
| | 02:58 | Ingredients we see the exact same taxonomy.
| | 03:01 | So now you see you can manage them
both from inside an individual post or you
| | 03:06 | can manage them on your own, and you
can do a lot of work on your taxonomies to
| | 03:11 | really beef them out and
make them work really well.
| | 03:14 | Adding custom taxonomies to your
custom post types makes them extremely
| | 03:18 | powerful. Understanding how to use the
custom taxonomies and manage them makes
| | 03:22 | you extremely powerful in managing your site.
| | Collapse this transcript |
|
|
5. Populating Custom Post TypesPopulating content into the custom post types| 00:00 | So far in the course we've created
three new custom post types with associated
| | 00:04 | custom taxonomies. Now it's time to
populate these post types and taxonomies
| | 00:09 | with some actual real content so that
we have something to work with once we
| | 00:13 | start working on the front end of the site.
| | 00:15 | In this movie, I will show you how to
populate some photos and recipes and I
| | 00:19 | will also show you how to import
content that's been pre-built by us, if you
| | 00:24 | have access to the full set of exercise files.
| | 00:27 | If you don't have access to the exercise
files, it doesn't really matter all that much.
| | 00:31 | All you really need here is some text
content and some images that we can put
| | 00:35 | in, so we have something to work with.
| | 00:36 | So let's start off with the recipe.
| | 00:38 | I will go to Recipes and click Add new
recipe and then I will go to my assets,
| | 00:44 | because I already have
some recipes pre-built here.
| | 00:47 | So I go under Assets > text and here we
have a bunch of different text. I will
| | 00:52 | pick one of them, artichoke_recipe, and
I will copy the title, paste it into the
| | 00:59 | title, and then I will
copy the rest of the text.
| | 01:05 | Because I copied this out of Microsoft
Word, I need to paste it in in a way
| | 01:09 | that it doesn't bring with it all this
extra styling content from Microsoft Word.
| | 01:13 | And there's a tool for that inside WordPress.
| | 01:16 | If you look at your toolbar here, you
should see either one line of buttons or
| | 01:19 | two lines of buttons.
| | 01:20 | If you only see one, you can click on
this button at the end here that says
| | 01:24 | Show/Hide Kitchen Sink and then it
will hide or show the bottom buttons.
| | 01:28 | You need these second row
buttons here to do this.
| | 01:32 | On here, you have this button called
Paste as Plain Text and if you click it,
| | 01:36 | it opens a new window in which you can
paste in your plain text, and then click
| | 01:40 | Insert and it will be
inserted without any style content.
| | 01:44 | Now we need to do some very quick
editing of this text, just take out the extra spaces.
| | 01:49 | I will change the ingredients to
H2, so Heading 2, I will change each of
| | 01:55 | the ingredients to a list item.
| | 01:57 | So I'll just use a regular bullet list
and then again some more plain text editing.
| | 02:02 | I will change that to H2 too and then
I will change each of the steps to an
| | 02:07 | actual numbered list. Then I
have to take out the numbers.
| | 02:10 | And this kind of stuff seems tedious
and unnecessary, but the reality is when
| | 02:16 | you do it, you end up with
a far more readable text.
| | 02:22 | If you think ahead about what you're
doing and you actually make things more
| | 02:27 | readable, for instance by creating
real numbered lists, rather than just writing
| | 02:32 | out the numbers, it will become
easier for people to read it later.
| | 02:35 | It will also become easier for search
engines to understand what you're trying to do.
| | 02:39 | So here you see we have a sub-item.
| | 02:42 | So if I click on these Indent
button, we'll get a sub-tem.
| | 02:46 | It says A. The basic text editing tool
in WordPress really provides you with all
| | 02:52 | the same kind of text editing tools
that you would expect from a full text editor;
| | 02:56 | the only difference is it
will happen inside WordPress itself.
| | 03:00 | So now we have a complete text, the
next thing we need to do is fill out
| | 03:04 | all these taxonomies.
| | 03:06 | So we will start with Meal type.
| | 03:08 | Steamed Artichoke sounds
to me like an appetizer.
| | 03:11 | I will click on Add new meal type and
add Appetizer and click Add new meal type.
| | 03:18 | So now we have the Appetizer meal type.
| | 03:21 | Level of difficulty? This seems pretty
easy to me, so I will say Easy and add
| | 03:28 | that as a difficulty level.
| | 03:32 | Under Ingredients, we'll
simply type out all the ingredients.
| | 03:35 | Artichokes, garlic (cloves).
| | 03:43 | And you see how I add commas after each of them.
| | 03:45 | That means they're stacked
as individual ingredients.
| | 03:48 | You can also click Add for each
individual one, but it takes more time.
| | 03:54 | The comma approach is much easier.
| | 03:58 | Once I have added all the ingredients,
I can go to Preparation time and I am
| | 04:04 | guessing this is going to take about 15
minutes and it will probably serve about 4 people.
| | 04:16 | Finally, I want to add an image, so I
will go to the very beginning of the post
| | 04:21 | and click the Add an Image button and
then upload an image from my assets.
| | 04:27 | So I will go to Exercise Files >
Assets and photos and here I find some
| | 04:31 | images of artichokes.
| | 04:33 | So I will pick one that looks about
right, upload it, and then I will give the
| | 04:38 | image the same title and same
alternate text as the title of the post itself
| | 04:43 | or the title of the recipe and it's
always very important to add the alternate text.
| | 04:47 | Even though it doesn't have a star
next to it, it should have a star next to it.
| | 04:51 | Now that the image is uploaded and has
both the title and an alternate text,
| | 04:56 | I am going to float it to the right, put it in
as the medium size, and click Insert into Post.
| | 05:02 | So now you see the image appears along with
the rest of the text and I am ready to publish.
| | 05:09 | So I will click Publish and then
we can go and click View recipe.
| | 05:14 | We can see now we have our
complete post with an image.
| | 05:22 | I am going to do one last thing.
| | 05:24 | I am going to put a little split in here.
| | 05:26 | So at the end of the first paragraph,
I will use this button here that's
| | 05:29 | called Insert More Tag.
| | 05:31 | All this does is it will add lines, so
that if you are on an index page you only
| | 05:35 | see what's above the line and not all the text.
| | 05:37 | It just makes it easier to read the index pages.
| | 05:39 | We'll update it again and we're done.
| | 05:43 | The next step is to create a photo.
| | 05:45 | The idea with the photos post type is
to create a place where you only showcase
| | 05:49 | photos of different items and you can
also show multiple different photos of
| | 05:53 | the same type of item.
| | 05:55 | So I will create a new photo here and
I will call it artichokes and then I'll
| | 06:00 | just add some photos.
| | 06:02 | I will add this photo, just a big bowl
of artichokes, and I will just call it
| | 06:10 | that artichokes, set the Alternate Text
as the same thing, and I will set this
| | 06:15 | to Full Size, Center, and Insert into Post.
| | 06:21 | Then I will add the Insert More Tag so
that it breaks and underneath. I want to
| | 06:27 | add a third image, only this time I
will add it from my existing library
| | 06:31 | because I already uploaded
this photo to another post.
| | 06:34 | So instead of going and uploading it
again, I am going to go to my Media Library
| | 06:38 | here and here I'll see a list of all
the images that are in the system and here
| | 06:43 | we have that Steamed Artichokes
with Creamy Garlic Aioli Sauce image.
| | 06:47 | So I will click on Show and then
Center, Full Size, Insert into Post.
| | 06:52 | Now I see that the last
image landed in the wrong place.
| | 06:57 | So rather than doing a cut and paste
from inside the Design view here, I am
| | 07:01 | going to go to my HTML view,
and cut and paste it from here.
| | 07:04 | That way I know that I carry
with me all the information I need.
| | 07:07 | So I'll go and look at the code and I
should copy it from the beginning A
| | 07:14 | tag till the end A tag.
| | 07:15 | So if I simply cut that out and paste
it into bottom. Go back to Visual.
| | 07:23 | You'lll see we now have the right image at the
top and then the two other images at the bottom.
| | 07:26 | Finally, I need to add it as Meal type,
and since this is the appetizer, I can
| | 07:32 | check it as an Appetizer too, and
then the Ingredient is Artichoke.
| | 07:37 | Now, because we've already added
artichokes as a tag or as an ingredient, when I
| | 07:41 | start typing it, WordPress will suggest
matching types, because you don't want
| | 07:47 | to add tons of different
versions of the same word.
| | 07:49 | So instead of adding a new one, I am
going to pick the old one and click Add.
| | 07:55 | And then finally, we're talking about
photographic techniques, so I will call
| | 07:58 | this one Lightbox and add the technique.
| | 08:05 | Now, I can publish this post and again
I can click View photo, and here you
| | 08:12 | will see we have all the three photos of the
artichoke displayed under the photo post type.
| | 08:18 | So far we've created one recipe and
one photo, but you need a lot more
| | 08:22 | information. Therefore, I have
compiled content for your site.
| | 08:26 | So if you have access to your exercise
files, instead of doing all this work,
| | 08:30 | you can just import existing content instead.
| | 08:32 | So if you collapsed everything and you go
down on the menu bar, you will see it says Tools.
| | 08:37 | If you open Tools, there
is a function called Import.
| | 08:41 | Click on Import and you get to the
Import screen, and here we have a list of
| | 08:45 | different platforms from
which we can import content.
| | 08:48 | Now, we want to import from WordPress,
so I will select WordPress, but because
| | 08:52 | we've never done this before, I have to
install the WordPress Content Importer.
| | 08:58 | It automatically opens the plugin
installation window and I simply install it.
| | 09:03 | And now WordPress will let me import.
| | 09:06 | So I will click Activate Plugin & Run
Importer and now I can start importing content.
| | 09:11 | However, because my import file also
contains some images, we're going to move
| | 09:15 | the images into our site before we do
the import so that they're already there.
| | 09:20 | So I'll go down to my Assets again,
click in Assets, and you will see there's a
| | 09:27 | folder called uploads and if you go
into your WordPress installation and you go
| | 09:33 | into wp-content, you'll see there's a
matching folder called uploads here too.
| | 09:38 | So what I am going to do
is merge these two folders.
| | 09:40 | I will simply drag it over from my
Assets and copy it in and when we open it
| | 09:46 | now you will see that we have a
new folder with lots of extra images.
| | 09:51 | These images will be called by the file
we're going to import, which you can see
| | 09:54 | here it's called culinaryartistryContent.
| | 09:57 | So now we can go back to WordPress,
choose the file culinaryartistryContent, and
| | 10:05 | click Upload file and import.
| | 10:08 | We need to assign an author to it, so
I'll just assign myself, and you have to
| | 10:11 | also check this Download and import file
attachments so that WordPress knows to
| | 10:15 | look for those images we
just dumped into the folder.
| | 10:18 | When you click Submit, WordPress will
run through all the contents and import
| | 10:24 | all the content and put it into right places.
| | 10:26 | When it's done, it will simply give you
a message like this All done. Have fun!
| | 10:30 | And if you're now going to post
recipes or photos, you will see we have more
| | 10:34 | content than we did before, and we can
go and view any of these items and if
| | 10:40 | everything worked, you should see
not only the text but also images.
| | 10:44 | Populating a custom post type is no
different from creating a regular post or page.
| | 10:48 | All you do is fill out the information
in the Admin Panel and your custom post
| | 10:52 | is created for the world to see.
| | Collapse this transcript |
| Uploading videos to YouTube| 00:00 | It may seem like a bit of a departure
to start talking about YouTube in the
| | 00:04 | middle of a WordPress course, and it is,
but online video is becoming hugely
| | 00:09 | important and a lot of people want to post
videos on the web and feature them in their sites.
| | 00:14 | Our demo site is no different.
| | 00:16 | We have a custom post type
specifically for videos, so we want to actually host
| | 00:20 | videos in that custom post type.
| | 00:22 | So what I am going to do is show you how
to host videos online and showcase them
| | 00:27 | on your portfolio site.
| | 00:29 | The benefit of hosting your videos
to YouTube is that they reach a much
| | 00:32 | larger audience than if they were just on
your website alone, and that YouTube is free.
| | 00:38 | If you want more information about
YouTube, you can check out the YouTube
| | 00:41 | Essential Training course on lynda.com.
| | 00:44 | The first step to uploading video on
YouTube is of course to set up an account
| | 00:48 | and then log into that account.
| | 00:50 | I've already done here, so I can
jump straight to the upload process.
| | 00:53 | So I will click on this Upload
button here and then upload the video.
| | 00:58 | So I'll navigate under my Assets and
videos to this one with a bread in it,
| | 01:03 | click Open, and then I
have to give video a title.
| | 01:05 | So I will call it Pizza Primavera,
and I'll put in a description text.
| | 01:20 | For YouTube videos it's
always a good idea to tag them.
| | 01:24 | So I will Tag this one pizza,
food, photography, and lynda.
| | 01:31 | And I will put it under a
category. Howto & Style.
| | 01:36 | Make sure it's Public so people
can see it and publish it under the
| | 01:39 | Standard YouTube License.
| | 01:42 | When I save these changes, the video
goes public and I can now go and watch it.
| | 01:45 | So I will just follow this link up here,
and here's my video live to the world.
| | 01:57 | Now that the video is live on YouTube,
I can see it, other people can see it,
| | 02:01 | and more importantly you can take the
video that lives on YouTube and embed
| | 02:05 | it into your own site.
| | 02:07 | YouTube prides itself on being free,
open to everyone and supported on
| | 02:11 | devices big and small.
| | 02:12 | As a result, if your video is on YouTube,
people can watch it on their computer,
| | 02:17 | their phone, or even their
television, and that's great for you!
| | Collapse this transcript |
| Embedding YouTube videos in a custom post type| 00:00 | One of the huge benefits of hosting
your videos on a site like YouTube or Vimeo
| | 00:04 | is that they make it easy to
place the videos on your own site.
| | 00:08 | We have created a custom post type for
our videos and now it's time to put some
| | 00:11 | videos up on the site in
these custom post types.
| | 00:14 | The newer versions of WordPress come
with video embedding support built-in,
| | 00:19 | making it easier than ever to place
videos from YouTube and other video sharing
| | 00:23 | sites right on your pages.
| | 00:25 | All you have to do is grab the URL and
WordPress will do the rest of the work for you.
| | 00:30 | As you can see here, we have
the video we upload previously.
| | 00:32 | So I am just going to grab the clean
URL for this video, copy it, and now I can
| | 00:41 | go into my Dashboard under Videos, click
Add new video, call it Pizza Primavera,
| | 00:53 | and then go under HTML and
simply paste in the URL to the video.
| | 00:59 | Now of course, I have to add a Meal type.
| | 01:01 | So I will add Dinner. Ingredients, I will
just say pizza crust, tomatoes, and cheese.
| | 01:13 | And then I have to pick a
Video type, so I will say Showcase.
| | 01:17 | When I publish this post now,
WordPress will take that YouTube link and
| | 01:23 | automatically convert it
into a live video on your site.
| | 01:26 | So if you click on View video and
everything worked right, you'll see the
| | 01:32 | title of the post and then the video underneath.
When we click Play, it will play in our site.
| | 01:41 | That's really easy, but
sometimes you want a little more control.
| | 01:45 | For instance, you may want to control
the size of this video. Because right now
| | 01:49 | this size of the video is controlled
by WordPress itself, or rather if we go
| | 01:54 | into Settings at the bottom here and
select Media, you see that we can set the
| | 02:00 | Width and Height of videos that are embedded.
| | 02:03 | Then what we want to do is
control the video size exactly.
| | 02:06 | So I will go back to Videos and
open my Pizza Primavera video.
| | 02:12 | Then I will go to YouTube, scroll down,
and under Share you will find the embed
| | 02:18 | code and here you have the complete embed code.
| | 02:21 | You can set a bunch of settings here.
You can use HTTPS, you can pick different
| | 02:26 | sizes, or you can set a custom size.
| | 02:28 | So I am going to set the custom
size Width to 300 pixels, and then it
| | 02:32 | automatically sets the Height to 198, and
you see those changes change up here as well.
| | 02:36 | So now I can copy this iframe code out,
go back to my edit page, and replace that
| | 02:43 | URL with the code YouTube gave to it.
| | 02:47 | When I update it now and go back to my
page, you will see we have a much smaller
| | 02:53 | video that still works the same way.
| | 02:55 | So now you have two ways of uploading
videos from YouTube and this technique
| | 03:02 | generally works for everything else as well.
| | 03:04 | You should be able to do it using
either YouTube, Vimeo, or any of other major
| | 03:08 | sites and for the most part, WordPress
will actually recognize the URL for the
| | 03:13 | video itself and automatically embed it for you.
| | 03:15 | It's one of those trial and error things.
| | 03:17 | Try it with the a new site, see if it
works. I it doesn't, you can just go and
| | 03:20 | grab the embed code, paste
it in, and you're good to go.
| | 03:23 | Well, of course, everyone doesn't have
videos lying around they want to publish
| | 03:27 | to YouTube and use, and if you want to
experiment with this on your own, we've
| | 03:32 | uploaded three videos on
YouTube for you to experiment with.
| | 03:35 | You can find them if you
go to YouTube and go to
| | 03:39 | youtube.com/lyndaculinarydemo, and here
you have access to all the three videos.
| | 03:45 | You can either watch them from in here
or you can select one and then click on
| | 03:50 | a trip to the market, for example, and
then it goes directly to the page where
| | 03:55 | you can get the embed code or
you can just get the URL directly.
| | 03:59 | So now you can experiment with
embedding videos into your site and creating
| | 04:04 | multiple different pages with different
videos, text, and images, all bundled together.
| | 04:09 | With your videos hosted on YouTube or
another video hosting site and using the
| | 04:13 | latest version of WordPress,
publishing videos on your site is as easy as
| | 04:17 | cutting and pasting a URL.
| | 04:19 | That means one less headache for you
and more time to make more videos.
| | Collapse this transcript |
| Uploading videos to WordPress| 00:00 | Now you know how to upload videos to
YouTube and other video sharing sites and
| | 00:04 | then embed it into your site.
| | 00:06 | But what if you don't want to
use one of these sharing sites?
| | 00:09 | There can be many reasons for that.
| | 00:11 | Maybe you just want more control or maybe you
don't like what those sites do to your videos.
| | 00:16 | If that's the case, you can upload
your videos directly to your site as well.
| | 00:21 | However, there are some big
caveats that come with it.
| | 00:23 | Most importantly, that if you put
a video on your website then you're
| | 00:28 | responsible for feeding it out to the
world, meaning if a lot of people are
| | 00:31 | watching the video at the same time,
it will be very taxing on your server
| | 00:35 | and it might first of all reduce performance
and the second of all cost you a lot of money.
| | 00:41 | But if you're okay with that and
you're well aware and informed about the
| | 00:44 | catches, I'll show you how to do it.
| | 00:47 | If we go to Videos, we can click
Add new video and create a new video.
| | 00:52 | So I'll say Locally hosted video.
| | 00:57 | Here on the Upload/Insert bar next to
Images there is one that says Add video.
| | 01:03 | From here you can theoretically upload videos.
| | 01:06 | However, what you will often see is
this: Maximum upload file size and then
| | 01:12 | a really low number.
| | 01:13 | The default for BitNami and most of these
locally hosted systems is around 2 to 8 MB.
| | 01:19 | And you very rarely find a server that
will allow you to upload more than 8 MB.
| | 01:23 | But that can be changed in one of several ways.
| | 01:27 | If you access to the PHP installation
yourself, then you can manually change it.
| | 01:32 | And I'll show you how to
do that in just one second.
| | 01:34 | If you don't have access to that, you
may have access to your file called .HTaccess
| | 01:39 | where you can set new
values for, for instance upload size.
| | 01:43 | If you want to do that, you need to
contact your host and ask them how to do it
| | 01:48 | or go to their website, because this varies
greatly depending on where your site is hosted.
| | 01:52 | But like I said, if you have
access to your php installation you can
| | 01:57 | change this manually.
| | 01:59 | So I'll go to where BitNami is
installed on my computer and here I find PHP.
| | 02:05 | Now this will vary if you're not
using AMP, if you're using WAMP or MAMP.
| | 02:09 | It will be located in a different place, but
you will find PHP somewhere on your computer.
| | 02:14 | Under the php folder there
is a file called php.ini.
| | 02:18 | This is the configuration file for php.
| | 02:21 | So I will open this in a text editor
and then I'll go searching for two values.
| | 02:27 | The first one is called post_max_size
and not surprisingly it defines the
| | 02:36 | max size of a post.
| | 02:38 | It's down here and you see it's set to 2 MB.
| | 02:40 | So I'll set this one to 20 MB instead.
| | 02:43 | The next value I need to change
is called upload_max_filesize.
| | 02:48 | And I will change that one to 20 MB as well.
| | 02:52 | By making these two changes we are now
telling php to allow not only an upload
| | 02:57 | of a file up to 20 MB in size, but
also the posting of a complete post that's
| | 03:03 | up to 20 MB in size.
| | 03:04 | I'll now save this file, but if I go
directly back to WordPress and just reload
| | 03:12 | this Upload video function,
you will see it still says 2MB.
| | 03:17 | That's because we need a
configuration change to PHP.
| | 03:20 | So we need to restart PHP to make
that configuration setting kick in.
| | 03:25 | If you're using BitNami, you can do
this restart from your task panel here.
| | 03:30 | If you're using WAMP or MAMP,
it's the exact same thing.
| | 03:33 | You just find how to stop and start it.
| | 03:36 | So first I'll stop BitNami and then
I will go back and start it again.
| | 03:44 | If you're on a WAMP server you'll
simply stop and start your server.
| | 03:50 | Now that BitNami has been stopped and
started, I can reload this one more time
| | 03:56 | and the Maximum upload size is now
20 MB, which means I can upload my file.
| | 04:01 | I'll just simply go Select
Files and upload the file I want.
| | 04:05 | Of course, this was on my
computer, so it took about a second.
| | 04:10 | But if you're doing this on a server,
it will take quite a bit more time.
| | 04:13 | But here's a problem, if I simply now go
and say Insert into Post, all WordPress
| | 04:19 | does is put in a link to my video.
| | 04:22 | That's not what I want.
| | 04:23 | I want to actually display the video.
| | 04:25 | So I am going to save this as a draft
and now I am going to install the plug-in
| | 04:30 | that will help me show the video in my site.
| | 04:33 | So I'll go to Plugins, Add New plugin,
and I'll search for a plugin called video.js.
| | 04:42 | There are lots of plug-ins available that
will allow you to embed videos into your site.
| | 04:47 | The reason why I want to use the
video.js plug-in is because, like the title
| | 04:51 | says, it's an HTML5 video player for WordPress.
| | 04:55 | What that means is you can upload
proper HTML5 videos to your site.
| | 05:01 | That doesn't necessarily make a lot
of sense to you unless you really know
| | 05:04 | what HTML5 video is all about, but the
core issue here is if you upload a video
| | 05:09 | to your site, you don't know if a
browser or mobile phone or tablet will
| | 05:13 | actually accept it.
| | 05:14 | HTML5 video will help you get
to full support for all devices.
| | 05:20 | If you want to know more about HTML5
video, you should go check out the HTML5
| | 05:25 | Video and Audio In Depth course by
Steve Heffernan, who happens to be the person
| | 05:29 | who created this plugin.
| | 05:30 | So I will video.js and activate it in
and now I can go back to my videos, go to
| | 05:42 | Edit, and make a change to the embed code.
| | 05:46 | In your snippets file you'll find the
complete embed code for a video of the type mp4.
| | 05:53 | So I will copy that and paste in it and
then I'll copy the URL to the video we
| | 05:59 | just uploaded and paste it in here.
| | 06:02 | Take note that here I am actually
defining what kind of video this is as well.
| | 06:07 | This as an mp4 video, but if you're
using a different type of video file, you
| | 06:11 | need to use a different prefix, and
I'll show you how to find out what those
| | 06:14 | prefixes are in a second.
| | 06:16 | But for now, I've defined it's an mp4 video.
| | 06:19 | Here is the URL to the video.
| | 06:21 | It preloads and this is the width and height.
| | 06:25 | Publish this and view the video,
you will see it appears here inside my
| | 06:32 | post and we can play it.
| | 06:34 | (Music playing)
| | 06:40 | Now this video.js plug-in adds a lot
of extra features, like for example we
| | 06:45 | can go full-screen and it has audio
controls and a scrollbar and all the stuff we need.
| | 06:52 | So it's very similar to what we got
with YouTube, except this is now hosted
| | 06:56 | locally on our computer.
| | 06:58 | I said that the video I uploaded was
an mp4 video and that if you're using a
| | 07:02 | different type of video you have
to use a different prefix here.
| | 07:06 | If you want to know those prefixes,
you can go back to Plugins, go to VideoJS,
| | 07:12 | and find the Visit plugin site.
| | 07:15 | And here you can get all the
documentation you need to get started.
| | 07:19 | The easiest way for you is to go to
WordPress plugin here and just navigate to it
| | 07:24 | and under Installation you
have code examples from everything.
| | 07:29 | Here you have mp4, Ogg, webM, and so on.
| | 07:34 | If you don't want to host your
videos on YouTube, Vimeo or one of the
| | 07:37 | other excellent free video hosting services,
you can host them natively within WordPress.
| | 07:42 | However, if you upload video to
WordPress you have to remember to add a plug-in
| | 07:47 | to manage your video player and you
also have to remember that this puts a huge
| | 07:52 | load on your server, so you have to make
sure you have enough capacity to handle it.
| | 07:56 | Otherwise, your site will simply go
down and that's not what you want.
| | Collapse this transcript |
|
|
6. Creating Single Custom Post Type PagesCreating custom post type templates| 00:00 | At this point we've created three new
custom post types with their respective
| | 00:04 | custom taxonomies and we populated those
custom post types with different types of content.
| | 00:10 | But what's the point of having custom
post types with types of content if we
| | 00:15 | don't display them differently
depending on what content is there?
| | 00:17 | For example, if we are going to
display the content, shouldn't we also be
| | 00:22 | displaying the custom taxonomy
information for each of them?
| | 00:25 | This can be done very easily using a
feature in WordPress that allows us to
| | 00:29 | create custom templates
for each custom post type.
| | 00:34 | By default, when you run WordPress and
you open a post, let's say for instance
| | 00:38 | the Pizza Primavera post, WordPress
will use the standard single post template,
| | 00:43 | the same one that's used when
you open a regular blog post.
| | 00:47 | But if we create a new file, we can
target the recipes post type exclusively,
| | 00:53 | and create a template
that's only used for the recipes.
| | 00:57 | To show you how this works I am going to
open this Pizza Primavera and I am also
| | 01:01 | going to open one of my photos.
| | 01:06 | As you see right now the photos and
the Pizza Primavera story both look
| | 01:14 | pretty much the same. They have the same
elements in them and they have the same layout.
| | 01:18 | What I am going to do now is create
a new template that only targets the
| | 01:22 | recipes, so this Pizza Primavera story.
| | 01:25 | I will go into my code editor and
under cooking I will create a new file and
| | 01:31 | call it single-recipes.
| | 01:38 | In this file I need to put in some
dummy content, so I will say echo "I am
| | 01:43 | the template file that displays Recipes",
end the line, and then end my php delimiter.
| | 01:52 | When I save this and go reload the At
the Market photo page, nothing happens.
| | 02:00 | Everything is normal.
| | 02:01 | But when I reload the Pizza Primavera
page which lives under the recipes custom
| | 02:06 | post type, we now only see "I am the
template file that displays Recipes."
| | 02:12 | That's because we are now using that
custom template file and it doesn't have
| | 02:15 | any other content than that line of text.
| | 02:18 | This is the core way of targeting a
specific custom post type for single templates.
| | 02:23 | However, when you are creating a child
theme from something like the twentyten theme
| | 02:28 | or the twentyeleven theme you have to do a
bit more, and I will show you why.
| | 02:33 | If we go to the twentyeleven theme and
we scroll down to the file that calls
| | 02:37 | up single post templates, the one
that's called single.php, you will see that
| | 02:43 | inside this file there is a call down
here on line 23 that says get_template_part.
| | 02:49 | This is where the whole loop is going
to appear, but instead of having a loop
| | 02:53 | inside the single.php file, it's
instead calling a different file within the
| | 02:58 | template that's called content-single
and if we scroll up, you will see that
| | 03:05 | here's the file called content-single.
| | 03:07 | There are also a lot of other content files.
| | 03:11 | We have content-aside, content-featured,
content-gallery, image, intro, link,
| | 03:16 | page, quote, single, and status as well
as one file that's just called content.
| | 03:22 | This is done to make it easy for people
who manage the site to target specific
| | 03:27 | loops rather than the entire page.
| | 03:30 | So the page template here displays the
header with the title and everything and
| | 03:34 | displays the footer and then all we are
changing is the loop in the middle that
| | 03:38 | actually displays the content for that page.
| | 03:42 | So if you want to make a different
loop and you only want it to appear for a
| | 03:47 | custom post type and you are using
twentyeleven as your parent theme, rather
| | 03:51 | than creating the single-recipes file
you would create the content-recipes file.
| | 03:58 | But it's not that simple. We still have
to make one more change, because as you
| | 04:03 | can see it says get_
template_part content and single.
| | 04:06 | What we needed to do is go test for what
custom post type we are using right here.
| | 04:12 | So what I am going to do is grab all
the content from the single.php file
| | 04:17 | found under twentyeleven, I'll copy it,
then I will go to cooking, create a
| | 04:23 | new file, call it single.php.
| | 04:27 | This file will now override the parent
theme, sngle.php, and then I will paste in
| | 04:34 | all the content from the original
single.php and go in here where it says
| | 04:39 | get_template_part and take out
single and replace it with a function that
| | 04:44 | returns the name of the
current custom post type.
| | 04:48 | That function is get_post_type.
| | 04:54 | If I now save this,
| | 04:59 | delete the single-recipes file, and
instead create a new file that I call
| | 05:07 | content-recipes and within it echo a
new message, "I am the content template
| | 05:21 | for Recipes," end it,
| | 05:25 | and end that, when I now reload the
single page for the Primavera Pizza, which
| | 05:30 | is under the recipes content type, and
we will now see the general layout but
| | 05:38 | instead of the loop we just have this text,
"I am the content template for Recipes."
| | 05:43 | I will go back to my theme, find the
parent theme, in this case twentyeleven, and
| | 05:51 | find the appropriate content template.
| | 05:53 | In this case it's the one
that's called content-single.
| | 05:54 | So I'll open this file, highlight
all the content and copy it, go into my
| | 06:01 | content-recipes file, and replace the
dummy content with what I just copied.
| | 06:07 | Just to make sure that we are still
getting this template and not something else,
| | 06:11 | I will put in a small
little div here and just say "I am the
| | 06:17 | content-recipes.php file."
| | 06:22 | I will save this and when we reload
this page we should see that new comment I
| | 06:29 | added plus the actual
content for the recipe. And we do.
| | 06:34 | "I am the content-recipes.php file"
and here we have the entire recipe.
| | 06:38 | That means we are now at a point
where we are working with a template that
| | 06:43 | targets just the recipes content for
single pages and we can now make changes
| | 06:48 | and add the stuff we need to add.
| | Collapse this transcript |
| Adding taxonomy info to the custom post type template| 00:01 | Looking at the output from your custom
single post type template, you see that
| | 00:05 | there are some vital parts
missing, namely the taxonomies.
| | 00:08 | If you look at the regular post
templates by going Home, you'll see that the
| | 00:14 | categories are listed.
| | 00:15 | But in our custom post template for
the recipes, no categories are listed
| | 00:19 | because the categories aren't there and
we're not calling the custom taxonomies.
| | 00:24 | To make the custom taxonomies show up, we
need to add them manually to our template.
| | 00:29 | This operation requires a special
WordPress function, one that's a bit wonky.
| | 00:33 | So you need to be extra careful
about getting the code exactly right.
| | 00:37 | So let's take a look at this
content-recipes file that we created.
| | 00:42 | First of all, we can take out the
comments I put in, just to make sure we're
| | 00:45 | using the right file, because we
know we're using the right file.
| | 00:49 | Secondly, let's take a
look at what this file does.
| | 00:53 | At the very beginning, it displays a
header that has the title of the post and
| | 00:57 | then it has this if statement.
| | 01:00 | It says if ('post' == get_post_
type), so this is kind of backwards.
| | 01:04 | It's actually saying, if the get_post_
type, so the current post type is post,
| | 01:09 | then display the div class entry-meta,
and then the posted_on information.
| | 01:14 | If you go back and open a single post,
you'll see that at the very top it says
| | 01:21 | Posted on August 27, 2011.
| | 01:22 | That's the posted on
information it's talking about.
| | 01:26 | And you'll also see that in
our single recipe template it's not displayed.
| | 01:31 | That's because we have
this conditional statement.
| | 01:33 | If the post type is post, then display this.
| | 01:36 | Otherwise, don't display it.
| | 01:38 | So what we want to do is take the if
statement out, so that it always displays a date.
| | 01:44 | I'll save that and test it,
so I'll just reload the page.
| | 01:50 | And now that it displays the date, we
can replace the date with the custom
| | 01:54 | taxonomy information.
| | 01:56 | So first, we'll comment out the date, so
that we have it for later if we need it.
| | 02:02 | And then underneath here, we'll
put the custom taxonomy information.
| | 02:06 | But how do we do that?
| | 02:07 | Well, if we go to the code snippets,
you'll find the complete code batch for this.
| | 02:12 | You'll see I also changed the
div class ever so slightly to
| | 02:16 | say entry-meta-custom.
| | 02:17 | And you'll see why in a bit.
| | 02:19 | But let's first just copy these
divs that list Meal type, Servings,
| | 02:24 | Difficulty, and Ingredients.
| | 02:26 | So I'll just highlight this
code, copy it, and paste it in.
| | 02:30 | And then I'll explain what's going on here.
| | 02:32 | And what we're displaying here is the
text "Meal type" and then we're asking
| | 02:37 | WordPress get the term list.
| | 02:40 | The term list is the list of
terms under a specific taxonomy.
| | 02:45 | Terms are the different items under a taxonomy.
| | 02:47 | So if we have the taxonomy Meal type
and something is listed under dinner and
| | 02:52 | appetizer, then those two things,
dinner and appetizer, would be terms and
| | 02:57 | those would be listed.
| | 02:59 | In the function, we have to provide the
current post ID, which is this $post->ID.
| | 03:04 | We also have to provide what
taxonomy we want to return information from.
| | 03:09 | In this case, the meal-type.
| | 03:09 | And then we have these extra values and
I'll show you what they are in a second.
| | 03:14 | But first, let's just test
this to make sure it works.
| | 03:17 | So I'll save it and reload the page.
| | 03:20 | And here you see we have Meal type Dinner,
Servings 2-4, and that is really hard
| | 03:26 | to read because it's behind the Edit.
| | 03:27 | And it's not really
displaying the way we want it to.
| | 03:30 | Ideally, I want all this content to display
underneath Pizza Primavera, not on top of it.
| | 03:36 | So I need to make a small change.
| | 03:38 | And that change is a style change.
| | 03:41 | The reason why it's displaying like this
right now, you'll see when we go back to the code.
| | 03:45 | You see we're still using
this div class entry-meta.
| | 03:48 | And apparently, the entry-meta
automatically sets an absolute position to the very top.
| | 03:53 | So what we want to do is change this to
a different style class and then create
| | 03:58 | a new style that places
it where we want it to be.
| | 04:01 | First, I'll attach a new style here.
I'll say instead of entry-meta I'll
| | 04:05 | call it entry-meta-custom and I'll also change
my comments where it ends to entry-meta-custom.
| | 04:13 | I'll save it, just to test.
| | 04:17 | And now the information appears
underneath the title where it's supposed to, but
| | 04:21 | the styling is all wrong, or
rather right now there is no styling.
| | 04:25 | That's because I had created a new selector.
| | 04:27 | So now I need to create
styles that match that selector.
| | 04:30 | But rather than creating it from scratch,
I'm going to go see what the original
| | 04:34 | style is for that selector and then
just copy it and create a new one.
| | 04:38 | So I'll go back to my code editor,
find the twentyeleven theme, and find the
| | 04:43 | style sheet in the
twentyeleven theme, which is right here.
| | 04:46 | I'm looking for class entry-meta,
so I'll search for .entry-meta.
| | 04:57 | It's probably defined several different
places, but I need to find the one that
| | 05:01 | has the actual style information about the size.
| | 05:06 | So I'll keep going until I
find what I'm looking for.
| | 05:11 | And here it is, entry-meta.
| | 05:13 | color, clear, font-size, and line-height.
| | 05:16 | And it also has this underneath
entry-meta a, font-weight: bold.
| | 05:20 | And if you look at the browser, you'll see
that the font is bolded when it's a link.
| | 05:27 | So that's what we want.
| | 05:28 | So what I'm going to do is go in here
and copy this code from the original style sheet
| | 05:34 | and I'll just close it so
I don't make any changes to it.
| | 05:38 | Then I'll go back to cooking>styles,
and this is my new style sheet, which is
| | 05:45 | appended after the old style sheet, because you
can see the old style sheet is called up here.
| | 05:50 | So any style I add further
down will be added afterwards.
| | 05:54 | I'll paste in these styles and
then I'll change the selector to
| | 05:58 | entry-meta-custom and entry-meta-custom a,
save it, go back to Pizza Primavera.
| | 06:09 | This is what it looked like before.
| | 06:11 | Reload it and now the styles are applied.
| | 06:14 | So now we have a custom page template
that not only displays the content we want,
| | 06:19 | but also displays all the taxonomy
information about that content so that
| | 06:24 | the person who visits the site can now
navigate to other dinner items or other
| | 06:29 | things that are under Servings 2-4
with a Medium difficulty, or even things
| | 06:34 | that have the same
ingredients, as we did before.
| | 06:37 | This is the whole point of having
custom taxonomies and custom post types.
| | 06:41 | We now have the ability to give the
visitor extra information about our content.
| | 06:45 | Now there's one small thing left.
| | 06:48 | Remember I said that the code is a
little bit odd for this function,
| | 06:52 | get_the_term_list and then is says
$post->ID, 'meal-type', '', ', ', ''?
| | 07:00 | It looks odd, right?
| | 07:01 | It's because this function, get_the_term_list,
allows you to append information
| | 07:09 | before and after the items.
| | 07:11 | The way it's structured is it says,
post ID, taxonomy ID, and then it says
| | 07:18 | before all the items, in between each
item, which is this case is comma, space,
| | 07:23 | and then it says after all the items.
| | 07:26 | We can use this to create
list items if we want to.
| | 07:29 | So for instance, if we want this
ingredients to be an actual unordered list,
| | 07:34 | I can start it by saying, starting an
unordered list, that's the beginning,
| | 07:38 | and end it at the end </ul>.
| | 07:42 | And then I can go in and say, it starts
off with an <li> to start a list item.
| | 07:49 | That's before the whole list starts.
| | 07:51 | Then in between each item, there should
be an end </li>, and then the beginning
| | 07:57 | of the next, and then the
entire list ends with an end </li>.
| | 08:03 | When I save this and we go back and
reload the page, you'll see that now all of
| | 08:09 | these items display in the list.
| | 08:11 | Of course, this is not very functional
for this particular way of displaying
| | 08:15 | things in this layout.
| | 08:17 | But you can see that by using the
same function, you can control how the
| | 08:22 | information is displayed, either
separated by commas, separated by bars,
| | 08:27 | separated by a dash, or created into a list.
| | 08:32 | But of course this is
not what we actually want.
| | 08:35 | So I'll go back to my code snippets and
just copy out the entire batch to make
| | 08:40 | sure everything is exactly the way I want it to.
| | 08:45 | And I'll go in here, highlight the whole
batch, paste in what I just copied out,
| | 08:52 | save it, reload the page to test,
and we're back where we want to be.
| | 08:59 | By adding taxonomy lists in the
single view of your custom post type posts,
| | 09:03 | you provide your visitors with valuable
information about how individual posts
| | 09:07 | are categorized and also the ability to navigate
to other posts filed under the same taxonomies.
| | Collapse this transcript |
| Creating conditional custom taxonomy links| 00:00 | One of the great things about working
with computers is that you can give them
| | 00:03 | conditional statements or if/then
instructions and have them do different
| | 00:08 | things depending on what info they are provided.
| | 00:10 | This is much used in web code because
it gives designers and developers the
| | 00:14 | ability to display different content
depending on either what the browser is
| | 00:18 | displaying or what the user does with it.
| | 00:20 | In our case we can use conditional
statements to display taxonomy links only
| | 00:25 | if they're actually populated so we don't
end up with something like the text :Meal type::
| | 00:29 | with no links next to it.
| | 00:32 | To do this we're first going to ask the
server, if there are any taxonomy terms
| | 00:36 | available before we
actually try to display them.
| | 00:39 | If you've been paying really close
attention, you may have noticed that there is
| | 00:43 | one taxonomy item missing on this list.
| | 00:45 | We have Meal type, Servings, Difficulty,
and Ingredients, but we're missing that
| | 00:49 | item that was called preparation time.
| | 00:52 | So let's add the Preparation time but
make it conditional depending on whether
| | 00:57 | or not a preparation time is actually entered.
| | 01:00 | So I'll go back to my file and first
I'll just add the standard code. I'll just
| | 01:06 | copy the first list and paste
back in, then I'll make two changes.
| | 01:11 | I'll change the title to Preparation
time and then I'll go and ask for the time
| | 01:19 | taxonomy rather than Meal type.
| | 01:21 | If I test this in the browser you
should see it now says Meal type and then
| | 01:26 | Preparation time and then Servings.
| | 01:28 | But if we go into Pizza Primavera from
behind the scenes and under Edit take out
| | 01:36 | the Preparation time and save it,
| | 01:44 | when we reload the page we'll now get
Preparation time with no information.
| | 01:48 | That just doesn't look right.
| | 01:50 | So we need to add that conditional statement in.
| | 01:52 | So what we're going to do now is use
that same function, get_the_term_list, and
| | 01:58 | then tell WordPress to test whether or
not get_the_term_list actually returns
| | 02:02 | anything before we create the output.
| | 02:05 | So I'll start right before the div, add
a new line, and then I'll start with a
| | 02:11 | PHP delimiter, and I'll make an if
statement. So I'll say if (), then I'll say
| | 02:16 | get_the_term_list, and it's still going
to be the list from $post->ID and I'm
| | 02:29 | looking for the time term, so it will be 'time'.
| | 02:33 | And what we're saying is if this does
not return, so exclamation point means not
| | 02:41 | and equals means equal, so if this,
the term is not equals null, which means
| | 02:48 | nothing, then display what's underneath.
| | 02:53 | So I'll tab that in one so it's easier to read.
| | 02:56 | And then we'll end the if statement with
another PHP delimiter and I'll just end
| | 03:01 | the curly bracket. So again what
happens here is WordPress is asked if
| | 03:05 | get_the_term_list return something
other than nothing then display this.
| | 03:11 | However, if it does return nothing do nothing.
| | 03:14 | If I save this and reload the page, and
you'll remember right now it's empty,
| | 03:20 | we now get nothing.
| | 03:21 | So it says Meal type, Servings. But if
we go back and enter a Preparation time,
| | 03:29 | and save it and then reload the
page again, Preparation time appears.
| | 03:35 | Now that you see how well it works
you're probably thinking the exact same thing
| | 03:39 | I was when I built this.
| | 03:41 | This conditional statement should really
be applied to all my custom taxonomies,
| | 03:45 | just in case I forget to fill some out.
| | 03:48 | So that's what I did in the code-snippets file.
| | 03:49 | So if you go to the code-snippets file
you'll find the entire stack of taxonomy
| | 03:55 | displays with conditional statements
for every single one. So we can copy this,
| | 04:00 | go back and paste it in, and now after
saving it and reloading the page, because
| | 04:09 | all the taxonomies are filled out the
old display, but if we go in and take one out,
| | 04:14 | for instance Meal type, and update
it you'll see that rather than displaying
| | 04:21 | meal type and the nothing,
Meal type just as disappears.
| | 04:24 | Subtle but important, and it brings
in that extra level of professionalism.
| | 04:29 | Using simple conditional statements
we can use more consistent and less
| | 04:33 | confusing output on our pages.
| | 04:35 | The seemingly simple addition of a
condition that prevents empty taxonomies from
| | 04:39 | being displayed can be powerful
because it helps avoid confusion and the
| | 04:43 | perception of an error for the visitor.
| | Collapse this transcript |
| Handling multiple post type templates: Individual templates| 00:00 | WordPress allows you to create
individual custom post type templates for each of
| | 00:04 | your custom post types.
| | 00:06 | This means you can fully customize
the way each of them is displayed.
| | 00:09 | However, it also means if several of
your custom post types are supposed to look
| | 00:14 | the same, you have to
create several identical files.
| | 00:17 | Though this is easy if you have just one
or two, it can become hard to manage if
| | 00:21 | you have several
different post types to deal with.
| | 00:23 | For example, if you make a change in one
file, you then have to make a change in
| | 00:27 | all the other ones so they all stay the same.
| | 00:30 | There are many ways to deal with this.
| | 00:32 | And in this course, I'll show
you three different methods.
| | 00:35 | The first one is to deal with each
individual post type as its own template.
| | 00:41 | If we look at the content we've
created so far, we have recipes, photos, and
| | 00:48 | videos, and then on the
side we have the regular posts.
| | 00:50 | When we look at the recipes, we've
already created a custom post type template
| | 00:55 | that displays our custom taxonomies.
| | 00:58 | But inside photos and videos, we
still don't see those custom taxonomies.
| | 01:04 | And more importantly, the photos and the
videos have different taxonomies from the recipes.
| | 01:09 | So we're going to make new custom post type
templates for these two other custom post types.
| | 01:15 | We'll start off with photos.
| | 01:17 | I want to add the custom taxonomies to
the template, but I also want to display
| | 01:21 | it at the bottom instead of the top,
because I want to keep the photos in focus.
| | 01:26 | So let's start off by opening the
content-recipes file that we already created
| | 01:31 | and simply re-saving it under a different name.
| | 01:34 | So I'll save it as content-photos.
| | 01:39 | Now this template file should
apply to the photos post type.
| | 01:43 | So I'll simply go back to my browser
and reload the photos page and you see
| | 01:49 | we've added the custom
taxonomy information at the top.
| | 01:52 | And of course, now that our custom
taxonomy information is conditional, it only
| | 01:56 | displays what's available. Because you remember,
| | 01:59 | the photos custom post type only
has three custom taxonomies attached:
| | 02:04 | Meal type, Ingredients, and Techniques.
| | 02:07 | So what we need to do now is display
the techniques and then move all the
| | 02:11 | taxonomy information to the bottom.
| | 02:14 | So I'll start off by going in and
taking out what I don't need, so I'll delete
| | 02:18 | Preparation time, Servings, and Difficulty.
| | 02:23 | Then I'll copy one of the existing
taxonomies because I'm lazy, so I don't want
| | 02:28 | to type all of it again.
| | 02:29 | I'll copy the first one and paste it in
directly underneath and then I'll make a
| | 02:33 | change to the top one.
| | 02:34 | So instead of testing for meal
type, I'll test for techniques.
| | 02:42 | I'll change the title to Technique and
I'll display techniques taxonomy terms.
| | 02:51 | If I save this, reload my browser,
Technique appears at the top here.
| | 02:59 | The next step is to move this down
to the bottom underneath the contents.
| | 03:04 | To do that, I'll go ahead and look at my
code and find out where the content displays.
| | 03:09 | Fortunately, WordPress has a fairly
semantic setup when it comes to functions,
| | 03:13 | so it's easy to find things.
| | 03:15 | For example, when I'm looking for the
content, I can find this function called
| | 03:19 | the content, which is what inserts the content.
| | 03:23 | That means I need to take all this
information up here and move it down
| | 03:27 | underneath the content somewhere.
| | 03:29 | So I'll simply cut it out and I'll
delete the call to this div, because I
| | 03:33 | don't need it anymore.
| | 03:35 | And then I'll scroll down and see
where I can put my custom taxonomy
| | 03:38 | information in a logical place.
| | 03:40 | The logical place is right here,
footer class entry-meta, because it's the
| | 03:45 | same thing as before.
| | 03:46 | So I'll simply add a new line under
there and paste my information in.
| | 03:51 | Tab it in just to make it look nice and save it.
| | 03:55 | When I reload my page, the taxonomy
information disappeared from the top and
| | 04:00 | instead appears on the bottom here.
| | 04:02 | All that's left for me to do now is to
add a small space between Ingredients and
| | 04:07 | the information underneath,
so that it looks better.
| | 04:09 | So I'll go back into my code
editor and simply add a break.
| | 04:18 | When I reload the page, we now have
the custom taxonomy information, a break,
| | 04:23 | and then the rest of the
information about the post.
| | 04:26 | Exactly what I wanted.
| | 04:27 | Just to make sure I didn't mess
anything else up, I'll now go back my recipes
| | 04:32 | and just reload the page.
| | 04:34 | And as we can see, everything stays the
same, which means we're not working with
| | 04:37 | two different templates.
| | 04:38 | So now we have the recipes templates and
the photos template and we finally have
| | 04:42 | to add the videos template.
| | 04:44 | So I'll go back into my code editor,
re-save this file under a different
| | 04:49 | name, content-videos,
| | 04:54 | and then all I have to do is change
the Technique call to video-types.
| | 04:58 | So I'll go in and test for video-types
first. Change the title to video-types.
| | 05:07 | I will display the terms
from the video-types taxonomy.
| | 05:16 | Save it, go to my video post, reload it,
and now you see underneath the video,
| | 05:24 | we have the Video type, Meal
type, and Ingredients displayed.
| | 05:28 | And just to make sure I didn't mess
anything up, I'll go check my photos again.
| | 05:33 | It still displays Technique,
Meal type, and Ingredients.
| | 05:36 | And my recipes still display Meal
type, Preparation time, Servings,
| | 05:42 | Difficulty, and Ingredients.
| | 05:43 | We've now created three separate custom
post type templates that adhere to each
| | 05:48 | individual custom post type.
| | 05:51 | This is the simplest way of doing it and
if you have different custom post types
| | 05:55 | that have very different content, this
is the right way to do it because then
| | 05:58 | you can create custom templates
that adhere to that type of content.
| | 06:02 | However, in many cases like ours, the
differences are very subtle and it would
| | 06:07 | be easier if we just had one file that
would then handle everything and then we
| | 06:11 | could just point to that file.
| | 06:14 | That's the second method we're going to look at.
| | 06:16 | And just a note, in the rest of this
course, after we've gone through these
| | 06:20 | three methods, I'm going to
be using the third method.
| | 06:22 | So you should go look at that one as well.
| | Collapse this transcript |
| Handling multiple post type templates: Consolidating everything in one file| 00:00 | In the last movie, we created three
custom posts type templates, one for each of
| | 00:04 | our custom posts types.
| | 00:06 | However, as you can see, most of the
content in each of our custom posts type
| | 00:10 | templates is exactly the same.
| | 00:12 | The only thing that really changes is
where the taxonomy information appears and
| | 00:16 | the conditional statements around it.
| | 00:18 | So wouldn't it make more sense to make
just one file that had all the template
| | 00:23 | information and then just reference
that file from outside, so that it applies
| | 00:27 | to each of the custom posts types?
| | 00:29 | That would mean we had one file
that we could edit, rather than three.
| | 00:32 | So that's what we're going to do.
| | 00:35 | Just so there is no confusion, I've
reset the theme back to where it was at the
| | 00:39 | end of the third movie of this chapter.
| | 00:42 | That means we only have one file here called
content-recipes, and the other ones are gone.
| | 00:47 | So we'll start off by opening that
file and resave it as custom-content.php.
| | 00:57 | The reason I'm resaving it is just so I
don't have to copy and paste it over.
| | 01:01 | I could just as easily have created a new
file called custom-content.php and then
| | 01:05 | copied all the content over.
| | 01:07 | Now the custom-content.php
contains all our template information,
| | 01:12 | I'm going to go in and change content-
recipes.php by taking out all the template
| | 01:18 | information and replace it with a
simple call to custom-content.php.
| | 01:24 | This is the exact same technique we
used to create our abstraction layer in the
| | 01:28 | theme for our custom posts types file.
| | 01:30 | However, I'm going to use a WordPress
function to call in the content, because
| | 01:34 | it's easier to manage.
| | 01:36 | The function was called get_template_part.
| | 01:40 | In it we just add the variable of the
name of the content we want to call in.
| | 01:45 | So I'll say custom-content and
you don't need to add the .php here.
| | 01:51 | This custom-content tells
WordPress to look for a file that's called
| | 01:55 | custom-content, which is exactly what we want.
| | 01:57 | So now I'll add a semicolon at the
end to end the line and then save it.
| | 02:03 | If everything works properly now,
the recipes page just exactly the same.
| | 02:07 | So if I reload it, we're seeing the
same content, the only difference is we
| | 02:12 | are now not seeing the template files
from content-recipes; we're seeing it
| | 02:16 | from custom-content.
| | 02:18 | Likewise, if I reload for instance the
photo page, there should be no change.
| | 02:23 | I'm sure you've already
figured out what the next step is.
| | 02:26 | All I need to do now to apply the custom-
content template to photos is to resave
| | 02:32 | content-recipes as content-photos.
| | 02:34 | So I'll go and rename it. And I'll do
the same for videos. So I'll just resave
| | 02:42 | it again, content-videos.
| | 02:49 | So now we have three files, photos,
recipes, and videos, that all point to one
| | 02:54 | file, custom-content.
| | 02:57 | And when I reload my Photos page now,
we'll see the custom taxonomy information
| | 03:03 | appear at the top, and the
same thing happens with videos.
| | 03:07 | That means my single target file works.
Now I need to change my template so
| | 03:11 | that it displays the content
I want in the place I want.
| | 03:14 | For instance, all this taxonomy
information should only appear on recipes.
| | 03:20 | It should not appear on photos or videos.
| | 03:22 | So I'm going to go into custom-content
and add a new conditional statement that
| | 03:28 | tests whether or not the current post
type is recipes, and then displays the
| | 03:33 | taxonomy information only if that's the case.
| | 03:36 | So I'll go down to where the entry-
meta-custom starts and I'll add a new
| | 03:41 | conditional statement at the top here.
| | 03:43 | The conditional statement is a regular
if statement, so I'll say if and then
| | 03:48 | I'll ask WordPress, what is
the current custom post type?
| | 03:50 | So I'll say get_post_type and then if
it equals, so two equal signs, recipes,
| | 04:01 | then run everything underneath.
| | 04:04 | And then I just remember to end my
conditional statement at the very bottom
| | 04:08 | underneath the end of the div.
| | 04:11 | So I'll add the end bracket here. When
I now save this, WordPress will test to
| | 04:17 | see if the post_type is recipes and if
so, it will display all of this content.
| | 04:22 | Going back to the browser and
reloading the recipe nothing has changed, but
| | 04:27 | if you reload a photos page or a videos page,
the taxonomy information no longer displays.
| | 04:35 | Now that we've done that, we can add the
taxonomy information for the photos and
| | 04:40 | the videos where we want it.
| | 04:43 | Because this requires a bit of extra
code, I've created a code snippet for you.
| | 04:47 | So if you scroll down to footer entry-
meta and then go into our code snippets,
| | 04:52 | you'll find here at the bottom
the footer class code snippets.
| | 04:57 | So if you copy this and you paste it
in right here starting with the footer
| | 05:04 | class, I'll explain to you what happens.
| | 05:07 | This stack is exactly as the one before,
except we're testing for two types of posts.
| | 05:13 | So it says if get the post_type
equals photos or get the post_type equals videos--
| | 05:20 | These two pipes is how you'd
say Or. A pipe by the way is created by
| | 05:25 | hitting Shift+Backslash on
your US English keyboard.
| | 05:28 | If I save my template again and
reload Videos page, we'll now see the video
| | 05:35 | taxonomy information appear at the bottom.
| | 05:39 | Likewise, if I reload the photos page,
we'll see the photos taxonomy information
| | 05:45 | appear at the bottom and the
Recipes page shows no change.
| | 05:50 | By using conditional statements in a
smart way and placing all my content in
| | 05:55 | one central location, it makes it
easier for me later to make sweeping changes
| | 06:00 | to the entire site.
| | 06:01 | Of course, this only applies if all
your templates are roughly the same.
| | 06:06 | In my case, that is the case,
so I'm going to stick with it.
| | 06:09 | But we can take this one step
further and make it even easier to manage.
| | 06:13 | And that's what I'll address in the
next movie, and what I address in the next
| | 06:17 | movie is going to be what's used
for the rest of the course as well.
| | Collapse this transcript |
| Handling multiple post type templates: Making custom post types the default| 00:00 | If you've been following along, for the
last two movies we've been talking about
| | 00:03 | how to handle multiple
custom post type templates.
| | 00:07 | In the first method, we created separate
template files for each of the custom post types.
| | 00:13 | In the second one, we created one
centralized file that contained conditional
| | 00:17 | statements that tested which
custom post type was being called.
| | 00:21 | And then we used simple custom post type
template files to call that one singular file.
| | 00:26 | Now we're going to take that to its final
extreme and turn the entire website on its head.
| | 00:32 | And I'll show you how that's done.
| | 00:35 | The problem with the approach we did
in the last movie was that we ended up
| | 00:39 | with three files called content-
recipes.php, content-videos.php, and
| | 00:45 | content-photos.php that only did one
thing. They all pointed to a third movie
| | 00:49 | called custom-content.
| | 00:51 | As a result, we have four different
files that all do almost the same thing.
| | 00:56 | It's kind of cluttered and it also fills up
your theme with extra files that you don't need.
| | 01:01 | The reason why we had to do it like
that is because we needed to pick up each
| | 01:05 | individual custom post type and
point them to the right location.
| | 01:09 | However, there is another way of doing
this, but you have to kind of turn your
| | 01:12 | thinking upside down.
| | 01:13 | What I mean by that is there's a
fourth custom post type that we're dealing
| | 01:18 | with that we haven't really talked about much.
| | 01:20 | It's the one that's just called post.
| | 01:22 | It's not really a custom post type because
it's the default, but still it is a post type.
| | 01:27 | The reason why we've been creating
these content-recipes, content-photos, and
| | 01:31 | constant-videos is because by default,
WordPress will always fall back on the
| | 01:37 | one that's just called content.
| | 01:39 | And the one that's just called
content applies to the content posts.
| | 01:44 | So what if we then instead of having
the posts be the default content on our site,
| | 01:50 | make our custom post types the
default and make posts a special case?
| | 01:56 | We can do that and it actually
solves our problem very efficiently.
| | 02:01 | So the first thing I'm going to do is create a
new file that I'm going to call content-post.
| | 02:05 | content-post will target the posts, so not
the recipes, not the photos, not the videos.
| | 02:20 | just the regular posts in the site.
| | 02:22 | Inside content-post, I need to put the
content that would normally appear for posts.
| | 02:28 | So I'll go into my 2011 theme,
scroll down until I find the file that's
| | 02:32 | called content-single.
| | 02:33 | I'll open that, highlight all the code,
copy it, I'll close this so I don't make
| | 02:40 | any mistakes, and then just
paste it into content-post.
| | 02:45 | Just to make sure that I have the
right template now, I'll put in a little
| | 02:48 | comment here and then I can
test a single post in my site.
| | 03:01 | You see that that comment appears,
"This is the content-post.php file," which
| | 03:05 | means it works for single posts.
| | 03:08 | And if I go back to my recipes,
you see it does not appear.
| | 03:12 | So we're still where we want to be. The
only that's changed is that we've made
| | 03:16 | posts into a custom post type.
| | 03:18 | That in turn means if we now change
content-recipes to just content, this
| | 03:26 | template should now be applied
to all our custom post types.
| | 03:31 | So I'll close it and I'll go into my
theme, find content-recipes, and just
| | 03:39 | rename it to content.
| | 03:43 | Now when I reload my recipe, I'm seeing
the content file and I know that because
| | 03:49 | if I reload a photo, I see
the custom taxonomy information.
| | 03:54 | So now I'll refresh this cooking
folder so we can see what's there now and
| | 04:00 | you'll see that instead
of having the four files,
| | 04:02 | content-recipes, content-photos, content-
videos, and custom-content, we only have two:
| | 04:09 | content-posts and just content.
| | 04:12 | And now we can apply those same
conditional statements we did in the previous
| | 04:16 | movie into our file, content,
and apply it in the same way.
| | 04:20 | So I'll open content, go to my Code
Snippets, and find the first conditional
| | 04:26 | statement, the one that tests for
whether or not this is the recipes post type,
| | 04:31 | I will go back, find my entry-meta-
custom and delete what's already in
| | 04:40 | content.php, and paste in what's
in my code snippets. I'll save it.
| | 04:45 | So this is the recipes page
and we should see no change.
| | 04:51 | And I'll also test it for a photos page.
| | 04:56 | And here we should see that
the custom taxonomies are gone.
| | 05:01 | And then I'll scroll down to find the
footer entry-meta, go back to my code
| | 05:06 | snippets, grab all the code all the way
up to footer entry-meta, copy that, and
| | 05:15 | replace this line, save it again, go
back to a photo, reload it, scroll down to
| | 05:23 | the bottom, and we now see
the custom taxonomy information.
| | 05:27 | The same should have
happened for videos down here.
| | 05:32 | And just to be sure,
the recipes should stay the same.
| | 05:36 | With this, we have turned
our WordPress site on its head.
| | 05:42 | Now posts are handled as custom post
types, at least in the templates, using
| | 05:47 | this contents-post file, whereas older
custom post types are handled as default
| | 05:53 | content in this content.php file.
| | 05:56 | It's a subtle change, but it makes it
so that we only have two files to deal
| | 06:00 | with and it's very clear
what files do which operation.
| | 06:04 | I'm going to use this approach
throughout the rest of this course and also apply
| | 06:08 | it to index pages, as
you'll see while we move forward.
| | Collapse this transcript |
|
|
7. Creating Custom Post Type and Taxonomy Index PagesCreating an index page for a custom post type| 00:00 | Now that you've created and populated
three custom post types complete with
| | 00:04 | custom taxonomies and custom post
templates, you probably think there's an
| | 00:08 | index page much like the standard reverse
chronological blog page waiting for you somewhere.
| | 00:14 | Sadly, that's not the case.
| | 00:16 | This is one of those mysteries WordPress
serves up and I have no explanation for you.
| | 00:21 | To get an index page for your custom post
type, you have to create a template yourself.
| | 00:26 | Don't ask me why.
That's just the way it is.
| | 00:28 | The good thing is it's really easy to do.
| | 00:31 | It's basically just a
matter of naming the files right.
| | 00:34 | So right now, although we have the
recipes in our site and we can see them,
| | 00:39 | the user who visits the site
has no way of accessing them.
| | 00:42 | So what we need to do is create an index page
for our recipes and our photos and our videos.
| | 00:48 | We're going to do that by creating a
new file called archive- and then the
| | 00:53 | name of the post type.
| | 00:55 | The good thing is all themes
come equipped with index pages.
| | 00:59 | They are not surprisingly named index.
| | 01:01 | So we can go and find the index
page in 2011, open it, copy out all the
| | 01:07 | contents, and make ourselves an index page
for the custom post type in our child theme.
| | 01:12 | However, that index page
should have a specific name.
| | 01:15 | So I'll create a new file and call it
archive-, and then the post type, so
| | 01:22 | in this case, recipes.
| | 01:26 | Now I can paste in the content from the
index page and I should technically have
| | 01:30 | a completely functional
index page for my archives.
| | 01:33 | However, I'm going to make a couple of small
changes to this, before we get to that point.
| | 01:38 | First of all, you remember way back when
we created single.php that by default
| | 01:43 | 2011 always calls for post formats.
| | 01:46 | We want it to call for post types, so
that it gets the template part for the
| | 01:50 | post types when we use them.
| | 01:52 | So I'm going to change this get_
template_part( 'content', get_post_format() ) to
| | 01:57 | get_template_part( 'content', get_
post_type() ), and I'll save it.
| | 02:04 | This means that now when WordPress
opens the index page for recipes, it'll go
| | 02:09 | looking for a file called content-
recipes, which is what we created before.
| | 02:15 | Or rather it'll find this singular file
called content.php and use that to display it.
| | 02:21 | So we're now reusing the
same files for multiple things.
| | 02:25 | Now I can save archive recipes, go to
WordPress Admin and then I have to reset
| | 02:31 | the permalink structure for WordPress.
| | 02:33 | The permalinks are controlled all the way at
the bottom here under Settings > Permalinks.
| | 02:38 | A permalink is the actual link to the items.
| | 02:42 | By default, WordPress has set it to
just ?p= something, or in the case of our
| | 02:47 | custom post types,
?recipes or ?photos, and so on.
| | 02:52 | What we want to do is reset
this to something readable.
| | 02:55 | So I'll select Custom Structure and
then say forward slash, because that's what
| | 03:00 | it starts with, %category%/%post.name%,
and forward slash again.
| | 03:11 | This just creates a structure, where
it will say localhost/wordpress/recipes/
| | 03:17 | and then name of the recipe.
| | 03:18 | So I'll click Save Changes and now we
have a new permalink structure, so now we
| | 03:24 | can call our recipe index.
| | 03:26 | So I'll go over here to
WordPress and say recipes.
| | 03:31 | Now this is what's going to
happen the first time you do it.
| | 03:34 | You'll get a message saying something
like "this is somewhat embarrassing" or
| | 03:37 | "error" or something like that.
| | 03:39 | That's simply because we need
WordPress to rewrite its own archives.
| | 03:43 | So I'll go back and save the change to
the permalink settings one more time.
| | 03:49 | And now when I reload the same index
page again, we get the index for recipes.
| | 03:54 | Don't ask me why it's like that.
| | 03:58 | It's just the way it is and you
have to deal with it that way.
| | 04:01 | And now you see we have a
complete index for our recipes:
| | 04:04 | Pizza Primavera, Jalapeno Jelly,
Garlic Bruschetta, and so on.
| | 04:11 | But as you can see, it's not fully
completed yet because we can't click on the
| | 04:15 | title and I always like
to make the title a link.
| | 04:18 | The reason why we can't click on the
title is if we go back to our file, you
| | 04:22 | see we are calling this content.php file.
| | 04:26 | And if we open content.php, you'll
see that the call for the title right
| | 04:30 | here has no link to it.
| | 04:33 | We can solve this in two ways.
| | 04:35 | We could either now go in and create
a conditional statement that tests for
| | 04:38 | whether or not this is an archive page,
and if it is, it'll display the title as
| | 04:43 | a link, or we can create a new
file, which is what I'm going to.
| | 04:47 | So I'm going to re-save this file as
content-archive because then I can make
| | 04:56 | other changes to my archive pages.
| | 04:59 | So first, I'll go in and
change this h1 to add a link.
| | 05:03 | So I'll go to my code snippets and find
the h1 entry title block and I'll copy
| | 05:08 | the whole thing out, go back, and
replace what's already here with the new
| | 05:14 | one, and I'll save that.
| | 05:16 | And then I also want to go back into
archive-recipes and add another block of
| | 05:21 | text here, so that I can display what kind
of post content I'm currently looking at.
| | 05:28 | So I'll paste that little block of code
here and all this does is it adds a new header
| | 05:34 | that says what post type name this post type is.
| | 05:38 | Finally, I have to make one
more change, because right now the
| | 05:41 | get_template_part function calls for
content, but I created a new file here
| | 05:45 | called content-archive.
| | 05:46 | So I'm going to change this to content-
archive and then delete the rest of the
| | 05:52 | line because we don't need the get
_post_type anymore, and save it.
| | 05:58 | If I now reload my index page, we get
the name of the post type at the top,
| | 06:04 | we get the index, and for each
of the titles we now have a link.
| | 06:09 | Now that we have an index page for
recipes, we need to create another index page
| | 06:13 | for photos and one for videos.
| | 06:15 | And this is where those techniques I was
talking about in the previous chapter come in.
| | 06:19 | We now have three different methods
| | 06:20 | we can use to create index
pages for these post types.
| | 06:24 | Because I built archive-recipes to
be generic, and by that I mean at the
| | 06:29 | beginning here rather than displaying
the full text recipes it's displaying
| | 06:33 | the current post type,
| | 06:34 | we can reuse this exact file
to target photos and videos.
| | 06:39 | We can do that either by re-saving
this file two more times, calling it
| | 06:43 | archive-photos, then archive-videos,
or we can create a new file called
| | 06:52 | archive-photos, that just
references archive-recipes.
| | 07:07 | And then we can also re-
save this as archive-videos.
| | 07:15 | Now when I go back to my site and
instead of recipes call photos, we see the
| | 07:23 | same kind of index page, only now
it says PHOTOS at the top and we have
| | 07:27 | Artichokes, The Beauty of Food, and so on.
| | 07:31 | And we even have the custom taxonomy
information at the bottom rather than at the top.
| | 07:35 | Same goes for videos.
| | 07:40 | So by using the techniques we've
already learned about how to manage multiple
| | 07:44 | custom post type templates and
applying it to how to create archives or index
| | 07:50 | pages for custom post types,
| | 07:52 | we've now created a set of new files
that reference each other and display
| | 07:56 | custom index pages for each of our custom
post types, using very easy to read URLs.
| | 08:02 | Creating these custom post type
index pages is actually quite easy.
| | 08:06 | You just have to know how to do it.
| | 08:08 | And now you do.
| | Collapse this transcript |
| Creating a custom taxonomy index page| 00:00 | By default when you click on a custom
taxonomy link, WordPress will use the
| | 00:04 | index.php template to display the output.
| | 00:07 | If you want to customize the index
view for a taxonomy, you need to create a
| | 00:11 | custom taxonomy template.
| | 00:13 | Like with the custom posts type indexes,
this is a simple matter of creating
| | 00:17 | a new file called taxonomy.php, and
populating it with the contents you want to use.
| | 00:23 | Before we create the file, let me
just show you what I am talking about.
| | 00:26 | If I go to any of my posts and I click
on one of the custom taxonomy terms, I
| | 00:31 | will be taken to a general index for that term.
| | 00:35 | As you can see, we are now under the meal
-type custom taxonomy and I am looking
| | 00:39 | at everything that's
filed under the term dinner.
| | 00:42 | The problem is by default the
title of this page is Blog Archives.
| | 00:46 | It's hardly a blog archive.
| | 00:48 | And in addition, each of these polls
types, though they come from different
| | 00:52 | kinds of custom post types,
just display the same.
| | 00:56 | What I want to do is change the Blog
Archive's title to something more fitting
| | 00:59 | like filed under: and then the
actual term, and also add the description
| | 01:05 | for each of the terms, because
sometimes you can add a description to a term.
| | 01:09 | And I want each of these posts to also
display what kind of post type it is, so
| | 01:15 | that people know that this is a video,
this is a photo, and this is a recipe.
| | 01:20 | But first thing's first. We need to
create the new taxonomy template.
| | 01:24 | I will go to my code editor and here we
already have this archive-recipes file
| | 01:30 | that we created before, which is
the index file for archive recipes.
| | 01:34 | I am going to use this as the base
and just make some subtle changes to it.
| | 01:38 | So I will simply take the file
and save it under a different name.
| | 01:42 | So I will change the name to taxonomy.php
and now if I make any changes, those
| | 01:50 | changes will only apply to the taxonomy index.
| | 01:54 | Here, I can make a change to
the title of the page itself.
| | 01:58 | You remember, this one says the name of
the post type, but now I want to display
| | 02:03 | filed under: and then the name of the term.
| | 02:06 | So I will go to my code snippets and
here at the very top you find a new h1
| | 02:11 | class page-title that we can copy
and paste it in place of the old one.
| | 02:18 | This one if we read it says Filed
Under and then it inserts single_cat_title,
| | 02:25 | which is the title for the
current category or the term.
| | 02:29 | So in our case, because we had dinner
open, it should now say Filed Under Dinner.
| | 02:34 | I will save the taxonomy.php file, go
back to my browser and reload this page.
| | 02:42 | And now it says Filed Under
Dinner at the very top here.
| | 02:46 | That's exactly what I wanted.
| | 02:47 | The next step is to add
the category description.
| | 02:50 | Now, if you go to WordPress Admin
and you open one of your taxonomies, you
| | 02:55 | will see that in addition to a title you
can also give each taxonomy term a description.
| | 03:00 | I have given Dinner a description here.
| | 03:02 | It just says "Dinner is the most
important meal of the day except of course for
| | 03:05 | breakfast," and I want that to
display directly under the term itself.
| | 03:10 | So I will go back to my code snippets
and I will copy out this batch of code.
| | 03:15 | It starts with the php
delimiter ends with the php delimiter.
| | 03:17 | So I will copy that and place it
directly after the h1, before the header ends.
| | 03:29 | This batch of code looks for the
category description and then says if the
| | 03:35 | category description is not empty,
meaning if there is a category description,
| | 03:40 | then display the category description.
| | 03:42 | So I can save this, reload the page in
my browser, and now you see in addition
| | 03:50 | to saying Filed Under Dinner,
| | 03:51 | it also says "Dinner is the most
important meal of the day, except of course for
| | 03:55 | breakfast," and this text will change
if you add descriptions to other terms.
| | 04:00 | Finally, I want to change the loop so
that inside the loop we display the post
| | 04:06 | type under each of the post titles.
| | 04:09 | We can do this in a couple of different ways.
| | 04:12 | We can approach it the same way we did
previously by now creating a new file
| | 04:15 | called contents-taxonomy
and then call it that way.
| | 04:20 | However, in our case, with the
taxonomies, all the taxonomy displays are
| | 04:24 | going to be the same.
| | 04:25 | Therefore, it's not necessary to have
this external file we are going to call in.
| | 04:29 | So instead, I am going to go to
concert-archive, which already has all the
| | 04:33 | content I need. I am going to
highlight all of that content and copy it.
| | 04:37 | Then I am going to go back to taxonomy.
php, find where content-archive is called.
| | 04:43 | It's right here.
| | 04:45 | Display the call to that item and
instead paste in the code itself.
| | 04:52 | Now I have a complete file and
taxonomy.php contains all the template
| | 04:57 | information for this display.
| | 05:00 | That also means I can make changes to
it without disturbing the content display
| | 05:05 | for regular index pages.
| | 05:06 | So now, because I want to add type of post
underneath the title, I first need to find the title.
| | 05:15 | It's right here, entry-title.
| | 05:18 | And then I can add the code to
display the current post type
| | 05:22 | directly underneath.
| | 05:23 | So I will go back to the code snippets
and get the final batch of code, and
| | 05:28 | I will copy it first and then
I will explain it afterwards.
| | 05:33 | So I will paste it in and then I
will explain what happens here.
| | 05:37 | Of course, first it says post_type:
| | 05:41 | and that it spells out what's going on.
| | 05:43 | Now, I had to make a custom function to
bring out the post type name, because it
| | 05:48 | doesn't do that by default.
| | 05:49 | So this is a simple function that
first creates a new object, which is called
| | 05:54 | object, and then in that object I put
in the current post type object, and I
| | 06:00 | display the singular_name of that object.
| | 06:04 | This is highly technical, but the end result
is exactly what we need, which is why it works.
| | 06:10 | If I save this now and reload my page,
you will see under each of these posts
| | 06:18 | we now have post type and
then the name of the post type.
| | 06:21 | So here it says Post type:
Video, here it says Post type:
| | 06:24 | Photo, and here it says Post type: Recipe.
| | 06:28 | Like with custom post type templates
and custom post type indexes, you can
| | 06:33 | also make custom taxonomy indexes targeting
specific taxonomies, or even specific terms.
| | 06:39 | You do that by calling the files
taxonomy- and then whatever you are targeting.
| | 06:44 | It works the exact same way and you can
get extremely specific about what you're
| | 06:47 | targeting and how to display certain
types of content. But for the most part
| | 06:52 | what I just showed you, this
consolidation of all the taxonomy terms in one
| | 06:56 | single file, works the best.
| | 06:59 | Using custom taxonomy index templates
you can control exactly how different
| | 07:03 | taxonomies are displayed and
customize the output to show exactly what the
| | 07:07 | visitor is looking for.
| | 07:09 | This is yet another tool in your
tool belt of WordPress awesomeness.
| | Collapse this transcript |
|
|
8. Displaying the Latest Posts from Different Custom Post TypesCreating a custom footer sidebar template| 00:00 | So far in this course I have showed
you how to create custom post types and
| | 00:04 | also custom taxonomies that are
attached to these custom post types, and I have
| | 00:09 | showed you how to create custom
templates for each of the custom post types,
| | 00:13 | index pages for all the custom post types,
and also index pages for the custom taxonomies.
| | 00:18 | But there's no point having custom
post types on your site if no one
| | 00:22 | knows they're there.
| | 00:23 | So now we need to create some
features on our site to tell people that the
| | 00:27 | custom post types are available
and make them go look at them.
| | 00:31 | A simple way of doing this is to
display links of the five latest posts in each
| | 00:36 | post type in the footer on the site.
| | 00:37 | That way no matter where the visitor is
on the site shall see that there's more
| | 00:42 | content just waiting to be read or seen.
| | 00:45 | If we look at the site right now, you
will see that on the front page we don't
| | 00:49 | have any links to the custom post types
yet, and more importantly, there is no
| | 00:54 | actual way of getting there.
| | 00:55 | So what we are going to do is place links in
the footer here so that people can see it.
| | 01:01 | And this is important, what I am going
to show you in this movie does not apply
| | 01:05 | just to a sidebar or just the footer.
| | 01:07 | The techniques I am going to show you on
how to grab this content and display it
| | 01:11 | as links can apply anywhere.
| | 01:13 | You can put the same kind of code in
the page template, in an index page, or
| | 01:17 | anywhere on the site.
| | 01:18 | We are just using the footer
because it's an easy place to work in.
| | 01:22 | To start off, we are going to make some
changes to the sidebar-footer file that
| | 01:26 | we find inside twentyeleven theme.
| | 01:29 | Because we are working with a child
theme, I am going to grab that file.
| | 01:32 | It's right here, sidebar-footer, and I
will copy it and paste it into my child-theme.
| | 01:38 | By the way if you want to know more
about how to customize sidebars in
| | 01:42 | child-themes, you should go check out
the chapter on sidebars that's in the
| | 01:46 | WordPress 3: Building Child Themes
course right here on lynda.com.
| | 01:50 | Now that I have the sidebar-footer
file in my child theme it will override
| | 01:54 | the sidebar-footer file in twentyeleven,
which means any changes I make in this file.
| | 01:59 | will be the ones you see on the site.
| | 02:01 | So I will open the file and
here I need to make some changes.
| | 02:05 | The first thing I am going to do is
remove this batch of code at the very top.
| | 02:09 | This only applies if you've
configured your site the way I did
| | 02:13 | using twentyeleven.
| | 02:15 | In twentyeleven I've set the site to
display without any sidebars on the side,
| | 02:20 | and as a result twentyeleven by
default will display the sidebar widgets
| | 02:24 | underneath one another.
| | 02:25 | But that's not what I want so I am
going to take this code away, because that's
| | 02:29 | the code that decides how
this is going to happen.
| | 02:31 | And instead I am going to go into
this div at the very top and where it says
| | 02:35 | twentyeleven_footer_sidebar_class, I am
going to replace that by saying simply
| | 02:40 | class= and then "three," because I am going
to add three widgetized areas to the footer.
| | 02:48 | Now I am sure you are going to ask,
"But I can't see any widgetized areas in
| | 02:53 | the front page," and if we go to it, you'll
see you don't see any widgetized areas here.
| | 02:59 | There is a good reason for that.
| | 03:00 | The way twentyeleven is setup, if you
don't actively add sidebar widgets to the
| | 03:06 | sidebar, nothing appears.
| | 03:08 | What we want to do is change that so
that if you don't actively add widgets
| | 03:13 | to the footer-sidebar, instead
WordPress will display default content and
| | 03:17 | that default content is the lists of
the five most recent items from each of
| | 03:22 | the custom post types.
| | 03:24 | If you look at this code, you will
see it's pretty easy to understand.
| | 03:28 | It says if there is an active sidebar
called 'sidebar-3', then display the
| | 03:32 | sidebar information, and then it says
the same thing below. is_active_sidebar 4
| | 03:37 | and is_active_sidebar 5.
| | 03:38 | What we are going to do is change
this code around so that it displays the
| | 03:42 | sidebar items even if there
are no active widgets in them.
| | 03:46 | This is a bit of a clunky piece of code,
so I provided it in the code snippets.
| | 03:49 | If you go to the snippets file, you
will find it at the very top here.
| | 03:53 | It starts with div id="first"
and ends with first.widget.area.
| | 03:58 | So I can copy this out and go and paste
it in, in place of the first widgetized
| | 04:04 | area at the top here.
| | 04:06 | Right now it only contains dummy content,
but I will show you how it all works.
| | 04:10 | First, it adds a simple div with the id "first."
| | 04:13 | This is just going to be the first
box, and then it says if there is no
| | 04:17 | dynamic sidebar called 'sidebar-3,'
meaning if no one put anything into the
| | 04:22 | widgetized area in 'sidebar-3,' then
instead you are going to display this
| | 04:26 | aside widget that says Hello?
| | 04:29 | So if I save this and I go to my front page
now and reload it, you will see the text Hello?
| | 04:36 | here at the bottom.
| | 04:37 | So this is where you want
that list of items to display.
| | 04:40 | So the next step is to add a list of items
instead of just the text Hello? in here.
| | 04:46 | So if we go back to the code snippets,
I've created another code snippet that
| | 04:52 | has an actual list in it.
| | 04:53 | So if we copy out all that code and
paste it in place of what we already copied
| | 04:58 | out and pasted in, you now have the
exact same statement, still has the div
| | 05:04 | id="first," but instead of
creating just text Hello?,
| | 05:07 | we now creates an aside called
widget in which we have a title, Recent
| | 05:12 | Recipes, and we have an unordered list
in which we have a dummy content line,
| | 05:18 | in which we have one item that's just
dummy content right now, but that shows a
| | 05:23 | permalink and some text.
| | 05:25 | If I save this and reload the page,
you will see we now get the title of the
| | 05:32 | most recent post on this
page and we can link to it.
| | 05:35 | Of course, that's not precisely where we
want to go, but at least we know it works.
| | 05:40 | Now that we know it works, we
can create the two next boxes.
| | 05:43 | So I'll take this code as it is, copy
it, and I'll put it in place of this.
| | 05:49 | That's a 'sidebar-4.' So I will just
remember it says 'sidebar-4.' I will paste
| | 05:54 | it in, and then of course, this is
now not "first," but "second," so I will
| | 05:58 | change it to "second," and I will
change second down here and this is
| | 06:04 | 'sidebar-4' and the title
is going to be Recent Photos.
| | 06:10 | And then finally I'll do the
same thing with the bottom one.
| | 06:13 | I will paste in this batch of code.
This is now "third," "third" at the bottom,
| | 06:22 | and the widget title is Recent Videos.
| | 06:25 | When I save this and reload my front
page, you will see at the bottom we have
| | 06:32 | Recent Recipes, Recent Photos, and Recent Videos.
| | 06:35 | Of course, the links don't point quite
where we want them to yet, but we have
| | 06:40 | a footer sidebar that shows the boxes where
we can put the content we want to display.
| | 06:45 | By creating a new sidebar-footer.php
file, we can take control of what is
| | 06:49 | displayed in the footer-sidebar by default.
| | 06:51 | That way we can take better control
of our site and add more information.
| | Collapse this transcript |
| Displaying a list of links to the latest custom post type posts| 00:00 | In our footer, we now have three
areas that we can put content into.
| | 00:05 | You can see them down here at the bottom.
| | 00:06 | Recent Recipes, Recent
Photos, and Recent Videos.
| | 00:10 | Now, we want to add lists that display
the title of and links to the five most
| | 00:15 | recent items under each of
these three custom post types.
| | 00:19 | We're going to do that by creating
a custom loop using a custom query.
| | 00:24 | In our sidebar-footer.php file, we
already have our dummy content set up.
| | 00:29 | It's set up here under the
unordered list where you can see there is an
| | 00:33 | unordered list that has a list item and
then inside the list item, there is an
| | 00:37 | h3 header that has a link and
the actual title of the post.
| | 00:43 | This is the code we'll keep using.
| | 00:45 | What we need to do now is wrap
this list item in a loop that goes to
| | 00:50 | WordPress and says give me the five most
recent items and then display them one at a time.
| | 00:57 | In the code-snippets file, I've created
this custom loop, but I've separated it
| | 01:01 | from the sidebar content.
| | 01:02 | The reason for that is you can now take
this code and use it elsewhere on your site.
| | 01:08 | The whole point of creating these
custom loops is that you create kind of a
| | 01:11 | closed loop where you can test for
other things within a certain page.
| | 01:16 | So, for example, like we're doing, we can
display multiple different loops in the
| | 01:20 | footer or you could do the same in your
regular sidebar or even inside a single
| | 01:25 | post or a page template.
| | 01:27 | If we copy out this code and paste it
in, in place of the list item here, I'll
| | 01:33 | explain to you what happens.
| | 01:35 | It starts off by creating a
variable called postslist.
| | 01:38 | That's just so we can do a full search on it.
| | 01:41 | The postslist variable is filled with
the output from the function get_posts and
| | 01:46 | it's here all the work is done.
| | 01:48 | You can give get_posts, which is a
custom query, multiple variables that tell
| | 01:53 | it what to search for.
| | 01:54 | Right now, it says numberposts=4,
which means we'll get four items returned.
| | 02:00 | It's as to order them in descending order,
order them by date, and then finally
| | 02:07 | it says post_type=recipes.
| | 02:10 | That means this will return 4 recipe
items ordered by the date in descending order.
| | 02:17 | So basically in reverse chronological
order, the four latest items added to
| | 02:23 | the recipes post_type.
| | 02:26 | Once the variable postslist has
these items, we'll run a loop.
| | 02:31 | The loop starts here, foreach,
and ends down here, endforeach.
| | 02:36 | What the loop does is it says foreach
($postslist, so this item up here, and
| | 02:42 | we handle them as a post, we'll get the
postdata for that post and then display it.
| | 02:48 | So in effect, it goes in, picks a post
out of the database, says give me all
| | 02:53 | your data, and then display the_
permalink and wrap that around the_title.
| | 03:00 | When I save this and I reload the page,
we now get links to the four latest
| | 03:06 | items listed under Recent Recipes.
| | 03:09 | Pizza Primavera, Jalapeno Jelly,
Garlic Bruschetta, and Steamed Artichokes.
| | 03:15 | Now that you've seen how it works, we can add
the same batch of code to the two other boxes.
| | 03:20 | So simply copy it out, go replace
the list item, and then I just have to
| | 03:26 | change the post_type here for photos, and I'll
scroll further down under the same with videos.
| | 03:42 | When I reload the front page now,
you'll see under Recent Recipes we have
| | 03:47 | the four most recent recipes, under
Recent Photos we have the four most
| | 03:51 | recent photos, and under Recent Videos we
have one video because we haven't added more yet.
| | 03:57 | The cool thing about this is no matter
where I go now, because this is in the
| | 04:00 | footer, if I go to The Beauty of Food,
the photo, and I scroll down to the
| | 04:05 | bottom, we still see the same lists.
| | 04:08 | If I go to Steamed Artichokes, again
if you scroll down to the bottom, you
| | 04:13 | still see the same lists.
| | 04:14 | Meaning that when people visit the
site and get down to the bottom after
| | 04:18 | reading all your content, they will see that
there is more content available on the site.
| | 04:24 | Like I said, this custom loop can
be used almost anywhere on your site.
| | 04:31 | You just dump it into your templates,
wrap it in an unordered list tag, so <ul>
| | 04:36 | to begin, and end </ul> to end, and then
it will spit out whatever query you ask
| | 04:41 | it for and display it.
| | 04:43 | Simple and powerful!
| | 04:45 | Using a custom loop, we're able to
call up content from other post types
| | 04:49 | anywhere in our site including in the sidebars.
| | 04:52 | Though this example used a footer,
there is no reason why you can't do the same
| | 04:55 | thing with the same code blocks in
regular left or right sidebars or even in
| | 04:59 | post or page templates.
| | 05:01 | The possibilities here are
only limited by your imagination.
| | Collapse this transcript |
|
|
9. Finalizing Menu and Site ArchitectureCreating static pages for the front and the blog| 00:00 | Up until now, we've been focusing
almost exclusively on custom post types and
| | 00:05 | custom taxonomies in this course and
you're probably wondering, when are we
| | 00:09 | getting to the actual
portfolio part of this course?
| | 00:12 | That would be right now.
| | 00:14 | Now that we have all the content we
need and it's organized in an easily
| | 00:18 | understandable way in custom post types
and with custom taxonomies, we can start
| | 00:23 | putting together a full portfolio page.
| | 00:26 | After all the complicated work we've done,
this will seem simple, but it's no less important.
| | 00:31 | Let's first look at how to switch the
front page to a static page and place the
| | 00:35 | blog page on a separate page.
| | 00:37 | Logged into the backend of WordPress, I'm
going to create a new page for my front page.
| | 00:42 | So I'll go to Pages, add a new page, and
just call it Welcome to Culinary Artistry.
| | 00:53 | In this page I'm going to use some
basic content from my exercise files.
| | 00:57 | If you don't have access to all the
exercise files, you can just put in pretty
| | 01:00 | much whatever you want.
| | 01:01 | It doesn't really matter.
| | 01:02 | So I'll go to the Assets and then under
text, I'm going to open this file called
| | 01:07 | chef_bio, so I get some text.
| | 01:11 | Then I'll copy out the first two paragraphs.
| | 01:15 | Back in WordPress, I'll use the Paste as
Plain Text function to paste it in and
| | 01:20 | then I'll take out two lines.
| | 01:23 | I'll take it one step further, and go to
the front of my site, and find the link
| | 01:28 | to the About page where the full text is.
| | 01:30 | I actually want to link the
front page directly to this page.
| | 01:35 | To do that, I'm going to use one of the
new functions that came with WordPress 3.1.
| | 01:38 | If we go down to the bottom, I can
create a new line where it says "Click here to
| | 01:45 | read more" and then I will highlight
all of it, and click on the Insert Link
| | 01:52 | button and then I'll click on Or link to
existing content box here to expand it.
| | 01:59 | Now we'll see links to all of my
existing content and here I'll find the About
| | 02:05 | page and I can add that link.
| | 02:10 | This is really all I need to do, so
I'll simply publish this page and then
| | 02:14 | move onto the next step.
| | 02:16 | This is going to become the front page.
| | 02:18 | But by default, the
front page is the blog index.
| | 02:22 | So if I want to make my new page to
front page, I also have to make a page
| | 02:27 | for the blog index.
| | 02:29 | So I'll go back, create a new
page, and simply call it Blog.
| | 02:34 | This page will have no content
and you'll see why in a second.
| | 02:37 | I'll click Publish again and then I'll
go down to Settings and Reading and here
| | 02:45 | I can decide what I want
to display as my front page.
| | 02:48 | By default, it displays your latest
posts, but I want to display a static page.
| | 02:53 | So I'll select A static page and then
for Front page, I'll select this one,
| | 02:58 | Welcome to Culinary Artistry, and for the
Posts page, I'll select the empty Blog page.
| | 03:04 | Click Save Changes, reload the Home page,
and you'll see now Welcome to Culinary
| | 03:11 | Artistry is the front page and it has a
link here to Click here and read more.
| | 03:16 | It also has comments which I
don't want for the front page.
| | 03:21 | So I'll go back under Pages, go to
Welcome to Culinary Artistry, and click Quick
| | 03:27 | Edit, and then I'll
simply turn Allow Comments off.
| | 03:32 | Now, if I reload the front page again,
you'll see comments are no longer active.
| | 03:38 | This actually works like a
fully functional front page.
| | 03:41 | It has a short text with some welcome
info, you could also add a photo here if
| | 03:46 | you wanted to, and on the bottom we
have links to all our recipes, all our
| | 03:50 | photos, and all our videos.
| | 03:52 | It even has a Click here to read more
link which takes you to the full About
| | 03:56 | page or the visitor could just click
on About directly, and of course we have
| | 04:01 | the Blog button which now
leads us directly to the blog.
| | 04:05 | The last page we need for our
portfolio is a contact page.
| | 04:09 | So let's just build a new page for contact.
| | 04:12 | I'll say Contact and then down
here I'll say "A contact form will be
| | 04:19 | inserted here shortly."
| | 04:22 | Okay, so that's what we're going to do later on.
| | 04:25 | I'll click Publish again and now
we have all the major components.
| | 04:31 | We have the Home page, About page, Blog,
Contact, and the Sample Page appears in
| | 04:37 | our menu because we
haven't changed the menu yet.
| | 04:39 | We'll be finishing all of this
up in the rest of this chapter.
| | 04:43 | Static pages are still important
elements in a portfolio site and setting them
| | 04:48 | up in the right way can take your
site from looking like a standard blog to
| | 04:51 | looking like a professional portfolio.
| | Collapse this transcript |
| Populating the menu with new index pages| 00:01 | Now that our portfolio site has both
static pages, a blog, and three custom post
| | 00:05 | types, we need to add links
to each of them in our menu.
| | 00:09 | This is easy enough with the
static pages and the Home and Blog page.
| | 00:12 | But to get the custom post type index pages
to appear, we have to put in the URLs manually.
| | 00:18 | As you can see, by default, as we add
new pages in they appear in the menu, but
| | 00:24 | we want to create a custom menu for
our site so that we can control it.
| | 00:28 | By the way, if you're following along
using the exercise files and you skipped the
| | 00:33 | first movie from this chapter, you need
to jump back and actually complete the
| | 00:37 | first movie, because in this chapter
each movie depends on the previous one.
| | 00:42 | So jump back, complete movie
number one, and then come back here.
| | 00:46 | Since we haven't done anything to the
menu yet, we're now seeing the default menu
| | 00:50 | and the default menu is populated
by a Home button and then a button for
| | 00:54 | each of the static pages.
| | 00:56 | What we need to do is create a custom
menu so we can slot in the menu items we
| | 01:01 | want in the order we want
and with the text we want.
| | 01:04 | So I'll go to WordPress Admin, go down
to Appearance, and here I'll find Menus.
| | 01:11 | Here I can create a new menu. So
I'll call it Header Menu and then I'll
| | 01:17 | assign my new header menu to as the Primary
Menu, and now I can add items to my Header Menu.
| | 01:24 | First, I'll add the static pages.
| | 01:26 | So I'll go View All. I'll add the Home
page, the About page, the Blog page, and
| | 01:32 | the Contact page. Click Add Menu
and they are all added to my menu.
| | 01:37 | Now, I can change the names of them, so
I'll change this Welcome to Culinary Artistry.
| | 01:42 | I'll cut that out and put it in as a
title instead and I'll name this Home.
| | 01:48 | I'll go to About and add a Title
Attribute, About Culinary Artistry.
| | 01:51 | I'll go to the Blog and add a Title Attribute.
| | 01:59 | The Culinary Artistry Blog. And at the
bottom I'll add an attribute to Contact.
| | 02:08 | It's very important that you add these
title attributes, not only because it
| | 02:16 | makes it more understandable for
search engines, but also because when people
| | 02:20 | visit the site using a non-visual
browser, they'll have an easier time
| | 02:24 | understanding what your menus are for.
| | 02:27 | I'll click Save now just
to test that my menu works.
| | 02:30 | I'll go back to the front page and
reload it and you see we now have Home,
| | 02:35 | About, Blog, and Contact and as I
hover over them, you also see that those
| | 02:41 | title attributes appear.
| | 02:43 | Now, I need to add the links to the recipes
index, the photos index, and the videos index.
| | 02:48 | If you remember, the URL for these links
was simply recipes, photos, and videos.
| | 02:56 | So what I need to do is add this link
in so that when you click on a button
| | 03:01 | you get directed there.
| | 03:03 | So what I'm going to do is copy the
link from here and then just paste it in.
| | 03:09 | And then I have to give it a label.
The label in this case is Recipes, and
| | 03:14 | I'll click Add to Menu.
| | 03:16 | Now, the link to the Recipes is
added to the bottom of my menu and I can
| | 03:19 | simply move it up, and then I can go in
and change Title Attribute, and then I
| | 03:28 | can add a link to photos, call it Photos, and
also add a link to videos and call it Videos.
| | 03:44 | And like with recipes, I'll pull them up
and then add Title Attributes to them.
| | 04:03 | When I'm done, I click Save Menu, go
back, and reload the Home page and now
| | 04:11 | we have links to Home, Recipes, Photos,
Videos, the About page, the Blog, and Contact.
| | 04:17 | If I click on Recipes, Photos, or
Videos, I'm taken directly to the index
| | 04:22 | pages for each of them.
| | 04:24 | If you want to know more about how to
use custom menus in WordPress and also how
| | 04:28 | to add more custom menus to your theme,
you should check out both the WordPress
| | 04:32 | 3 Essential Training course on lynda.
com and the WordPress 3: Building Child
| | 04:37 | Themes course, both of which
covered this topic extensively.
| | 04:42 | With the menu that points to all the
static pages as well as the custom post
| | 04:46 | type index pages, and the blog
page, we're now nearly done with our portfolio site.
| | Collapse this transcript |
| Creating a contact page with a contact form| 00:00 | To finish off the new portfolio site
will add a contact form to the contact page.
| | 00:05 | This is a poorly kept
secret in the web industry.
| | 00:07 | If you want people to contact you through your
website, you should offer them a contact form.
| | 00:12 | First of all people are far more likely
to fill it out then they are to fire up
| | 00:17 | their email program, copy your email
address, paste it into the sender, then
| | 00:21 | type a subject and then send you an email.
| | 00:24 | More importantly though, leaving your
email address on a website in plain view,
| | 00:28 | opens you up to a barrage of unwanted
spam with ads for ink toner, free trips to
| | 00:33 | the moon, and far more ludicrous stuff.
| | 00:35 | Trust m, a contact form is always the way to go.
| | 00:39 | By the way, if you're following this
course using the exercise files and you cut
| | 00:44 | in at this point in this chapter, you
need to jump back, because each of the
| | 00:48 | movies in this particular chapter follow
consecutively from the previous one, so
| | 00:52 | you need to go through all
the steps to get to where I am.
| | 00:56 | There are huge list of contact
form plug-ins available for WordPress,
| | 00:59 | some better than others.
| | 01:01 | Of the free variety I tend towards one
called a Contact Form 7, but lately I've
| | 01:06 | been using the premium plug-in Gravity
Forms which gives me way more options.
| | 01:10 | This latter one is overkill if you are
just building a basic contact form like
| | 01:14 | we're doing now, so we'll
just go with Contact Form 7.
| | 01:18 | If you prefer a different one or just
one to experiment, knock yourself out.
| | 01:22 | They're all pretty much the same.
| | 01:24 | To add the plug-in, I simply go to
Plugins and click on Add New and then I'll
| | 01:30 | search for Contact Form 7.
| | 01:33 | This will bring up a list not only of
the contact form I'm looking for, the first
| | 01:37 | one here, but also a bunch of other
ones, like I said there are lot of these
| | 01:41 | available and they all do sort of the
same thing but in different ways, so you
| | 01:45 | can experiment and see what you like the best.
| | 01:48 | Since I want to use Contact Form 7, I'll
simply click Install Now, click OK that
| | 01:54 | I want to install it and then let
WordPress install the contact gorm for me.
| | 01:59 | If this doesn't work or if you're
having any trouble installing a plug-in you
| | 02:03 | should check out the WordPress3
Essential Training course, where installing
| | 02:06 | plug-ins is covered extensively.
| | 02:09 | Once the plug-in is installed I could
activate it, either from right in here or
| | 02:13 | I can go to the Plugins page and
activate it manually from in here, but I've
| | 02:17 | already activated it so we're good to go.
| | 02:19 | Contact Form 7 adds a new field up
to very bottom of my Administration
| | 02:23 | panel called Contacts.
| | 02:25 | In here I can now setup a new contact form.
| | 02:28 | The default contact form created
by created by Contact Form 7 is
| | 02:32 | pretty good, so I'll just stay with that,
but if you want to you can edit the
| | 02:36 | code here. You can also create more
contact forms if you want to or even
| | 02:41 | generate custom tags.
| | 02:43 | When you scroll down you get to the
actual functionality of the contact form.
| | 02:47 | For now, all I'm going to do is
enter the email address that the emails
| | 02:52 | generated by the contact form will be sent to.
| | 02:54 | So in this case its
culinaryaristryrichard@gmail.com and you can also put in
| | 03:04 | what the From field displays.
| | 03:06 | The default is actually pretty good,
your name and your email, and then the
| | 03:10 | Subject, here I usually put in
From website and then the subject.
| | 03:16 | You can also do more customize things
like send to second email address. You can
| | 03:21 | also customize what messages the
sender will receive and so on and so forth.
| | 03:26 | It's a fairly advanced plug-in and it's
free, so you can kind of experiment with
| | 03:30 | it and see what you think.
| | 03:32 | When I've made all my changes I click Save.
| | 03:34 | Once the form is saved I can place it in
one of my posts or my pages, you simply
| | 03:39 | copy this code here, Contact Form 1, and
then go to Pages > All Pages and here I
| | 03:47 | find my Contact page and from here I
can put in some text and I can enter the
| | 03:54 | contact form itself.
| | 03:55 | So I'll say, "If you want to get in
touch with us, fill out the form below."
| | 04:06 | That's all you need to do. If you now
click Update and we go and navigate to the
| | 04:10 | Contact page, you'll see the Contact
now has a basic form asking for Your Name,
| | 04:17 | Your Email, a Subject, a Message
and has a Send button at the bottom.
| | 04:22 | Then as for the front page, it currently
displays the comments, so I'll turn that off.
| | 04:27 | Now in the default view for the page
I can't see it, so I'll go to Screen
| | 04:31 | Options, activate the Discussions field,
close Screen Options, and then at the
| | 04:37 | bottom here, I can turn
comments and trackbacks off.
| | 04:41 | I'll update the page again, reload
the Contact page, and now we have the
| | 04:49 | contact form without the comments, and
as before the links all of our custom
| | 04:54 | post types is at the bottom.
| | 04:56 | By adding a contact form to your online
portfolio, you achieve several things.
| | 05:01 | You look more professional, you give
people an easy way of contacting you and
| | 05:05 | you protect yourself from professional
spammers and other evildoers on the web.
| | 05:09 | And with that you have a
completed online portfolio.
| | Collapse this transcript |
|
|
10. Hooking Custom Post Types into Other ThemesIncluding the abstraction layer in other stock themes| 00:00 | At the very beginning of this course I
mentioned that if you add custom post type
| | 00:04 | and custom taxonomies to your functions
.php file, they follow with the theme.
| | 00:09 | That also means if they're not
included in the new theme you choose to
| | 00:12 | activate, they won't show up, which is
why we created the abstraction layer in
| | 00:17 | the very beginning of the course.
| | 00:18 | Moving the functions for the custom post
types and custom taxonomies out of the
| | 00:22 | functions.php file and into
separate file it could reference.
| | 00:27 | So how do you use the
abstraction layer in a different theme?
| | 00:30 | The same way you did for this
theme. Let's see how that's done.
| | 00:34 | I'll go to my Dashboard and find a
new theme. So I'll go to Appearance then
| | 00:39 | select Themes and from here I can click
Install Themes to find a new theme to install.
| | 00:45 | So I've already found a theme that
you might find interesting to work with
| | 00:50 | because you're making a portfolio and
it's called Showcase, so we'll search for
| | 00:54 | that and here it is.
| | 00:55 | It's at very beginning.
| | 00:56 | So we'll click Install to install the
theme and Install Now and WordPress now
| | 01:01 | installs the theme for me.
| | 01:03 | Now I can activate this theme and
you'll notice what happens. Pay to attention
| | 01:07 | to the sidebar here.
| | 01:10 | With a new theme activated you see
we're now back to the default Post, Media,
| | 01:14 | but all our Recipes, Photos, and Videos are gone.
| | 01:18 | That's because this theme does not
have the reference to our post types file.
| | 01:23 | So what I'm going to do now is create a
new child theme. I'll refresh my themes
| | 01:27 | folder so I can see the new theme. Here
it is, Showcase, and now I can create a new
| | 01:32 | child theme to go with showcase.
| | 01:34 | The reason why I'm creating a child
theme rather than altering the parent theme
| | 01:38 | is because if the new update of
Showcase becomes available and I upgrade
| | 01:43 | Showcase from within WordPress any
change I make to Showcase will be gone,
| | 01:48 | because it'll be overwritten by the
new update. Whereas if I create a child
| | 01:53 | theme that child theme will
exist even if Showcase is updated.
| | 01:57 | So I'll create a new folder, call it
something like myShowcase, and within that
| | 02:04 | folder I'll first create a new CSS
file called style.css, and then within this file,
| | 02:12 | after deleting all the content,
I'll place that code that defines this as a
| | 02:18 | new child theme of Showcase.
| | 02:20 | So I'll go to the code snippets and
here under 10.01, you'll find all the code
| | 02:26 | necessary, so I'll copy it and pasted
in. Here you see it says, import url
| | 02:31 | ParentThemeFolder/Style. I made this
generic, so you can do it with any theme.
| | 02:35 | So here I'm just going to insert the
name of the parent theme folder, which is
| | 02:39 | showcase and then I'll give it a new
name, so I'll call it New Showcase Child Theme,
| | 02:49 | and I could give it a description
if I wanted to. I should always put in
| | 02:54 | the author and reference the original author.
| | 02:57 | And finally down here my template, I put in
the parent theme folder again, so showcase.
| | 03:03 | This, if you remember, is what
defines what the parents theme is.
| | 03:07 | When I'll save this and go back to
WordPress Admin and reload the themes page,
| | 03:13 | the new child theme appears. Here it is, New
Showcase Child Theme, and I can activate it.
| | 03:19 | We still don't have the custom post
types on the side here, but if I reload the
| | 03:23 | homepage, you'll see we
have a new theme applied.
| | 03:29 | Now I'm going to includes the custom
post type as well. So I'll go back to my
| | 03:33 | code editor and under the myShowcase
folder, I'll create a new file, this time a
| | 03:39 | PHP file, and I'll call the functions.php
and within the function.php file all I
| | 03:47 | need to do is reference this post types file.
| | 03:49 | So I'll go back to my code snippets,
find that code, includes_once(ABSPATH .
| | 03:53 | 'wp-content/themes/posttypes, paste it
in and end my PHP delimiter, save it and
| | 04:05 | when I go back to my Admin panel and
reload it, we now have Recipes, Photos and
| | 04:12 | Videos, just like before.
| | 04:14 | And if we go check inside them, you'll
see that all my content is also still
| | 04:19 | there. So it didn't disappear.
| | 04:21 | It just was hidden.
| | 04:22 | If I now go to my front page I can visit
Recipes and Photos and Videos and see the content.
| | 04:30 | Now of course because this is a new
theme I'm working with, I still have to make
| | 04:34 | all those other changes. Like for
instance I have to make a new index page so
| | 04:38 | it doesn't say from the blog, but says
recipes and I have to go through the same
| | 04:42 | process that we've gone through with twentyeleven.
| | 04:45 | But the core items, the custom post
types and custom taxonomies, are on the
| | 04:50 | site now and we can work in our new
child theme to make this site look exactly
| | 04:54 | the way we want it to.
| | 04:56 | The reason why I chose this showcase
theme as the new parent theme is because
| | 05:00 | it has a lot of cool features that you might
want to use when you create your online portfolio.
| | 05:06 | So I suggest if you have completed
this course using twentyeleven and you've tested
| | 05:10 | all the features in twentyeleven and you're
not fully satisfied with the design, you
| | 05:15 | might want to take a look at this theme instead
and do the process again using Showcase instead.
| | 05:20 | Of course as you have seen, in
addition to adding the abstraction later to
| | 05:24 | your functions.php file, you need to do a
bit more work to display the content properly.
| | 05:29 | Most notably, you should always create
custom post type templates for single
| | 05:33 | view and index pages and
also make a taxonomy.php file.
| | 05:37 | With this in mind, I made all the
code examples in this course generic, so
| | 05:42 | you can copy them out of the text file and
paste them into the theme to make them work.
| | 05:47 | Just remember that if you create
your own custom post types and custom
| | 05:50 | taxonomies, you have to change the
names in the code snippets for them to work.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | Now that you've finished this course and
you've created an online portfolio with
| | 00:03 | WordPress using custom post types
and custom taxonomies, I'm sure you're
| | 00:07 | wondering where to go next.
| | 00:10 | A good place to start is the WordPress Codex.
| | 00:12 | Here you find documentation for
all the different functions and
| | 00:15 | functionalities inside WordPress.
| | 00:17 | In particular you should go take a
look at the Post Types page as well as
| | 00:22 | the Taxonomies page.
| | 00:24 | These cover both how post types work
and have links to further tutorials and
| | 00:28 | how taxonomies work.
| | 00:30 | The WordPress Codex is also always
expanding, so you'll keep seeing new
| | 00:34 | content appear and all of this is
proper core documentation, so everything you
| | 00:38 | find in here is accurate.
| | 00:40 | If this was your first time working
with WordPress, I suggest you go check
| | 00:44 | out the WordPress 3:
| | 00:45 | Essential Training course
right here on lynda.com.
| | 00:48 | It goes through everything there is to
know about how WordPress works at the
| | 00:52 | core, both for wordpress.com and
for self hosted WordPress sites.
| | 00:56 | You should also check out the WordPress 3:
| | 00:58 | Building Child Themes course. This
covers child themes in way more detail.
| | 01:02 | If you've just finished the Portfolios
course and you want to further customize
| | 01:07 | your child theme, you should go to
the Building Child Theme course and use
| | 01:10 | what's taught in that course to
redesign your site completely.
| | 01:14 | Thank you for watching and good luck
building your own online portfolio using
| | 01:18 | WordPress with custom post
types and custom taxonomies.
| | Collapse this transcript |
|
|
