1 00:00:00,930 --> 00:00:06,850 In this video we'll start organizing the cafe pro theme as if we're building it for a photographer with 2 00:00:06,870 --> 00:00:13,860 customized WordPress with custom post types taxonomies and custom fields so that our client the photographer 3 00:00:14,040 --> 00:00:20,130 can use the site to organize images in a specific way by planning how the site needs to arrange and 4 00:00:20,130 --> 00:00:22,310 display the content in advance. 5 00:00:22,440 --> 00:00:27,990 You'll have a roadmap for how to create your custom post-time by going through this process you'll see 6 00:00:27,990 --> 00:00:28,290 how. 7 00:00:28,320 --> 00:00:34,110 No matter what theme you are using WordPress can manage content however the client or web site visitor 8 00:00:34,170 --> 00:00:35,760 needs it to be organized. 9 00:00:37,190 --> 00:00:42,460 Let's start by taking a look at a test site I've made on my local development environment. 10 00:00:42,590 --> 00:00:47,150 The W.P. of course to WordPress installation. 11 00:00:47,180 --> 00:00:53,060 It's a Genesis site with the cafe theme which should look pretty familiar to you here but it's not on 12 00:00:53,330 --> 00:00:55,180 our students sandbox area. 13 00:00:55,340 --> 00:01:01,430 I've been playing with it in my local environment to show you how you can set up custom post types using 14 00:01:01,430 --> 00:01:05,150 that custom press plug in as we go. 15 00:01:05,150 --> 00:01:12,500 I'll be logging back in to the student sandbox area and going through the steps with you so that you 16 00:01:12,500 --> 00:01:20,060 can experiment with the custom press custom pulls types plug in and configure the cafe pro theme as 17 00:01:20,060 --> 00:01:20,900 you like. 18 00:01:20,930 --> 00:01:26,840 We're going to be setting this up as if we're doing it for a photographer and as we scroll down on the 19 00:01:26,840 --> 00:01:35,210 home page I've just added a series of widgets into the front page area right here front page 2 and one 20 00:01:35,210 --> 00:01:43,340 of them I activated with an image and some copy and a link to a photo type. 21 00:01:43,460 --> 00:01:50,150 I made a custom post type called photographs and I made a taxonomy called Photo types. 22 00:01:50,150 --> 00:01:56,450 We're basically going to be categorizing the photographer's photographs into four different categories. 23 00:01:56,480 --> 00:02:06,610 One of them is dogs and then we'll also be using people landscapes and still lifes as three more categories. 24 00:02:07,070 --> 00:02:15,200 So I just clicked that button that led me to the category page or the custom post type page called dogs. 25 00:02:15,350 --> 00:02:21,290 You can see that it's W.P. of course to slash photo underscore type and then slash. 26 00:02:21,380 --> 00:02:25,590 Dogs and dogs is the name of the custom taxonomy. 27 00:02:25,670 --> 00:02:30,060 That is one of the different taxonomies under photographs. 28 00:02:30,290 --> 00:02:38,030 But if you look at the display page what I've got is a certain individual post which is one of the photographs 29 00:02:38,040 --> 00:02:40,730 Post and The title is Bradley. 30 00:02:40,730 --> 00:02:46,160 I've got a photograph of a dog some content here and you can see down on the left hand side. 31 00:02:46,250 --> 00:02:47,640 It's filed under dogs. 32 00:02:47,690 --> 00:02:49,790 This is the page we're looking at right now. 33 00:02:49,940 --> 00:02:54,030 And on the right hand side it's tagged with a couple of tags. 34 00:02:54,200 --> 00:03:00,410 So I've got three posts here so far each of them is clickable through the title or the link. 35 00:03:00,410 --> 00:03:08,510 Just like a standard post inside of Wordpress and then I've got individual pages displayed with a full 36 00:03:08,510 --> 00:03:16,250 width image as well as a footer that comes up with some data about the image itself. 37 00:03:16,250 --> 00:03:19,490 Now these are using custom fields. 38 00:03:19,550 --> 00:03:25,270 We haven't gone over custom fields very much but if you remember in a previous chapter in the author 39 00:03:25,280 --> 00:03:32,510 pro theme there were some custom fields that the user could use to define different types of information 40 00:03:32,510 --> 00:03:34,790 about the books or the place. 41 00:03:34,790 --> 00:03:41,270 In this case we've got custom fields for the type of camera the type of lense and the date the photograph 42 00:03:41,300 --> 00:03:42,410 was taken. 43 00:03:43,010 --> 00:03:50,240 So that was just a small tour of how I've set up custom post types within the cafe pro theme using custom 44 00:03:50,240 --> 00:03:51,420 press. 45 00:03:51,410 --> 00:03:56,800 Now let's go back and start setting it up ourselves in the student's sandbox. 46 00:03:56,990 --> 00:03:59,260 Go ahead and log into the student's sandbox. 47 00:03:59,390 --> 00:04:05,330 Make sure you're in the cafe pro theme site that we've been working on and it'd be a good idea to open 48 00:04:05,330 --> 00:04:14,000 up the live site inside of a second tab inside the student's sandbox in the cafe pro theme WordPress 49 00:04:14,000 --> 00:04:15,010 dashboard. 50 00:04:15,050 --> 00:04:17,900 Go ahead and open up plugins. 51 00:04:19,160 --> 00:04:26,110 Scroll down just a little bit and find custom press and click activate. 52 00:04:26,110 --> 00:04:31,960 Great now that that plug in is activated you'll see a toolbar item on the left hand side called Custom 53 00:04:31,960 --> 00:04:38,020 press and it contains all the set up screens for setting up your custom prototypes as well as some global 54 00:04:38,020 --> 00:04:40,500 settings for the plug in itself. 55 00:04:40,540 --> 00:04:46,540 We won't be using it but it also enables you to import and export custom post types from site to site. 56 00:04:48,050 --> 00:04:54,200 Another thing you'll notice is an additional menu item on the left side called photographs with some 57 00:04:54,200 --> 00:04:58,680 menu items called add new tags and photo types. 58 00:04:58,700 --> 00:05:01,160 Which is just like up in posts. 59 00:05:01,280 --> 00:05:05,380 The posts button add new categories and tags. 60 00:05:05,390 --> 00:05:08,960 If you look at photographs again we've got to add a new photograph. 61 00:05:08,960 --> 00:05:11,360 This is our list of photograph posts. 62 00:05:11,360 --> 00:05:18,770 We have a standard tags taxonomy and then a custom photo types taxonomy which is just like categories 63 00:05:18,770 --> 00:05:27,990 for posts because I created this custom post type called photographs previous to you downloading your 64 00:05:27,990 --> 00:05:31,740 new sandbox site when you activated the custom preste plugin. 65 00:05:31,890 --> 00:05:39,180 All the data was already in the database from the 30 posts that I created and I connected 30 media images 66 00:05:39,210 --> 00:05:48,570 as well with 4 different categories called Photo types in the categories of still life people. 67 00:05:48,570 --> 00:05:56,140 Landscape and dogs go ahead and open up under photographs click photographs. 68 00:05:56,180 --> 00:06:00,230 So we get a list of posts in our custom post type called photographs. 69 00:06:00,230 --> 00:06:05,930 You'll see that there is 30 items and they're all titled and they have a little bit of information across 70 00:06:05,930 --> 00:06:07,080 the top. 71 00:06:07,160 --> 00:06:14,570 Follow along as I show you how I created this post type as well as some other items. 72 00:06:14,570 --> 00:06:18,880 If you look under can custom press content types. 73 00:06:18,980 --> 00:06:26,300 We've got a photograph post type as well as a taxonomies tab and custom fields that I'll be customizing 74 00:06:26,420 --> 00:06:33,560 for you and I've already created it's already live inside of your sandbox site so if you have the custom 75 00:06:33,560 --> 00:06:41,150 press content type screen open follow along as I show you how I created the custom post type the custom 76 00:06:41,150 --> 00:06:52,080 taxonomy and the custom fields so click photograph and let's check out the editing post type screen 77 00:06:52,380 --> 00:06:55,300 you can see that I've used photograph up here. 78 00:06:55,470 --> 00:06:59,770 Now I'll cut to the footage where I created this post type itself. 79 00:07:00,060 --> 00:07:04,640 So let's use the word photograph right here as the post typed. 80 00:07:04,650 --> 00:07:08,370 And once you name it you can't change it if you needed to change the name of it. 81 00:07:08,370 --> 00:07:12,560 You'd have to create a new post type for that. 82 00:07:12,710 --> 00:07:14,710 It doesn't matter if you capitalize it or not. 83 00:07:14,720 --> 00:07:17,900 It'll change it to all lowercase. 84 00:07:17,900 --> 00:07:18,470 We're going to leave. 85 00:07:18,470 --> 00:07:23,360 Title checked and we're going to register support for the editor. 86 00:07:23,360 --> 00:07:27,660 That's the post editor so that we can add content to this custom post. 87 00:07:27,980 --> 00:07:35,110 We're going to be using the featured image so we'll click thumbnail and will also allow an excerpt for 88 00:07:35,110 --> 00:07:39,400 our new posts and then we can scroll down and leave the rest unchecked. 89 00:07:40,390 --> 00:07:48,070 Now we are going to be making a custom post type like a category but let's assign regular taxonomies 90 00:07:48,070 --> 00:07:54,520 categories and tags so that the theme will be able to display both of these and our custom ones as well 91 00:07:55,810 --> 00:08:02,290 as we go down leave the default settings for capability type and leave make sure that map Medak capabilities 92 00:08:02,380 --> 00:08:10,460 is checked as true and as we go down we're going to be choosing how WordPress displays the labels for 93 00:08:10,460 --> 00:08:12,560 this custom post type. 94 00:08:12,560 --> 00:08:22,620 So we have photographs usually plural for the name the singular name is going to be photograph and new 95 00:08:24,130 --> 00:08:27,800 and add new item should be add new photograph. 96 00:08:28,270 --> 00:08:30,030 And I'm just going to keep going down. 97 00:08:30,160 --> 00:08:34,100 And I've done this before you can see that it's filling in the fields for me as I go. 98 00:08:34,100 --> 00:08:40,360 There's a little bit of text gives you some a suggestion about what the default is and so you can define 99 00:08:40,360 --> 00:08:49,540 it for your own post type name so it will be new photograph here view photograph if we want to search 100 00:08:50,110 --> 00:08:53,300 photographs you can see that it's usually plural 101 00:08:56,080 --> 00:09:01,220 no photographs found no photographs found in trash. 102 00:09:01,570 --> 00:09:07,380 And we can see that it's not used on nonhierarchical types which is what this is. 103 00:09:07,390 --> 00:09:11,920 But you can put parent photograph if you like won't actually be used. 104 00:09:13,230 --> 00:09:20,910 And then the custom fields block photograph information as we go down the left hand column we can leave 105 00:09:20,910 --> 00:09:28,550 the description blank for now we can choose where to put our menu item here on the left hand side. 106 00:09:28,710 --> 00:09:30,320 I'm just going to place it here below. 107 00:09:30,330 --> 00:09:37,380 Pages which is instructed down here can leave the icon blank and it will use the pin icon that's the 108 00:09:37,380 --> 00:09:39,420 default icon for posts right here. 109 00:09:39,420 --> 00:09:40,250 Pushpin. 110 00:09:40,590 --> 00:09:45,700 So scroll back up and go down the right hand side we're pretty much leaving these to the default. 111 00:09:45,690 --> 00:09:48,210 It'll be public so we leave that as true. 112 00:09:48,390 --> 00:09:53,480 These aren't changeable right now since it's public will go down to the next election. 113 00:09:53,490 --> 00:09:57,100 This isn't going to be a hierarchical post type. 114 00:09:57,270 --> 00:10:03,300 But when we do go up and choose a taxonomy for it we're going to make a hierarchical taxonomy which 115 00:10:03,300 --> 00:10:09,930 where we can have parents and child categories basically for these photographs if we need to. 116 00:10:10,020 --> 00:10:12,300 So I'll leave this as false. 117 00:10:12,330 --> 00:10:14,210 It has an archive. 118 00:10:14,400 --> 00:10:15,350 True. 119 00:10:15,630 --> 00:10:21,180 And I'd like it to be called photographs also. 120 00:10:21,560 --> 00:10:27,770 I'll have the rewrite as true and just leave this as the default. 121 00:10:28,340 --> 00:10:34,550 And in terms of eppi mask and endpoint mask this is more advanced but we can just leave none checked 122 00:10:34,920 --> 00:10:36,460 leave query over there. 123 00:10:36,540 --> 00:10:37,390 True. 124 00:10:37,610 --> 00:10:39,840 And this export import. 125 00:10:39,860 --> 00:10:41,060 True that's fine. 126 00:10:41,300 --> 00:10:48,410 And then click Add post type and now by doing that I've created a post type called photograph and therefore 127 00:10:48,410 --> 00:10:55,440 I can create posts that are photographed posts and now we can create a custom taxonomy for it. 128 00:10:55,460 --> 00:10:59,240 Basically a category as well as a series of custom fields. 129 00:10:59,600 --> 00:11:05,960 Let's click the next tab across Cobbe taxonomies and we're going to create a taxonomy for our custom 130 00:11:05,960 --> 00:11:07,210 post type. 131 00:11:07,210 --> 00:11:14,390 So click add taxonomy and we've got again a two column lay out of a whole bunch of different settings 132 00:11:14,630 --> 00:11:17,170 for this custom taxonomy. 133 00:11:17,170 --> 00:11:18,710 It's the same type of thing. 134 00:11:18,800 --> 00:11:25,960 So use photo underscore type and we're going to make this available for the photograph. 135 00:11:25,970 --> 00:11:35,960 Custom poster to only check photograph and then as we go down again we're going to use photo type usually 136 00:11:35,960 --> 00:11:43,970 plural so we need this one to be photo types and the singular one is called photo type and knew would 137 00:11:43,970 --> 00:11:48,360 be add new photo type and new photo type. 138 00:11:48,370 --> 00:11:56,740 This is what it will say when we want to edit the photo type update photo type search photo types. 139 00:11:56,740 --> 00:11:59,820 Usually it's a plural. 140 00:11:59,830 --> 00:12:02,960 This one will be popular photo types. 141 00:12:02,980 --> 00:12:05,760 This one is all photo types. 142 00:12:05,910 --> 00:12:13,330 It's with the parent photo type and with a colon this will be parent photo type with a colon add or 143 00:12:13,330 --> 00:12:15,140 remove. 144 00:12:15,200 --> 00:12:18,730 Now this isn't used on hierarchical taxonomies. 145 00:12:18,830 --> 00:12:24,740 We are going to define this taxonomy as a hierarchical one so I'm leaving this one blank this one isn't 146 00:12:24,740 --> 00:12:29,390 used on hierarchical taxonomy so I'm leaving separate items blank. 147 00:12:29,780 --> 00:12:35,690 And I'm also leaving choose for most used blank because this is going to be a hierarchical taxonomy 148 00:12:35,900 --> 00:12:37,940 basically similar to categories. 149 00:12:39,390 --> 00:12:40,750 Almost finished. 150 00:12:40,890 --> 00:12:43,790 Now we can click true for show admen column. 151 00:12:43,800 --> 00:12:50,460 This lets us show the different types of columns inside of the admin area. 152 00:12:50,460 --> 00:12:54,230 It'll show us information about each of our taxonomies if we like. 153 00:12:54,450 --> 00:12:58,670 We want to leave it public and then these are just automatically selected for us. 154 00:12:58,670 --> 00:13:00,820 This is important under hierarchical. 155 00:13:00,960 --> 00:13:08,670 We're going to make this true so that our custom taxonomy here is like category's not like tags so we 156 00:13:08,670 --> 00:13:14,060 can leave the rest the same as the default rewrite it needs to be true. 157 00:13:14,120 --> 00:13:15,930 The mask can be none. 158 00:13:16,050 --> 00:13:18,150 And then add taxonomy type 159 00:13:21,360 --> 00:13:25,970 one more setting inside of custom fields. 160 00:13:26,160 --> 00:13:31,930 We're going to add a custom field for our post type. 161 00:13:32,010 --> 00:13:37,680 Now we'll just create three different custom fields one for the type of camera. 162 00:13:38,010 --> 00:13:40,290 And I found using this plug in. 163 00:13:40,290 --> 00:13:46,140 It's nice to have a colon at the end of the title because the display is a little bit easier. 164 00:13:46,210 --> 00:13:53,820 So if we look over at my example here remember in our single post if we scroll down it shows some image 165 00:13:53,820 --> 00:14:02,040 data so camer a colon and then whatever the photographer filled in inside the puts and then lands and 166 00:14:02,040 --> 00:14:07,980 then what type of lens and we're going to set up those custom fields right now inside of your student 167 00:14:08,020 --> 00:14:09,040 Sandboxie. 168 00:14:09,330 --> 00:14:14,440 So use camera Colan it doesn't necessarily have to be required. 169 00:14:14,470 --> 00:14:22,090 I think I did require the type of camera but then leave the lens and the date open and leave the default 170 00:14:22,090 --> 00:14:32,050 for these now this one I've used a radio button with two different cameras so you can put anything you 171 00:14:32,050 --> 00:14:32,770 want in here really. 172 00:14:32,770 --> 00:14:40,160 But I put two different cameras that I own and I'll add another option called iPhone 6. 173 00:14:41,170 --> 00:14:46,780 So two types of cameras one or the other makes it easy for the user to choose from the two. 174 00:14:47,230 --> 00:14:53,310 And we're going to be using this custom field in one of our post types and it's the photograph posts 175 00:14:53,320 --> 00:14:58,860 type and then scroll down and add that custom field. 176 00:14:59,100 --> 00:15:01,950 And now we're going to do two more and we're done. 177 00:15:02,860 --> 00:15:06,130 So now we'll do lens. 178 00:15:06,410 --> 00:15:13,160 Colin we can make that non required because obviously if you're going to use the iPhone you might not 179 00:15:13,160 --> 00:15:17,060 put a lens I don't want to make that required. 180 00:15:17,060 --> 00:15:24,590 We can leave it as a text box or they can fill in whatever lens and we need to then add it to this post 181 00:15:24,590 --> 00:15:25,060 type. 182 00:15:25,130 --> 00:15:26,310 And that's our last step 183 00:15:30,900 --> 00:15:31,680 last one. 184 00:15:34,360 --> 00:15:41,110 Just in case the person is adding a bunch of photographs into their web site and it's all on a certain 185 00:15:41,110 --> 00:15:47,790 date you don't want to have to go and change the date of the post but will have a specific date taken 186 00:15:47,800 --> 00:15:51,370 field so that the photograph was taken on a certain date. 187 00:15:51,580 --> 00:15:54,450 And in this way we can use any of these elections. 188 00:15:54,630 --> 00:15:57,470 And let's experiment with the date picker. 189 00:15:57,850 --> 00:15:59,220 And so this is good. 190 00:15:59,220 --> 00:16:05,040 You can go and choose the way that you want to have the date formatted for you. 191 00:16:05,110 --> 00:16:08,230 For us it's usually like this in the USA. 192 00:16:08,470 --> 00:16:15,630 So I select that one and go down and select for this custom post type again and click add custom field 193 00:16:16,800 --> 00:16:17,630 in this video. 194 00:16:17,700 --> 00:16:22,770 You've followed along with the set up steps for creating a certain custom post type called photographs 195 00:16:23,070 --> 00:16:29,280 using the custom press plugin since you activated the plug in however I've populated your sandbox site 196 00:16:29,280 --> 00:16:34,980 with the content and images you need and your custom post photographs is already fleshed out with your 197 00:16:34,980 --> 00:16:36,050 content. 198 00:16:36,090 --> 00:16:40,760 That way you won't have to create each of the posts yourself in the next video. 199 00:16:40,800 --> 00:16:45,930 You'll start by creating a few new posts for your custom post type then you'll customize the display 200 00:16:45,930 --> 00:16:48,730 of the new content inside the cafe pro theme. 201 00:16:48,990 --> 00:16:49,470 Let's do it.