1 00:00:00,860 --> 00:00:06,560 In this video we'll wrap up the Cafepress site with some finishing touches organizing our new content. 2 00:00:06,810 --> 00:00:12,570 You'll organize the photography content into the home page sections and you'll create a dynamic footer 3 00:00:12,570 --> 00:00:18,300 widget that displays image data for each photograph but only when the single photograph page is displayed 4 00:00:18,840 --> 00:00:24,210 by the end we'll have finished our site with display of the custom post type content and created a widget 5 00:00:24,210 --> 00:00:27,530 area that displays different content depending on the page. 6 00:00:29,050 --> 00:00:35,080 Looking at our site that I have open in another tab I'm looking at the photographs archive page which 7 00:00:35,080 --> 00:00:40,020 we've set up in the last video to have our 600 pixel white image on the left. 8 00:00:40,060 --> 00:00:48,490 An excerpt of the content on the right along with the category or photo type and the tags over on the 9 00:00:48,490 --> 00:00:49,430 other side. 10 00:00:49,450 --> 00:00:56,650 Now when we're looking at an archive page or the home page we've got three widgets across the bottom 11 00:00:56,890 --> 00:00:58,890 the middle one is recent posts. 12 00:00:59,050 --> 00:01:06,820 But what I'd like to do is for one we have a single post open and looking at a single photo. 13 00:01:06,910 --> 00:01:12,940 I want this center widget to display the image data like I have right here. 14 00:01:12,940 --> 00:01:14,470 Now how did I accomplish that. 15 00:01:15,600 --> 00:01:22,230 Well if I go back into the Wordpress dashboard under plug ins one of the plug ins that I have which 16 00:01:22,230 --> 00:01:28,140 is a premium plug in from WBM you Dev is called Custom sidebars pro. 17 00:01:28,350 --> 00:01:34,740 Go ahead and navigate to plug ins and click activate so that you activate the custom sidebars pro plugin 18 00:01:35,310 --> 00:01:42,510 that will enable us to display any widget inside of a widget area conditionally or only on certain pages 19 00:01:42,960 --> 00:01:46,180 so that I have that plugin activated. 20 00:01:46,320 --> 00:01:54,150 Let's go back into appearance widgets and you'll see that this plug in makes the widget page look slightly 21 00:01:54,150 --> 00:01:54,880 different. 22 00:01:56,140 --> 00:01:59,530 It's got all of our standard widgets over here on the right side. 23 00:02:00,010 --> 00:02:03,000 And we've got custom sidebars here. 24 00:02:03,310 --> 00:02:10,930 So if I want to make under custom sidebars or create a new one and this one is going to be image data 25 00:02:11,040 --> 00:02:13,780 and you can follow along and do the same thing. 26 00:02:13,950 --> 00:02:22,330 I'll just create that sidebar which is basically a widget area called image data inside of the image 27 00:02:22,330 --> 00:02:23,500 data sidebar. 28 00:02:23,500 --> 00:02:27,890 I'm going to scroll down here a little bit and put a text widget inside. 29 00:02:28,060 --> 00:02:34,450 I'm going to call it image data and then the content is going to be a short code that displays that 30 00:02:34,480 --> 00:02:35,430 image data. 31 00:02:35,440 --> 00:02:43,790 So when we save this for now then I'm going to go back and find inside of my custom press content types. 32 00:02:44,190 --> 00:02:53,190 I'm going to look for my custom fields and if I click Custom fields block with the brackets and could 33 00:02:53,270 --> 00:02:58,230 Control-C to copy it I've got that short code and I can stick it wherever I want. 34 00:02:58,230 --> 00:03:06,950 You know post a page or a widget and go back to appearance widgets and then open up that image data 35 00:03:07,190 --> 00:03:12,460 text widget place that shortcut by control the copying it right in there. 36 00:03:12,460 --> 00:03:13,480 Let's save it. 37 00:03:14,540 --> 00:03:19,320 I'll scroll down just a little bit so I can see the bottom of this widget area and I'm going to click. 38 00:03:19,320 --> 00:03:27,640 Sidebar location and what I'd like to do is attach this sidebar to the footer the center footer footer 39 00:03:27,660 --> 00:03:37,220 to and I'd like to only place it in footer too when I have a separate post type of photographs. 40 00:03:37,320 --> 00:03:44,910 And so when I'm looking at a photograph post type it's going to replace what I have in footer to stand 41 00:03:44,940 --> 00:03:50,510 as a standard with this image data widget and I click save changes. 42 00:03:50,520 --> 00:03:58,190 Now if we go over to the single post prairie truck and refresh the page I'm looking at a photograph. 43 00:03:58,190 --> 00:04:06,040 And so instead of the standard footer to now I've got image data about this particular photograph. 44 00:04:06,040 --> 00:04:14,620 So if I go to an archive page like landscape go down to the footer it's got whatever I had as a standard 45 00:04:14,620 --> 00:04:15,450 footer too. 46 00:04:15,640 --> 00:04:23,730 But if I choose any single image which is a photograph post type I go down and I've replaced that widget 47 00:04:24,040 --> 00:04:26,320 with the camera image data. 48 00:04:26,920 --> 00:04:34,510 So by using custom sidebars pro we're learning about conditional formatting or dynamic content that 49 00:04:34,510 --> 00:04:40,400 displays itself depending on what type of page is being viewed by the visitor. 50 00:04:40,450 --> 00:04:47,980 There is another free dynamic widgets plugin that I've found that works well it's just not quite as 51 00:04:48,010 --> 00:04:54,860 easy or powerful but in wordpress dot org I'll show you what that plugin is under. 52 00:04:54,880 --> 00:05:00,400 Plugins we can do a search for dynamic widgets 53 00:05:04,230 --> 00:05:06,010 here it is by Kerl. 54 00:05:06,030 --> 00:05:07,750 It's called Dynamic widgets. 55 00:05:07,800 --> 00:05:15,330 80000 plus active installations and it lets you dynamically show or hide widgets on WordPress pages 56 00:05:15,330 --> 00:05:16,690 and posts. 57 00:05:16,860 --> 00:05:20,910 It works real well and is a free plug in within the Wordpress repository. 58 00:05:22,790 --> 00:05:24,200 Here's a challenge for you. 59 00:05:24,230 --> 00:05:32,690 Back in our home page I want you remember that I made a five widget widget area and I changed it to 60 00:05:32,690 --> 00:05:33,600 blue. 61 00:05:33,620 --> 00:05:39,860 We went through and we left a single widget in this front page for widget area. 62 00:05:39,860 --> 00:05:45,890 Now you can see that the foot is displaying the regular widget content not the image data. 63 00:05:45,890 --> 00:05:52,790 Your challenge is to replace the three home page background images with three images that we just imported 64 00:05:52,820 --> 00:05:54,410 into our new site. 65 00:05:54,440 --> 00:05:56,410 Good luck. 66 00:05:56,460 --> 00:05:58,220 That should have been easy enough for you. 67 00:05:58,320 --> 00:06:00,180 But here's how I would do it. 68 00:06:00,180 --> 00:06:08,220 I'd go under appearance customize and as that's opening I know that I need to change the background 69 00:06:08,250 --> 00:06:14,940 images so I've clicked background images and I can see that I've got three background images here and 70 00:06:14,940 --> 00:06:21,030 I'm just going to change the images and use an image from my media library for the first second and 71 00:06:21,030 --> 00:06:28,350 third I'll refresh the page and our site is really starting to look customized now. 72 00:06:33,230 --> 00:06:42,260 Now down in this front page for widget area I'd like to put all of our photograph categories as links 73 00:06:42,260 --> 00:06:50,440 in here with four different widgets that can display and be clicked through to our photo types page 74 00:06:50,470 --> 00:06:53,200 is now before I do that. 75 00:06:53,210 --> 00:06:56,870 I'm going to look up on my desktop here under demo content. 76 00:06:57,080 --> 00:07:00,950 The cafe pro Genesis layout configuration. 77 00:07:01,100 --> 00:07:07,910 So open the cafe pro layouts document again and I want to make sure that by showing four different widgets 78 00:07:07,910 --> 00:07:11,970 in this widget area it will be displayed as I like. 79 00:07:11,990 --> 00:07:12,260 Great. 80 00:07:12,260 --> 00:07:17,750 It looks like if I show four widgets in a widget area in the cafe pro theme there are going to be one 81 00:07:17,750 --> 00:07:22,480 two three four in a nice four widget grid. 82 00:07:22,630 --> 00:07:30,010 So I'll show you how I go about creating one photo type category widget and placing it in here. 83 00:07:30,160 --> 00:07:35,590 And then your challenge will be to create all four for our four photo categories. 84 00:07:35,590 --> 00:07:41,680 Back in the Wordpress dashboard it will be easiest to use the Customize her so that we can see our changes 85 00:07:41,710 --> 00:07:53,260 as we make them and I'm going to go and click widgets I'm going to be focusing on that's the front page 86 00:07:53,380 --> 00:07:59,640 for widget which right now is is containing one text widget. 87 00:08:00,100 --> 00:08:06,940 I can continue to just use that text widget and I'm going to change the content so maybe I just call 88 00:08:06,940 --> 00:08:08,260 it dogs. 89 00:08:10,940 --> 00:08:16,000 And in the content area one of the things I'm going to do is put a little description. 90 00:08:16,010 --> 00:08:23,660 So I'm going to use a little Lorem of some text here I've grabbed just a single sentence of Lorem if 91 00:08:23,660 --> 00:08:26,670 some text and copied it to the clipboard. 92 00:08:26,930 --> 00:08:33,200 If I paste it just within the content area I will show how much text I might have of course these are 93 00:08:33,200 --> 00:08:38,940 going to be a half of the content area in a grid of four text widgets. 94 00:08:38,960 --> 00:08:41,990 So I don't have to worry about how wide that is at the moment. 95 00:08:43,010 --> 00:08:44,770 So what else do I need here. 96 00:08:44,810 --> 00:08:50,650 We need to have something that's clickable to the dog category page or photo type page. 97 00:08:50,840 --> 00:08:59,150 Well first I'll just automatically add paragraphs Yes and I'll put two line breaks and then I'm going 98 00:08:59,150 --> 00:09:01,760 to do a read more. 99 00:09:01,810 --> 00:09:03,400 Are a couple of little arrows. 100 00:09:03,470 --> 00:09:10,700 Piece of text and I know that that needs to be a link to the category page so it'll be easy enough for 101 00:09:10,700 --> 00:09:14,210 me to find over here in my website itself. 102 00:09:14,240 --> 00:09:22,580 I know that if I go to a slash photographs I can find the photographs and you know I need to go to and 103 00:09:22,580 --> 00:09:31,270 find a dog post and then I can click dogs or I could have just right clicked and copied the link location. 104 00:09:31,340 --> 00:09:39,170 But that is the URL so I'm hitting Control-C and under my with my read more link here. 105 00:09:39,200 --> 00:09:45,740 I really just need to build a little piece of it to your mail to contain that link. 106 00:09:45,740 --> 00:09:53,150 So we've learned this before but it is Khairat a H.F. equals quotation. 107 00:09:53,150 --> 00:10:01,560 And then I'm hitting control V to paste the URL and then I'm going to end quote and greater than symbol 108 00:10:01,560 --> 00:10:07,220 to and that anchor tag the read more is what's going to be clickable and then I'm going to close that 109 00:10:07,220 --> 00:10:13,110 anchor tag by putting a slash a within the tag symbols. 110 00:10:13,160 --> 00:10:18,240 There it is there you can see that will be clickable to that category. 111 00:10:18,290 --> 00:10:18,730 Great. 112 00:10:18,740 --> 00:10:25,150 One more thing I'd like to put a thumbnail image above the text here that has one of the dog pictures 113 00:10:26,310 --> 00:10:29,350 so up here I would do this. 114 00:10:29,910 --> 00:10:32,840 And I'm just going to put a little placeholder here. 115 00:10:32,850 --> 00:10:39,660 Call it dog image and then I've got to arrange what my thumbnail sizes are and find a clickable link 116 00:10:39,660 --> 00:10:45,150 to the dog image because we can make this image clickable to the dog's page as well. 117 00:10:45,210 --> 00:10:50,190 So I'm going to save and publish and customize her because I'm going to get out of the Customize her 118 00:10:50,640 --> 00:10:57,510 first thing I'm going to do is look at my media settings and I see that I've got a medium size of 600 119 00:10:57,520 --> 00:11:04,770 but that's going to be too big a thumbnail size of 300 by 100 which we created before and I really like 120 00:11:04,800 --> 00:11:06,900 inside of this cafe pro theme. 121 00:11:07,170 --> 00:11:08,850 So I'm going to use that thumbnail size. 122 00:11:08,850 --> 00:11:09,900 That's fine. 123 00:11:09,900 --> 00:11:14,870 But one thing I want to do is I'm just going to open a random page. 124 00:11:14,880 --> 00:11:20,820 In fact I'm actually going to just create a new page that I'm not going to use for anything and I'm 125 00:11:20,820 --> 00:11:26,620 actually going to I'm going to add media I'm going to choose a dog picture. 126 00:11:26,670 --> 00:11:29,910 Let's see what's a cool dog picture that could be cropped. 127 00:11:29,910 --> 00:11:31,870 Well that sounds great. 128 00:11:32,070 --> 00:11:35,960 And I'm going to choose the 300 by 100 thumbnail. 129 00:11:36,060 --> 00:11:40,510 I'm going to make it link to a custom You are RL and that you are. 130 00:11:40,530 --> 00:11:45,100 I'm going to paste which is our photo type slash dogs. 131 00:11:45,120 --> 00:11:46,070 You are. 132 00:11:46,350 --> 00:11:52,650 And I also want it to be centered so I'm going to insert that into the page which is making my image 133 00:11:52,860 --> 00:11:54,920 the way that I want it and clickable. 134 00:11:54,940 --> 00:12:01,950 And now if I hit the text tab at the top right of my content area I can grab that entire anchor tag 135 00:12:01,950 --> 00:12:07,920 and clean the image and where it links to and hit Control C I can actually you know I might even just 136 00:12:08,340 --> 00:12:14,760 create a widget image links and save this as a draft that will be published on the web site but I can 137 00:12:14,760 --> 00:12:20,620 come back here and create more or grab this image link as many times as I like. 138 00:12:20,820 --> 00:12:26,640 Well now that I've copied it to the clipboard I'm going to go back to appearance customize and I'll 139 00:12:26,640 --> 00:12:33,390 open the widget editing area again go to front page 4 and on that dog's widget. 140 00:12:33,420 --> 00:12:36,400 Scroll down so I can see my results. 141 00:12:38,310 --> 00:12:45,720 Instead of dog image I'm going to put that piece of text that I copied and paste it right there. 142 00:12:45,720 --> 00:12:46,350 That looks great. 143 00:12:46,350 --> 00:12:53,640 Now I can see that image will be nicely arranged in a widget that's half this width great. 144 00:12:53,700 --> 00:13:01,090 So let's make this year challenge follow the instructions that I just gave you and create 4 widgets 145 00:13:01,300 --> 00:13:07,750 that can sit inside the front page for widget area and flush out the home page with links to the four 146 00:13:07,750 --> 00:13:10,590 different photo type categories. 147 00:13:10,600 --> 00:13:13,050 Good luck How did it go. 148 00:13:13,050 --> 00:13:16,710 I'm going to show you one more thing that you may have discovered about this. 149 00:13:16,740 --> 00:13:18,070 Read more link. 150 00:13:18,300 --> 00:13:29,820 Well you could go back into your saved image links page and by using a visual editor like go to another 151 00:13:29,820 --> 00:13:30,500 line. 152 00:13:30,630 --> 00:13:41,820 And if I want to type read more and my two arrows select that click add a link and then I could copy 153 00:13:41,820 --> 00:13:43,360 this again. 154 00:13:44,930 --> 00:13:47,970 Paste it in there click apply. 155 00:13:48,130 --> 00:13:56,520 And now when I go to the text editing I can get that piece of text copy it and then place it under the 156 00:13:56,520 --> 00:14:04,920 customize or into my text widget as they go into the customize or and open the widgets panel I can look 157 00:14:04,920 --> 00:14:14,820 at from page 4 and my dog's widget if I replace my hand typed anchor tag with the one that I got from 158 00:14:14,820 --> 00:14:19,540 my links page it's exactly the same. 159 00:14:19,750 --> 00:14:27,280 Just to show you my process as I create the last widget in my front page for widget area here's my widget 160 00:14:27,310 --> 00:14:30,510 image links page that I'm using to get my code. 161 00:14:30,640 --> 00:14:36,550 I've got the four thumbnails for each of the categories that I want to use and the read more link done 162 00:14:36,550 --> 00:14:37,760 in the Visual Editor. 163 00:14:37,840 --> 00:14:39,770 Well here's the text version. 164 00:14:39,820 --> 00:14:48,230 So for my last widget I first need to get copying that code for the image and I have widgets appear 165 00:14:48,240 --> 00:14:50,720 it's widgets open in another tab. 166 00:14:50,980 --> 00:14:58,840 So I can go down here and I'm creating my last one called Still Life paste that there hit automatically 167 00:14:58,840 --> 00:15:00,010 add paragraphs. 168 00:15:00,010 --> 00:15:05,980 So two carriage returns right there and I can just go back here and I can actually go to my Lorem if 169 00:15:06,040 --> 00:15:11,120 some page hit copy and copy that into the middle. 170 00:15:11,200 --> 00:15:14,410 Another two enters go back here. 171 00:15:15,110 --> 00:15:22,090 And grab my read more link paste that in there and hit save. 172 00:15:22,160 --> 00:15:24,800 And that's what I've done for all four widgets. 173 00:15:24,800 --> 00:15:30,620 So if I go to my site and go to the home page let's go down and look at my results. 174 00:15:30,620 --> 00:15:39,840 Hopefully yours had a similar look down in front page for nice and looks great. 175 00:15:39,840 --> 00:15:46,080 And if you click the image or the read more link you'll go to that category page you can see the landscape 176 00:15:46,800 --> 00:15:52,470 and then here are my landscape posts three pages of them. 177 00:15:52,600 --> 00:15:57,970 And one last check showing the regular recent posts widget in the footer. 178 00:15:58,180 --> 00:16:06,960 But if I click any of my individual photographs as I scroll down and look at it I've got my image my 179 00:16:07,000 --> 00:16:14,850 content category and tags and there's my image data for this particular photograph. 180 00:16:15,030 --> 00:16:21,450 In this final video in the chapter you used the custom sidebars pro plugin from WPA you dev to create 181 00:16:21,450 --> 00:16:24,350 a dynamically changing widget for the footer. 182 00:16:24,780 --> 00:16:30,750 And on the home page you replace the default background images and created for text widgets for the 183 00:16:30,750 --> 00:16:36,300 home page pointing to the custom photo category pages in the next chapter. 184 00:16:36,350 --> 00:16:40,880 You'll use the author pro plugin for setting up another site with a custom post type. 185 00:16:41,000 --> 00:16:46,430 This time taking advantage of the fully featured plugin will explore how studio press has created a 186 00:16:46,430 --> 00:16:52,220 custom post types plug in that has a lot of content display options unlike the more generic custom press 187 00:16:52,220 --> 00:16:53,360 plug in we just used