In this video you'll populate your executive pro-se in the student's sandbox with real images and rearrange
the home page using featured posts.
We'll explore the post offset system used in the Genesis framework and create a blog archive page to
display a traditional blog listing page within the theme.
By the end of this lesson you'll understand how Genesis uses featured post widgets to make changing
the display of new posts automatic open inside of the Wordpress dashboard.
The appearance customize or and as we look at and open this what I'd like to do is make some changes
in the widgets area so that in the slider in the home type and in the home middle sections we're going
to arrange it slightly differently.
Let's make it so that in the featured slider at the top we use three featured pages that are static
pages that will always want to show to visitors to the home page and then as we scroll down we're going
to arrange the first three inside widget home top to be the latest three posts in the blog.
And then down in the home middle widget area we want posts 4 5 and 6 in reverse order to be placed in
these three areas.
We're going to be using Genesys featured posts widgets and making them so that they are offset correctly
so that when one of the site owners creates a NEW BLOG POST IT places itself in this spot.
Number one right here and pushes the rest of the posts down.
And the final post comes off of this 6th area into the Post's archive page.
We'll also be creating a special page that will display an archive of blog posts so readers can go through
and look at all the blog posts in reverse order.
All in one page.
Let's start by populating some of the blog posts inside of Wordpress with actual images instead of these
grey box placeholders open up posts all posts and let's look at our sample posts that we have inside
here.
We have a sticky post and then the rest of the posts that came in with our content import and if we
look at this one go ahead and open up that first post and scroll down.
Notice that it has no featured image so we're going to be bringing in some actual images that we can
use for featured images here to see what the site might actually look like with images.
Let's make under visibility here under the published tab on the right hand side of the editing screen.
Let's just undo this stickiness.
We don't need to stick it to the top of the page inside of the blog area.
We'll just use 6 posts and populate them with featured images and what you want to do is navigate to
my local development environment.
In the C colon under the map folder and in H.T. docs you know that all our local environment WordPress
sites are here and I know that we made an import that we used images from inside of this one that I
called Live site.
We keep images in the media library inside WP content and the uploads folder as you remember.
And I know that under the date 2011 from that file that we imported from WordPress dot org had a folder
called 0 7.
If you look at the details of any of the images the first one of its kind in the list of images you
can see that the main images are 6900 by 22:00 there's certain images in this folder.
At least six of them are 6900 by twelve hundred and I've taken each one of those.
The ones that are 6300 pixels wide and by holding down control I selected each one of the ones that
are that size and I drag them over into a folder on my desktop.
My executive pro folder and I created a folder called images.
Go ahead and do the same.
These are the six images that I dragged across that are all 6900 by twelve hundred pixels and there
are a good file size.
A little over 100 K each.
So I could bring each of these images into my wordpress installation and then we'll use it to populate
each of those six posts with these featured images.
Go ahead and pause the video now choose 6 images of your own either in the same way that I've done or
you can use your own images and trim them down so that they're a good small file size and 6500 pixels
wide or so.
And then upload them into the media library and choose one for each of six of the posts inside the Wordpress
dashboard making them the featured images.
I hope you did well with that little challenge.
You can go into each of the posts that you want to edit and add a featured image.
You can click Set featured image and then upload each one individually to the media library.
But what I'm going to do is another way you can go to the media library and add new and I'm just going
to add all six of those posts at one time so I'm opening up that images folder and select them all and
just click open and they'll upload and crunch right into the media library.
Then I can go into each post and I can choose each one from the existing media library as their featured
image OK I paused the video while I went into each of my posts and added one of those featured images
and then clicked update up here.
Now let's go collect three images that we can use for the slider.
Let's use these three images inside of the studio press executive demo and this is just a good way to
know that you can get images from a Web site Save them to your computer and upload them as you will
if you're moving a Web site from one place to another or something like that.
If I right click on this image and then click view image you can see that it's a certain dimensions.
And actually if you go back inside of the Wordpress dashboard and look under Gen. slider settings we've
got a slider that's a certain size and these images are optimized for the slider.
You don't have to crop them to a specific size but if you want to be sure that the content that you
want showing isn't cut off.
For example the woman's face if this were a taller image she may have her forehead cut off or it might
not be laid out as exactly as you want.
So these images are actually facts.
Inspect the image info these images are actually a particular size 11:40 by 4:45 the exact size for
the slider settings.
So go ahead and right click each of those images and view it and then right click and save the image
to your computer OK or save those images into my downloads folder.
And now I'm just going to bring them across into that same executive pro images folder that I have on
my desk to.
Here's a little challenge for you.
Back inside the Wordpress dashboard under Gen. slider settings choose page instead of post as the type
of content and then down here we're going to include by post ID.
Let's include three pages and your challenge is to go find three pages that exist inside our imported
content in the site here and find their page IDs and place them here.
We'll choose three of them and then we'll save the settings to our slider
have that go if you remember under pages all pages and then if we navigate to any of the pages that
we're using Let's see what pages are we going to use here.
I'll go to page two of my pages list and I want to put three of the pages we've been using on the home
page that are featured as pages inside of the slider.
So telecommunications is one.
If I click on that I can see up top inside of the address bar and the URL for editing that page.
This is post 3:21.
So I'll take note of that.
I'm also going to set the featured image and upload while I have it open featured one upload that to
my site and set it as the featured image.
Maybe you did that at the same time as well.
So this is page number 12:57 or post ID 3 to 1.
So I might just take note.
Write that down on a little piece of paper on my desk.
I need three to one and I'll pause the video here while I do that for two other pages.
Now I have three pages which have featured images and I've taken note of their post IDs.
So the last step is to go back into the Genesis slider settings.
Note that I didn't save this I have to change it to page and I'm going to include these three post ID's
separated by commas.
So it's 3 to 1 2 1 9 and 2 2 7 I'll hit save settings.
Now if I refresh that I should get some nice images inside of yes inside of my slider.
There's one there's another on the design page and in the development page looks great.
Now let's go on to setting our home page to be a reverse order offset posts using the featured posts
widgets inside of Genesis.
So back in the Wordpress dashboard I mean open appearance customize and we use the customize or to take
a look at our results as we go.
And I'm going to be editing the widgets.
And so first time to edit the top home top widget area and I've got three featured pages here.
But instead I'd like to use featured posts instead.
So I'm just going to remove each of these
by opening them up and clicking the remove link at the bottom of each widget.
Now I'm going to add a widget.
And in terms of featured posts all I need is one widget and I need to just set its settings so that
I'm using three posts and I want to use the latest three posts.
I'm not going to offset them at all.
I'll order them by date and I'll do a few other settings.
I do want to show the featured image and I'm going to use a featured thumbnail size I don't need an
alignment.
And let's see I can I do want to show the post title and I will show a content limit of 150 characters
and there is some read more texts.
And that's all I want.
So for this one I scroll down and I'll just close that
and you may have noticed I'm encountering a problem here the way that these widgets are set up is if
you have more than one widget it shows them across the page.
But if you have one widget it shows its content in a vertical orientation instead.
And we don't want that we want them to be displayed going across the page.
So how can I do that.
I can still use the featured post widgets but instead of having three in one widget I just want to have
one in one widget and then I'm going to offset to the next post for the second one and then offset to
the next post for the third one.
So I'll just change that by opening up feature posts and I'm just going to show one post in this first
widget and everything else can remain the same so close that.
And then a minute add a second featured post widget.
And this is where it gets a little bit interesting with counting how many posts you'd like to offset.
So I'll show one post here in this widget but I want to offset it one post so that it counts down to
the next post.
So again I'll show the featured image in the featured size and I want to show the content limit again
with 150 characters and I'll close that one and I'll repeat that with a third featured post widget.
I'll click add widget feature posts.
Again I want to show one posts at this time and get to offset two posts.
I also need to make all my other settings the same.
Show the post title.
I think I forgot to do that in the last one so I'll add that.
Remember I haven't saved any of this yet so I can keep opening and closing.
There we go take a look now I've got it looking good.
I've got a title for each one.
Now if I want to have the title with this all caps just like the pages we had here before instead of
this upper and lower case and a little larger and have that above the featured image I can change that
by on each one I can type my own title.
However now that these are going to be automatically changing as the owners of the Web site add new
blog posts I want to leave it so that it shows the title of the actual blog post no matter where it
is or which post is in which location.
So I just need to save and publish in the Customize her and I've got my top three most recent posts
listed in that widgets home top area.
Now in the home middle area.
Let's go back.
I want to edit the home middle area.
I've got three featured pages here and your challenge at this point is to repeat what I've done if you
haven't already and then now down in the home middle widget area your challenge is to offset 3 4 and
5 posts so that we've got a home page that shows the latest six posts and it'll update itself as the
owner of the website adds new posts.
I hope that went well for you.
Now you should have a series of three of the most recent posts across the home widget top and then the
next three across.
Home widget middle.
Finally let's create a blog archive page provided to us by Gen..
Now back in the Wordpress dashboard I've got pages all pages open and I'm going to click add new Basically
we just need to make a page called blog or news or whatever we want to that page to be called and we
use instead of the default template we use the blog template provided within the Genesis framework and
just publish that page as a blank content page.
Now that we have that saved as a blog template we can use this you are ill or have that page inside
the navigation.
And what we'll get is an automatic blog listing page.
So if I just go to menus and with our executive Hetter menu that I have up here I'm going to add that
new page called blog.
I'll add it to the menu.
Place it right at the end there and hit save menu.
It's as simple as that.
Now if I go to my site in the new tab and refresh.
I've got blague up here and when we navigate to that page it shows our posts in reverse order.
Now let's just edit our settings just a little bit to finish with this lesson.
If we go into Genesys theme settings you'll be able to control how your blog page and archive pages.
The blog page template control how it's displayed.
So do we want to display all categories.
Do we want to exclude any categories from that blog listing.
And how many posts do we want on that blog page.
In addition to that we can show how we want content archives like the blog page to display.
Let's display the entry excerpts instead of the entry content and let's display the featured image and
let's display.
Let's see.
I think we should display it in a large size and let's just have no alignment it will place it centered
at the top.
And if I click save settings and I'll go back to the blog page and refresh it.
And that's probably made it look a lot better.
In this lesson I've changed the home page content of the site completely but stayed within the Leya
provided by the theme.
You used the Genesis featured post widgets and post offset to set up a self updating system for posts
on the home page.
Use real images and created a blog archive page as well.
In the next video you'll add a contact form to the site and implement a premium add on for the contact
form 7 plugin