In this video I'll walk you through the steps I've taken to customize the cafe pro theme home page I'll
show you several ways to display the content on the widget based modular layout.
And it just sparked some ideas about how to adapt the theme to almost any purpose.
Let's start by just looking at the site itself in one tab and I do have the dashboard open in another
tab and I have the cafe pro studio press demo site open in a third tab.
So I can just take a look at how they have it laid out and compare what I'm doing to what the demo looks
like.
The first thing I've done in my site.
Scroll down and edited the front page widget area number one first where I just put a little bit more
text in here and I push that button down a little bit away from the text in this single text widget
inside the word dashboard under my site which is called my cafe.
I've got that one open.
I'm going to open a perience widgets and let's look at that front page one widget.
I just have a text widget that has some of the leftover text I just copied one line and then pasted
it a couple more times to make a little bit more text and instead of having This is the way it was before
read up against her or with one carriage return and automatically add paragraphs is checked if I just
scroll it down.
Add one more carriage return using the enter button and hit save.
And it makes this button down a little bit further away from the text so you can have kind of a message
for the either either the about scrolling navigation and you could have a button if you like a call
to action to send someone somewhere.
So I'll leave that widget area the way that it is right there and if you scroll down a little bit more
you'll see that I have five widget areas in the front page area too.
It's close from page 1 and I'll open up from page 2 and you can see what I'm using here.
Five Genesys featured page widgets.
And let's go back and look again at what I've got here.
I'm just using five pages that were imported when we made our XML import from the cafe pro theme.
And the way I have this set is I've typed a custom header like we experimented with in the last video
and I have the title of this page not showing.
I have 200 characters and I am not showing the featured image sample page does have a featured image
but just to see what all these look like when they're laid out with the same content in them you can
see what looks like five widgets inside of a single widget area.
So I'm using five which shows three across the top and then two below.
And I think it looks real good when the site has the same amount of content in each.
So inside the front page to widget area let's look at that one called sample page.
I do have these set up the same way instead of showing the page title with this checkbox.
I'm typing the page title under title here so that it comes out with this nice full caps and this nice
black border underneath calling it as kind of the top of this content area.
I think that looks the nicest.
And then I I only have one image size available to me the thumbnail size.
However I have that set inside my theme.
You might remember that when we were playing with the executive pro theme we had a number of different
choices a featured image size and a portfolio image size that is created in the executive pro-team.
When you import an item into the media library while using the cafe pro theme there's no custom image
sizes programmed into the theme like there are with executive pro.
However we can adjust this thumbnail size if we like and that's something I'm going to want to do.
Here's why when I check show featured image and click save let's look back and refresh the page I can
see that 150 by 150 pixels is OK.
There's just some extra whitespace along the sides here.
And to me I'd like to have maybe you know 100 by 300 something that's long and skinny and kind of fits
in to the content area here instead of having this square image as a thumbnail.
So how do we change that.
If we go back to the Wordpress dashboard and then go under settings media this is where we find our
media settings and how we can define the size of the thumbnail image that we want WordPress to create
when we upload an image into the media library.
So if I just want to change this to 300 by 100 and I do want to crop the thumbnail to exact dimensions
so I'll leave this box checked and save changes.
Now one problem is that if I refresh the page here by doing that nothing happens on the front end.
This thumbnail image still exists inside of the media library as a 150 by 150 square image.
Now there's a great free plug in in the Wordpress repository that I have loaded into the student's sandbox
area and we've got to go into plug ins and then activate it to be able to regenerate our thumbnails
site wide.
Now if we do go to media and add a new image then every new image that comes into the media library
will be trimmed to the size that I just defined.
But what if I wanted to trim down and recreate thumbnail images of a different size.
For items that are already inside of my media library.
Well this is called regenerate thumbnails.
It's a great plug in by Alex mills or Viper Double-O seven bond.
And if I activate regenerate thumbnails inside of this WordPress dashboard now under tools I've got
a region thumbnails button and I can go in here and just click regenerate all thumbnails.
Now the 150 by 150 original thumbnail size will still be in my media library.
It's not deleting any images but it is resizing images from the largest size originals that were originally
uploaded.
So let's go back into appearance widgets and if I open front page two again and I look at the sample
page here I can see that the image size available to me for the featured image inside of a widget is
now changed to my new image size.
And I think just by regenerating thumbnails I can refresh the page and I'll have that new size available
to me inside of the widget right here.
I think that looks great.
Let's talk a little bit more about how these widgets are going to appear on the front page areas of
Cafe profe theme and what I've got here is a clickable link which is my image that opens up the page
that that which it refers to.
Great.
I'm just going to hit back now that is the only clickable spot that takes me to that sample page though
if I want this to be clickable it's not programmed into the theme.
In that way.
But I can display the title if I choose to using that checkbox inside of the widget editing area.
Remember there's also the option to add a read more link.
You can say anything we want and it can give the user a intuitive way to go and look at the content.
While this is just an excerpt so let's experiment with that just for a second.
And I'm going to say show page title instead of having the title up here because that would be redundant.
And then for the more text I just use read more and then put to greater than symbols there as you can
see I like to use that sometimes so if I hit save and then refresh the page under my new tab you'll
see that it gives me three dots and then a clickable read more depending on how long these words are.
This will come out you know either below on one line or not.
But now I've got a sample page the way the theme is designed featured image comes first then the title
if you have that box checked.
And then as much content as you define as well as a clickable read more link.
That also leads to that sample page now for me I'm thinking that the read more link by itself will be
just fine.
And I like the look of having this all caps header area above the image a little bit better.
So I'm going to go back and uncheck the page title and I'll re and enable a title that's customizable
here and I'll call it just the name of that page and click save.
And now since I have established what each of these can look like that's great.
I might even put a little bit little bit less text in there.
I think by saying instead of 200 and you just see what 180 characters looks like.
That looks a little bit better I think they'll probably all come out a little bit better.
So now I'm going to pause the video.
I'm going to add a featured image and make those widget changes in each of these four remaining widget
areas.
Be right back.
So I think I've done everything right.
I went into pages of pages I selected each one of these pages individually and I uploaded and selected
as a featured featured image.
One of my images I used for new images and I'll show you where I got them in just a minute.
Then I went through and I changed the content character limit to 180 and I added my read more text and
saved each of the images.
So let's go back to the site where I was and refresh the page nice I've got some great clickable images
here as well as a read more link on each one that's looking good.
Now let's talk about where I got these images.
Now as I've mentioned before I'm a member of several mailing lists one of which is WBM udev drags the
whip.
WordPress news newsletter.
And one of the sites I really like to check in on is called W.P. tavern.
Now I found this recent article called 13 sources for free public domain and CC 0 licensed images.
And if you scroll down and read some of this you know.
The point is it's not legal for you to just go to Google and try to find you know
images and it's not legal for me to use an image that I find on the Internet depending on what its licensing
is.
Now of course in Google you can use their search tools to search just by usage rights labeled under
a Creative Commons license.
But the point inside of this article W.P. tavern is that a creative commons license is not compatible
with a general public license that WordPress uses for its open source software including for plug ins
and themes.
And so this is a great source for different Web sites that allow for images to be shared and then used
commercially.
I've looked through a lot of these and really I like this.
Let's see the public domain archive is where I found the four images that I imported and used as a part
of these four new posts.
A lot of these images are very large.
And so as we explored in a previous chapter a lot of times you'll have to download these very large
images that are maybe 4000 5000 pixels wide and or 12 megabytes or two megabytes in size.
And of course I wanted to bring those images down in size and so I used Photoshop and I trimmed them
down to two or 300 kilobytes instead of the two or nine megabytes that some of these images came in
at.
And so if I go back to the widgets you can see that I have selected to show the featured image.
Now that I have the image size and selected the 300 by 100 media thumbnail size when I uploaded those
into the media library and put them into the pages they came in as the right size 300 by 100 and then
each of those is displayed.
And then finally I just need to add two more widgets to the footer which I'll take care of now.
First I'll customize this social sharing widget so that these colors match the color that I'm using
on my web.
Here you can see this is a green highlight color that we're using inside of the cafe pro theme here.
And if I go back and open the custom Mizer I can get a few more customizing options that are just visible
under the appearance tab.
And one is colors can see I'm using this green accent color and I'm gonna go ahead and make it into
a nice blue.
I'd rather have a nice blue there sort of a medium blue that would work on black or on white and look
good.
And then I'm in a copy the color code.
By hitting Control-C right here without the hash tag it save and publish in the custom Isar and then
I'll just use the customize it to go back into my widgets and in the footer one area I've got simple
social icons left over from the way that it was set up with the original theme that came in when I created
this new site.
And I'll make that background hover color the same blue instead of this red color.
That was the default.
Great now that I've saved that I could go back up and choose something for a foot or two and foot or
three I was going to fill this out with some sample content because we don't really have a plan for
what this Web site is going to be all about yet.
Let's see I think I'll do a list of recent posts
and just leave that as the default and I'll go back into footer 3 and make a text widget just as a placeholder
down here.
Now just grab a little bit of text.
In fact I'll just go back grab a little bit
of my sample holding text
save and publish and let's see where we are if I refresh the page
now I've got the blue color instead of that green.
I really like that and the buttons blue as well show up on the white nice my read more links are blue
and the background of this is a highlight color which I really like that color.
And now these icons match my background my link colors in this video I showed you how I used the home
page layout document for the cafe pro theme as a reference and chose five pages to fill out the front
page to widget area.
I showed you how I changed the thumbnail size and then used the regenerate thumbnails plug in to resize
and customize my thumbnail images for the themes display.
I also showed you a good resource for public domain images that are free to use.
And finally change the highlight color and added content to the footer widgets in the next lesson.
We'll get started creating and implementing a plan to categorize some of the site's content into some
custom post types and taxonomies using the custom press plugin.