How To Create A WordPress Website With ECOMMERCE (Professional)

Hi, everyone! I’m Katrina In this video, let’s go over how to create a website using Virtue, a responsive e-commerce WordPress website theme

I received a number of requests from YouTube requesting I create a video specifically about this theme Thanks everyone for the great suggestion Let’s take a quick tour of the website we’ll be creating in this video In this video, I am going to be showing you step-by-step from scratch how to get this website up and running As we see here on the left hand side you have your logo, as well as your menu navigation area

Just underneath that, you have your image slider On this image slider we have some calls to action It’s always a good idea on your website especially on the home page that you have really clear calls to action I am going to show you in this video how to set this up Underneath the image slider we have the feature section

In here, you can feature any kind of featured projects, photos, anything for your portfolio that you’d like to feature You can feature that here, and I can show you how to set that up as well Next, we’ll have the latest from the blog section Here we’ll have a few excerpts from our blog post, our most recent blogs Finally, underneath that, we’ll have another menu navigation area here represented by these blocks, which when I hover over them, they activate

They turn into different colors I’ll show you how to set that up Finally, at the bottom, we have our photo section Here you can include customizable content In this demo I’ll be including a logo and a short description about the business as well as the post gallery, featured products and some social icons where anyone can easily connect with me on social web either through Facebook, Twitter, YouTube or Pinterest

Most likely, you’re also going to want a lot of different internal pages, so I’ll show you how to set that up starting with the About Page When I click on About, here we’re going to be adding an image as well as some texts Next on your blog archive page Here on the blog archive page, the really cool thing about this particular theme is we can feature a number of different styles for our blog excerpts For example, here we have an image, a title and an excerpt

The next one, however, is an image carousel post which when I click on these arrows here, it rotates to different images within the carousel Underneath that we’ll have the image slider post which again is a little larger size of an image with this rotating slider I’ll also show you how to add simply a static large image like this and finally a video if you’d like to include a video right directly on the blog archive page Taking a look at one of the internal blog posts, I am going to click on this one right here We’ll see here this particular one at least at the top we’ll also include this image slider

I’ll show you how to put that up We’ll also include the blog post title, details about the blog post including the author and the category it’s grouped into and comments Then we’ll have the actual blog post Underneath that, it’s always a good idea to include a way for your readers to easily share content on social web I’ll show you how to add these social sharing features right here so anyone can share the post to Twitter, Facebook, Google+, LinkedIn or some other social network

Next we’ll have an author bio section, so you can include a thumbnail image of any authors on your site, the author name and a short bio Finally, we have a recent blog post slider right here which will feature recent posts within your blog It’s always a good idea to include this if you can because this helps to give your readers a way to explore other areas to your website which helps them stay on your site longer, which is always a good thing Looking on the right hand side of this blog post, we’ll also a have a side bar The side bar includes customizable content

Once again, in this video, I’ll be including those social icons as well as an email opt-in form so you can easily capture lead to your website Then I’ll be adding an image which also includes call to action and a link that goes to a page within the website Here, for example we see that call to action is visit the collection When we click on this particular image, it will go directly to the e-commerce store The next part of the website we’ll be adding is the portfolio section

Here you can feature any kind of work within your portfolio or photos or even perhaps different products within your store Here for example, there’re lots of different styles that this portfolio comes with in terms of the actual portfolio item pages Looking at some of them starting with this one, I am going to click on the landscape sider One of the first options for your portfolio item post page is this landscape sider Underneath the landscape sider, you’ll have the portfolio item description and the portfolio details

Within the Virtue Theme there’re lots of different styles for the portfolio items as well Taking a look at the next item here, I am going to click on this next item here to go to the next portfolio item Here we can see, if you prefer, you can also add a video to your portfolio item Once again, the description and the portfolio details will appear below The other option for portfolio items, when you go to the next one, is here we have an image slider on the left hand side of the description

That is another cool option for portfolio items here We have the description and then the details below Next we have another video I am going to fast forward through that since we just saw the video You can include another video

Here when we go to the next item here, it is simply an image Here you can include simply an image within your portfolio item if you prefer that There’re all kinds of different styles and portfolio items and I’ll show you in this video how to set up each one of them Next we have the Learn page if you’d like to add a page with a side bar I’ll show you how to set that up

Here we have our page and we have our side bar to the right Finally here we have our shop page The cool thing about this style of this particular theme for the shop pages is that it’s just a really clean white minimalist kind of display is that the focus of attention is truly on your products which is always a good thing Let’s take a look at one of these actual products So, I’m going to click on the Brasil Tee

And here we’ll go to the actual product page where you have an image, the title, the price, the short description and the Add To Cart button When I click on the image right here, it opens up into really cool light box display so I can see the product a lot easier Underneath this section right here, you’ll have a longer product description as well as a reviews tab if you have any reviews Then we have some related products Just like with the blog posts including the recent posts underneath the blog posts, when it comes to an e-commerce store, it’s always a great idea to include related products below your actual products because it gives your potential customers some other options and other products to explore within your store

Next, we have the Contact page I’ll also show you how to create a Contact page so anyone can easily connect with you directly from within your website by filling out a form and clicking on a button Let’s go through the process that a potential customer will take if they want to purchase an item Going back to the Shop page, I am going to click on this item here, this Brasil Tee Here we see the Add to Cart button

I am just going to click on Add to Cart Then you’ll get this message It says it was successfully added to the cart If you’d like to view the cart, you can click on this button that says View Cart Here on the Cart page, you have a thumbnail image of the product, the product title, price, quantity and the total

Down below, you’ll have a summary of your cart totals To proceed to the checkout, we can click on this button here that says Proceed to Checkout Here we have the checkout page If you have a coupon, you can enter it in here In this video, I will show you how to set up coupons as well

A potential customer would them fill out their billing address and their shipping address They would scroll down, review the details of their order and then they would click on this button here to place order As we see here on the left hand side, it says Pay with PayPal You can pay with your credit card if you don’t have a PayPal account In this video, I am going to be setting up the payment method as PayPal

But of course, there’s other payment methods you can use I’ll show you in this video where you can set those up This is where we are headed toward in this video I am going back to the home page We’re going to be building a responsive e-commerce WordPress website using Virtue

This is responsive meaning it’s mobile-friendly and it works beautiful both on mobile devices like smartphones and tablets as well as on laptops and desktops As a quick demo, the responsiveness of this particular theme is going to come to the bottom right hand side I am going to slowly drag the website to the left hand side to reduce the screen size until we get to about right here This is a view we can expect on a smartphone , the smaller screen size right here As we can see, all the different elements on the web page, the home page have re-ordered themselves

Now we have a menu which is a drop-down menu so we can really easily explore other parts of the website within this smaller screen size version and all the other elements on the home page are now neatly stacked up one on top of the other so they’re still really easy to view directly within this smaller screen size That’s what we refer to as a responsive WordPress website These days, it’s really important to make sure that your website is responsive since more and more of us these days are using the web on our mobile devices like our smartphones and our tablets You’re good to go in terms of mobile readiness when it comes to this theme This is where we’re headed toward in this video

Let’s get started Before we get started, how much is this website going to cost? We’ll need several things Number one, we need a domain name and also we need some web hosting In this video, I am going to be using Hostgatorcom for both the domain name as well as the web hosting

I am also going to be using a coupon code wpcoupon25 to get an extra discount off of my order at Hostgator If you decide to go with Hostgator as well for the domain name and the web hosting, feel free to use the coupon code wpcoupon25 to get an extra discount off of your order as well I also want to note that I do receive a small referral if you do use the coupon code wpcoupon25 Thank you in advance for supporting me and helping me to continue to make these free WordPress training videos Next, once you have domain name and a web hosting, we need a theme

In this video, we are going to using the free responsive e-commerce portfolio theme called Virtue I will show you in this video where to get that and how to set that up Finally, we need some time to build out the website Because there’s a lot of different pieces within this website, I am estimating it will take roughly around 2 hours Please set aside about 2 hours to get this website up and running

The total to get started is less than $25 That’s using the coupon code wpcoupon25 at Hostgator So what are the steps needed to get this website up and running? Number one, we need to get a domain name and a webhosting Step 2, we need to install WordPress Finally, step 3, we need to build out the website

Let’s take care of step 1, getting the domain name and the web hosting by heading over to hostgatorcom Here we are on hostgatorcom To view the web hosting plans, go ahead and click on the button in the middle that says View Web hosting plans

Here we’ll see there are 3 plans to choose from—the hatchling plan, the baby plan and the business plan If you’re just getting your website up and running, most likely the hatchling plan or the baby plan will be a god fit for you The main difference between these 2 is the hatchling plan gives you a way to host only one domain name whereas the baby plan gives you a way to host as many websites and as many domains as you would like The other difference between these 2 plans is that the hatchling plan does not allow you to add an SSL certificate to your own website In the event that you are planning to create your own e-commerce website, most likely the baby plan is going to be a better fit for you because you can add an SSL certificate which will provide extra security to your site

Keeping that in mind if you plan on using PayPal as your main form of payment method for your e-commerce website, then you can use the hatchling plan because with PayPal, the SSL is included on the PayPal site In general though, if you are planning on an e-commerce website, I would go with the bay plan Also note that there’s more of a value on the baby plan because you can host as many domain names and as many websites as you would like Those are the main differences between the plans I am going to go ahead and I am going to order this one, the baby plan, by clicking on Order Now

As we see at the top that first thing we need to do is we need to enter our domain name If you already own a domain name, you can click on this button here and add your domain name Or if you need to register a domain name, you can leave this box checked and you can enter your domain name right here I am just going to add a random domain name for the demo purpose I am just going to add some random right here

Of course, it’s available because it’s a very random name Also note that you can decide whether you will use com or any of these other domain extensionscom is the most common one so I am going to leave it as

com Then I am going to scroll down The next thing is we need to choose our package type and our billing cycle We see here it says baby because I’ve already chosen the baby package type The billing cycle right here however, by default is set at 36 months

I’d like to save a little bit more on the front end of this particular order right here, so I am going to change this to one month just to keep my expenses low Of course, there’re many other different cycles that you can choose from Go ahead and choose the one that works best for you I am going to choose this one, the one month one Then coming down right here, you want to add a username and a security PIN, scroll down and you want to add all of your different billing information

The next thing I want to point out here down at the bottom is we have the hosting add-ons By default, Hostgator will automatically add a few of these to your order You can decide whether or not you want, for example, domain privacy protection, the site lock or the site back-up Whenever I am creating a new website domain, I always to choose ‘privacy protection’ The reason why privacy protection is important is without privacy protection, your order details which include things like your phone number, your email address and your address will be included in the domain database so anyone on the web will be able to find that information as it pertains to your domain name—things like your email address, your address and your phone number that you use to place the order will be available on the web

I prefer keeping that information protected so I always choose the privacy protection Of course, it’s up to you You can decide what works best for you Here we have the site lock I am going to uncheck this

I am also going to uncheck the daily back-ups because I have other ways to secure my site Of course, if you would like to choose these, go ahead and add those on I am going to turn those off just for the moment just to show you what the order costs would be with and without the privacy protection Scrolling down here, we have the coupon code and, by default, you’ll get this standard coupon code But if you use a different coupon code, you can get more off of your order

The standard one is snappy but if you use the coupon code wpcoupon25 you will get an extra amount off of your order that’s better than the standard coupon code Here we go I am just going to click on Validate to validate this new coupon code wpcoupon25 Then we’ll see that I have a lower order amount down below As we see here, I am looking at the order details; I can see that without privacy protection, we’re looking at just under $13 to place this order which includes the domain registration and the first month of web hosting

Then if you want to include the domain privacy for $995 a year, I’m going to click on that one – and you’ll see that the order goes to about $22 or so So, it’s still under $25 Once again, decide which hosting add-ons works best for you I prefer keeping the privacy protection so I’m going to leave that checked

Then, I’m just going to click on this box here I have read and agreed to the terms and conditions And then, I’m going to click on ‘Create Account’ to place the order and create my new web hosting account Once you click on ‘create your account’ you’ll get this page which will thank you for your order and will tell you to go check your email for information related to logging into your web hosting account I’m going to go checkout my email

Here we see on my email account, here’s the email from Hostgator with my account info I’m going to click this email to open it I want to point out two things, number one the first link that they’ll share with you in the email is the billing system link If you want to check out any info related to your billing, you can go ahead and click on this link and use the password that they gave you Right below that, you’ll see that there’s a link for your control panel with your username and a temporary password

I’m going to copy this password here, the temporary password And to log in to your control panel you’ll use this link This is a really good email to keep in a safe place for future reference because you will be needing this information as well as the link to the control panel to log into your Hostgator web hosting account I’m going to click on this link here Then, here is my username

You want to type in your username here that was found in the email And then you want to add your password right here as well Once you have that setup, you want to click on login to login to the control panel of your web hosting account Here we are on the Hostgator control panel The next step that we want to do is step number two, we want to install WordPress

Thankfully with Hostgator there’s a really easy way to install WordPress using their simple wizard script I’m going to scroll down to where that is located You want to scroll down to where it says, “Software and Services” You want to find this icon that says ‘Quick Install’ This is what we’re going to use to install WordPress really easily

In Hostgator, we’re going to use this ‘Quick Install’ link I’m going to click on that Once I click on that, you’ll note that there’s all these different kinds of software listed here on the left-hand side bar Right at the top, you’ll note that it says, ‘Blog software’ and there’s a link here for WordPress This is what we want to install

So, I’m going to click on that Then, you’ll see a button here that says ‘Continue’ Note that we’ll be installing WordPress version 36 which at the time of this recording is the most recent version of WordPress I’m going to go ahead and click on ‘Continue’

Here you’ll get a panel where you can decide which domain to install WordPress to I’m going to add the domain name where I want to install WordPress and then I’m going to fill out this information below starting with the admin email I’m going to add my admin email right there Next, you want to give your new website a title I’ll just call this a name of my domain

Then, you also want to add an admin username Note that this is an important step for website security You want to make sure that you do not use an admin that is something like admin, support or administration These three names, admin, support and administrations those are the first names that hackers will try when they’re attempting to break into your WordPress website It’s important that you use an admin username that is more unique than admin

For this instance I’m just going to add my name right here You can also add your first name and last name I’m going to leave that empty and instead I’m just going to click on ‘Install’ to install WordPress Okay, congratulations You’re installation is ready

You can access the installation of your new website by clicking on this link here Also note that here is the admin area login URL that you’ll use in the future to access the log-in panel To access your website in the future, you want to make a note of this link here It’s usually your domain name followed by wp-admin That’s an important link to remember as well so that going forward you can easily login to your WordPress website

Also make a note of your username and password This is what you’ll also need of course to login to your website when you click on this link I’m just going to highlight this temporary password here and copy it And then, I’m going to click on this link here to login to my new WordPress website Here we are on the login screen of our WordPress website

To login, you want to enter your username in the username field and your password in the password field And then, you want to click on this button that says, “Remember me” so that the next time you come to WordPress your username and password will be remembered In the event that you forget your password in the future or perhaps even now, you want to click on this link here that says, “Lost your password” and WordPress will send you a password reset to the email that you used when you were creating your WordPress website For the moment, here I have my username and password I’m going to go ahead and click on the login button to login to the WordPress website

Here we are on the dashboard of your WordPress website This is the first thing you will see when you login to your WordPress website And when you first install WordPress, you’ll also see this “welcome to WordPress” message along with a number of links to get you started Right now, I’m just going to dismiss this message by going up to the top on the right-hand side here and clicking on ‘dismiss’ Here we are on the dashboard to take a quick look at what the website looks like now before doing anything just from the very beginning

If you go to the top and click on ‘visit site’, here we’ll see what the WordPress looks like right now This is when you first install WordPress This is what you will see We have quite a lot of work to do because this is where we’re headed toward We’re going to be building out our website that looks something like this

Going back to our WordPress dashboard, the first thing we need to do is click on ‘dashboard’ here to go back to the dashboard Here on the dashboard where it says ‘appearance’ we need to change the theme from the 2013 We see that currently when you install WordPress with WordPress 361

The 2013 theme is automatically installed What we need to do is to change this theme so that Virtue, the theme called Virtue, is installed instead The first step is to change the theme and we do that by going to the left-hand side going on ‘appearance’ And then, here we see we’re on the ‘themes’ screen We see our current theme right now is the 2013 theme

To install a new theme we need to click on this tab here that says ‘install themes’ Then, you’ll note that there’s a ‘search’ bar right here where you can search for the theme There’s a number of links here related to themes that you can check out But what we want to do now is you want to search for the theme called Virtue I’m just going to type in ‘Virtue’ right here on the search field and click on ‘search’

Here we see that the Virtue theme pops up and this is the one that we want So, I’m going to click on ‘install now’ to install this theme Once the theme has been successfully installed I’m going to click on ‘activate’ to activate this new theme Okay, welcome to the Virtue theme Now, we see we have a number of additional settings all related to the Virtue Theme right here

Now, when we check out what the website looks like by going up to the top and clicking on ‘visit site’ we see that the homepage of our website looks a lot different than it did the previous view Let’s take care of a few things first starting with adding some plugins to our website namely the WooCommerce e-commerce plugin We’ll also add a toolkit specifically for this theme Then, we’ll go about adding all the different settings here to create the menu and change the logo and the slider Going back to the dashboard – I’m going to click on ‘dashboard’ right here on the top

Then, you’ll see this message that says, “This theme comes packaged with the following premium plugin – the Virtue Toolkit” We need to begin installing this plugin by clicking on ‘begin installing plugin’ So, I’ll click on that right here And then, we’ll arrive on ‘install required plugin’ screen which when I hover over this title here, this Virtue toolkit, there’s a link here that says ‘install’ So, I’m going to click on ‘install’

Then, once the plugin has been installed I’m going to return to the ‘required plugins installer’ by clicking on this link To complete the process I’m going to click on that ‘activate’ link right below where it says ‘Virtue Toolkit’ Okay, so the following plugin has been successfully activated so we’re good to go on that Now, going back to our ‘plugins’ screen – I’m going to click on ‘plugins’ right here on the left-hand side Here we can see all the plugins that have been added to the site so far

Many of these come with the WordPress installation Down below we can see the Virtue Toolkit right here The next plugin we need to add is the WooCommerce plugins Coming at the top right here, I’m going to click on ‘add new’ And then, I’m going to do a search for WooCommerce and click on ‘search plugins’

Here we see that the WooCommerce plugins shows up at the top You can read more about it by clicking on ‘details’ or you can click on ‘install now’ I’m just going to click on ‘install now’ “Are you sure you want to install this?” Yes, okay Once the plugin has been successfully installed, you want to click on this link that says ‘activate plugin’

Okay, welcome to WooCommerce You’re almost ready to start selling Now, we need to click on this link here that says ‘install WooCommerce pages’ to install the WooCommerce pages Okay, welcome to WooCommerce 20

The pages have been created and we can double check by clicking on this ‘settings’ button right here Here we see all kinds of different settings related to the WooCommerce e-commerce plugin When I click on ‘pages’ right here, this pages tab, here we can see all the WooCommerce pages that have been created Once all the WooCommerce pages are setup the next step is to add a logo to the header To do that, I’m going to go to the left-hand side hover over ‘appearance’ and click on ‘theme options’

Here on the theme options screen we can see all the different settings and options we’ll need to configure and setup the Virtue theme At the top we have the ‘main settings’ option and on this screen we can see we can choose a site layout either a wide site layout or a boxed site layout I’m going to choose the boxed one right here Next, you can choose how many columns you’d like in the footer for 4, 3 or 2 columns I’m going to choose 4

Then, underneath that we have the beginning of the logo options The first option related to logo is the layout So, if you want to have your logo on the left-hand side you can choose this display Or if you prefer the logo to be centered in the middle you can choose this one right here I’m going to leave it on the left aligned logo

And then, underneath that we need to choose our logo So, I’m going to upload a logo by clicking on the ‘upload’ link Then, I’m going to click on ‘upload files’ right here Then, I’m going to click on ‘select files’ to select my file Then, once you find the folder where your logo is located you just want to select it and click on ‘open’

Once the logo has been uploaded to WordPress, the next step is to add a title and an alternative text It’s always a good idea no matter what kind of images you’re adding to your site to always include a title and an alternative text so I’m going to add this right here And then, I’m going to click on ‘select’ to select this particular logo and there we go Underneath that the next step is if you have ready logo you can upload that there I don’t have one so I’ll leave that blank but this is where you would add it

And then, you can choose the logo font If you decide not to use a logo itself, you just want to have a website title, here you can choose the style of font that you would like for your website title Underneath that, you can also choose the styles, the font size, the font styles’ right here whether you want it to be light, bold or normal And then if you prefer a color for your website title in the header, you can select that here Next, we have the site tagline

This is an optional line of text below your logo So, if you’d like to add a tagline below your logo you can add the text right in this field right here I’m not going to add a tagline in this demo but just want to point out that you can do so by adding the text right here And if you do decide to use a tagline, you can also set the tagline font as well as the tagline style in these boxes right here Underneath the tagline we have a few more options including the logo spacing

So, if you’d like to change the default logo spacing, you can do so here And also if you’d like to change the default primary menu spacing you can do so here Finally, if you want to upload a banner for the bottom of the header, a site wide banner, you can upload a site wide banner by clicking on this button ‘upload’ and uploading your banner When you’re all ready to go on this screen just come to the bottom here and click on ‘save all changes’ to save your changes Once we have the main settings set including the logo, the next step is we need to create a menu

But in order to create a menu we also need to have some pages to add to our menu So, let’s add some pages right now To add a new page we want to go to the left-hand side and click on ‘pages’ And then in WordPress there’s a few different ways to do the same thing If you’d like to add a new page you can either come to ‘pages’ here and then click on ‘add new’ or at the top you can click on this link here that says ‘add new’ or at the top here in the toolbar where it says ‘+new’ you can hover +new and then click on ‘page’ to create a new page

So, there’s a number of different ways within WordPress to do the same thing I’m going to add a new page here by clicking on ‘add new’ The first page I’m going to create is an ‘about page’ Most likely when you create a website you’re going to also want an ‘about page’ Here where it says ‘title’ I’m just going to add ‘about’ since this will be the ‘about page’

Then, I’m going to add some text, just some random text But this is where you will add your text Note that here in this ‘edit’ page screen there’s two tabs There’s a ‘visual’ tab and a ‘text’ tab The difference between these two different tabs is that the ‘visual’ tab is the ‘what you see is what you get’ view of your content

WordPress really gives you an easy way to format and setup the content without knowing any code For example, just like you would do with an email or with any kind of Word processing program, if I want to highlight this for example by just highlighting these words here, I can bold it by clicking on this B right here Also note that when I hover over each of these icons, I’ll have tool tip which will tell me exactly what this particular icon will do The good news is that you don’t have to memorize all of these different icons If you forget what they are, you can just hover over them one by one and you can see what they do

The other thing to note, if you’re not seeing two different rows right here, then you’ll need to click on this link right here When I click on this, this is the hide or show kitchen sink, you can see that it either collapses or fully displays all of the different formatting options that you have to format your content To see the behind the scenes code that WordPress is generating to create the formatting you can click on this link here, this tab that says ‘text’ and you can see the different HTML elements and tags that are added by WordPress to create the formatting I prefer to stay in the visual view This is where I can just use all these different icons

So, I’ll just stay right here in the visual view And the next step is we want to add an image to this particular text So, I’m going to place the cursor where I want this image to be displayed So, I’ll put it to the left of the L right here and I’m going to click on ‘add media’ to add some media Next, I’ll click on ‘upload’ file to upload a new file and then select ‘files’

Here I’m going to choose the file that I like and then click on ‘open’ Once the image has been added to the website, next we need to add a title and an alternative text Once you have your title and alternative text, the next step is the attachment display settings Here you can choose whether you want the alignment of this image left, center, right or none I’m going to choose left alignment

If you’d like to link this image to something, you can choose that here whether you want to link to a media file, an attachment page, a custom URL or none I prefer not to link this image to anything so I’ll just click on ‘none’ Finally, the last step is the size that we want to display next to the text The options we have are thumbnail size or full size and I’ll leave it at full size And then, I’m going to click on ‘insert into page’ to insert this image into the page

Okay, the image has been inserted The next step is looking at the right-hand side we can choose our page attributes If you’d like to create a ‘parent page’, you can select from this list here I’m not going to include a parent This page will actually be the parent page

As far as template goes we have a number of options When I click on this link right here we have a dropdown box By default, you’ll have the default template which includes a sidebar But if you’d like to include another type of template you can choose that here And for this particular page, the about page, I’d like to have a full width template with no side bars so I’ll just click on full width

Finally, scrolling down if you’d like to add a subtitle below the page title, you can add that right here And then, if you’d like to add a new slide or images to this particular page, you can do that by clicking on ‘add images’ right here For this particular page, the about page, I’m not going to add any of that I’m just going to keep it really simple with an image and some text When you’re all ready to go, we can click on ‘publish’ or ‘update’ right here, this blue button, to update or publish the page

Once the page has been published, we can view the page by clicking on ‘view page’ And here we can see what the about page will look like with our image and our text The next page that I want to add is the ‘contact page’ We’ll add a contact page by once again going up to the top toolbar, hovering over +new and clicking on ‘page’ And as we did on the previous example for this particular page, I’m going to add a title here by just putting in ‘contacts’ since this will be the contact page

Next here on the ‘content’ box, now we can add our contact info The really cool thing about this theme is that this theme, the Virtue theme, gives us some icons that we can add along with our contact info So, I’m going to add an icon by clicking on this smiley face right here by clicking on that And you can see that here we can choose our icons So, when I click on this there’s all these different icons that you can choose

The one that I want right now is the ‘envelope’ icon so I’ll just click on ‘envelope’ You can also choose the icon size, the color and whether you want to float this to the left or to the right or not at all I’ll just leave this as none right there and then I’ll click on ‘insert’ to insert this icon And you can see here is the short code that has been inserted After this, I’m just going to add my address

I’ll just add it right there Note that I’ve bolded this I’ll just highlight this and you can see you can click on the B to either bold it or to not bold this info Next, the next line after I’ve added my address with the icon, I want to add a divider I’m going to click on the second icon here where it says ‘insert divider’

I’m going to click on that Here I’m going to choose a ‘divider’ and the one that I want is ‘clear’ I’m choosing the clear divider and I’m going to click on ‘insert’ This will just help to display the icons along with the contact info a little bit better Finally, I’m going to add my phone number

Once again I’m going to add an icon with the phone number I’m just going to leave the cursor there and click on the smiley face icon one more time This time the icon that I want to choose is a phone The phone icon is located all the way down the list in this dropdown list So here it is right here, icon phones

I’m just going to click on that Then, I’m going to click on ‘insert’ to insert the short code for the phone And then, I’m going to add my phone number right here Once again, I’m going to highlight this phone with the colon and then I’m going to click on the B to bold this word right here As we did before, I’m going to add another divider

I’m going to click on ‘insert divider’ icon And the divider I’m going to choose is the clear divider right there And then I’m going to click on ‘insert’ Finally, when you’re done adding the icons and the contact info, if you want to add any extra info you can add that right here I’ll just add some demo text right there

On the right-hand side we see the ‘page attributes’ and here is where we can set the template I’m going to click on ‘default template’ and this time I’m going to choose the ‘contact template’ So, I’m just click on that Since this is the ‘contact page’, I’m going to use the contact template Once I’ve chosen the contact template, then I’m going to click on ‘save draft’ to save my draft

Once you clicked on ‘save draft’ then you’ll note that all the different contact page options will pop up down below Here you can set all the different contact page options As a note, yes we are using the contact form, so that should say ‘yes’ If you’d like to give the contact format title, you can give it a title right here So, I’ll just add a short title, “Please contact us via the form below”

If you’d like to use a map and any address, you can do so by clicking on ‘yes’ and adding your location I’m not going to add a map though; I’m just going to leave it as it is with just the form Once you have all that ready to go, go ahead and click on ‘publish’ to publish the contact page Once the contact page has been created, the next page we’re going to create is a page with a side bar To create the new page once again, you can either go up to the top, hover over +new and click on ‘page’ or you can simply click on ‘add new’ next to where it says ‘edit page’ or finally on the left-hand side you can hover over ‘pages’ and click on ‘add new’

I am going to click on ‘add new’ right here The first thing we want to do on our ‘add new page’ as we did in our previous examples, is we’re going to give our new page a title So, I’m going to give my page a title here It’s going to say, “Learn how to stand up paddle surf” Next here on the content box, I’m just going to add some demo content right there

As we did previously, I’m going to add an image to this content I’m going to place the cursor right to the left of the L of this word and I’m going to click on ‘add media’ to add some media Next, I’m going to click on ‘upload files’ and then ‘select files’ Then, I’m going to find the image that I want, this one right here And then I’m going to click on ‘open’

As we did before, we need to give our image a title and an alternative text Once we have the title and the alternative text added, once again we can choose the alignment I’m going to keep it at left alignment right there We can link this image to something but as we did previously I’m not going to link this image to anything so I’ll click on ‘none’ Then, finally we can choose the size that we’d like to add within our content

Here we see we have a thumbnail size, a medium size and a full width size So I am going to choose the medium size right there And then I’m going to click on ‘insert into page’ Once we have the image and the content added, then on the right-hand side you can choose the template I’m going to keep it as the default template which comes with a sidebar

Then, scrolling down we have a page title a subtitle that we can add If you’d like to include a subtitle below the page title, you can do so by adding a subtitle right here So, I’ll just add a short subtitle right there Then, if you’d like to add a page slider, you can do so But I’m not going to add that right on this particular page

We’ll add that on another page Okay, everything is good to go Then I’m going to click on ‘publish’ to publish this page The last page that I want to add right now is the ‘blog archive’ page To do that, I’m going to click on ‘add new’ one more time

Here on the ‘add new page’ screen, I’m going to add ‘blog’ Just put the word ‘blog’ right here as the title Here on the right-hand side for the default template, I’m going to choose ‘blog’ Once you have those two things set, go ahead and click on ‘publish’ to publish the blog page Once the various pages have been created, the next step is to add them to the menu in the header section

To create a menu, we need to go to the left-hand side, hover over appearance and click on ‘menus’ Here on the ‘edit menu’ screen we need to create our new menu To create a new menu, I’m just going to add the name right here, ‘menu’ And then, I’m going to click on this button that says ‘create menu’ Once the menu has been created, now we need to add some menus to this particular menu

The ones that I’m going to add, I’m going to add the blog, I’m going to ‘learn how to stand up paddle surf’, the contact page, the about page And because this is an e-commerce website as well, I’m going to add the shop page also Once you’ve checked the pages that you’d like to include in the menu, go ahead and click on ‘add to menu’ to add these to the menu Once the menu items have been added under menu structure, the next step is to drag them so that they display in the order that you’d like to have them displayed in the menu For example, I want the about page to be at the top, so just drag that to the top

And then, I want the contact page to be at the bottom And let’s see, I’ll move the shop page right after about Then, we have the blog and we have the ‘learn how to stand up paddle surf’ So, this is awfully long for a title for a menu item so I’m going to click on this button right here where it says ‘page’ Here I can re-label the navigation label right here by simply calling it ‘learn’

Just one word right there That’s a lot shorter, a lot better for a menu navigation item So, it says ‘learn’ and it will go to the page that is the ‘learn how to stand up paddle surf’ page Once we have that setup, I’m going to click on ‘save menu’ to save my menu The next step is we need to manage the location

So, I’m going to click on ‘manage locations’ right here Note that at the top it says, “Your theme supports five menus” So there’s five different menus that we can configure here Primary navigation menu, a secondary navigation menu, a mobile navigation, top bar navigation and a footer navigation So, in this demo I’m going to be using a primary navigation menu bar

Right here where it says ‘primary navigation’, I’m going to select my menu, the menu I just created Next we have secondary navigation, if you’d like to add a secondary navigation bar you can do so by setting your location right here I’m not going to be using a secondary navigation in this demo so I’m just going to leave that as it is Next we have the mobile navigation menu This is the menu that you’ll see on a smart phone or a tablet

So, we need to set that right here I’ll just use the same menu that I’m using for the primary navigation Finally, we have two more to go, the top bar navigation and the footer navigation The top bar we’ll just create in just a moment so I’ll leave it as it is for the moment We’ll come back to this

And the footer navigation, I’ll use the same menu once again that I’m using for the primary navigation and the mobile navigation That way I have the same menu bar in a variety of different places so it’s easy for readers to see the menu in a variety of different places on the page Once you have all the location set up for your menu, you can go ahead and click on ‘save changes’ to save the changes Once menu locations have been updated, I’m going to click on ‘edit menus’ to create another menu This time I’m going to create the top menu

I’m just going to click on this link here, ‘create a new menu’ This time I’ll call the menu ‘top menu’ And then I’m going to click on ‘create menu’ Once again we need to add some menu items to the top menu So, for this particular menu, I’m going to be adding two different pages

You can see them once again here on the left-hand side You have the ‘most recent pages’ as well as ‘view all pages’ So, I’ll click on ‘view all’ On the top menu, I’m going to include the ‘cart page’ and the ‘checkout page’, just those two If you’d like to add some more go ahead and click those right here and then click on ‘add to menu’

Once the two items have been added to the top menu, I’m going to click on save menu to save the menu, and now once the menu has been updated, we can go back to manage location to set these menus So, I’m going to click on manage locations and then here where it says, “top bar navigation” I’m going to click on thought menu and then I’m going to click on save changes Okay, once the menu has been updated, now let’s take a look at what the website looks like, so I’m going to go up to the top and click on visit site and here we see we have our top menu navigation, we have our logo and we have our various pages So the next thing that I want to add to get the homepage looking a little bit better is I want to add the full width slider right here underneath the header section So what we’re going toward is I want to add this header here with the calls to action and the rotating slider

So to do that, I’m going to go back to my dashboard by clicking on “dashboard” On the dashboard, I’m going to go to appearance, hover over appearance, and then click on “theme options” and here on the Virtue theme options screen, I’m going to click on the third box down, where it says slider settings, so I’m going to click on “slider settings” and here we can set the slider on the homepage Here on the slider settings screen, the first thing we need to do is we need to choose a home image slider type, so I’m going to click on this box here, and we have a couple of different options that we can choose and the one that I’m going to be choosing is the flex slider So I’m just going to click on “flex slider” to select that particular one Next, underneath of that, we have our slider images, and this is where we actually add the images that will be displayed in the slider on the homepage

So when I click on this carrot right here on the right hand side, we’ll get a drop down box and this is where we can upload the image to the slider If you’d like to include a title as well, you can do so right here I’m going to leave my title empty, blank, because I have texts already in the image So, I’m going to click on “upload” to upload my slider and then I’m going to click on “upload files” and “select files” Then, I’m going to select the image that I want which is this one right here and I’ll click on “open” and as we did with the previous images, we need to add a title and an alternative text

Once we have the title and the alternative text added, we can go ahead and click on “select” to select this image So here we see the image that I’ve added the slider, also note that we can that there’s text embedded within the image which includes the calls to action So if you prefer keeping a title with the calls to action, you can add those words right here in the title field Again, because I already have words embedded on the image itself, I’m not going to add a title, but that is an option if you’d like to do that Next, we have the link URL, so I want this image to be that anyone who clicks on the image will go to my shop page, so I’m going to add the shop page URL in the link URL field right here

Finally, you can add a description if you like, this is optional, and when you’re all-ready, go ahead and click on the top link here to close this box Next, I want to add one more slide to the slider, so I’m going to click on this add new slide box Then, I’m going to click on the carrot right here to open this, and then we’re going to do the same process one more time where I’m going to click on “upload” to upload a new image and then click on “upload files” and “select files” and this time, I’ll choose this particular image and click on “open” and as we did in the previous step, once the image has been uploaded, we need to add a title and an alternative text So, I’ll just add that right here and once we have the title and the alternative text added, then we can click on “select” to select this image Just as in the previous example, this image also includes text within the image, so I’m not going to add a title, but if you like to do, please do so right here

Then, I’m going to link this particular image to the learn page, the learn to stand up paddle serve page, so I’m going to add the link right here, and then finally once again, if you’d like to add description, you can do that by adding your description right here So I’m just going to use two different images for this rotating slider If you’d like to add more images, you can continue to click “add new slide” right here and keep doing the same process So I’m just going to come up to the top here and click on “save all changes” to save the changes and once the changes have been saved, we scroll down and there’s a few more options that you can set So I’m going to leave all the defaults that come with the Virtue WordPress Theme, but here if you like to change the slider maximum height or maximum width, if you’d like to autoplay this or not, and if you want to change any of these other features related to the slider, the slider pause time, transition time, the slider transition time, if you’d like to show captions or not, you can do so in these sections right here

Also, if you’d like to include a video on the homepage, you can embed the video code right here So I’m not going to include a video on this particular homepage, I’m just going to keep it as the two different sliders right here using the flexslider Once again, I’m just going to click on “save all changes” to make sure all my changes are set, and now once the changes have been set, let’s take a look at the homepage, so I’m going to go up to the top and click on “visit site” and here we are in the homepage with our new image slider So the next step on the homepage is we need to build out the sections below the slider right here including the featured project section, the blog post section, a few different menu icon, and then the footer section So let’s take care of setting up which sections will be displayed on the homepage

To do that, I’m going up to the top click on “dashboard” then on the dashboard, I’m going to go to “appearance,” “hover over appearance” and click on “theme options” In the previous step, we setup the slider settings, now we need to setup the home layout settings So here on the left had side bar, I’m going to click on “home layouts” and here at the top, we have our homepage layout manager This will determine which sections are displayed on the homepage So right now, we see that by default we have enabled the page title and the page content but I actually do not want these particular sections, so I’m just going to drag this one over to disable it and I’m going to drag page content over to disable that as well

The sections that I want to enable include the portfolio carousel, so I will enable that by dragging it over, I also want the latest blog post to be displayed underneath the portfolio carousel, and finally I want the icon menu to be displayed as well So here you can choose which sections you want to have displayed on the homepage For the demo, this is how I’m going to set it up Next, we can determine what we want the home blog title to be, so here I’ll just put “LADIES FROM THE BLOG” and I’m going to use capital letters, if you prefer lower case, of course you can use lower case letters Once you’ve added your homepage blog title, the next step is you can choose how many blog posts are displayed on your homepage

I’m just going to keep it up at 2, but if you’d like to change this, you can just drag this bar over to the right so that the number will increase I’m going to leave it at 2 Next, you can choose which posts are displayed on the homepage I’m going to choose all categories, so I’ll just leave it as a default with all, and then here under home portfolio settings, you can create a title for your homepage portfolio section So for the demo, I’m just going to call the title “featured” you can call this featured projects, featured photos, whatever content you want to feature here, you can add a title

Here we have next portfolio carousel category type, if you’d like to limit the category type for the portfolio on the homepage you can do so by clicking on this and choosing the category I’m going to keep it as all Next, we have display the portfolio types under the tile I’m not going to do that, I’ll just leave that unchecked, and then here we have the home icon menus So this refers to the different blocks of menu items that will be displayed underneath the blog posts

So I’m going to create four different icon menu blocks So here icon number one, you just want to click on this drop down arrow right here, so I’ll click on that Here you can include an icon, you can add a title, and then you can add a URL So I’m going to just choose the preset icons that come built in with the Virtue theme, so I’m just going to click on this one right here and I think for this particular one, I’ll just call this the about page So for the about page, I’ll use this particular icon

You can choose of course any icon that you’d like and there are plenty of them to choose from So just for the purpose of this demo, I’ll just use this icon user and I’ll call this about Then, for the link URL, I’m just going to add the about page right here, so I happen to know the URL for the about page is simply the domain name followed by (/)about, so I’ll just leave it like that Now, I need to add three more of these icons, so I’m going to click on “add new icon” to add another icon, and one again here we click on the carrot to open up the box and I’m going to choose a preset icon, I’m going to choose the shopping cart because I want this to be the shop page Once you have the icon selected then you can add a title as well as a link URL as we did in the previous step

So I’m just going to add shop since this will be the shop page and then I’m going to add my link URL, so I’ll just grab this one and paste it in there, and I know the link URL is shop, so I’ll just call this shop right there So now I have the link for the second menu icon Next, I’ll do this two more times, add a new icon, this one is going to be the portfolio, so I just opened it up I’m going to call it portfolio, then I’m going to grab the icon This time, I think I’ll use the camera icon, the icon-camera, since this will be the portfolio page, and as we did before I’m just going to copy the link, I’m going to add the link here and of course rename it because this is the portfolio page, and finally one last time I’m going to click on “add new icon” this one will be the contact page

I’m going to open it up, I will call it contact, then I’ll choose the preset icon which this time will be a phone, so I just need to scroll down here and look for the phone icon, which is all the way at the bottom then I’m going to choose the icon-phone, and finally I’m going to add the link URL one more time as well So this is the contact page, so I know that the URL is just again the domain name followed by (/)contact Finally, when all the icons have been added, then I’m going to click on “save all changes” to save my changes So before taking a look at what the homepage looks like now, let’s first create the portfolio items in the portfolio page So we’ve actually already created the portfolio page, so what we need to do is we need to actually create the portfolio items for the portfolio page

So to add the portfolio items on the left hand side here, there’s a link that says portfolio, so I’m going to click on that and here we see we don’t have any items added to our portfolio yet, so let’s create the first one by clicking on “add new” then we want to give our new portfolio item a title, I’m going to be creating a landscape portfolio item with the landscape full width slider, so just for descriptive purposes, I’ll call this landscape slider Of course, whatever this item is called, you want to add your title right here Next, I’m going to add some content This is just some demo content right here I just added some text for the description

Then, I’m going to scroll down If you’d like to add portfolio type, you can do so by clicking on “add new type” and then just adding whatever this particular type is called for your particular item, then you want to click on “add new type” Next, scrolling down, we want to add a featured image So I’m going to set the featured image by clicking on “set featured image” then I’m going to click on “upload files” and “select files” then I want to choose the file, so I’m just going to choose this file right here and click on “open” and as we did with the previous images, we want to give this image a title and an alternative text Once you have a title and an alternative text, you can click on “set featured image

” Once the featured image is set, the next step is over here in portfolio post options, we can choose the layout and because this is a landscape full width slider, I want to place this above the text, so I’m just going to click for this particular portfolio item, I’m going to click on “above” and then here we have some project options So when I click on this, you can see we have an image, image slider or a video So for this particular landscape slider, I want to use the image slider project option Next, we can choose the maximum image slider height So we see here that the default is 450, so we can just input the number, so I’ll just put in 450 right here

Next, we have the maximum image slider width Once again, here we see the default is 670 or 1170 pixels wide for when you choose the above setting So I’ll just leave it as 1170 right here, and then we can add some different project element, some different meta descriptions So we have for example the title, so I’ll just call this “project type” as we see on the right hand side, there’s all these examples of possible values that you can include in these particular fields right here So for the value title, I’ll just call it “project type

” Next, we have value description I’ll just call this “photography” since this is a photo Skills needed, I’ll add skills needed right here Value description, I’ll add Photoshop and Illustrator Note that I’m just copying all the different items that are listed as examples here on the right hand side

Of course, for your own project item, feel free to of course customize all of these different titles, descriptions and values in these fields right here Once you’ve added in all of your values, the next option is to decide whether or not you want to display a similar portfolio item carousel underneath this particular portfolio item It’s always a great idea I think to include related items underneath your main content because that helps people to explore other areas within your website So I’m going to choose yes to display a recent project and for the carousel title, I’ll just call it “recent projects” Finally, at the very bottom, we need to add the additional portfolio slider images

So we’ve already added our featured image right here, the next step and final step is we need to add the additional images to be displayed within the slider So I’m going to click on “add images” and then “upload files” and “select files” and this time, I’m going to choose this image right here and click on “open” Again, I’m going to give it a title and alternative text, and once the title and alternative text have been added, I’m going to click on “add to gallery” There’s one more image to be displayed, so I’m going to click on “add images” to add my next image, and this time I’m going to add the same image as the featured image right here So this way, I’ll have two images in my slider

So once this is selected, I’m going to click on “add to gallery” to add this to my gallery Once the images have been added to the portfolio slider right here, I’m going to go to the top and click on “publish” to publish this portfolio item To view the portfolio item, we can just click on “view post” to view the post and here we could see our first portfolio item So as we see, now we have these portfolio previous links here to look at the previous portfolio item and the next portfolio item We can also click on this particular image to go to the portfolio page, and then here we have our actual landscape slider portfolio item

So when we click on this, it just rotates to the two different images in our slider Down below, we have our description, our different data about this particular portfolio item, and then we have our recent projects which will begin to display one-by-one across this row here So let’s add a few more portfolio items to our portfolio by going up to the top, clicking on “(+) new” and clicking on “portfolio item” So the next portfolio item I want to add is simply an image with the description on the right hand side of the image So for this one, once again, I’m going to give it a title, then I’m going to add my description in this content box right here, then on the right hand side, I’ll also choose these as photos

I’m going to scroll down and set the featured image by clicking on “set featured image” then I’ll click on “upload files” and “select files” I’m going to select my image and click on “open” and once again, once we have the image, I’m going to add a title and an alternative text Then, once I have the title and alternative text, I’m going to click on “set featured image” to set the image Once the featured image has been set, the next step is to check out the portfolio post options and this time, I’m going to place the layout will be beside So I want the image to show up beside the actual description in the text

So I’m going to click on “beside” and then I’m just going to scroll down this time for project options, I’ll leave it as image, I’m going to keep the default as 450, you can add that in right here, so 450 for the default slider height The default for the width is 670, so I’ll just add that within there, and then you can continue to add all the different values here for the data section underneath the description Once you’ve added all the different values in these fields right here, then I’m just going to scroll to the bottom I’m also going to include a similar portfolio item carousel on this item as well So I’m just going to click on “yes,” the carousel title I’ll add will be the same as the previous example, “recent projects

” There are no image sliders for this particular portfolio item, so I’m not going to touch this right here, and then I’m just going to come up to the top and click on “publish” to publish this portfolio item Once the item has been published, we can check it out by clicking on “view post” and now we see our new portfolio item Now, note that this has a different layout than the previous example now the image is on the left hand side and we have our text right here, our different item elements and attributes right here, and then we can see again the recent projects starting to slowly fill out here in this row right here, and when I hover over each one of them, note that we can also see the title of the project item So let’s add a few more portfolio items to our portfolio The next one I want to add is an image on the side but I want this to be a slider instead of a static image

So to add the next portfolio item, again I’m going up to the top, hover over (+) new and click on “portfolio item” Then, once again here on the new portfolio item screen, I’m going to give it a title as well as some content description right here, and then I’m going to add this to the portfolio type photos, scroll down I’m going to add featured image by clicking “set featured image,” then I will click on “upload files” and “select files,” then I’ll choose my file and click on “open” Once again, I’m going to add a title and an alternative text, and when I have the title and alternative text, I’m going to click on “set featured image” to set the image Once the image is set on the left hand side where it says portfolio post options, once again I’m going to click on “beside” because I want this image to show up on the left hand side of the description, and then I’m going to click on project options image This time as well, I’m going to give it an image slider, so I’m going to click on “image slider

” The default once again is 450 pixels wide, actually I should say 450 pixels tall, the height and the width is 670 pixels wide, so I’ll leave it like that Also, I’m going to add in all the values right here Once we have all the values is added to these fields, then I’m going to scroll down I’m going to add a portfolio item carousel below this particular portfolio item, so I’m going to click on “yes,” the title as we did in the previous examples is going to be the same thing “recent projects” and here where it says portfolios slider images, I’m going to click on “add images” and select my first image right here and click on “add to gallery” Then, I’m going to add one more image to the gallery by clicking on “add images,” “upload files,” “select files,” and this time I’ll choose the second image for the slider and click on “open

” Then, I’m going to add the title and alternative text, and finally when we have the title and alternative text, I’m going to click on “add to gallery” Okay, once we have the images added, then I’m just going to come up to the top and click on “publish” to publish this new portfolio item Once the portfolio item has been published, I’m going to click on “view post” to view the item and here I have my new portfolio item with the image slider to the left of the description So when I click on this, we can see that, now the images rotate from one to the next, and then underneath here we have our recent projects and these are filling out really well in this bottom row right here So this is how you add portfolio items to your WordPress website

I want to add one more I want to add a video to show you how to add a video to the portfolio items So I’m going to go up to the top, hover over (+) new one last time and click on “portfolio item” This one is going to be a video, so I’ll just call video Of course, add any title you’d like, then I’m going to add some content here in this box

Next, I’m going to add portfolio type and this time because it’s a video instead of a photo, I’m just going to click on “add new type” add video right here and click on “add new type” this button to create the new portfolio type Then, I’m going to scroll down and set the featured image by clicking on the set featured image link, and then I’m going to click on “upload files” and “select files” then I’m going to choose my image, the videopng file, and click on “open” Then, as we did previously, I’m going to give this a title and an alternative text Then, I’m going to click on “set featured image” to set the featured image

Here where it says portfolio post options, I’m going to place this video above, so I’m just going to click on “above” You can choose whichever layout here that you’d like, and then for project options, I’m going to choose video time I’m also going to leave the defaults, so I’ll just leave it as it is, I’ll leave these two blank Next, we can set the maximum height and the maximum width of this particular video and I’m not going to set that, I’ll just let the defaults take over right here, and then finally we can fill out all the values in this area right here Once you’ve added all the different values here in these fields, we can scroll down and we need to add the embed code of our video

So to grab the embed code, I’m just going to go to YouTube I’m going to grab the embed code for this video by just scrolling down, clicking on the share button right here, and then I’m going to click on “embed” Here, I’m just going to highlight this entire embed code, and then I’m going to copy it, and then going back to my WordPress website where it says “video project,” I’m going to paste in this code right here Finally, at the bottom where it says “similar portfolio item carousel,” I do want to display this, so I’m going to click on “yes” When you have everything ready to go, we can come up to the top here and we can click on “publish” to publish this portfolio item

Once the portfolio item has been published, we can click on “view post” to view the portfolio item, and here we have the portfolio item with our video So note that there’s a black bar at the top of the video and black bar at the bottom, I actually want to remove that, so let’s go edit the portfolio item really quickly I’m going to click on “edit portfolio item,” and here we can see that I included both the width and the height which is different from the default, so I’m just going to remove this all together I’m just going to delete that, and then I’m going to go back up to the top and click on “update” to update this item, and now when we check out the item by clicking on “view portfolio item” now we see that the black bar at the top and the black bar at the bottom has been removed So that looks a lot better

So that’s how you can remove the black bar of your video if you are having extra black bar inside of your video Okay, so this is what portfolio item looks like with a video We have our video at the top and then we have our description, our project details and then underneath, we can see that now there’s a full row of recent projects So we have one more thing to do to set the portfolio up and that is to create a portfolio page So to create a portfolio page, we want to go up to the dashboard, so I’m going to click on “dashboard” and here on the dashboard, we want to create a new page, I’m going to click on “pages” and then I’m going to click on “add new” and the page we want to create is a portfolio page

So I’m just going to add that here in the title, and then we can leave this section blank, but here on the right hand side where it says page attributes, we can select a different template So when I click on this default template here, I get this drop down box and the one that we want is a portfolio grid, so I’m just going to click on portfolio grid here for the template, and then I’m just going to click on “publish” to publish this page Once a portfolio page has been created, now we need to add it to our main menu So to add it to the menu, I’m going to go to the left hand side, hover over appearance and click on “menus” There are two menus we’ve created so far, the top menu and the primary navigation menus

So the one that we want is simply the primary menu right here, so you want to make sure that is selected, and then click on the select button right here, so that down below, we’re looking at the main menu Next, we need to add the portfolio to our item structure right here So I’m just going to click on the portfolio page right here, looks like I miss spelled it, so I’ll need to respell that and I’m just going to click on it, and then click on the “add to menu” button and once the portfolio has been added to the menu structure, you can just drag it wherever you want it to be displayed in this order right here, so I’m going to drag it up so that it’s right after the shop page Once you have the portfolio page, where you like it to be displayed, you can click on “save menu” to save the menu So to change the spelling, I’m just going to go back to page as really quick, click on “all pages” then I’m going to find my portfolio page and click on “quick edit” and I’m just going to respell this, so that it’s spelled correctly, portfolio, there we go, the title as well as a slog, and then I’m going to click on “update

” Okay, so once we have the portfolio renamed, then I’m going up to the top and I’m going to visit the site by clicking on “visit site,” and here now on the homepage we have our portfolio page listed here in the primary menu navigation area right here We also see on the homepage that we have our slider, we have our featured section, our blog section needs to be filled out, and we have our menu icons So the next thing is, fill out this blog section by adding some blog posts To create a new blog post, you want to come up to the top, hover over (+) new and click on “post” or you can go to the dashboard by clicking on “dashboard” and here on the dashboard, on the left hand side, there’s a link that says “post,” so you can either click on “post” and then click on “add new” and here we can add the title of our new post So I’m just going to pop in a title right here

We’re going to be creating an image carousel post The image carousel post will look something like this So here is a demo of what we are working towards, so we’re going to be creating this in just a moment, I just want to show you what it looks like We have the blog archive page here with an image carousel post right here So you can see here on the blog archive page, my click on this arrow it rotates through a series of different images that’s different of course than the image up here which is just a static image

So right now, we’re going to create a blog post, adding this image carousel post right here So once we have added the title, the next step is we need to add some content right here, so I’m going to paste in some content right here Next, we can add our blog post to a category I’ll just add a category called blog, so I’m going to click on “add new category” and I’ll call this blog, and then I’m going to click on the button one more time, this is “add new category” to create the category Next, scrolling down if you’d like to add some tags, you can add some tags right here

I’ll just call this yoga since this is a post about yoga, and then we want to create a featured image So I’m going to click on this link that says “set featured image” to set the featured image This is a blog post so I’m going to choose an image that is already in my media library here, so I’m just going to click on this image right here, and then click on “set featured image” Next, looking at the post options over here, we can check out the head content This is the content that appears just above the actual blog post, so you have a few different options, you can include nothing or include an image slider, a video or an image

So for this particular post, I want to include an image above the blog post, so I’m going to click on “image” The defaults will automatically divert to or revert to the defaults if you leave these blanks, so I’ll just leave these blanks, but we see here the default is 400 pixels high and 770 pixels wide Those are the defaults So I’m going to leave those as they are, and then I’m going to scroll down Post summary, we can check out these options right here

Now, this is where we want to set the portrait image slider This will enable us to create that image carousel on the blog archive page So I’m going to click on “portrait image slider” and then here it says “display sidebar” Yes, I do want to display the sidebar If you don’t want to do that, you can click on “no,” I will click on “yes

” I want the primary sidebar, so I’ll leave that as it is Do I want to display an author info box? Yes, so I’m going to click on “yes” this is optional of course, choose what you would like, and then it says do you want to display a carousel with similar or recent post? I always think that’s a good idea Again, it gives visitors a way to explore other areas of your website and stay on your site longer, so I’m going to say yes, display recent post, and then you can create a title, and then scrolling down, I’m going to click on “add images” in the post slider images to add the images to my image carousel So I’m going to click on “add images” and I’m going to choose this image and this image, so these two images are checked and then I’m going to click on “add to gallery” to add these to my gallery So once those images have been selected, we can come up to the top and click on “publish” to publish our new blog post

Once the blog post has been published, we can check it out by clicking on “view post” and here we our single blog post page with the image at the top, above the post itself and we can scroll down and there’s our post and we have our author info right here which we can fill out in just a few moments We also see that all of the different related posts or more recent post will begin to start showing up in this row right here Next, we can check out our blog archive page, by clicking on “blog” and here we have our blog archive page Now, it looks like there’s something going on with the image carousel, it’s not displaying This should have our image carousel right here, and of course this happens when I’m creating a video

So I guess it’s actually a good thing, because you may encounter this as well, so let’s take a look at how we can fix this So when I click on this particular blog post right here and then I click on “edit post” at the top to edit this post, and here we see that our settings are set correctly We have the portrait image sliders selected right here and when I scroll down, we have the two images Now, it’s possible that these two images are not displaying because we did not actually upload them, we took them from the media library, so let’s take a look at this particular images I’m going to go up to the top, click on “media” and here we see the two images right here, these two different yoga images

So we see that they are uploaded to my yoga page, so one thing that we can do, I’m glad actually that this happened because you may have this issue, so a little bit of troubleshooting on the side here We’re going to be adding a plug-in called file unattached So I’m going to the left hand side, click on “plug-ins” Then, I’m going to come to the top and click on “add new” and the plug-in that we need to add is called “file unattached,” and then I’m going to click on “search plug-ins” and here’s the plug-in listed four rows down So it’s this one right here, so it’s called “file unattached

” I’m going to click on “install now” to install this Are you sure you want to install it? Yes, okay, and the plug-in has been successfully installed, we can click on “activate” to activate the plug-in Once the file unattached plug-in has been installed and activated, now when we go back to our media by clicking on “the media library,” now we see here are our two images, they’ve already been attached as we can see, they’re already attached to the yoga page here, I have a different, another page, and this is actually the yoga portfolio item page So we need to also attach this to the blog post So here now with this plug-in, we have these two additional features that say attach and detach

So this is a way that you can attach and detach your images from whatever post, page or wherever else they may be located So I’m going to attach it So this one, I’m going to click on “attach” I want to attach it to a post and our post is called outdoor yoga, that’ the blog post title So I’m just going to add that here and click on “search” and we can see here that’s not currently attached even though we did add it to the post

So sometimes, when an image is already added to something else, it doesn’t always catch in WordPress So this is a good double check and a good troubleshooting measure to take to attach to multiple things So I’m just going to click on this check box to attach it and then click on “save,” and now we see that now this image is attached to multiple pages or post, so that’ great So now we need to do the same things with this other yoga photo, so I’m going to click on “attach” I’m also going to do the post type of post because it’s a blog post, and once again I’m going to look for the blog post called alter yoga and click on “search,” and here it is and we can see it’s not attached, so we need to click on this box to attach it and click on “save

” Okay, so now that these two images are now attached to multiple places and we can see here, now it says attach to multiple right here Now, let’s check out the blog archive page by going up to the top and clicking on “visit site” Next here on the menu, I’m going to click on “blog” to go to the blog archive page, and now we can see here finally is the image carousel post So it may be possible that if you upload this image directly to the blog post, you should not have to go through that extra troubleshooting measure, but if you are adding an image directly from within your media library, you may encounter that issue, so this is how you can solve it Okay, great

So let’s add a couple more blog posts, so I can show you other kinds of formats that can be displayed here on the blog archive page So the next one that we’re going to add is a blog post with simply a static image, this one is a carousel, the next one we’re going to add is simply a static image So to add a new blog post, I’m going up to the top, hover over (+) new and click on “post,” and once again the first thing we need to do is we need to give our new blog post a title So I’m going to add my title in here, five quick workouts, so you can do it anywhere, and then we need to add some content here in this box So I’ll just paste some content in here

Next, we can come over to the right hand side and under categories, I’m going to add this to the blog, so I’ll just click on this check box here, and then I’m going to give this a tag of workouts So I’m just going to add the word in and click on the word “add” and there we have the tag Next, I’m going to add a featured image, so I’m going to click on “set featured image” and this time I’m going to upload an image, so I’m going to click on “upload files” and “select files” Then, I’m going to find the image right here and I’m going to highlight it and click on “choose,” and once the image has been added, I’m going to add a title and an alternative text, and once I have the title and alternative text, I’m going to click on “set featured image” Great, so once the image has been set, then on the left hand side under post options, once again I’m going to click on “none” because I want to open up the options for the header content, the head content, and once again I’m going to choose an image, so I’ll just click on “image

” I’ll leave the defaults as they are, and then this time in the post summary when I click on this, instead of the portrait image slider, I’m simply going to click on “portrait image,” a static portrait image All the rest, I want to also have pretty much all the defaults expect for this one, the author info, I do want to display that, so I’ll click on “yes” and post carousel, I also want to display the recent post, so I’ll click on “yes” for that and here I’ll just click on more post, add my carousel title, and then I’m going to scroll down and I don’t need to add any image sliders this time, so I’ll leave that as it is and I’ll come up to the top and click on “publish” to publish this new blog post Once the blog post has been published, I’m going to click on “view post” to view the post and here we can see my new blog post, once again with the image at the top on top of the blog itself, the author content and we can see slowly my different recent posts are starting to be displayed in this row here So let’s take a look at the blog archive page by clicking on blog and here we can see now this image shows up a static image right next to the blog title on the excerpt and the other one right here is this image carousel So there’s a couple of different image styles that I want to show you how to add here

The next one is the landscape carousel So we’re going to create one that looks something like this So going over to our completed side over here, the one that’s already completed, the next one I want to show you how to do is how to create an image slider post that looks like this and this is on the blog archive page So to do that, we’re going to go back to our WordPress website here at the top Once again, I’m going to hover over (+) new and click on “post

” Next, I’m going to give this new blog post a title, so I’ll just call it by what it is, the image slider post Then, once we have the title, we need to add some content here in the blog post box right here, so I’ll just add in some demo content I will once again on the right hand side add this to the blog category I’m not going to give any tags this time For the set featured image, I’m just going to click on “set featured image” and then I’ll click on “upload files” and “select files

” Then, I’ll choose my file by just highlighting it right here and clicking on “choose” Once the image has been uploaded, then I will give it a title as well as an alternative text and I’ll click on “set featured image” Next, this time for the head content, I’m going to click on “none” and a drop down box pops up and the one that I want this time is the image slider I’ll leave the defaults as they are, so I won’t touch that For the post summary, I also want to click on the “landscape image slider” and the other info I do want to display, so I’ll click on “yes,” and for post carousel I want to display a recent post, and then this time I’m going to scroll down here where it says “post slider images” and click on ”add images

” Then, I’ll click on “upload files” and “select files” and the two files that I want, I’m going to just highlight them both right here, two at a time and click on “choose,” and then each of these images, one at a time, I’m going to add a title and an alternative text Once the title and the alternative text has been added, I’m going to click on “add to gallery” to add these two images to my gallery Okay, once we have that all set up, I’m going to click on “publish” to publish this blog post Once the post has been published then I’ll click on view post to view the post and here we see we have our image slider post directly above the actual blog posts itself and we can just rotate through each of these two different images Also, when we go to the blog archive page by clicking on “blog” we see we have a landscape image slider right here, and when I click on this arrows, we can rotate through all of the different slider images that have been added to this particular carousel

Okay, so the last one I want to show you how to add is a video So to add a video, I’m going to once again go up to the top, click on “post (+) new” and then post This time I’ll just call this video, you can give your blog post title whatever title you like and then I’m going to add some content right here Once we have the content, then on the right hand side, I will click on “blog” to add this to the blog category You can give it some titles if you’d like and for set featured image, I will click on this link, set featured image

Then, I’ll click on “upload files” and “select files” to select a new file and this time I’ll just choose this file right here and click on “choose” Then, we can add a title and an alternative text, and once we’ve added the title and the alternative text, I’ll click on “set featured image” So once the featured image is set, the next step is once again, going over to head content This time, when I click on “none” I’m going to choose video, I’m going to leave these two boxes here, so it goes to the defaults, and then for the post summary here I’m going to click on “video” Then as we did in the previous examples for the author info, I’ll click on “yes” and post carousel also “yes, display recent post,” and here we need to in the video, post video box, this is where we can add the embed code for the YouTube video, the Vimeo video or some other videos, we need to add the embed code right here

So I’ll just go to my YouTube channel by going over to my YouTube and I’m going to be adding this video right here, so I’m just going to scroll down, click on “share” as we did previously and then click on embed, and then I’m going to grab this embed code by just highlighting it and clicking on “copy,” and then when I go back to my video post right here, I’m just going to paste in the embed code right here Now, I am going to remove the width and the height because last time, that’s what created those black bars above and below the video, so I’ll just delete that and let the theme take care of the dimensions of the actual video So I just have my embed code added here and then I’m going to scroll up to the top and click on “publish” to publish this blog post Once the post has been published, you can click on “view post” to view the post and now here we see the video above the blog post just as we wanted it Also, when we check out the blog archive page by clicking on “blog,” here we see on the blog archive page you can also view the video directly within the blog archive page

So that is how you add a video to your blog, a landscape slider, as well as a simple image and an image carousel post Okay, so the next thing we need to do when we’re looking at our blog for example, we have all of this content, here this is customized content in the side bars, so we can configure that and we can also add a footer with more customized content down below So let’s take care of the side bar content right here by going to the left hand side, going to the dashboard by clicking on “dashboard”Then, here I’m going to hover over appearance and click on “widgets” and the widgets are what will determine which content is placed in both the side bar as well as in the footer So by default when you install WordPress, it comes with all these other kind of widgets here on the side bar

I’m going to remove all these by simply dragging them over and releasing them to remove them all together Like so, the one I do want to keep is the search bar, so I’ll keep that I also want to add some of the special Virtue widgets, there’s about with image widget, a contact V-card, image grid, recent post, social links So how about adding some social icon, so this one I want this Virtue theme social link, I’ll just drag this widget to the primary side bar and release it, and here we can just give it a title, here you can add your different URLs for your different social networks so anyone can use the link to connect with you So once you’ve added the URLs of your different social links, then you can just come to the bottom here and click on “save

” Then, to close this, you can just click on this carrot right here to close this box So the next thing I want to add to my side bar right here is an image with the call to action that goes to my E-commerce shop page So for example, what we’re headed toward, this is the completed demo site and here in the side bar on the blog archive page, I want to add an image which when you click on it, it will go to the shop page So to add this to our website, going back to our widgets screen right here, the first things we need to do is we need to upload the image So going over to ‘media’ right here

I’m going to hover over media and click on add new Then I’m going to click on select files, then I’m going to choose the image which is right here and click on open Then once the image has uploaded we need to click on this link right here that says edit to grab the URL link of the image Here in the edit media screen we can see here’s the image and on the right hand side here’s all the details related to the image including the file URL I’m going to highlight all of that and copy it, then I’m going to go back to the widgets area by hovering over appearance and clicking on widgets

And then here in the primary sidebar we need to add the text widgets So I’m going to scroll down the bottom here, grab the text widget, and drag it up to the primary sidebar And then here in this box we need to add some HTML code I’m going to add the HTML code here, if you can’t see it no worries I will drop this code in the video so you can see it there as well Here I’m just going to add the HTML code for the image first which is a [img src=”] and then we have the URL for the image, this is the URL for the image

And then we close it off with a “] Now to also add the link to make sure that this image is not simply an image but that it’s activated and when you click on it, it goes to another page- we need to add additional HTML here So I’m just going to add that right here Here’s the opening tag for the link it’s an href tag, and again I’ll be sure to include the codes so you can read it easily You can just swap out my URL of course, my shop URL with your own URL for where you want the image to go when you click on it, so this is the link URL right there

At the end of the code we need to close out the link so I’m just going to also add a closing bracket right there which is a bracket, a slash, a forward slash, an A, and then the closing bracket This is what the code looks like, I’m just going to click on save to save this code Okay once we have this all set I’m just going to close that for the moment Next we need to configure all the different content in the footer sections right here We have four different footer columns so for starters I’m going to click on this carrot to open it

And first what I want to do there’s a bunch of Virtue widgets here as mentioned previously We have the Virtue about width image, the content e-cart and image grid, recent posts and social links The one that I want is the about with image, this allows for an image and a simple about text I’m going to grab that, drag it to footer number one, and here we see there’s image and text First I’m going to click on upload to upload a new image

Then I’ll click on upload files, and select files, then here is the file that I want this one right here I’m going to click on open and as we did previously I’m going to give this a title and an alternative text And then when I scroll down here we can see we can link it to something For this particular image I’m not going to link this to anything so I’ll click on none Alignment I’ll just say center, and I want the full size so I’ll leave it like that, and then click on insert into post

Next we need to add some text so I’m just going to paste in the text right there and click on save And here we have all the content that I’ll be adding in footer column one I’m going to close this by clicking on this bracket one more time, and now I’m going to open footer column two by clicking on the same dropdown little arrow right there For column number two I want to add the Virtue image grid, so I’m just going to drag this one to the column two section This will display the recent posts in an image grid kind of layout format

So there’s a number of settings here that we can configure including the title so I’ll just call this post gallery And I’ll leave all the defaults like that, that looks good And then I’ll just click on save to save the settings Next we have two more so I’m going to click on this one, footer number three, column number three Because this is a e-commerce website I want to add some of the featured products in the footer so I’m just going to scroll down

There’s a bunch of different WooCommerce widgets that you can include as well This one is the one that I want the WooCommerce featured product So I’m just going to grab that and drag it up to footer number three And you can choose how many products you want to have displayed, I’ll just leave it as two and click on save Finally footer column four I’m going to click on this dropdown box and once again I’m going to use the virtual social links

So I’m just going to grab that and drop that in column four, and here you can give it a title once again And you can fill out all the different URLs for your different social networks Once you have all the links set up, go ahead and click on save to save your settings for this particular widget Okay so we have all these different things set up, that looks great The other thing that I want to note is in the primary sidebar I wanted to mention that it is always a good idea to have a way for your readers to sign up for your email list, and put a box that looks something like this

To add a box like this I created another video that you can check out I’m not going to cover it in this particular video because there’s another video that will walk you through all the different steps to create this sign up form box I will drop the video link in this video so you can come to this video here and go through the process of setting up your email forms both on your sidebar, in your footer, and at the bottom of your blog post I encourage you to check out this video, it’s a pretty quick video and it will walk you all the way through the steps to get your email form set up so that you can add it to your sidebar right here Here we are back on the homepage of our website, and if you’ve been following on you’ve made it this far then most likely your website looks something like this

So we have one last thing to do before we finish this particular website and that is to add the WooCommerce e-commerce features When we do that the featured products will show up here in the footer and they’ll also show up on the shop page Let’s add the WooCommerce e-Commerce features right now To do that I’m going to go back to the dashboard and click on dashboard Here we are on the dashboard, to add a new product to our WordPress website we can go up to the top and click on plus new, and then click on product

Or on the left hand side we can click on products, and here on our products screen we can click on the link at the top that says add product, or finally on the left hand side we can hover over products and click on add product WordPress gives us a number of different ways to add a new product to your e-commerce website At the top here I’m just going to click on this link that says add product to add my new product The first thing we need to do on the add new product screen is give our product a name I’m going to call this Brazil tees since I’m going to be adding a Brazil t-shirt to my e-commerce catalogue

Next here in this white box I’m just going to add some content This is going to be the description about the product Next on the right hand side where it says product categories we want to add our product to a product category so I’m just going to click on this link that says add new product category And then I’m going to add the category just type it in, and then I’m going to click on this button one more time to add the new product category Once the product category has been added I’m going to scroll down and I’m going to give my new product some tags so I’ll just add Brazil and I’ll spell it two different ways

The Portuguese way and the English way, note that I’m separating these two different tags with a comma When you’ve added your tags, go ahead and click on add to add your new tags Next scrolling down we need to add a featured image for our product so I’m going to click on this link that says set featured image Then I’m going to click on upload files, and select files, here is the file that I want so I’m going to highlight the image and click on open Once the image has been uploaded then I’m going to give it a title and an alternative text

Once the title and alternative text have been added I’m going to click on seat featured image to set my image Once the image has been set then we can look over the product data section right over here We have a number of different product types we can choose from, when I click on this box right here where it says simple product they all pop up right here underneath product type We have a simple product, a group product, external affiliate product or variable product The first one that I want to create right now is a simple product

I’ll just keep it as simple product and we’ll need to add a price so I’m just going to give the price right here I’ll make it $40, of course note that we’re looking at pounds right now so I’ll show you in just a moment how to change this from pounds to another currency I’m not going to give this a sale or set a schedule for a sale right now so I’ll just leave that blank This is how you can set up a simple product The basic thing that you need for a simple product is simply the price

I’ll show you in a moment how to create a variable product For this particular product I’m just going to be selling one color, that’s it and one price So that’s why we call it a simple product If you’d like to give some attributes to this particular product you can do so by clicking on the attributes tab right here, then you can click on add, and then we would give the name of the attribute I might want to call this the color

And then for the value because this is a simple product I’m only offering one color for this product so I’ll just put teal Yes we can make this visible on the product page so I’ll click on that button right there And then I’ll click on save attributes This is optional if you’d like to include attributes for your simple product you can do so It’s not necessary, it’s really up to you

Once the color attribute has been added there’s one more attribute I want to add which is the size I want this to be a one size fits all because once again this is a simple product so it only comes in one size To just let everyone know this is a one size fits all I’m going to click on add to add my other attribute and I’ll just call this the name of size, and the value will be one size fits all Once we have our size set there I will make this visible on the product page so I’m going to click on this check box right there, and then I’m going to save this one as well by clicking on save attributes Once we’ve added this information in here then I’m going to scroll down and then I’m also going to add a short product description as well

I’ll just pop in the other content I added earlier and I’ll just reduce it by eliminating everything but the first sentence Once you have this all ready to go you can come up to the top and click on publish top publish your new simple product Once the product has been published we can check it out by clicking on view product, and here we see our new product added right here We have the thumbnail image which when I click on it, it will open up to a really cool light box display so I can see it really well And then here on the right hand side we have the product title, the price which I’ll change the currency in just a moment

A short product description, and an add to cart button right here We also see it’s categorized in the category t-shirts with these two tags, and when I scroll down I can see my larger product description right here I can click on the additional info and here we can see the different attributes here, both the color in teal and the size one size fits all And if we have any reviews those will show up right here in the reviews tab So this is how we add a simple product to a WordPress e-commerce website

The next example is let’s add another product but this time we’ll add a variable product with multiple colors and multiple sizes To go up to the top once again I’m going to click on plus new, and then click on product to add a new product Then here on the add new product screen once again I’m going to give the new product a title Then once you’ve added the product title I’m also going to add some description content in this light box right here Next on the right hand side I’m going to add this new product to a product category

This time I’ll also add it to the t-shirts category since this also is a t-shirt Then scrolling down I’ll just give it a tag right here volunteer, keep calm and both of these tags are separated by a comma And then I’ll click on the add button right there Then coming down once again I’m going to give this product a featured image by clicking on set featured image, and upload files, and select files, and I’m going to select the image that I want right here, and click on open As we did with the previous images, I’m also going to add a title and an alternative text

Once the title and alternative text have been added I’m going to click on set featured image to set the image Once the image has been set then on the left hand side where it says product data, this time instead of a simple product I’m going to add a variable product This product is going to have different sizes and different colors I’m going to click on variable product, then I’m going to click on attributes right here, I’m not going to touch any of these sections you can check them out if you’d like If you’d like to use this view management system you can do so

Also note that these different question marks when you hover over them you’ll get a tool tip and this will tell you exactly what this particular feature is Here we see when I hover over the question mark it says, “Eschew unit, a unique identifier for each product or service that can be purchased” If you’d like to add that you can give this a eschew ID number right here Also there’s some other options including inventory if you’d like to manage stock, you can check this box right here If you’d like to set the stock’s status or allow back orders, or sell this individually these are all kinds of settings that you can add

I’m not going to add this I’m going to keep it really simple in this example but I do want to point out all these different options You can just read through them and once again when you hover over the question mark you’ll get this tool tip which will explain what each of these things does Next we have shipping if you’d like to manage the weight, and dimensions, and the shipping classes you can do so If you’d like to link this product to other products to either up sell the product or cross sell the product you can do so right here And then finally here we see there’s the attributes section right here

So I’m going to click on attributes and the first attribute I want to create is size So I’m going to click on add to add a new attribute, for the name I’m going to call this size, for the values instead of one size fits all I’m going to be offering various sizes, that’s why it’s a variable product For example I’m going to be adding a small size, and also note that I’m using this pipe symbol It’s a vertical line and it’s located just above the right hand return button on your keyboard When you look at your keyboard you see there’s the return button on the right hand side

Just above that there’s a pipe symbol, it’s a vertical line I’m going to separate each of the values with this pipe symbols So we’re going to have small, medium, and large And then once I have my sizes and values set I’m going to click on these two boxes right here This one says visible on the product page because I want customers to be able to see these different options

Also I need to use these different attributes for my variations So you want to make sure that you click on both of these boxes right here and then click on save attributes to save the attributes Okay, once these attributes have been saves I’m going to create one more type of attribute and that’s the color Again I’m going to click on add to add a new attribute, and this time I’m going to call it color With the value I’m going to call it navy and I’m also going to be offering this particular t-shirt in teal

Here we have the two different colors, once again I’m going to click on these two boxes to number one make this particular attribute visible on the product page Also to use it for variations so you want to make sure you click on both of these boxes right here, and once again click on save attributes Once the attributes have been saved next we need to click on variations I’m going to click on variations right here, once we click on variations then the first thing we see here it says, default selections It’s really important that you set a default selection, otherwise these variations will not be visible on the actual product page

Step number one is we need to set the default location to any one of the various products Any one you want, it just has to say something I’ll click on small, that will be my default and also we need to add the color I’ll put it as navy So my default selection is a small navy so that’s the first thing we want to do Step number two here we need to click on add variation to add the variation

Here you just need to go one by one and you need to set up each of these different variations I’m going to click on small, and navy, and I’m going to give it a price of $40 Again we’ll change the currency in a moment, you need to set the price for every single version of this particular item So we’re going to do it for small, teal it will be $40 also I’m going to click on add variation once again

I’m going to do a medium in navy, and also I’ll do it as $40, and then add variation This time we’ll do the large in navy; see I’m just going one by one each size and each color So I’ll also do the price here of $40, if you don’t add all of these then the price will not be visible for one of the different variations Now I’m going to click last time add variation, this time we’re going to do the other color and all the sizes We’ll start back at small one more time and this time we’ll do the teal color

And I’ll add the price of 440 here, add variation This time I’ll say medium in teal, add $40, and finally add variation The last one I’ll say large in teal and here we have the product price of $40 Once all of those have been added then we can come down here to the short product description and I’m going to add the previous description but this time I’m going to just reduce it so once again it’s just one or two sentences long It’s a short product description, and when you’ve added in all these different things, all your attributes and all your variations, all your prices you can come up to the top

We can click on publish to publish this variable product Once a product has been published you can check it out by clicking on view product Here we see our product on the product page So we have the thumbnail image once again which when I click on it, it opens up into a really nice light box display so you can see it really clearly Then we have the product title, the short description, and here you can see now we have the different variations of these products that a customer can choose from

So they can choose this size by just clicking on this dropdown box, they can choose small, medium, or large Or they can choose the color, one of these two colors that we set up Then we have the add to cart button, the category, and the tags it’s been organized into We have the full description right here We can click on additional information to see all the different attributes and variations that this product is available in

And then when they click on reviews they can either submit a review or read other reviews Also note that we’re starting to see related products down below, because this particular product this Keep Calm and Volunteer t-shirt is categorized in the t-shirt category, it will also be displaying here all the related t-shirts will be showing up down below That is how you add a simple product and a variable product in WooCommerce Let’s take a look at some of the other options I’m not going to add them but I just want to point them out really quick When we go up to plus new and click on product, the other two product types that you can add when we scroll down here, once again I’m not going to add these right now in the essence of time but I do want to point them out

When you click on product data you can create a group product or an external affiliate product I’m often asked how do you add an external affiliate product Well if you click on this link right here you’ll note that here are all the different attributes that you can fill out related to external affiliate products You can add the most important thing right here is you would enter the external URL of the product You would enter that right in this field right here, and then you can change the button text title if you’d like right here, and you can set the price and any sale prices

If you want to add an external affiliate product this is the section you would do that in Also often asked how do I add a downloadable product, and you can do that by clicking on this button right here Note that when I hover over the check mark it says downloadable products give access to a file upon purchase Here is a virtual product, it says virtual products are intangible and are not shipped You can read more about this at Woo Themes in the WooCommerce documentation

But again I just want to point out there’s other different product types that you can choose from when you’re creating a e-commerce website using a WooCommerce plug in We have our two products right now I’m going to go to visit the site, and now when I click on shop to go to the shop page here we see our two products listed right here Of course the more products we add, they’ll all just start displaying on this page if you have lots of products added But in the essence of time I’m only going to be adding two products, a simple product and a variable product

Pretty much it would just continue repeating that process, rinse and repeat to keep adding more products You can do it just like this how we did this one and how we did this one to create all of your different products Also note we still have some missing featured products right here To feature these two products we’ve created in the footer, we want to go up to the top, click on dashboard, then we want to go to our product page right here I’m going to click on products, then you need to one by one individually you need to click on quick edit for the products

I’m going to click on quick edit, then we get this screen Right here there’s a box that says featured We need to click on this box to feature this product, and then click on the update button And I’m going to do the same thing with the Brazil tee I’m going to click on quick edit, and then scroll down, and I’m going to click on this featured box right here and click on update

And now when we go back to the home page by going up to the top and clicking on visit site, now when I scroll down to the footer, now we can see our two products in the footer, the two featured products The next thing I want to do, we see that the currency is in pounds Let’s change that right now to a different currency To change the currency we want to go up to the top, click on dashboard, next we want to hover over WooCommerce and go to WooCommerce settings So I’m going to click on settings right here, and then here you can see on the general tab, here we have the general options on the base location is the UK and the currency is in pounds

To change this I’m simply going to click on the country name right here, there’s all these different countries you can choose from I will choose California, USA Then for currency I will just scroll down, there’s all these different currencies you can choose from and I’ll just choose US dollars, and once that is all set I’ll come to the bottom and I’l click on save changes to save the changes Once the settings have been saved, note that at the top there’s all these additional settings that we can choose all separated by these different tabs Once the settings on the general tab have been saved, note that there’s a number of different settings as well on all these additional tabs right here at the top

I’m just going to go through them one by one, starting with the catalogue tab I’m going to click on catalogue and here we can see there’s a number of different catalogue options on how you can display products both on the shop page, as well as here we see for example the first item is the default product sorting Again when you hover over each one of these it will say exactly what it does This particular one controls the default sort order of the catalogue, here the next one shop page display Here you can control what is shown on the actual shop page

If you want to show the products or if you want to show sub-categories, or both One by one you can just look at all the different options here There’s a lot of different settings The ones that I want to point that I often get questions about on YouTube include, weight and dimensions This is where you can weight, for example when I hover over this controls what unit you will define your weights in

A number of people are asking how do I change the weight unit,, well this is where you would come under product data on the catalogue tab When I click on this here you can change it from kilograms, to grams, pounds, or ounces The other thing that I want to point out is related to pricing options, this is another question I often get on YouTube related to either if you do not want the decimals, or you do want the decimals, or you want more decimals- here you can choose the number of decimal points that will be displayed in the prices Here’s an example, if you remove the zeroes after the decimal point $100 cents will simply become $10

Also you can change the currency position by default it will be on the left, but if you want to put it on the right or put it on the left or right with space, you can choose those settings right here Finally scrolling down here are the image options These settings affect the actual dimensions of images in your catalogue The display on the front end will still be affected by the CSS styles If you need to change any of your dimensions for your images, this is where you will set the dimensions

Then as it notes, it says after changing these settings you may need to regenerate your thumbnails You can click no this link to learn more about how to regenerate your thumbnails Namely you’ll need to get a plug in called Regenerate ThumbnailsIf you change these dimensions, then you also want to add a plug in to your WordPress website called Regenerate Thumbnails So you can click on this link to learn about that

Okay great Now you’ve kind of done a quick overview of the catalogue tab right here I’m going to click on pages When you set up WooCommerce and you set up the pages, the pages will automatically be added to this particular tab right here If you do not see any words here, then you need to make sure that you set up your pages one more time because the WooCommerce e-Commerce site will only work if all the pages here are set up

This is your pages tab, next we have inventory if you’d like to manage stock you can set those settings on this tab Next we have taxes, so I’m going to click on tax This panel will give you all the different options you need for taxes Next we have shipping

Here on the shipping options tab, you can decided what kind of shipping method you will provide on your website Also you can determine whether or not you want to enable the shipping calculator on the cart page I do not want to include the shipping calculator so I’m going to uncheck this particular box Then I’m just going to come down here and click on save changes Also note that here we see the default shipping method down below, currently there’s a purple check mark next to free shipping

In this demo I want to provide free shipping so I’m just going to click on this to make this the default, set free shipping as the default And once again I’m going to click on save changes to save my changes Now there’s a number of other shipping methods you can choose from including flat rate shipping, free shipping, international delivery, local delivery, and local pick-up First of all I’m just going to click on flat rate if you’d like to enable a flat rate shipping you can click on this box right here, and then you can decide what the price will be

Note when I hover over this question marl it says enter a cost per order, leave blank to disable So I’m not going to set up a flat rate shipping, I’m going to have free shipping on this demo but if you do want to allow or enable, or set up a standard rate flat rate shipping you would click on this box, and then you can add the price of the shipping right here I’m going to leave that unchecked, you can also see that there’s additional costs that you can add related to shipping if you’d like I am once again offering free shipping so I’m not going to enable this I’ll just leave this unchecked, but I want to point out this is where you will add a flat rate shipping if you’d like to do so

Moving on to free shipping I’m going to click on this link right here Here we see that the enable free shipping check mark is checked Right now I have free shipping on my site which is exactly what I want Next, I’m going to click on international delivery, if you’d like to set up international delivery you can do so by simply clicking on this box and then you can go through all the different shipping related settings for international delivery

Again everything that you see with a question mark you can hover over and it will explain exactly what it does If you want local delivery or local pick up you can set that as well I’m not going to include that I only want free shipping When I click on shipping options right here we see that here the only thing the only thing checked right now in purple is free shipping Right now this website in the demo is set up for free shipping

Okay so the next thing we need to do is we need to set up our payment gateways I’m going to click on payment gateways Here we can see by default we have direct bank transfer, check payment and PayPal are all set up I actually want to disable everything except PayPal I’m just going to click on this checkbox here to make PayPal the default, and then I’ll click on save changes

Then I’m going to go one by one to all these different pages right here, and I’m going to disable the ones that need to be disabled, and set up the ones that need to be set up; So starting with the direct bank transfer, this BACS I’m going to disable that by un-checking this particular one, scrolling down and clicking on save changes Once bank transfer has been disabled, then ill move on to the check tab by clicking on check I also want to uncheck this and disable it so I’m going to uncheck this right here, and then click on save changes to save my changes Next we have cash on delivery, another one that I do not want but I’m going to click on it anyway cash on delivery this one is already disabled so that’s great

and then I’m going to check on Meijer check out if you’d like to set up or connect your e-commerce set up with Meijer you can read all about that here and you can set that up here I’m not going to be using this service, I’m going to go directly to PayPal by clicking on PayPal Here we see that PayPal is enable which is great We see that it says pay via PayPal, you can also pay with your credit card But if you don’t have a PayPal account I’m going to set up PayPal right here by clicking on enable

Then I’m going to add my PayPal email and the receiver email And then I’m going to scroll down, I’m going to uncheck this that says enable PayPal Sandbox to disable that And then I’m going to click on save changes to save the changes Once the payment method has been saved, then we need to click on emails Here you can set up the email sender options that will be used in the WooCommerce emails, starting with the from names

Here we see this is not really the best name right here so I’m going to override that by just putting in my domain name right there And then I will leave my from email address right here, that all looks good If you’d like to add an email template you can fill out these settings right here, and when you’re ready go ahead and click on save changes to save the changes Also note that right here where it says the email footer text I also don’t really want it o say Katrina’s WordPress so I’ll just override that, and I’ll also put my domain name in right there If you’d like to remove this powered by WordPress you can do so, I’ll just leave it for now and then I’m going to click on save changes to save my changes

Once the email settings have been saved, the next step is to check out the integration tab Ill click on that, and here you can add your Google Analytics ID if you’d like, and you can set up any kind of tracking code that you’d like by checking these boxes right here I just want to point this out so you can read more about it, and when you’ve set this up the way you’d like you can click on save changes The other thing I want to point out about WooCommerce is that you can set up some coupons on your WooCommerce e-Commerce website Here on the left hand side when I look at WooCommerce right here, there’s a coupons link so I’m going to click on coupons

And to add a new coupon you can click on this link here that says add coupon There’s lots of different settings that you can set up for your coupon You can read through all of them, whether you want to have a coupon on one product, or on a certain dollar amount, or currency amount that a customer is using You can read about all these different settings right here for coupons The most simple coupon that you can do is just add a coupon code so I’ll just put my coupon code right here

You can add as coupon description, this is optional Here you can choose your discount type, whether it’s a cart discount, a percentage discount, a product discount, or a product percentage discount I’ll just make it really simple and create a cart discount of $10, so that will be the coupon amount And then you can once again check out all these different items, whether you want to enable free shipping, individual use, if you want to apply this before the text If you want to exclude sale items, here are all the different settings you can read through them

I’m just going to create a simply across the cart $10 discount, and I’m going to click on publish to publish this coupon So we have updated our coupon and created a coupon, let’s go check out what this site looks like now I’m going to go up to the top and click on visit site Here we are on the home page of your new WordPress website using the responsive E-commerce website theme called Virtue Now let’s go through the process that a customer will take to order a product on your e-commerce website

I’m going to click on the shop page right here Here we see we have two items that we added to our website so far I’m going to click on this one, the Brazil tee, and here we see the product image, the title, the price, a short description, and the add to cart button I’m going to click on add to cart and when I do that we see that we’ll get a message here that says the Brazil tee was successfully added to your cart You can click on this button here to view the cart

I’m going to click on this button right here Here on the cart page we’ll see a small product image, the product title, the price, the quantity that’s being ordered, and the total Down below we’ll see the cart total, so here we see the subtotal is $40, the shipping is free shipping The order total is $40, so let’s take a look at one more time I want to continue looking through the site and adding some more items to our site right here, to our cart

I’m going to click on this button one more time, shop To add another item to the cart This time I’m going to add the Keep Calm and Volunteer tee I’m going to click on this particular item and let’s see, it looks like sorry no products not your selection Please choose a different combination

Okay so we should not be getting this message I think I know what’s going on with this I’m going to click on okay that’s not a good message If you get that message than as it notes here, we see that the size choose an option There should be a default size and color listed here so in the event that you get that message then we need to check out once again this product

Before we continue I’m going to go up here and do a little troubleshooting Once again not so happy that this happened during my video but in the event that it happens to you, I’m going to show you how you can fix it Going up to the top I’m going to click on edit product, then I’m going to scroll down here where it says product data I’m going to click on variations And here is the issue, so the default selection is a small navy, but note that we only have a small teal and a small teal is listed twice which we don’t want So somehow this didn’t actually get selected, the teal was selected

So we need to make sure this says navy You should have a different variation for every single one of your sizes and colors, or other attributes that you’ve added to your product data right here Now that I have small and navy set and I have the default here small and navy, I’m going to go up to the top and I’m going to click on update to update this product page Now I’m going to view the product page by clicking on view product, now we see when we go to the page we no longer get that popup up message and instead here where it says size it will say small which is the default size And it also says the color is navy which is the default color

That looks so much better Now we can choose by clicking on this particular field right here, we get all these other options we can now choose from A customer can only choose between the two colors we’ve added as well I’m going to choose a medium size navy and then I’ll click on this button here to add it to the cart Once this item has been successfully added to the cart we’ll get a message letting us know that it has been added to the cart, and we click on this button here that says view cart to view our cart

Here on the cart page now I have two items listed, the Brazil tee and the Keep Calm and Volunteer tee both with the thumbnails We see the price of each one of these is $40, I’m ordering one unit of each for a total of $40 We also see for this particular one, the Keep Calm and Volunteer tee we see that we’re ordering the medium in the color navy Now we scroll down we see the cart total is $80 with free shipping so the order total is $80 However I do have a coupon so I can add that right here to apply the coupon

I’m just going to add the coupon code right here and click on apply coupon Here we see the coupon code was applied successfully and now when I scroll down we see that the subtotal is $80, and the free shipping, and the $10 discount is listed right here So the order total is $70 Okay so now a customer could proceed to check out by clicking on this link here that says proceed to checkout Here on the checkout page the customer could fill in their billing address and their shipping address

As we see I’ve added that right here, then we’re going to scroll down they would review the details of the order noting that this is $70 And then down below here as it notes pay via PayPal, you can pay with your credit card if you do not have a PayPal account This is how we have it set up for this demo, then a customer would click on this button to place the order Once the customer clicks on place order, then they’ll see the order summary on the left hand side as it notes the item total is $70, the discount has been applied And then here on the right side it says choose a way to pay

You can either pay with your PayPal account by signing into PayPal here, or as it notes here it says don’t have a PayPal account? You can click no this, and as it notes you can pay with a debit card or a credit card by just filling in your information here Once a customer fills in all their credit card details, then they would come down here to the bottom and they would click on review and continue to make their payment Two more things before we wrap up Number one I want to show you the alternative homepage that you can create if you want to have a focus simply on your e-Commerce website

AS we see here this is the homepage that if you’ve been following along this is what your homepage will look like But I want to create a homepage where the shop page is the main homepage To do that I’m going to go up to the top, click on dashboard, then I’m going to scroll down to settings, and I’m going to click on reading Right now if you like the way the homepage looks like now you can keep it on your latest post However if you want to change the homepage and have the shop page be the homepage, then you can click on this button here as static image

The front page I’m going to click on that, I’m going to make it the shop page as the front page, and the post page is going to be the blog This is the alternative homepage, it’s optional if you want to have your shop page be the homepage So I’m just going to set it up like that and click on save changes Now when we look at the homepage by going up to the top and clicking on visit site, now we see this is what the homepage looks like

Again, this is an alternative homepage if you prefer to have the shop page and the e-Commerce features be featured on the homepage The other thing we would need to do is we would need to create another home menu item right here So I’ll just go up over here, click on menus, and then here on the menu structure I want to click on links and I’m going to give this the URL of the homepage with a link text of home, and click on add to menu Then I’m going to drag that up to the top, and then I’m going to click on save menu, and now when we look at the homepage by going to visit site, now we see we have our homepage menu item right here and the homepage is the shop page Once again this is optional; this is an alternative homepage for your website

I prefer actually having the other, the original, the default view So I’m going to back to the top and switch it back by clicking on dashboard, then going to settings, and reading, and then I’m just going to click on your latest post to make sure my latest posts are featured, and then I’ll click on save changes Now we see once the settings are saved when I go to visit the site, now we see that the original homepage is set up on the homepage right now which is great The other thing that I wanted to touch upon was in the blog section, when I click on blog and I go to my blog post by clicking on this one for example When I go to my blog post here we have an author section, an author bio

To add the author bio right here I’m going to go ip to the top, hover over my name, and click on edit my profile And then I’m going to scroll down and here we see that here is about yourself It says bio info, and here you can add your actual bio Once you add something in this box- your bio, then come to the bottom here and click on update profile Once the profile has been updated now when we go back to the blog post by clicking on visit site, and then blog, now when I check out once of my posts by clicking on this one for example, now when I scroll down you see here is the actual bio

So that is how you can add an author bio right here Finally last little tip for your WordPress website is making sure that your URL links are search engine friendly So this is really important that you change your permalinks To do that I’m going to go to dashboard, and then I’m going to go to settings You see there’s a link here that says permalinks, go ahead and click on permalinks

By default permalinks are the web URLs that are featured in the browser field as we can see right here This entire thing right here this is the permalink By default when you install WordPress it will say default, and it will most likely will have a page number which is not a very helpful or descriptive kind of form for your URL It’s much better to have words because search engines can read the words but these numbers mean nothing to search engines It’s always a good idea whenever you’re setting a WordPress website, one of the first things you should do is come to permalinks settings right here

It’s under settings permalinks, and you want to change it from default to pretty much anything that has words in it So day and name is good, month and name, or post name, or you can create a custom structure I usually prefer just the post name, I don’t have dates that way it keeps my content a little bit more fresh When you see old dates sometimes a lot of readers may think that it’s old but actually a lot of time the content is still relevant I prefer just taking the dates out altogether

Do whatever you like of course, it’s your preference, I just recommend and encourage you in general to just add anything that’s not the default right here I’m going to click on post to make sure that it says post name, and then I’m going to scroll down, and then I’m going to click on save changes Okay so now the permalinks structure has been updated Here we are back on the homepage of our WordPress website theme using the free responsive e-Commerce WordPress theme called Virtue So if you’ve been following along most likely your website looks something like this

Thank you so much everyone for joining and thanks to everyone on YouTube for the suggestion to create a video about the Virtue theme This is a beautiful e-Commerce WordPress website theme If you’ve enjoyed this video please feel free to share this video with your friends, like the video, comment on the video and favorite the video I’ll be coming out with more videos related to WordPress and how to grow your business on the web Please subscribe to my YouTube channel for updates on upcoming videos

To continue the conversations about the Virtue theme as well as about WordPress in general, and other topics related to building a business on the web, please join me on my website at 77webstudiocom Finally I want to give a big shout out of thanks to Kadence Themes, the developer of this beautiful free responsive e-Commerce theme Thanks for joining everyone; I’ll see you in the next video

Free Email Updates
We respect your privacy.

Recommended

affiliate marketing 2018

affiliate marketing