In this video we'll wrap up the Cafepress site with some finishing touches organizing our new content.
You'll organize the photography content into the home page sections and you'll create a dynamic footer
widget that displays image data for each photograph but only when the single photograph page is displayed
by the end we'll have finished our site with display of the custom post type content and created a widget
area that displays different content depending on the page.
Looking at our site that I have open in another tab I'm looking at the photographs archive page which
we've set up in the last video to have our 600 pixel white image on the left.
An excerpt of the content on the right along with the category or photo type and the tags over on the
other side.
Now when we're looking at an archive page or the home page we've got three widgets across the bottom
the middle one is recent posts.
But what I'd like to do is for one we have a single post open and looking at a single photo.
I want this center widget to display the image data like I have right here.
Now how did I accomplish that.
Well if I go back into the Wordpress dashboard under plug ins one of the plug ins that I have which
is a premium plug in from WBM you Dev is called Custom sidebars pro.
Go ahead and navigate to plug ins and click activate so that you activate the custom sidebars pro plugin
that will enable us to display any widget inside of a widget area conditionally or only on certain pages
so that I have that plugin activated.
Let's go back into appearance widgets and you'll see that this plug in makes the widget page look slightly
different.
It's got all of our standard widgets over here on the right side.
And we've got custom sidebars here.
So if I want to make under custom sidebars or create a new one and this one is going to be image data
and you can follow along and do the same thing.
I'll just create that sidebar which is basically a widget area called image data inside of the image
data sidebar.
I'm going to scroll down here a little bit and put a text widget inside.
I'm going to call it image data and then the content is going to be a short code that displays that
image data.
So when we save this for now then I'm going to go back and find inside of my custom press content types.
I'm going to look for my custom fields and if I click Custom fields block with the brackets and could
Control-C to copy it I've got that short code and I can stick it wherever I want.
You know post a page or a widget and go back to appearance widgets and then open up that image data
text widget place that shortcut by control the copying it right in there.
Let's save it.
I'll scroll down just a little bit so I can see the bottom of this widget area and I'm going to click.
Sidebar location and what I'd like to do is attach this sidebar to the footer the center footer footer
to and I'd like to only place it in footer too when I have a separate post type of photographs.
And so when I'm looking at a photograph post type it's going to replace what I have in footer to stand
as a standard with this image data widget and I click save changes.
Now if we go over to the single post prairie truck and refresh the page I'm looking at a photograph.
And so instead of the standard footer to now I've got image data about this particular photograph.
So if I go to an archive page like landscape go down to the footer it's got whatever I had as a standard
footer too.
But if I choose any single image which is a photograph post type I go down and I've replaced that widget
with the camera image data.
So by using custom sidebars pro we're learning about conditional formatting or dynamic content that
displays itself depending on what type of page is being viewed by the visitor.
There is another free dynamic widgets plugin that I've found that works well it's just not quite as
easy or powerful but in wordpress dot org I'll show you what that plugin is under.
Plugins we can do a search for dynamic widgets
here it is by Kerl.
It's called Dynamic widgets.
80000 plus active installations and it lets you dynamically show or hide widgets on WordPress pages
and posts.
It works real well and is a free plug in within the Wordpress repository.
Here's a challenge for you.
Back in our home page I want you remember that I made a five widget widget area and I changed it to
blue.
We went through and we left a single widget in this front page for widget area.
Now you can see that the foot is displaying the regular widget content not the image data.
Your challenge is to replace the three home page background images with three images that we just imported
into our new site.
Good luck.
That should have been easy enough for you.
But here's how I would do it.
I'd go under appearance customize and as that's opening I know that I need to change the background
images so I've clicked background images and I can see that I've got three background images here and
I'm just going to change the images and use an image from my media library for the first second and
third I'll refresh the page and our site is really starting to look customized now.
Now down in this front page for widget area I'd like to put all of our photograph categories as links
in here with four different widgets that can display and be clicked through to our photo types page
is now before I do that.
I'm going to look up on my desktop here under demo content.
The cafe pro Genesis layout configuration.
So open the cafe pro layouts document again and I want to make sure that by showing four different widgets
in this widget area it will be displayed as I like.
Great.
It looks like if I show four widgets in a widget area in the cafe pro theme there are going to be one
two three four in a nice four widget grid.
So I'll show you how I go about creating one photo type category widget and placing it in here.
And then your challenge will be to create all four for our four photo categories.
Back in the Wordpress dashboard it will be easiest to use the Customize her so that we can see our changes
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
for widget which right now is is containing one text widget.
I can continue to just use that text widget and I'm going to change the content so maybe I just call
it dogs.
And in the content area one of the things I'm going to do is put a little description.
So I'm going to use a little Lorem of some text here I've grabbed just a single sentence of Lorem if
some text and copied it to the clipboard.
If I paste it just within the content area I will show how much text I might have of course these are
going to be a half of the content area in a grid of four text widgets.
So I don't have to worry about how wide that is at the moment.
So what else do I need here.
We need to have something that's clickable to the dog category page or photo type page.
Well first I'll just automatically add paragraphs Yes and I'll put two line breaks and then I'm going
to do a read more.
Are a couple of little arrows.
Piece of text and I know that that needs to be a link to the category page so it'll be easy enough for
me to find over here in my website itself.
I know that if I go to a slash photographs I can find the photographs and you know I need to go to and
find a dog post and then I can click dogs or I could have just right clicked and copied the link location.
But that is the URL so I'm hitting Control-C and under my with my read more link here.
I really just need to build a little piece of it to your mail to contain that link.
So we've learned this before but it is Khairat a H.F. equals quotation.
And then I'm hitting control V to paste the URL and then I'm going to end quote and greater than symbol
to and that anchor tag the read more is what's going to be clickable and then I'm going to close that
anchor tag by putting a slash a within the tag symbols.
There it is there you can see that will be clickable to that category.
Great.
One more thing I'd like to put a thumbnail image above the text here that has one of the dog pictures
so up here I would do this.
And I'm just going to put a little placeholder here.
Call it dog image and then I've got to arrange what my thumbnail sizes are and find a clickable link
to the dog image because we can make this image clickable to the dog's page as well.
So I'm going to save and publish and customize her because I'm going to get out of the Customize her
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
but that's going to be too big a thumbnail size of 300 by 100 which we created before and I really like
inside of this cafe pro theme.
So I'm going to use that thumbnail size.
That's fine.
But one thing I want to do is I'm just going to open a random page.
In fact I'm actually going to just create a new page that I'm not going to use for anything and I'm
actually going to I'm going to add media I'm going to choose a dog picture.
Let's see what's a cool dog picture that could be cropped.
Well that sounds great.
And I'm going to choose the 300 by 100 thumbnail.
I'm going to make it link to a custom You are RL and that you are.
I'm going to paste which is our photo type slash dogs.
You are.
And I also want it to be centered so I'm going to insert that into the page which is making my image
the way that I want it and clickable.
And now if I hit the text tab at the top right of my content area I can grab that entire anchor tag
and clean the image and where it links to and hit Control C I can actually you know I might even just
create a widget image links and save this as a draft that will be published on the web site but I can
come back here and create more or grab this image link as many times as I like.
Well now that I've copied it to the clipboard I'm going to go back to appearance customize and I'll
open the widget editing area again go to front page 4 and on that dog's widget.
Scroll down so I can see my results.
Instead of dog image I'm going to put that piece of text that I copied and paste it right there.
That looks great.
Now I can see that image will be nicely arranged in a widget that's half this width great.
So let's make this year challenge follow the instructions that I just gave you and create 4 widgets
that can sit inside the front page for widget area and flush out the home page with links to the four
different photo type categories.
Good luck How did it go.
I'm going to show you one more thing that you may have discovered about this.
Read more link.
Well you could go back into your saved image links page and by using a visual editor like go to another
line.
And if I want to type read more and my two arrows select that click add a link and then I could copy
this again.
Paste it in there click apply.
And now when I go to the text editing I can get that piece of text copy it and then place it under the
customize or into my text widget as they go into the customize or and open the widgets panel I can look
at from page 4 and my dog's widget if I replace my hand typed anchor tag with the one that I got from
my links page it's exactly the same.
Just to show you my process as I create the last widget in my front page for widget area here's my widget
image links page that I'm using to get my code.
I've got the four thumbnails for each of the categories that I want to use and the read more link done
in the Visual Editor.
Well here's the text version.
So for my last widget I first need to get copying that code for the image and I have widgets appear
it's widgets open in another tab.
So I can go down here and I'm creating my last one called Still Life paste that there hit automatically
add paragraphs.
So two carriage returns right there and I can just go back here and I can actually go to my Lorem if
some page hit copy and copy that into the middle.
Another two enters go back here.
And grab my read more link paste that in there and hit save.
And that's what I've done for all four widgets.
So if I go to my site and go to the home page let's go down and look at my results.
Hopefully yours had a similar look down in front page for nice and looks great.
And if you click the image or the read more link you'll go to that category page you can see the landscape
and then here are my landscape posts three pages of them.
And one last check showing the regular recent posts widget in the footer.
But if I click any of my individual photographs as I scroll down and look at it I've got my image my
content category and tags and there's my image data for this particular photograph.
In this final video in the chapter you used the custom sidebars pro plugin from WPA you dev to create
a dynamically changing widget for the footer.
And on the home page you replace the default background images and created for text widgets for the
home page pointing to the custom photo category pages in the next chapter.
You'll use the author pro plugin for setting up another site with a custom post type.
This time taking advantage of the fully featured plugin will explore how studio press has created a
custom post types plug in that has a lot of content display options unlike the more generic custom press
plug in we just used