1
00:00:00,490 --> 00:00:05,160
If we come back and take a look at the
wphierarchy.com site,
2
00:00:05,160 --> 00:00:09,790
we can see that when we have a single
custom post type,
3
00:00:09,790 --> 00:00:14,370
it uses the template name single hyphen,
and then the name of the post type.
4
00:00:14,370 --> 00:00:17,770
In this case it would be single-portfolio.
5
00:00:17,770 --> 00:00:24,280
If that's not there, it will use the
single.php template as a backup.
6
00:00:24,280 --> 00:00:26,250
We haven't created this file yet, but
7
00:00:26,250 --> 00:00:30,490
we are going to do that in the next
section when we build out the blog.
8
00:00:30,490 --> 00:00:33,000
However, for the time being, we're going
to go ahead and
9
00:00:33,000 --> 00:00:37,470
create our own single-portfolio.php page
to
10
00:00:37,470 --> 00:00:41,760
control the default single custom post
type page here.
11
00:00:41,760 --> 00:00:47,670
Now if we look at our original static
prototype that we received,
12
00:00:47,670 --> 00:00:53,110
we could see that it has a two column
layout here for a single post with
13
00:00:53,110 --> 00:00:57,100
the title and description on the left and
images on the right.
14
00:00:57,100 --> 00:01:02,920
And earlier, we had made a custom template
that was a two column layout that
15
00:01:02,920 --> 00:01:07,620
we had assigned to the contact page with
our sidebar on the left and contact here.
16
00:01:07,620 --> 00:01:11,180
And since these two are basically the same
mark up behind the scenes,
17
00:01:11,180 --> 00:01:17,760
we're gonna take the code from here and
create our single-portfolio.php page.
18
00:01:17,760 --> 00:01:19,280
Using that.
19
00:01:19,280 --> 00:01:22,630
So if we come back into our text editor.
20
00:01:22,630 --> 00:01:30,210
We could open up our page side bar left
PHP, and then save it as single-portfolio.
21
00:01:30,210 --> 00:01:33,360
Again this is following the WordPress
naming convention.
22
00:01:34,380 --> 00:01:37,060
So let's go ahead and do File > Save As.
23
00:01:37,060 --> 00:01:43,720
And then save that as single-portfolio.
24
00:01:43,720 --> 00:01:48,360
And again this is following the WordPress
naming conventions at custom post type.
25
00:01:48,360 --> 00:01:51,160
Single pages have single and then the
custom post type.
26
00:01:52,540 --> 00:01:58,440
And if we follow this naming convention,
we can actually remove this from the top
27
00:01:58,440 --> 00:02:03,940
here and WordPress will know just based on
the name, the slug portfolio here,
28
00:02:03,940 --> 00:02:08,270
and single, that this is the template for
displaying custom post types.
29
00:02:08,270 --> 00:02:12,460
So, we don't have to do anything further
in WordPress to tell individual custom
30
00:02:12,460 --> 00:02:15,730
post types to use this template for our
portfolio.
31
00:02:17,330 --> 00:02:23,660
Now the tricky thing here is that before
we had our sidebar as separate content,
32
00:02:23,660 --> 00:02:28,030
and then all of the content that we needed
to display from the loop just within this
33
00:02:28,030 --> 00:02:29,800
primary class.
34
00:02:29,800 --> 00:02:35,030
However, in this case, we're going to need
loop content, meaning the main images here
35
00:02:35,030 --> 00:02:40,680
and the description down here, so we have
to expand our loop.
36
00:02:40,680 --> 00:02:44,060
And pull it out higher in our markup.
37
00:02:44,060 --> 00:02:50,500
So we're actually gonna come out to the
row level and put that there,
38
00:02:50,500 --> 00:02:57,150
and then the end, we're going to put right
before closing of that row.
39
00:02:57,150 --> 00:02:59,800
And we're going to take out this content
in the middle.
40
00:02:59,800 --> 00:03:07,720
So what that allows us to do is to be able
to work with both the primary and
41
00:03:07,720 --> 00:03:13,210
secondary columns here in order to, oop,
it looks like that
42
00:03:13,210 --> 00:03:19,060
needs to go down one more, in order to
call the loop content where we want it.
43
00:03:21,350 --> 00:03:26,390
So, the main content that's going to
appear here is going to be our custom post
44
00:03:26,390 --> 00:03:32,830
field which we can call by saying the
field, and then images.
45
00:03:39,220 --> 00:03:40,670
And then that we could take out as well.
46
00:03:42,570 --> 00:03:46,750
Down here where we have our h2 class
sidebar, we're probably going to
47
00:03:46,750 --> 00:03:51,760
want to switch that into just being h1
like we had before with the title.
48
00:03:51,760 --> 00:03:52,830
So that will be the same.
49
00:03:53,910 --> 00:03:57,710
We could then come down and we're going to
use the field tag again.
50
00:03:57,710 --> 00:04:00,440
And the field tag is specific just to
51
00:04:00,440 --> 00:04:04,980
the advanced custom fields plugin that
works with creating custom fields.
52
00:04:04,980 --> 00:04:10,070
And this is how you call any of the custom
fields that you set.
53
00:04:10,070 --> 00:04:16,420
So, if we come back in to advanced custom
fields, and into our portfolio fields,
54
00:04:16,420 --> 00:04:20,350
we can see that here is the label of our
field and here is our field name.
55
00:04:20,350 --> 00:04:25,540
So this is what we're using here in the
field function to call this in.
56
00:04:25,540 --> 00:04:28,540
Again, this is not WordPress specific
code, but
57
00:04:28,540 --> 00:04:32,650
the field is code specific just to the
custom field's plugin.
58
00:04:35,220 --> 00:04:38,380
So this should give us all the code and
everything in the right place,
59
00:04:38,380 --> 00:04:43,810
where we need it in order to have our
single portfolio pieces show up properly.
60
00:04:43,810 --> 00:04:46,240
So, let's come back into our site, to our
portfolio.
61
00:04:48,030 --> 00:04:51,040
And it doesn't look like anything is
displaying here.
62
00:04:51,040 --> 00:04:55,200
So let's check to make sure that we don't
have any major errors in our
63
00:04:55,200 --> 00:04:56,650
PHP here that we're missing.
64
00:04:57,840 --> 00:05:00,340
yes.
It looks like we have an If Statement and
65
00:05:00,340 --> 00:05:03,440
a While Statement, but only closing the If
Statement.
66
00:05:03,440 --> 00:05:10,920
So we have to add the endwhile first, and
then endif.
67
00:05:10,920 --> 00:05:14,870
And now when we come back to our page, we
should see everything displaying.
68
00:05:14,870 --> 00:05:18,270
However, you'll notice that these images
are a little bit small in
69
00:05:18,270 --> 00:05:20,040
compared with how this looked.
70
00:05:21,820 --> 00:05:24,500
And if we come back in and edit these
images.
71
00:05:26,200 --> 00:05:29,150
We could switch from medium to full size.
72
00:05:29,150 --> 00:05:31,760
While we're at it, we'll turn off the
links, update it.
73
00:05:31,760 --> 00:05:35,108
And we'll just do that for this one
portfolio piece here so you can see.
74
00:05:35,108 --> 00:05:43,710
Now we've
75
00:05:43,710 --> 00:05:47,300
got those updated.
76
00:05:47,300 --> 00:05:48,870
We could click back to view it.
77
00:05:48,870 --> 00:05:53,370
And now we see everything displaying the
right size and orientation.
78
00:05:53,370 --> 00:05:57,330
And of course because this is a dynamic
template, if it works for
79
00:05:57,330 --> 00:05:59,610
one, it should work for all.
80
00:05:59,610 --> 00:06:01,710
Again, we could swap out those images.
81
00:06:03,440 --> 00:06:08,720
So, this is pretty nice, but I wanna add
one more enhancement because the UI for
82
00:06:08,720 --> 00:06:13,060
this is a little bit klinky in that to get
from here back to Portfolio,
83
00:06:13,060 --> 00:06:17,130
you either have to click Back or back up
into here into it.
84
00:06:17,130 --> 00:06:22,140
So, what I wanna add is something down
here that will let us click back between
85
00:06:22,140 --> 00:06:28,120
previous and back portfolio pieces as well
as back to the main portfolio gallery.
86
00:06:28,120 --> 00:06:31,020
This is also going to introduce some
helpful code that we
87
00:06:31,020 --> 00:06:33,000
could use again in our blog section.
88
00:06:34,070 --> 00:06:36,120
So I'm gonna come right down below the
field.
89
00:06:38,940 --> 00:06:40,230
I'm gonna put an hr tag.
90
00:06:42,310 --> 00:06:43,460
Open up a paragraph tag.
91
00:06:45,010 --> 00:06:52,820
And then use a function called
previous_post_link.
92
00:06:52,820 --> 00:06:54,190
Hyphen.
93
00:06:54,190 --> 00:06:59,830
And then what I'm going to do here is
create a link back to the portfolio.
94
00:06:59,830 --> 00:07:07,280
So I'm going to have an anchor tag, and
there are a couple different ways
95
00:07:07,280 --> 00:07:13,330
to link to specific pages within WordPress
if you're hard coding them into templates.
96
00:07:13,330 --> 00:07:17,780
And there's one method here which is use
the blog info tag
97
00:07:19,890 --> 00:07:24,200
to output the URL for your site, and then
do /portfolio and
98
00:07:24,200 --> 00:07:29,130
this will take us to, this will take us
back to the portfolio.
99
00:07:29,130 --> 00:07:33,030
However, if we change the URL structure
for portfolio or
100
00:07:33,030 --> 00:07:36,290
this changes, then that will break it.
101
00:07:36,290 --> 00:07:39,610
So it's important to know that if you use
a technique like this,
102
00:07:39,610 --> 00:07:41,800
that it may be subject to changes.
103
00:07:41,800 --> 00:07:45,480
There are some other ways to approach it,
but we're gonna use this for now.
104
00:07:47,640 --> 00:07:55,600
And then we're gonna use another function
called next_post_link.
105
00:07:55,600 --> 00:07:57,820
And add that in and then come back and
look at our site.
106
00:07:59,220 --> 00:08:03,510
And now down here we see a nice little
navigation where we
107
00:08:03,510 --> 00:08:08,430
could go back to a previous piece, go back
to the portfolio itself, or
108
00:08:08,430 --> 00:08:10,800
click into the next one to the right.
109
00:08:10,800 --> 00:08:13,630
And you could style this a little bit
better.
110
00:08:13,630 --> 00:08:15,620
However, I wanted to show you that code so
111
00:08:15,620 --> 00:08:19,180
that you would be able to put some
internal navigation in.
112
00:08:19,180 --> 00:08:23,760
And again, this is stuff that you often
see linking between blog posts.
113
00:08:23,760 --> 00:08:26,960
However, the code also works for custom
post types as well.