How To Create A WordPress Website With ECOMMERCE (Professional)

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 Hostgator.com 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 hostgator.com.
Here we are on hostgator.com. 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 extensions. .com 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 $9.95 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 3.6 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 3.6.1. 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 2.0. 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 video.png 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 $10.0 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 Thumbnails.If 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 77webstudio.com. 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.

17 comments

  1. HI Katrina, i learn how to create website from your video all this while. U r awesome!
    I have a question on this virtue theme, cann you tell me how to change all the box background color? Really appreciate it!

  2. I would like to make a portfolio Carousel on home page with 3 items that link to various pages? How can I do that?

  3. When I first signed up with Hostgator, I didn't choose domain privacy protection. Now I would like to. Can I do that?

  4. I noticed you didn't create a child theme from the parent theme, I understand that you wanted to create a video for beginners and those that struggle with "Techy" stuff, but if you did create a child theme would you first upload the woocommerce plugin to the parent theme and bring all the templates into the child or upload woocommerce directly into the child???
    Your feed back would be super….great video and very informative thank you

  5. Did I miss it?

    In setting up the portfolio pages, it is important to give the images an attribute number. Keeping the attribute number at 0 for all the portfolio pages causes the carousel to display no images.

  6. Katrinah, thank you for your video it has helped me set up my website however I do have a question. Is there a way to add an estimated time of delivery (ETA) on product that is out of stock? If so how do you add it? Thank you in advance for your help.

  7. Hello, Katrinah, you made a greate job on this video, thank you so much!! I have a question: what's the difference between the  portfolio page and the Shop page, they look the same to me. Why do we have to create both? Also, the portfolio items are being redirected to an "item not found" page, do you have any idea on how to fix it?

  8. Great video, thank you! One question, I would like to organise the post excerpts in my categories in a grid. Could you tell me how to do that?

  9. Hi Katrinah thank you for the excellent video for the virtue theme, I found it really good to follow apart from adding portfolio types, It did not work for me all I get is Sorry, but the page you were trying to view does not exist. It looks like this was the result of either:
    a mistyped address, an out-of-date link you start adding portfolio items around 56mins into your video but only add a portfolio page afterwards around 109minutes, i don't understand why we have a portfolio attribute built into the theme but yet we still need to add a portfolio page? maybe you could explain also above all have you any idea why I cannot view the page, I followed your tutorial and everything was fine until i got to this part. Kind Regards

  10. Hi Katrinah….Thanx so much for making this video it is very informative. Forgive me but…GOD DAMN…..can't they just produce some "DOCUMENTATION!!!!!"

  11. QUESTION — I am watching your video and I first notice this was created or published 3+ years ago and I know a lot has changed in the computer world in that time. I haven't watched this through yet but I will. I doubt you still respond, if you ever did, to this video but I have a question I hope you or another person here can answer. I cant afford to pay anyone to create my great idea so I am teaching myself how to code and as simple as that may sound to you or others who know how to code it has been a daunting challenge for me. I am trying to create a Professional DATABASED – FOR PROFIT – SERVICE WEB SITE ( cross platform ). I am selling a service on line – not a product. People will be able to enter data from the web site onto the data base in 3 basic forms. ( 2 of the forms will have a fee and one form will be FREE ) People will be able to Search the database. ( Searching is free ) When a person enters data for upload on the client side then they have to submit a payment before the data will upload. — How can I set that system up? Thank you all for your time. W. James Rapp

Leave a Reply

Your email address will not be published. Required fields are marked *