This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome to Lesson 8 of the Build Your Own Ecommerce Website tutorial series. The goal of this tutorial series is to show you how to create a fully functional Ecommerce website using WordPress, Thesis and WP e-Store.
This is the second of the tutorials on styling your new ecommerce website and in these tutorials we’ll be styling it to match our demonstration site. If you want to take a look at what that looks like go to www.thesisestore.com – this is the site that we are building. Obviously you’re not going to be creating your store exactly like this but it is my hope that by going through the exercise you will learn how to style your ecommerce website the way you want.
In this lesson we’ll look at setting up the Thesis Design Options. I’m using Thesis 1.8 and if you are still using 1.7 then you’ll notice some differences. However the differences in this section are not significant so you should be able to follow along anyway.
Let’s go ahead and get started. Open up the Dashboard and go to Thesis Design Options. This is a site that I’ve created for demonstrating this lesson and it is www.estore8.byobtutorial.com. In this part of the lesson we’re going to look at Site Layout and Display Options.
Thesis Site Layout
The first part we’ll cover is going to be the Columns. We probably already have this configured but we’ve got this ecommerce website based on a two-column layout where the content column is 600 pixels wide and the sidebar column is 320 pixels wide. We only have one sidebar and it is sidebar 1.
Then in our Column Order the way we’ve organized this is to have our content on the left hand side and our sidebar on the right. Were we to select this instead we could move the sidebar to the other side if that was our choice.
Next we’re going to go ahead and select the HTML Framework. Thesis has two main HTML Frameworks, the Page framework and the Full-width framework and I’m going to show you briefly what the difference between the two of these is. Most of my tutorials have actually been with the Page framework but this new ecommerce website that we’re creating is going to be a Full-width framework site, so go ahead and select that.
Thesis Full-width Framework vs Page Framework
In order to understand what Full-width framework is I would like you to go to my Thesis CSS site, www.thesiscss.com. I created this for the purpose of making a visual illustration of different CSS elements in Thesis and this Page framework is the thing that you’re probably the most familiar with. The Page framework is a page that floats in the middle of your monitor and so the entire monitor is covered with this thing called the body but then you’ve got a container and a page in the middle of all that, that holds all the rest of the content of your site.
By contrast the Full-width framework doesn’t have a piece that floats in the middle necessarily. The Full-width framework is more like a layer cake; you have the top layer which is the header area and it actually spans from one side of your screen to the other. Then you have the middle area which is the content area and again it spans from one side of the screen to the other and finally you have the footer area which again spans all the way across. Those are the three areas that the site is broken into.
In this Full-width framework you can have a header that spans from one side of the page to the other and you can have the same thing with the content. This also has page elements but they float in the middle of these main layers, the header area, the content area and the footer area.
So to recap in the typical page layout or page framework, the site acts like a container that wraps around the page and the page floats there in the middle of this container which is the browser window whereas the Full-width framework is as if the browser window is divided up into three layers and each layer stacks on top of the other.
Select the Full-width framework here and then we’ll jump down and take a look at the outer padding. We’re just going to use 1.0 em for the outer padding and you’ll see what that looks like in a minute.
Thesis Display Options
Display Options really has two pieces, the Display Options and the Home Page Display Options and if we open up our Header display we do want to show our site name and our tag line in the header. You can see that’s what I’m doing here – this is the site name and this is the tag line. So we’ll continue to do that in this new site.
Bylines – we’re actually going to turn the bylines off. We don’t want any bylines to show so that when we have our product posts it’s not going to say who it’s by or what date it was on or anything like that. In order to get a feel for what that means if you come back over here and look at our Blog which is where our products are right now, this is the byline and there’s no reason for products here to have a byline like that so we’re going to turn them off.
Next in our Posts we want to display the full post content rather than post excerpts. You can go ahead and leave click to continue as it is for the moment and we will go ahead and Show previous/next post links.
Under archives we’re going to select Everything’s a teaser. This isn’t going to be an issue until the very last lesson in this series but we’ll go ahead and set it now so everything is a teaser.
Open up Comments and we’ll choose Disable comments on all pages and we’re going to get rid of this message If comments are closed display a message – we don’t want that to be the case.
Under Tagging we will Show tags on the single entry pages and we’re going to have a no follow links on the tag links, that’s just a SEO issue that we’ll talk about a bit more later.
Under Sidebars this says Show default sidebar widgets. I’m going to leave that in place for a moment or for the purpose of this class but ultimately you’ll have that turned off.
Then under Administration we’re going to remove the Show edit post links but I’m going to Show the Admin link in the footer. That Edit post link is this thing right here where you can see Edit, we’re going to turn that off.
Thesis Home Page Display Options
Then open up Home Page Display Options. In this case our home page (our Blog page) we are going to display 2 featured posts and then all the rest will be teasers.
Go ahead and hit Save and if we come back over and take a look at our site and refresh it not very much has changed yet because we didn’t actually change very much. That wraps up this first part of Lesson 8, Configure Thesis Site Layout and Display Options.