Build Your Own Business Website header image

Bee Crafty Theme Quickstart Guide – Part 7 – Setup the Blog Page Display

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

We just showed how to set up and configure the home page in the Bee Crafty Theme but and in this session we show how to setup and configure the blog page. We talk about the default configuration and look at the various combinations of post content and post images that can be used on our blog and archive pages.

Default Setup

Next we want to create a blog page because we don’t actually have a blog page set up yet. The way we do that is we go over to pages, all pages. Now I do actually have a post named blog so I’m going to edit it. And then what you do is you select the blog template.

Selecting the Blog Template

All the pages come automatically with the default template. We’ll just select the blog template and hit update. When we view this page now, we have our blog posts all showing up down here on the blog page.

Add Blog Page to the Menu

Let’s come back over and we need to add that to our menu. We’ll come back over to menus and our main menu and let’s add our blog page, save the menu, there we go. Now our blog page shows up here.

Change the Front Page to Display a Static Page

Now we’ve set up the default configuration for the Bee Crafty theme. There is, however, an alternative and the alternative is one that you’re probably familiar with. What we do is we come over to our settings and reading settings.

Set the Front Page

And instead of saying that front page displays your latest post, what we’ll say is the front page displays a static front page and let’s pick Home as a static front page.

Set the Posts Page

I’ll show you what happens if we pick our posts page as our blog page. We hit save here.

Review the Changes

And now if we go to our homepage, it looks just like this, it looks like a regular homepage. You can put any kind of page content that you want in this just like you could anything else. And if you click on it, it still takes you home.

Now the blog page, at this point, is no longer respecting the template selection that we made and is now displaying the portfolio really, or the gallery.

Change the Posts Page

So what you could do here is come back over to our pages, add a new page and then call it the gallery and publish it. And then come back over to reading settings and our posts page here then make our posts page the gallery. Save those changes and then we could add the gallery to the menu. Save that menu, come back over. Now our blog page is again going to respect the template that we assigned to it and the gallery now shows these gallery posts.

So that is the other way that you can do this, you can use this whole setup in a more traditional setting with a static front page, a blog page, and then using this cool little function here as a gallery page instead. We’ll go ahead and leave it like that.

Setup the Blog Page Display

The next thing to take a look at is to the blog page display. Now the blog page display settings are back under Genesis and Theme Settings. And if scroll down here to blog page, at the moment, it displays all categories.

Categories

Again, you could just choose a single category if you wish but it displays all categories. And now you can exclude a category id. Uncategorized is category id 1. So I’m going to exclude uncategorized and the number of posts to show is 10. We’ll go ahead and leave that like that.

Let’s hit save and come back over to our blog page, now those Hello World posts aren’t there anymore because they were all uncategorized. And the only ones that show up here now are regular old blog posts. And if you look at this, it’s really showing you the entire post content.

Add An Image

And in fact, if we were to say, for example, place an image in this…so let’s edit this post. Now, we’ve got this as our featured image but we could put an image here as well. Select upload, from the Media Library and we might as well pick the same image as our featured image which in this case is this one here.

In this case, what I’m going to do is not pick the full size but the large size. Where’s that 580 pixel wide image that we created? I’m going to insert that into the post and hit update. View the post and I think you can probably imagine why a 600-pixel wide image would not look right here because it will just go too far into this edge where the 580 pixel wide image works just fine and lines up with the edge of the text. So that’s what it would look like as an image.

Images and the Sticky Post Display

Let’s come back over to our blog page, because this has a little extra wrapper. This is the wrapper for a sticky post with a little blue top on it. It has that extra wrapper and so the image doesn’t look that great in this context. But without that extra wrapper, it’s going to look fine.

You could also, in the case of a sticky post, insert an image from the gallery but instead of the large image, insert the medium image, float it to the left and insert it into the post. Hit update. View the post and now this half-sized image works just fine in there and allows the rest of this to float up.

Aligning Text and Images

And if you need to align these images better, all you have to do is watch my section aligning text and images in the content area and you’ll see how to fix that. Essentially, what you need to do is just delete this extra space there and hit update. And I think that probably gets it to where you want it to. Yeah so that’s one way of handling the issue of an image inside of a sticky post like that. If you’re not using sticky posts, it’s not an issue any longer.

Let’s come over here to our Rainier Sweet Cherry and edit that post. Let’s insert an image… and again, we’ll choose the large image. Hit update, let’s see… and there’s the large image sitting on top of this image and it looked just fine. And if we look at cherries, look at our archive page, it’s going to display exactly the same thing. It’s going to display these posts in that configuration.

Edit Content Archives

Now what this is doing is showing you the entire image… all of the post content. So if there are more images in here, it would show more of those images. And what you may want to do is change the way that works and that happens back in here in Theme Settings again.

Limiting Content Display

And in Theme Settings now what you’ll do is you’ll edit content archives. This content archives controls both what is displayed on the blog page as well as all of the archive pages. And it’s set to display post content. We could set it to display post content and limit the content to say, 200 characters and then hit save. And if we do that, notice how the images go away? Because what it does is it strips out everything and then just shows a limited excerpt.

Using Thumbnail Image and Featured Image

If you want those images to come back, you could come back down here to Theme Settings and you could say let’s include the featured image. The right answer to this question is to use the thumbnail here because I’ll show you what the rest of them look like. This is designed to use a thumbnail. So let’s use the thumbnail and say save settings, come back over and refresh the blog. Now we have these little 125 by 125 pixel image sitting inside this frame.

But the frame wasn’t designed to display a 125 pixel image by 125 pixel image. If we, instead… yes, display the featured image but let’s display a… well, here’s a horrible one, blog excerpt, you’d think that would be a good idea but it isn’t. And refresh it.. now see how the image doesn’t fit inside the frame, right? You’ve still got the frame but it doesn’t fit in there and it goes all the way over into the shaded area. I don’t have any idea why that exists. It’s a poor execution of a concept.

But you could, instead, say to yourself, “Okay well, a blog excerpt’s not going to work. But surely, if I go ahead and use a medium image or a gallery image…” Let’s say I’m going to use a gallery image. Hit save settings, come back over and refresh it. It’s still not producing the desired result because the frame still wants to cover just 125 by 125. So the real answer to the question in Include Featured Image, the only right answer to the question, “Include featured image?” is the thumbnail. That’s the right answer.

If you hit save settings then, you get every image with a featured image gets its featured image and if doesn’t have a featured image then it doesn’t show up. And the featured image fits nicely in the frame.

Displaying Post Excerpts

This leads us to another possibility which is instead of displaying post content, we could display post excerpts. And the post excerpt is automatically configured by WordPress at this point and again, we can include the featured image and still, the right answer is thumbnail. Hit save settings, refresh it and that’s what it looks like when you’re using the post thumbnail with an excerpt.

Displaying Post Content

It could be that that’s really not the way you want it look and what you really want to do is say, go back to display post content but maybe make it 300 characters. You have a little bit more control over the styling when you do it this way because you also get this little Read more link. Let’s take that up to 500 characters. You get enough text to essentially cover the space or fill the space up and you get a fairly pleasing layout.

Summary of Options

So the summary of this really is that you can display the full content which will include the display of pictures, all the pictures. Or you can display the post content and set a limit to the number of characters which will automatically strip those pictures out. And you can choose to use a featured image but really, the only featured image worth using is this 125 pixel by 125 pixel.

Now if you see the thumbnails 150 by 150, that means you haven’t come over here in the media settings and set the thumbnail image size to 125 by 125. WordPress has a box, comes with it set at 150 by 150. But 150 by 150 is not going to work with that little frame. So you really need to move this over to 125 by 125.

The last thing I want to talk about in setting this up is breadcrumbs. This does have the ability for you to add breadcrumbs. You probably don’t need breadcrumbs on the front page but on post, pages, archives and 404 pages, it’s probably not a bad idea. So we’ll go ahead and hit save settings there. And when you do that, your breadcrumb lands up there at the top, it’s a very attractive little thing that allows you to jump around.

0 Comments… add one
0 comments… add one

Leave a Comment