How To Make A WordPress Website (for Photography & Portfolios)
Articles Blog

How To Make A WordPress Website (for Photography & Portfolios)

August 15, 2019


Hi everyone. I’m Katrina and in this video let’s go
over how to create a WordPress website from scratch. So, we’re going to start at the very beginning
where I’ll show you how to set up a domain name as well as web hosting. And then I’ll guide you step-by-step to
create a WordPress website that looks something like this. So you’ll notice that this is a minimalist
design and it’s predominantly an image focused design, so this design would be great for
anyone who has images as the prime focus of your business. So whether you’re a photographer, an illustrator,
or a designer, or perhaps even a photoblogger, this website could be a good fit for your
site, just because the design is minimalist and as we see here once again, it’s focused
on images. So you’ll have a main image here on the
homepage, as well as your logo and tagline. And I’ll show you how to set up a bio here
on the left-hand side with a call to action for anyone visiting to contact you by clicking
on this link here on your homepage. You’ll have your different menu navigation
items featured at the top. And then once again, as you scroll down on
the homepage you’ll notice all of these different thumbnail images represent the blog
posts featured images of your most recent blog posts. At the bottom of the homepage I’ll show
you how to add different social network icons so that anyone can simply click on them and
connect with you on the social web either on Facebook, Twitter, Pinterest, or some other
kind of social network. So just going over the different pages of
this website, we see here we have the “about” page, so I’m going to click on that. And we see here we have an image, along with
some text, and once again a call-to-action to contact you by clicking on this link. So I’ll show you how to set the “about”
page up so it looks something like this. Also I’ll show you in this video how to
create some separate pages. So, for example, if you have some services
you may want to create a “services” page, as well as some sub-pages. So in this case I’m creating a photography
sub-service page, as well as a “videos” service page. So when I click on the video page, for example,
you’ll notice that a video will be featured on this page. Now this website is a responsive website,
so it will look really good on a tablet, an iphone, or some other kind of smartphone,
as well as on your desktop computer. So it’s mobile-friendly and will look good
on any kind of mobile device, as well as on your desktop. When we look at the “Blog” page, I’ll
show you how to create a category blog page where all your different blog thumbnail images
will show up here. And each of these images once again represent
each of the different blog posts that you may be adding to your site. So, for example, when we click on this blog
post image here, I’m going to click on that, we see that on this blog post we have a featured
blog image, as well as some information about the blog, including the title, the date, the
author, and the category. And then when we scroll down we see that we
have all of these different thumbnails that are part of a gallery. So I’ll show you how to create a really
nice gallery of images, which when you click on each one of them, it opens up to a really
nice lightbox display, which makes it really nice to see all the different images in the
lightbox on your website. So I’ll show you how to create that in this
video as well. Now at the bottom of this blog post we notice
that here are some sharing features. So I’ll show you in this video how to add
some different sharing features so that anyone can share your content across the social web. So you can share it via Facebook, Google Plus,
Pinterest, Twitter, or some other social network. And then I’ll also show you in this video
how to create a really nice email opt-in form so you can start collecting email leads from
anyone who signs up for updates to your site. So I’ll show you how to create this email
opt-in box here. Finally, you’ll have a comment box so someone
can comment on your blog post, right here on the blog post. And then once again, we have our social network
icons at the bottom that will connect to your social presence on either Twitter, YouTube,
Facebook, or any other kind of social network that you have that you want to make sure is
added to your website. Lastly, when we click on the “Contact”
page, I’ll show you in this video how to create a really nice, simple contact form
so that anyone can contact you directly via your website and via this contact form. So this is where we’re headed in this video. I’m going to walk you through the steps. The good news is that you don’t have to
have any kind of coding background or programming experience. I’m going to show you step-by-step how to
set up a website that looks something like this. So, let’s get started. So before we get started, how much is this
website going to cost? Well we need two things. Number one, we need a domain name. And number two, we need web hosting. In this video I’ll be using Hostgator.com. And at Hostgator you can get both the web
hosting as well as the domain name. I’ll also be using the coupon code “wpcoupon25”
for a reduced rate on the web hosting at Hostgator. So feel free to use any web host that you
like. In this video I will be using Hostgator.com. The next thing we need is a theme and in this
video I’ll be using a free theme and I’ll show you where to find that and how to set
that up. And finally, we need about two and a half
hours of time. So the total to get started building the website
we’ll be building in this video is less than twenty five dollars. And once again, we’ll be using the coupon
code, “wcoupon 25” at Hostgator. So what are the steps to build this website? Well there’s three main steps: the first
step is we want to get the domain and the web hosting. The second step is we want to install WordPress. And finally the third step we want to build
out the website. So, let’s head on over to Hostgator and
take care of step #1 which is getting the domain and setting up the web hosting. So here we are on Hostgator.com. To view the hosting plans go ahead and click
on the button iin the middle that says “View Web Hosting Plans”. And here we see there are three different
plans to choose from . We have the Hatchling Plan, the Baby Plan, and the Business Plan. If you are a small business owner, or you
are just getting your website up and running for the very first time, most likely the Hatchling
Plan or the Baby Plan would be a good fit for you. The difference between these two is that the
Hatchling Plan gives you a way to host one website domain, whereas the Baby Plan gives
you a way to host as many domain names as you would like. So there’s definitely more of a value in
the Baby Plan since you can host as many websites as you would like under one account. But if you are just getting started as mentioned,
and you do only have one domain at the moment, then you can give ahead and click on the Hatchling
Plan if you’d like to sign up for that. So I’m going to click on the “Baby Plan”
because I want to order that one. And the next step we see is that we need to
choose a domain. If you already have a domain then you can
enter that in this field and go ahead and click on “Continue to Step 2”. And, if you need to get a domain name for
your website then you can enter the domain name you would like here and click on “Continue
to Step #2”. Now just note down below here it says, “enter
a coupon code”, and by default you’ll automatically get a coupon from Hostgator. But if you want to add even more of a reduced
rate on top of that, you can use this coupon which will give you an extra amount off of
your order. So I’m going to put “wpcoupon25”, that’s
a special coupon you add to get more off the total when you go to check out of your order. So I’m going to leave it at wpcoupon25 to
get a little more off of my order, and I’m just going to put in a random domain name
just to show you for the moment for the demo purpose what the next page looks like. So I’m going to click on continue to step
two which brings us to step two, the billing information page. Now on this page we see the first thing on
this page is the package type. I had signed up for the Baby plan so we see
that right here. And then we see the current billing cycle
that I am signing up for. Now I do not want to sign up for 36 months
of web hosting all at once. I want to keep my expenses much lower than
that. And I prefer to pay month-by-month. So I’m going to just click on this here
and choose a billing cycle of one month at a time that way I’ll be paying one month
as I go for my web hosting. The next thing you want to do is choose a
username and a security pin. Then you can fill in your different billing
information right here. Then when we come down here we’ll see there
are the hosting add-ons. By default, Hostgator has you signed up for
the domain privacy as well as the SiteLock. So you can choose whether you want to include
these add-ons or not. I’m going to uncheck the SiteLock because
I have some other ways that I intend on protecting my site when I start building it so I don’t
want to sign up for the SiteLock. And privacy protection, this is really optional
as well. So it’s optional if you want to use iit. I do recommend signing up for privacy however,
and this is why. When you create a web hosting account on any
kind of web hosting company, by default if you do not have privacy your account details
including your address, your email address, and your phone number may show up in the web
host database for anyone on the internet to be able to access. So I prefer keeping my address, my phone number,
and my email address private. So whenever I buy a new domain name I always
sign up for privacy protection. If you don’t want privacy protection though,
you can save some money by un-checking this. I’m going to leave it on the moment though. Then you could just come down here and here
you could see are the details of your order. We note that with this coupon, wpcoupon25,
we’re getting almost $10 off so essentially the first month of web posting is free with
this coupon. And we could see that here is our domain name,
and our hosting at $9.95. So in total, we’re looking at under $25
to get started. If you want to save some more money as mentioned,
you can uncheck the privacy protection and you’ll note that now the total is under
$15. But once again, I like getting privacy, so
I’m going to leave that on. And the last thing that you want to do, is
that you want to make sure is that you click on this little box here that says, “I have
read and agreed to the terms and conditions of use.” So, once you have your hosting order all ready
to go and when this looks good to you. You can go ahead and click on “create account”
to create your new web hosting account. So once you click on create account, you get
this page, which will thank you for your order and tell you to go check your email for information
related to logging in to your web hosting account. So, I’m going to check out my email. And here we see on my email account, here’s
the email from Hostgator with my account info. So I’m going to click this email to open
this and 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. So 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
give you. And then right below that, you’ll see that
there’s a link for your control panel with your user name and the temporary password. So, I’m going to copy this password here,
the temporary password. And to log into your control panel, you’ll
use this link. So, this is a really good email to keep in
a safe place for future reference because you’ll be needing this information, as well
as the link to control panel, to log into your Hostgator web hosting account. So, I’m going to click on this link here,
and then here is my user name. You want to type in your User Name here that
was found in the email and you want to add your password right here as well. Once you’ve had that set up, you want to
click on log in to log into the control panel of your web hosting account. So, here we are on the Hostgator control panel. The next step that we want to do is step number
two, is we want to install WordPress and thankfully with Hostgator, there’s a really easy way
to install WordPress using their simple wizard script. So, I’m going to scroll down to where that
is located. You want to scroll down to where it says “Software
and Services” and you want to find this icon that says “Quick Install”. So, this is what we’re going to use to install
word press really easily in Hostgator. We’re going to use this Quick Install link,
so I’m going to click on that. And once I click on that, you’ll note that
there’s all these kinds of software listed here on the left hand side bar. So, 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 and you’ll note that there’s a button here that says continue. Also note that we are installing version 3.5.1
of WordPress, which is the most current version available at the time of this recording. So, we are installing WordPress 3.5.1 and
then I’m going to click on continue to continue the process. And here you want to choose the domain name
that you want to install WordPress on. I’m going to install it on this domain name
here. The next thing that you want to do is you
want to create an Admin email, a Blog Title, an Admin User Name and you can also if you
like add a First Name and a Last Name. I’m just going to add an Admin email here,
so put in my email. Also you want to give it a title. So I’ll just call it the name of the domain. Now, the Admin User, this is an important
one to keep in mind, the default for WordPress websites is the “admin”, the Admin User
default is the “admin” and that’s not really the safest User Name to use so you
to create a User Name that is anything other than admin. So, I’ll just use my name for the moment
and you can add first name, last name if you like. I’m not going to do that and I’m just
going to click on here, and click on Install Now. Ok, “Congratulations. Your installation is ready.” So, you can access the installation of your
new website by clicking on this link here. And also note that here is the Admin Area
log in URL that you will use in the future to access the log in panel, to access your
website in the future. You want to make sure to take a note of this
link here. It’s usually your domain name followed by
wp-admin. So that’s an important link to remember
as well. So that going forward, you can easily log
into your WordPress website. Also make a note of your Username and Password. This is also what you will need to log into
your website when you click on this link. So, 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 log on
into my new WordPress website. So here we are in the log on screen of our
WordPress website. To log in, 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 use when you were creating your wordPress website. So, for the moment, here I have my username
and password. I’m going to go on ahead and click on the
log in button to log into the WordPress website. So here we are on the WordPress Dashboard,
this is the first thing you’ll see when you log into your WordPress website. And when you first install WordPress, you’ll
also see this message that says, “Welcome to WordPress”. Within this message box, there is a number
of links and each of these links represents some of the first things that most people
do when they install their WordPress website. For the moment though, I’m going to go ahead
and dismiss this message, by clicking on Dismiss in the top hand corner here, so that we can
just see the Dashboard without that message. So here we are on the Dashboard, let’s take
a look what the website looks like, right out of the box when we first install WordPress. So, to see the site, I’m going to go to
the top left hand side and click on this visit site right under the name of the website. Right here where it says “visit site”,
I’m going to click on that and here we see this is what the website looks like now, without
doing anything, so it’s pretty bare bones. This is the 2012 theme that comes with your
WordPress installation and we’ll be making quite a bit of changes so that it will end
up looking like this at the very end. So this is what we’re headed toward, but
for the moment, our website looks like this. One thing that I like to do when I’m getting
started building a website in WordPress is I always like to put a coming soon page, a
splash page on the front side of the website so that I can work behind the scenes and build
the site and everyone else who comes to the website can see a really nice landing page,
the coming soon maintenance page. The page that I want to create right now is
going to look something like this. We see here that we have a maintenance mode,
a coming soon page with the name of the website, “Hello we’ll be online soon”. There’s a progress bar and right here will
be the email address so that anyone can sign up for your email lists while you’re building
your site. So while your site is being built, everyone
who comes to your website, this is what they will see. Let me show you, we’re going to jump a few
steps ahead right now so that we can get this coming soon page on and then we’ll go behind
the scenes and we’ll start actually building the site. First let’s add this coming soon page. To do that we want to go back one step, so
I’m going to click on the back button. You can also hover in the top left hand corner
of the website and click on Dashboard to go back to the Dashboard on WordPress. Here we are on the Dashboard, to install the
coming soon page, we want to go over to the left hand side and click on the plugin links,
right here. So I’m clicking on plugins and right beneath
that we’ll see another link that says, Add New. I’m going to click on the Add New link right
here under Plugins and just as a side note, I’m going over into more details plugins
down the road in this video. But for the moment, we just want to get this
coming soon page up and running on the site. So the plugin that we’re looking for is
called ThemeFuse Maintenance Mode, so you want to add that into the search box here,
ThemeFuse Maintenance and you can click on this link here that says, Search Plugins. Now, there’s a lot of coming soon pages,
plugins and maintenance mode plugins that you can choose from, this is just that one
that I really like and that I’m going to be installing in this video. But if you come across any other ones, of
course feel free to install them instead. Here we see here is the Maintenance Mode plugin. Again when you click on details you can see
more details about this plugin. First we see there’s a warning note, “This
plugin has not been tested with your current version of WordPress.” I just tested it so I know that it works. But it’s always a good idea when you’re
adding plugins that you check this info to see what kind of warnings it may have. You could also see here on the right hand
side the last update was about 200 plus days ago. It requires WordPress version 3.0 or higher
and it’s compatible up to 3.3.2. And we also see that it has been downloaded
about 90,000 times and it has an average rating based on 48 ratings of four out of five stars. So, I really like this plugin, I’ve already
tested it with this version of WordPress, WordPress 3.5.1. So, I’m going to install it even though
this warning message here. To do that, I’m just going to click on this
button here, that says, Install Now to install this plugin. Ok, “successfully installed the plugin”,
great! So, the next thing is we want to do to activate
the plugin is click on this link that says, Activate Plugin. And here we see in the plugins page, the plugin
that we just activated, ThemeFuse Maintenance Mode, we see that listed here at the bottom. The other two plugins that come with your
WordPress installation and we can see here that they’re not active yet, but we will
talk about those down the road. For the moment, let’s configure the settings
for the coming soon maintenance mode plugin that we just added to the site. To do that, you want to click on the settings
link right here. So, I’m going to click on settings, and
here on the plugins options screen, we see here that there’s a number of fields that
we can fill out to configure the coming soon page. So at the top, we want to start with uploading
a logo, so I’m going to do that by clicking on this button here that says “upload image”
to upload my logo image. I’m going to be uploading the image from
my computer so that I want to make sure that this tab is highlighted from the computer
and then I’m going to click on this button here that says, Select Files. Here’s my logo image, so I’m just going
to highlight that and then open it or click ok to upload the logo image to my website. It’s always a good idea to fill out the
title in the alternate text. So, I’m just going to add my website name
right here, and then at the bottom I’m going to click on this button that says, Insert
into Post to insert the logo into the first field right here at the top. The second thing that we want to do is we
want to upload a background image so we want to click on this button once again and to
upload my image. And I’m going to be uploading once again
from the computer, so click on select files to select the files and here’s the coming
soon background image. So I’m just going to highlight that and
then click on open to open up this image. So, once the image has been uploaded, you’ll
notice once again right down below here, I’m going to once again give this a title, just
the name of my site at the moment as well as alternative text. So once again at the bottom I’m going to
click on this button that says, insert into post. So once the logo and the background images
has been uploaded to the pop plugin screen, the next thing is we want to set a date. The date is the completion date that we expect
the website to be ready by, so I’m just going to click on this field right here and
I’m going to say by Friday. So, that’s plenty of time because by the
time this video is done the website will be completed but just for the moment I’m going
to click in two days from now by clicking on Friday the 5th. And then once I click on that, I’m going
to click on done and then the date will be displayed here on the field. And then the next to fill out is the Text,
as you notice here we want to input the text that will be visible on the loader bar. The loader bar is this section right here,
where we say hello, we’ll be online soon. So, that is the message that I want to add
right here in the text field, I’ll just add that right there. Next, we have completed, this is the value
in percentage, how much the website has been completed so far, by default it notes that
it is 30% completed and we know that we’re not yet at 30% but I’ll leave that at 30
for the moment. Next is that you could just scroll down and
if you would like to add any additional comment or message, you could do so by typing here
in the content box. I’m going to leave this blank. Finally, at the bottom you want to add your
Twitter user names, so I’ll just add my Twitter username there. And here Word says, Save Changes and you want
to click on this button to save your changes. Okay, so let’s go open up another browser
and see what the front side of the website looks like now that we’ve activated and
configured this coming soon plugin. So, I’m going to go to Firefox and open
up the website. And I’m not logged in to Firefox so this
is what everyone is going to see while we are behind the scenes building the website. Also note here when you click on this envelope
you’ll have a box so that anyone who comes to this page while you’re building it in
the background can sign up for your email list by just putting in their email address
and clicking submit. So this is a really nice coming soon page
and it’s a good way to start collecting email addresses even when you’re website
is not yet ready to be online. So if you’ve made it this far you should
have a really nice coming soon landing page for everyone to see when they come to your
website. So let’s continue going behind the scenes
and building out the website. So here we are on the plugins options screen. To get back to the dashboard we want to go
to the left hand side where it says Dashboard and click on this link. So I’m going to click on Dashboard right
here and here we are back at the dashboard. Now if you remember we’re currently using
the twenty twelve theme that comes with the wordpress installation and it looks like this. By going to the top left hand side and clicking
on the website name and clicking on visit site we can see what the current theme looks
like. It’s very bare bones and this is not the
theme that we’re going to be using. What we’re going to be using is the theme
that looks more like this. So to find this theme we want to go to the
dashboard. I’m clicking on dashboard in the top left
hand side. And on the left hand side you’ll see there’s
a link that says appearance. When you hover over appearance. You’ll also see another dropdown list here
with themes at the top. So first I’m going to click on appearance
to open up all these other options here and then I’m going to click on themes. Note here is our current theme it says twenty
twelve. Again, this is the theme that comes with your
WordPress installation. And the other theme that is installed but
not activated when you install WordPress is the Twenty Eleven theme. So right now we have an available theme of
the Twenty Eleven theme and the active theme is the Twenty Twelve theme. So what we want to do is we actually want
to install a new theme. So here at the top there are two tabs. One says manage themes and the other says
install themes. So I’m going to click on install themes
to install a new theme. And then I’m going to search for a keyword
theme. The name of theme we’re looking for, the
name of this theme is Hatch. So I’m going to type that in right here. Now note that if you want to check out any
of the other themes that are available for free in the WordPress theme library, you can
do a search by clicking on any of these different filters to find the theme you’re looking
for. And it’s kind of fun to just click around
and see what themes you can find. So right here at the top it says Search, so
we’re going to search for the Hatch theme. But before we do that I just want to point
out some of these links right here. You have the featured link so when I click
on that you can see all the other themes that WordPress has featured at the moment and you
can click on the preview link to preview what that link looks like. And then I’m going to click on close. So you can kind of go down the list and see
if any of these themes you like you can check them out. If you want to install and of the themes just
go ahead and click on the install now link right here to install the theme. Also at the top you can see the newest themes
that have been added to the wordpress theme library. And then you can see all the recently updated
themes that have been added to the theme library as well. So we’re going to be using the Hatch theme
so I’m just going to click on this link again Search, and I’m going to search for
the theme called Hatch. Then I’m going to click on this button that
says search. So here’s the theme we want, this is the
theme we’ll be building in this video. So we can preview it, we can also see the
details. Or we can install now. I’m going to go ahead and click on install
now to install the Hatch theme. Okay successfully installed the theme Hatch. We can live preview it, activate it, or we
can return to the theme installer. I’m going to click on Activate to activate
this theme. So now we see the Hatch theme is the current
theme of our WordPress website. Just below the description of the Hatch theme
there are a number of different links that will enable us to configure and customize
this website. The first iink is a customize link so I’m
going to click on customize. And here we’ll see on the right hand side
a preview of the frontend of the website. Now it’s pretty blank right now because
we just installed and activated it but as we go along we’ll be able to see some content
here as we build the site. So the first thing on the left hand side I’m
going to click on Site Title and Tagline. And here you can see that the default tagline
is “Just another WordPress website”. So the first thing we want to do is give our
site a tagline. So I’m just going to call this Snapshots
of Los Angeles like that. And I’ll leave the site title as the name
of the domain. So go ahead and add a site title and tagline
in this box here. Then you want to collapse it by clicking on
this carrot here to collapse this section. And the next one are the colors so once again
you just want to click on colors. You can click on this link here select color
and a color palette will pop up and there’s all kinds of colors. And when you click on them you’ll see that
in the preview window it will show you what it’s going to look like if you were going
to save this. So you can choose pretty much anything that
you’d like. I like to keep it pretty simple and clean
so I’m just going to keep it at white for a white background. Once you’ve chosen the color for your background
you can just click on colors once again to collapse the colors box. Next we have a background image. If you’d like to add a background image
you can do so by clicking on this and then you can click on the No Image and you can
upload a new image or you can select a file. I’m going to keep it white once again. I like this really clean background so I’m
not going to add a background image. Also keep in mind there will be images in
these sections here as well. So you have to consider that if you want a
background image as well as images on the front side here. So it’s up to you. If you’d like to do that go ahead and select
a file and once it’s selected or uploaded you then once again you can click on this
to shut this section right here to close it. Next we have the static front page section
so I’m going to click on this right here. Now in order for this to display the way we
want it to with all the different images on the homepage, we want to make sure the front
page displays our latest posts. So the first button that’s clicked here
“Your latest posts” that’s how we want this to be configured. Finally you have your footer configurations
so you can click on footer. And then you’ll note as it says right here
in the preview you have copyright with the yeara and the name of your website. And then it says powered by WordPress and
Hatch. So if you want to keep this Powered by WordPress
and Hatch you can go ahead and do so. Otherwise if you want to customize this in
any way you can delete or add whatever you want here in the footer. Now notice that when I remove that it also
removes from the bottom the powered by wordpress and hatch link at the bottom. I’m going to leave it there but go ahead
and feel free to adjust or change any of the content here in the footer. So once you have all of the settings the way
you want go ahead and click on footer once again to collapse that box. And then at the top you want to click on save
and publish to save the changes you’ve made so far. So I’m going to click on save and publish. And once that says save I’m going to click
on close to close this preview window. So back on the manage themes screen we see
there are a bunch of additional options we can use to configure and customize this theme. We see here the options include the widgets,
the menus, the header, the background, and the theme settings. So I’ll go over the widgets and menus in
just a few moments, let’s take a look at the header. When I click on header here, I’m going to
click on header. We see this brings us to the custom header
image page, where we can set the header on the main homepage. So what is that? Well looking at our demo site over here. This is the site that I’ve already built
and what we’re headed toward. The header image is this main image right
here. So on our site we want to add the header image
right here. So going back to the site on the custom header
screen, we want to choose a header image. So as it notes here select image, you can
select an image to be shown at the top of your site by uploading it from your computer
or choosing it from your media library. After selecting an image you will be able
to crop it. And then it notes, images of exactly 640 pixels
wide by 360 pixels high will be used as-is. So it’s usually best to upload an image
that is exactly in this dimension because in my experience sometimes this cropping tool
doesn’t work that well. So anyway, I have an image that is 640 pixels
wide and 360 pixels high so I’m going to upload that directly from my computer. To do that I want to first choose the file
by clicking on this button here that says choose file. And then I want to choose the header image. So I’m going to click on images here to
find my image. And here is the header image that I want so
I’m just going to select that and then click on open to choose the file. The next step is I want to upload it by clicking
on this button that says upload. Okay so there is my header image. So then I just want to scroll down. You can see here that you can remove the image
if you’d like or you can reset the image to the original default image which was pretty
much just a blank square, a blank rectangle. So I’m just going to keep this image though
so I’m going to leave it as-is, and then I’m going to come down here and click save
changes to save the changes. Okay, so at the top it says the header has
been updated, visit your site to see how it looks. So I’m going to click on this button here,
this link. It says visit your site to see how the site
looks so far. And we can see here we have the title of the
site and the tagline, and here is the header image. We also see there’s a lot of blank space
here and we’ll be building this part out next. Then at the bottom we see here is the footer
that we set on our other settings previously. So here’s what the header image looks like. To go back I’m just going to go back to
the dashboard. And then on the left hand side once again
I’m going to click on appearance and then click on themes to arrive at this section
once again where we can see all our different options. So we’ve already gone over the customize
options and the header, we’ve set the header. The background once again when I click on
this, this is the background image that you can set if you’d like. I’m going to keep it the white background
so I’m not going to add a background image but if you would like to add a background
image this is another place where you can add a background image. So in WordPress there are often a number of
different ways to get to different to get to the same section of the customization settings. So this is the second area where you can customize
the background image of your website. So I’m going to go back to themes by clicking
on themes right here underneath appearance. And then we’ll see on the right hand side
the last option here is theme settings. So I’m going to click on theme settings. And here we’ll see that these are the actual
theme settings that are specific to the theme called Hatch, the theme we’re using. So if you’d like you can add a favicon. A favicon is the image on the left hand of
the URL browser field window here, it’s the little image that will show up. I’m not going to add a favicon. But if you’d like to add a favicon image
the recommended maximum size is 32 pixels by 32 pixels so you can just upload that here
if you’d like. And I’m not going to add a logo either but
of course you can do so here if you’d like. You would just click on upload, then you would
find, select your file, then you would open it and then you would click on the upload
button. But I’m just going to leave it with the title
of my website, I’m not going to upload a logo. Okay, the next one is the author, whose biography
to display on the homepage. I’m just going to leave it right here with
my name. If you have multiple authors, then you might
want to select someone right here. I’m just going to leave it like that. Next you can choose the font family, which
font you want to display. I’ll keep it Arial, but there are a number
of font options here if you want to choose one of those instead. Next we have the font size. The base font size in pixels. The default size is 14, I’m going to increase
that to make the font size larger, so I’m going to make the font size 17 by clicking
on the 17. Next is the link color, if you’d like to select
the link color you can do that here. The default option is this pastel blue color. So I’m going to make this an orange. So to do that, click in here, and and then
you can choose whatever color you’d like by scanning around this wheel here and choosing
whatever color you like. I’m going to choose an orange, and then you
just unselect it and it will turn to the color you want. Once again, to choose a link color, you just
want to put the cursor inside this window, and this color wheel comes up, and you can
choose whatever color you like for your links. Okay next are any custom CSS you’d like
to add. We’ll talk about this later, so I’m not going
to touch this right now. And then once again here are some footer settings
you can adjust if you’d like to do that as well. When you’re all done with your theme settings
for Hatch you can come to the bottom and click on update settings to update your settings. To see what the website looks like now with
these changes, we go to the top left hand side, hover on top of the website name, and
then where it says visit site we want to click visit site to see our changes. So we can’t see any changes quite yet. We do see when we hover over the footer here,
the link does turn orange instead of blue, which was the default, because we just set
the link to orange. So that’s pretty much the only change we
see so far. We see that we’re missing the bio section
here and we’re missing the menu items right here. So let’s go ahead first and add some bio content
in this section and fill that out. To do that we want to go back to the dashboard. I’m going to go to the top left hand side
and I’m going to click on dashboard. So here we are on the dashboard, to add a
bio to the homepage of the website, we want to go to the top right hand corner, hover
over our name, and then we want to click on edit my profile. This is a link that will drop down when you
hover over your name in the top right hand corner. So I’m going to click edit my profile right
here, then on the profile page I’m going to scroll down to where it says biographical
info underneath about yourself. and then I’m going to add a short paragraph,
a couple sentences of a bio that I want to be included on the homepage of the site. Then once you’ve added your short bio in this
section, you want to come down to the bottom and you want to click update profile to update
your profile. Now, when we go to visit the homesite by going
to the top left and clicking on visit site, we now see there’s a bio added to the homepage
of the website. The next thing we notice on the site is that
our menu items are missing. So let’s go ahead and create some pages,
and once the pages are created, we can add a menu to the homepage here of our website. I’m going to go back to the dashboard, and
now I’m going to create some pages. The pages are located on the lefthand side,
so I’m going to click on pages right here, and when I do so, you’ll note that two items
pop up: All Pages and Add New. So on the pages screen here, this is a page
that comes with your WordPress installation; we’ll soon be deleting this page altogether,
but this just gives you a sample of what a page will look like. So for us right now in this video, I’m just
going to click add new to add a new page. You can either click add new here on the top
or you can click on add new on the left hand side, or if you want on the top toolbar where
it says plus new you can also hover over that and add page. So I’m just going to click on add new on
the left hand side to create a new page. The first thing we want to do is we want to
give our page a title. So a common page title for pretty much all
websites is the about page. So let’s create the about page first. So, I’ll give this a title of About. Once we have our title for our page the next
step is to add some content to the page itself. So on this about page I want to include an
image and some text. So let’s grab the text first. I’m just going to grab some dummy text here
on this page here this Lorem Ipsum text. So I’m going to scroll down and copy some
of this, once again this is just some demo content we can use for the site. I’m going to highlight and copy it and then
I’m going to go back to my page here, and I’m just going to paste in this content
here. Next I’m going to place the cursor on the
top left hand side, right where I want the image to be displayed, and I’m then I’m
going to click on this button here to add media to add an image. I’m going to be adding an image from the computer,
so I’m just going to upload a file; make sure this tab here is the one that is selected,
and then I’m going to click this that says to select the file. Here I have my about pic, so I’m going to
highlight that and click on open to open this picture. And once the picture has been uploaded it’s
once again always it’s a good idea to include a title and alternate text. So once again I’ll come back to this later
but for the moment, I’m going to just give this the title of the website, and then when
we scroll down we can see that we can align it: either have no alignment or we can left,
center, or right align this image. I want to align it on the left. So I’m going to click on left to left align
it. Next, we can link it to by clicking on that
you can link it to a custom URL, a media file, an attachment page, or none. I’m not going to link this page to anything,
so I’m just going to click on none. Then here we see the full size is 323 by 307. If I want a different size, I can just click
in this box here and I can grab a different size for the image. I’m going to add a medium size of this image
to the about page. So I’m going to click on medium right here,
300 by 285. That seems like a good size for the about
page. We’ll see what turns out if we want to change
it later we can do so. But right now I’m just going to click on medium
to add the medium size of this image, then I’m going to click on this button here that
says insert into page. So here we have the image and the text, the
next step is we want to come over here to the right hand side. There are some page attributes we can either
create a parent page. I’m going to leave the about page as the parent
page, so I’m not going to set any other page as a page above this page. This will be the parent page. We can also choose a template option here
by clicking on this box. You can see that we can make this the archive
template, a bookmark template, or a full width template. I’m going to create this page for the about
page, I want this to be full length. I don’t want a sidebar on this page since
it’s the about page. So I’m going to click on full width for the
full width template. Then it looks like we’re good to go from
here you can go ahead and publish it or if you’d like to save the draft or preview
it you can do that here. I’m going to publish this by clicking on publish,
and now the page has been published. So let’s take a look. I’m going to click on this link here that
says view page to view the page. Great so this is what the about page looks
like. Notice that we’re still missing some of the
menu items. We still have a few more pages to add before
we can add the menu links right here at the top. Let’s add some more pages to the site to build
it out. To do that, I’m going to go back to the dashboard
by hovering over the site name at the top left hand side and clicking on dashboard. And then once again, I’m going to hover over
pages, click on pages, and then I’m going to click on add new to add a new page. Imagining that this website is for a small
business, a photography or a video business, I’m going to create a service page that features
those services. So I’m just going to give this page a title,
we’ll call it services, and then once again in this block, I want to add some content. So I’m going to paste the same demo content
we used previously here. So I’m just going to add that right here
and I think I’ll break it up by giving it a paragraph return right there, and then I’ll
just call this video services and then I’ll call this one photo services. So now let’s add some formatting to this content. Note we’re in the visual view; here it says
visual view in this tab right here and this tab here says text. The difference between these two is that the
visual tab is the what you see is what you get view, where you don’t need to know any
kind of code to format the text. Once we add formatting to the text, when we
go to the text view in just a moment you’ll see the code that WordPress produces to format
the text. So in the top toolbar here you’ll see that
there’s a number of different formatting options. This is really similar to an email or to Microsoft
Word or some kind of wordprocessing program where you have your bold, your italics, your
strikethrough, your ordered lists and unordered lists. When you hover over each one of these icons,
youll get a yellow tooltip that will tell you exactly what the formatting feature does. So you don’t have to remember what all these
formatting features do, if you just hover on top of them, you’ll get a yellow tooltip
that will tell you exactly what that particular icon does. Also note, on the right hand side, there is
a icon here that says show/hide kitchen sink. When I click this, you’ll get a whole second
row of different formatting options that you can use to format your text. I’m going to format the first one here Photo
Services by just highlighting it. and then here in the paragraph box, I’m just going
to click on paragraph and these are all pre-formatted options that you can use to format your text. So I’m going to give this a heading of Heading
4 to see what that looks like, and I’m going to do the same thing for video services here. I’m just going to highlight it, click on
the Paragraph box right here and click on Heading 4. Then, I’m going to click on save draft to
save the draft. Now, when we go to the text tab here, I’m
going to click on Text, we’ll see that WordPress has automatically added the Heading 4 tabs
right here. We see there’s an opening bracket, h4, and
a closing bracket. Then you have your first title, Photo Services
with a colon, and then then you have a bracket, forward slash h4 and another bracket. So this is the HTML that WordPress is creating
to add a Heading 4 tag, a Heading 4 formatting to the Photo Services line right there. So this is a good way to learn how to use
HTML just by creating the formatting in the Visual View without coding and then you can
click on the text tab right here to see what WordPress has added for the HTML to create
that formatting for that particular text. So let’s go back to the visual view I’m
going to click on visual, and here on the righthand side, I want to set the page attributes. So once again this will be the service page. The service page will be the parent page,
so I’m not going to touch this. And then here where it says template, I’m
going to click on this here for default template, and we have see we have these different options. This time instead of making this a full width
page like we did with the about page, I’m going to leave this as the default template. So I’m going to click default right there,
and then I’m going to scroll up and I’m going to click on publish to publish this
page. Now we see that the page has been published,
let’s view the page by clicking view page. And now we see here is the services page,
where we have our Photo Services listed right here, and we see this is in the Heading 4
tag, and we also see Video Services is in the Heading 4 tag. We see that we have a sidebar here now. We haven’t configured this, we’ll do that
in just a few moments. And then you’ll see when you scroll down,
there’s a comment box if anyone wants to comment. Now this is a page, so I don’t actually want
any comments on my pages. I prefer to keep comments where the blog is
located on each of the blog posts. So let’s remove the discussion here on the
page. So to do that you want to go back up to the
page to edit it by clicking on Edit Page on the toolbar here, so I’m going to click Edit
Page, and then we need to scroll down to the Discussion Section. Now note the Discussion Section is not here,
so we want to scroll up to the top where it says Screen Options and click screen options
at the top. Here you’ll see a bunch of other different
sections you can add to display on your screen to customize each of these different sections. So the one we want is discussion, so I’m going
to click on discussion right here, and then I’ll click on screen options once again
to collapse the box. Now when I scroll down we’ll see that here’s
the discussion section, and we can either allow comments and backtracks or we can not
allow them. I want to disable these comments, so I’m going
to uncheck both of these boxes. And then I’m going to scroll up and when
we looked at the page, we saw that photo services was rather large, both of these Heading 4
tags were rather large. So I’m going to make this smaller by highlighting
it once again, and clicking on where it says Heading 4 and instead of Heading 4 I’m going
to make it Heading 6. And I’ll do the same thing for Video Services
here. And I’ll click on this Heading 4 once again
and I’ll make it a Heading 6 tag and then I’ll click on update on the righthand side
to update this page. Now we see the page has been updated, let’s
go take a look and see what it looks like, so I’m going to click on view page to view
the page, and now we see that the photo services are now in this upper case letters right here,
and it’s a little bit smaller than the actual page name right here services. So I’m not quite sure if I want the uppercase,
I don’t really like that very much so once again I’m going to click on edit page at the
top. And I think to create the formatting I want,
I’m just going to highlight this, I’m going to make it a paragraph once again, and then
I’ll just bold it. So that will help to make it stand out. I’ll do the same thing for video services,
I’m just going to highlight it and I’m going to turn it back to just a regular paragraph
formatting but I will bold it to make it stand out with bold. Then I’ll click on update to update the page. And now let’s go check out what it looks like
by clicking on view page here at the top. Okay, that looks a lot better. It’s a lot smaller than the services word
right here which is what I want, but it does stand out because it has some bold. Also note that the comments are now no longer
featured on this page, which is exactly how I want it. So the next thing is we want to create some
more pages so we can get our menu items here, and then we’ll take a look at the widgets
so we can start configuring the sidebar here and make this more of a custom sidebar. So let’s continue creating our different pages,
so that we can then create our menu items at the top. To add pages, I’m going to go back to the
dashboard and click on dashboard, and then I’m going to click on pages right here, all
pages, and then once again I’m going to click on add new to add a new page. So the next page I want to create are some
sub pages underneath the services page. We can change this later, but I just want
to show you how you can create some sub pages if you’d like to do that. So I’m just going to call this photos, this
is a little bit redundant, but again I just want to show you how to create some extra
pages that will fall underneath the services page. So I’m going to go back and grab some this
demo content down here so that we can start filling in the page, and then I’ll go back
to my page. Now note that I’m once again in the visual
tab right here. So I’ll just paste that in and remove the
quotes. And then I’ll add another paragraph right
here. So this will be my photos page. Now on the righthand side right here where
it says page attributes, this time instead of leaving it as no parent, we want to actually
make the parent the services page. That way, this page will show up underneath
the services page. So I’m going to click on services here. And once again, I’ll keep the template as
the default template and the scrolling down I’m going to disable comments by unchecking
these two boxes, then I’m going to come over to the right hand side and click on publish
to publish this page. Also note it says photos, I actually want
to call this Photo Services. So I’ll just rename the title and then I’ll
click on update to update this page. Now I want to add one more subpage under services,
so once again I’ll click on add new, and this time I’ll call it video services, and I
will paste in the demo content. Again on the righthand side, we’ll click on
the parent page of services, and I’ll keep it the default template of default template
is fine, and I’ll disable the comments, and then I want to go ahead and publish the
page by clicking on the publish button right here. Okay so now we have several pages, the next
page I want to create is a contact page. Before I do that, let’s take a look at our
website so far and this page and then we’ll create the menu that we have so far. So let’s take a look at the page first. I’m going to click on view page to view
the page. And we see here is the video services page. So let’s go ahead and create our menu. We have at least a few pages so we can create
the menu and at least get that started. So we can start adding some menu items here
in the navigation area at the top. So to add the menu, you want to go to the
left hand side and click on dashboard once again, and then you want to click on the menu. To get to menu, you want to click on appearance,
and once you click on appearance you’ll see that menu falls right under appearance right
underneath the appearance with all these other options. So I’m going to click on menus. And here on the menus page you’ll see that
we can create a new menu. So we’re going to create a custom menu. So I’m just going to go ahead and call it
menu. And once you’ve entered the name of the
menu, you can go over to the right-hand side and click on the Create Menu Button. So I’m going to click on Create Menu to
create the menu and the next step is we need to come over here to Theme Locations and we
have to actually select which menu we will be using. So there’s only one menu really but it’s
important that we set this so that it’s displayed on the website. So I’m going to click in this area right
here, click on menu and then I’m going to click on save to save the menu. So we don’t have any menu items yet so we
need to add those to this area right here. So I’m going to scroll down and I’m going
to start adding the menu items that I want to be featured in the menu. So I want the about page so I’ll click on
that. I’ll also click on services, video services
and photo services. And then I’m going to click on this button
here that says Add to Menu. Now we see all of these different pages have
been added to the menu. So the next step is we want to organize them
in the way, in the order that we want them to be displayed horizontally on the homepage. So I want that about page to come first so
I’m just going to drag that to the top. Then I want the services page and then I do
want the video services and the photo services but I don’t want them to be on the same
level as services. These are actually child pages so I’m going
to drag it just to the right a little bit. So that they fall underneath the services
page just like that. So I dragged them to the right just a little
bit. Then right down here on the right hand side
you want to click on save menu to save your menu. The other thing that I want to do is I want
to add a home navigation menu item right here so that it says Home. So to do that I’m going to create a custom
link so I’ll just go ahead and create a link here and I’ll give it the label of
home. And then I want to click Add to Menu to add
this custom link to the menu. Once again I want the home link to show up
at the top, the first item in the horizontal list. So I’ll just drag it to the very top and
then I’ll let that go. And then I want to click on Save Menu to save
this menu. Now let’s take a look at what this looks
like on the site. I’m going to go up to the left hand side
and click on Visit Site. And now we see that here we have our menu
navigation items now featured on the home page of the site. We have the home link, the about page link
and services. And when I hover over services you see that
two of the child pages show up under services. The video services page and the photo services
page. So the next page that I want to create is
a contact page so that anyone who visits the site can easily contact me. So let’s go ahead and create the contact
page. To do that I’m going to be using a plug-in
called contact form 7. So I’m going to go back to the dashboard
by clicking on Dashboard, then I’m going to click on plugins right here. And then as we did previously with the coming
soon theme fuse maintenance mode plug-in, I’m going to click on Add New to add a new
plug in. In the search box I’m going to search for
contact form 7 and then I’m going to click on search plug-ins to search for this plug
in. So here it is, the top one in the list. You can check out the details by clicking
on details right there. And we see that this plugin was last updated
73 days ago which is fairly recent, that works. It’s compatible up to 3.5.1 which is the
current version we’re using. And let’s see, it’s been downloaded over
10 million times so that’s a really good sign. It also has a 4 out of 5 star rating based
on just about 2,000 ratings. So this is a really popular contact form,
contact form plug in. So let’s go ahead and install this. So I’m going to click on the Install button
right here to install this contact form plug in. Okay successfully installed. Once it’s installed you want to activate
it so I’m going to click on the activate plug in. And now we see contact form 7 also showing
up in our list of plug-ins on the plug ins page. So now what we need to do is we need to configure
the settings for this plug in. So I’m going to click on the settings link
right here underneath the name, the title of the plug in. So I’m going to click on settings. And here we see here’s our first contact
form. So I’m going to click on Edit to edit this. Then we can see here just on the left hand
side by default, this form will include a field for someone to enter their name, their
e-mail address, a subject, and the message, and then there will be a submit button. So these are really standard fields to be
included in a contact form. And these are exactly the form fields that
I like so I’m not going to add anything or change anything I’m going to keep it
as it is. And then here we see at the top it says, copy
this code and paste it into your post page or text widget content. So what we want to do now is highlight this
code, this is short code that we want to highlight and I’m going to copy it. And I’ll just click on save to make sure
that this is saved. Now what I want to do is I want to create
my contact form page. So I’m going to go to the left hand sidebar
right here hover over pages, and click on pages, and now I’m going to click on Add
New to create a new page. As we did previously I’m going to give the
page a title. This one will be called contact and this time
for the short code that I just copied, I’m going to add it in the text tab right here. So you see there’s a visual tab which is
the what you see is what you get mode and then there is the text tab here and this is
where the code of the website is displayed. So I’m going to click on the text tab right
here and then in this box I’m going to paste the code that I just copied from the contact
form 7 settings page. So I just pasted that short code right here
in the text view of my new page. The next step is I just once again need to
decide whether to create a parent page or not. This will be the parent page so I will leave
it as no parent. And then we can set what kind of template
we want for this particular page. I’m going to leave it at the default template
so that there will be a sidebar displayed to the right of the form. Then you want to come down below and once
again because this is a page I do not want any discussion happening here. So I’m going to disable the comments on
this page. And then I’m just going to come up to the
right hand side and click on Publish to publish this page. To preview the page or to view the page once
it has been published we can click on this link here that says View Page. So here we see we have our contact form it’s
really just simple form. And with the name, the e-mail, subject, message
and a submit button. And then we see on the right hand side we
have our sidebar widget. So we have to configure this widget but at
least for the moment we do have our contact page ready to go. So let’s add the contact page to the menu
navigation right here on the top right hand side. To do that you want to go back to the menu
so I’m going to hover over my site name and actually instead of clicking on dashboard
this time I’m going to go directly to the menus by clicking on Menus right here. Here we have the menu, so we have the new
page right here. The contact page, so I’m going to check
the box next to where it says contact, and then I’m going to click on this button here
that says add to menu. And now we have the contact page showing up
in our list of menu items. The last step is we need to make sure that
we save the new menu that includes the contact page. So I’m going to click on Save Menu to save
this menu and now when we check out our site by going up to Visit Site on the top left
hand side. Now we see here is the contact page. So we still have a few more things to do. We note that there’s a lot of white space
right here and I’d like to start building this out and creating some blog posts with
images so that the thumbnail images will show up underneath the header image. So let’s go ahead and create some image,
some posts here with thumbnail images. To create our new post we want to go up to
the left hand sidebar, we want to go back to the dashboard, so I’m going to hover
over the website name, and click on Dashboard. And then on the left hand side you’ll see
that there’s a link here that says Post. When I click on this link we see that there’s
a drop down box with a number of different post options starting with all posts, then
we add new categories and tags. So here on this screen here you see this is
our All Post screen and at the moment we have one post that has been published and it’s
called Hello World. So this post comes with your WordPress installation,
it’s a sample post so you can see what a post looks like when you first install WordPress
but in just a few moments we will be deleting this post since we don’t really need this
post. So let’s create our own post now there’s
three different ways that we can do this. We can either click on this Add New Link here
at the top or on the left hand side on your post we can click on Add New. Or in the top toolbar we can hover over plus
new and click on Post. So I’m just going to click on Add New on
the left hand sidebar by clicking on Add New. And just as we did with pages we want to give
our new post a title. Now before we begin I just want to point out
the difference between pages and posts. A lot of times when getting started with WordPress
there’s a lot of confusion between how do I know when to create a page or when to create
a post? The best way to explain that is you want to
create a page for any content you have that doesn’t change. So the About page for example is content that
will stay static, it’s not going to change from day to day. It’s your about page. Your contact page is the same thing; it’s
not going to change. You always want your contact page to be displayed
pretty much and is not going to change. The posts are used for time-based content. Time based information that you want to share
with your readers that changes from day to day. So things like upcoming events or maybe past
events, or maybe your thought of the day, any kind of activity with your business or
things that are happening with your business you can create posts from day to day. Also you may want to use posts to share tips
with your readers about whatever your business is about. Or teach them something from day to day. The thing with posts is once again, the main
thing to consider is that this is time based information, it will have a published date
associated with it and it will also have an author associated with it, categories and
tags. So those are just some of the high level differences
between posts or pages. And as we go along it should become a little
more clear, the difference between the two as we start building out the posts and then
you can compare the difference between the pages and the posts. But the main thing to keep in mind is that
posts are used for time-based information. So in this instance I just want to create
a number of thumbnail images on the home page, each of those images will represent a blog
post. So just to look back on our demo site where
I’ve already built a site out, I just want to show you what we’re headed toward right
here. So when I click on this, this is the demo
site where we’re headed toward and you can see that there are all of these different
images here. So this is what we’re doing right now. We’re creating the blog post with thumbnail
images so that they will be displayed on the home page like this. So the first thing that I want to do is I
want to add some media to this post. To add those thumbnail images that show up
on the homepage with this theme, we want to come down to the bottom and we want to click
on this link here that says, Set the Featured Image. The featured image are the images that are
displayed right here on the home page. So each of these images, these are featured
images that are attached to a blog post. So I’m just going to click on this link
here that says Set Featured Image and then I’m going to upload a file from the computer
by clicking on Select file to select the file. So I’m just going to go down on the list
here of each of my different images starting with this art image. So I’m just going to highlight that and
click on Open. And then WordPress will upload this image
to my site. Once again it’s important to include a title
as well as an alternative text so I’ll just add that right here. And then I’ll add in an alternative text
same thing. And then you want to go ahead and you want
to click on Set Featured Image to set that as the featured image. So I’m going to click on this button here
that says Set Featured Image. Then we’ll see that this image that pops
up in the featured image box right here below. So I’m going to scroll up the tab and I’m
going to give this a title for the post. I’ll just call it art and then I’m going
to add the information here. I’m going to grab some demo content once
again on this Lorem Epson site and I’m just going to highlight this and I’m going to
copy it and then I’m going to add it here to my post content by just pasting it in. So this will just be some demo content to
help kind of flesh out the site, the description underneath the image on the post. So that looks good so far. The next thing we want to do over here is
we want to give this a category. We want to give our post a category by default
the post will be uncategorized. So I’m just going to add a new category
by clicking on this link that says Add New Category and I’m going to call this blog. Once I’ve added in the category name then
I just want to click on Add New Category to add it to my list, and now we see that this
is checked under the category of blog. When you scroll down you can also give some
tags if you like. And now we see that this is checked as being
under the category of blog. When you scroll down you can also give some
tag if you’d like. So I’ll just call this art Santa Monica,
Los Angeles, maybe photography because it’s a picture. Okay and then I’m just going to click on
Add to add my tags. And then you want to scroll up and you just
want to click on publish to publish this post. So I’m going to click on Publish. Okay so now the post has been published. Let’s take a look at what it looks like. So when I click on view Post right here at
the top we see that here is the image that is my blog post. We see here the blog title, the date that
it was published, the author, the category and all of the associated tags. So when I scroll down we can also see here
is the content of the post, this is the demo content that I just added. And then you can see that someone can leave
a comment on the post that they like by just typing in on this box here and leaving a comment. So that is our first post. Now when we check out what this looks like
on the home page by clicking on home. Now we see that our image shows up, it’s
the first image here the thumbnail image on the home page. So we want to do this quite a few more times,
at least three more times to create one row of four images across. And then I’m going to do it a couple more
times so that I have three row of images going across. So I want to just copy this process we’ve
done for one post. I’m going to do that several times to fill
out the space underneath the header image on the home page. So I’m going to go back and create some
more posts by going up to dashboard, I’m going to click on post once again. Now I’ll click on Add New to add a new post,
I’m going to click on scroll down here. I want to set the featured image so I’m
going to click on upload files and then click on select files. This time I’ll choose the beach blog image
right here. And that one pops up. Again I’m going to give it a title. And then once I have a title and alternative
text filled out, I want to click on Set Featured Image to set featured image. Now once again I’m going to give this a
blog post title. And then I’m going to give it some demo
content right here. So I’ll just fill that in. Maybe take out that one; just leave it as
this right here. Break up that. And then once again I want to categorize this
as blog and then I want to give it some tags. And then click add to add the tags. So you ca create additional categories as
well if you don’t want to use blog. I’m going to be using blog and I’m going
to show you why in just a few moments. But there we go, we have our blog post ready
to go and then I’m going to click on publish once again to publish this post. Now when we view the post we’ll see something
just like we saw before. Now we have our beach photo there and we have
some content with our comment box below. And now when I go to home page you can see
that the thumbnails are one-by one, we’re adding the thumbnails to the page. So I’m going to continue this process a
few more times to fill out the thumbnail images on the homepage. And then we’ll be back to go over how to
create a gallery of images within a specific post. So we’ve added a bunch of blog posts with
featured thumbnail images to our website. And we can see that here I am on the homepage
when I scroll down, now we can see here are all of the posts that have been added into
the site. Then when I scroll down you’ll notice that
there’s another page that we can click to see the remainder of the posts that have been
published so far to date on our site. So I’m going to click on next to see those. And here we see here are the other blog posts
that have been published. Note however that when I go back to the homepage
by clicking on the number one right there at the bottom. We’ll see that they’re two empty slots
here so I want to have three rows of four images across. So I want to have 12 images here and right
now there’s only ten. So I want these two blocks right here to be
thumbnail images with featured images of posts as well. To kind of complete the whole page it looks
a bit empty right here. So in order to add two more featured images
to the home page we need to go up to the settings. So I’m going to go up to dashboard first
by clicking on Dashboard here. Then I’m going to scroll down to where it
says settings and I’m going to click on Reading right here. Here on the reading settings tab we can see
that the front page displays our latest post which is exactly what we wanted to do. But then note here it says that blog pages
show at most ten posts. So right now we’re only displaying ten featured
images and ten featured posts on the home page and we want to include 12 images. So I’m just going to bump this up to twelve
and I’ll do the same thing for the syndicated feeds. The main one that you want to change though
is the blog pages: “show at most” you want to say twelve posts. Once you’ve named these twelve posts than
you can come down here and you can click on save changes to save the changes. Now when we go back to visit the site by going
up to the top left hand side and clicking on visit site. Now we’ll see that there are 12 images displayed
on our home page which is exactly what I want to have for this site. So now it’s looking good so far. The next step is on each of these blog posts
when I click on one for example I’m going to click on this one. We see as we saw before there’s an image,
the blog data and then there’s some information right here. Well I want to show you how we can create
a gallery of images with a light box. So what we we’re to head towards is here’s
my demo right here. I’m going to click on this, this is the
demo site that I’ve already created. And I want to show you how you can create
a really nice gallery of thumbnail images like this where when you click on each image
it opens up to a light box. And then you can just scroll through the light
box one by one. So let’s go ahead and create that now. I’m going to go back to my post. I’m going to click on home here. And then I’m going to find the post where
I want to create all of those images. I think I’ll create it on this post right
here that says flowers. So I’m going to click on this post. Here is the post and once again there’s
text and a comment. So we want to edit this post. To edit the post I’m going to go to the
top and click on Edit Post in the toolbar. And then I’m going to position the curser
right before where I want the gallery of images to be displayed. So I’m going to put it right before the
L right here and I’ll do a return. Now what we want to do is we want to add media. So I’m going to click on this button here
that says Add Media. And then I’m going to click on this button
here that says Create Gallery so that we can create a gallery of images. So I’m going to click on Create Gallery. So we see here on the create gallery page
that we can add images to the gallery either from the media library right here which is
what we see. Or if we want to upload files from the computer
we can do that by clicking on Upload Files. And we would select our files by clicking
it on this button as we did previously. So I’m going to be adding images from the
media library, images that are already in the media library. So I just clicked on media library at the
top. And then what we want to do is we want to
select the images that we want to be displayed and featured in the gallery. So I’m just going to check them one by one. All the different images that I want to have
displayed. Let’s see we have 3, 6, 8 so far. I want 12 images total so I can have two rows
of 6 each. So we have 8, I’ll have 9. 10, 11 and maybe 12. Okay so to uncheck an image you just want
to click on this minus sign here to deselect the image. So it looks like now I have 12 images total,
let’s count them. I’ve got 2, 5, 8, 9, 10, 11, 12. Okay perfect. So not what we want to do is we want to click
on this button down here that says create a new Gallery. And also note we can see right here at the
bottom it does say that 12 images have been selected. So that works really well. So I’m going to click on this button here
to create a new gallery. And now we see on the edit gallery page that
we can drag and drop to reorder the images. So for example if I want this image at the
bottom to be first, I’m just going to drag it all the way to the very top so it is displayed
first in my gallery. Actually it looks like I just lost it. Let’s try it one more time. I’m just going to grab it and slowly drag
it to the top. There we go. So now we have this image, actually a little
bit further up it looks like right there. I’ll put right between these two images
and just drag. So you can see that you can drag and drop
or reorder the images however you want to have them displayed. So just like drop it there. Now on the right hand side you’ll notice
that it says gallery settings. We can link these images either to a media
file or to an attachment page. We are going to be creating a light box so
we won’t be needing to worry about this. So I’ll just keep this as is for the moment,
a media file. And next we want to choose how many columns
we want to have displayed. So I want to have two rows of six images each. So I want six columns vertically so I want
six columns going down and then I want two across. So I just click on six for six columns and
then I want to click on insert gallery to insert my gallery into my post. So here we see that I’m in the visual mode
here. I have the visual tab selected so that’s
why we see this placeholder with the gallery. When I click on text you’ll note that here
we just see the shortcode, the code actually that is used by WordPress to actually display
the gallery in code. Thankfully we don’t need to worry about
this because we can just use the visual view to do everything we need with this gallery. So when I select this you’ll note that when
I click on this gallery placeholder, two little icons pop on the top left. We have an edit gallery icon and a delete
gallery icon. So if you’d like to delete the gallery you
can just select it and click on delete gallery. And then if you want to continue editing the
gallery or adding images to the gallery, you can do so by clicking on this button here
that says edit gallery. So I’m just going to publish this post as
is now that I have my gallery. I’m just going to click on update to update
the post with the gallery. Okay so the post has been updated; let’s
take a look at it by clicking on view post to view the post. And now when I scroll down we’ll see here
are my two rows of six images each and when I click on an image you’ll note that it
goes to an attachment page where there is an attachment page with the photo itself. So going back one screen back to our gallery,
what I really want is I want to be able to click on each one of these and I want light
box to display right here on the page. I don’t want to send anyone to another page. So our next step with this gallery is to set
it up so that we can display a light box instead of having each image go directly to an attachment
page. To create the light box effect on each of
these images I had been using a plug in called J-Query Light Box for Native Galleries. But I just noticed in the course of creating
this video that there’s a discontinuation notice. And it says, the development on this plug
in has ceased in favor of the carousel module in the Jetpack plug in. So I’m going to forego showing you how to
create a light box using this plug in and instead we’re going to go to the carousel
module in the Jetpack plug in to create the light box instead. Now the display of the light box is going
to look a little bit different than what we had seen earlier in the video. But the good news is that there’s some extra
features with this carousel module that I think makes it all worthwhile. So let’s go ahead and install the Jetpack
plug in on our WordPress website. To do that I’m going to up to my site here
and I’m going to click on dashboard. Then on the left-hand side, I’m going to click
on Plugins. And then under Plugins, I’m going to click
on Add New to add a new plugin. Here in the search field, I’m going to search
for jetpack, add that to the search field, and then I’m going to click Search Plugins
to search for this plugin. Here at the top, we see it has the search
result Jetpack by WordPress.com. This is a plugin that is created by WordPress. We can find out more details by clicking on
the Details link right here. And we see that this particular plugin, the
Jetpack plugin, was last updated eight days ago. It requires WordPress Version 3.3 or higher,
and it’s compatible up to version 3.5.1 which is the WordPress version we are using in this
video. So we’re good to go on that. We also see that this particular plugin has
been downloaded almost 5 million times, and it has a four out of five average rating based
on over 1,000 ratings. So this looks really good. I’m going to install it by clicking on Install
Now right here at the top. Okay, successfully installed the plugin Jetpack. The next step, we want to activate the plugin
by clicking on Activate. And now it says, “Your Jetpack is almost ready
— A connection to WordPress.com is needed to enable the features.” So what we want to do is we want to connect
to WordPress.com by clicking on Connect to WordPress.com right here. Now when we click on Connect to WordPress.com,
we’re going to get this message that says, “Your website needs to be publicly accessible
to use Jetpack.” The site is currently inaccessible. So if you recall at the beginning of the video
we had created a Coming Soon landing page for anyone to see a Coming Soon landing page
when they came to our website so that we could build the website in the back, behind the
scenes, and everyone could just really see a nice Coming Soon page. So in order to activate Jetpack and get the
light box set up we need to temporarily deactivate the Coming Soon page. So first we need to go deactivate the Coming
Soon page. We’ll do that for just a few moments while
we get this set up, and then we’ll go back to the Coming Soon page and we’ll turn it
back on. So for just a few moments we’re going to have
the Coming Soon page deactivated. So first we want to go to Appearance. Actually, we want to click on Plugins instead. We want to click on Plugins. And here on our Plugins page, we want to scroll
down where it says, “Theme Fuse Maintenance Mode” and we want to click on this link here
that says “Deactivate” to deactivate the Coming Soon page. Okay. So the plugin has been deactivated. So our website is now publicly accessible
to anyone on the internet. They no longer see the Coming Soon page. So let’s go ahead and get the Jetpack plugin
set up, and then we’ll come back and we’ll turn the Coming Soon page back on. So once again, I’m going to click on Connect
to WordPress.com to connect to WordPress.com. And here what we need to do is we need to
connect our website with the Jetpack plugin and with WordPress.com. So you’re going to need to have a WordPress.com
account in order to do this. It’s free so you can sign up for free if you
do not already have a WordPress.com account. You can create a free account by clicking
on this link here that says, “Need an account?” So I have an account. So I’m just going to type in my account right
here with my password. And then I’m going to click on this button
here that says, “Authorize Jetpack” to authorize Jetpack. Okay. “You’re fueled up and ready to go. The features below are now active. Click the learn buttons to explore each feature.” So we see that we are connected to WordPress.com
and with Jetpack. When I scroll down you can see all of the
different features you can now add to your website. So with just one plugin, you have all of these
different features that you can add to your site which is really cool. So, the one that we’re looking for the light
box is called the “Carousel module.” So I’m just going to scroll down here and
it looks like here for me it’s on the left-hand side. And when we click on Learn More, there’s a
box that pops up just below it. And it says, “With Carousel active, any standard
WordPress galleries you have embedded in posts or pages will launch a gorgeous full-screen
photo browsing experience with comments and metadata.” So this is the one that we want. I’m going to go ahead and click on the Activate
button right here to activate the Carousel module on my website. Okay, the Carousel is activated. So let’s go see how this now displays within
our gallery. So I’m going to go back to visit the site
by clicking on Visit Site. And here I’m going to scroll down to where
the gallery is. I had created the gallery in this post here
so I’m going to click on this post. And here just below, here’s my gallery. Now you may recall, we had previously, when
I clicked on this image here, I was sent to another page with just the image. Now when I click on this image, you’ll see
I have this really cool gallery that displays just really nicely. And when you scroll down, there’s also a place
for anyone to write comments related to this content. There’s also some metadata here which is really
cool. And so there’s a lot of extra features with
this particular lightbox. It doesn’t look the same as the lightbox that
I had displayed at the beginning of the video just because the plugin that I used at the
beginning of the video is now discontinued. So it’s always better to use, of course, a
plugin that has on-going development for the plugin. And with the Carousel module that comes with
Jetpack, this is a really great option. Plus, you get the extra comment and the extra
metadata. So now we can see all of our images in a really
nice carousel view. Now to get out of this view, you just want
to click on this X right here at the top to close the carousel. And then here we have our gallery. Now before we go ahead and turn the Coming
Soon maintenance mode back on, I want to point out two additional features within the Jetpack
plugin. So let’s go back to the Jetpack so I can point
those out. I’m going to go up to the dashboard and click
on Dashboard. Then we’ll see here is the Jetpack listed
right here in the left-hand side bar. I’m going to click on Jetpack. And here are all of the features. Now there are two in particular that I always
turn on. I think they’re really awesome. The first one is this Sharing feature right
here. “The most super-duper sharing tool on the
interwebs. Share content with Facebook, Twitter, and
many more.” So by activating this particular feature,
you will be able to easily share your content across the social web which is really great. So I’m going to click on Learn More so you
can just learn more about it. You click on that and you can read more about
it right here and watch a video. I’m just going to go directly to activate
it. So I’m going to close that and then I’m going
to click on this Configure button here to configure this particular feature within Jetpack. So here we see we can have our Sharing Settings. I’m just going to scroll down here to where
it says, “Sharing Buttons. Add sharing buttons to your blog and allow
visitors to share posts with their friends.” So I’m just going to grab the ones that I
want which are pretty much Facebook. So I want to grab that one. “Drag and drop available services here.” Looks like it didn’t catch so let’s try it
one more time. Oh, it’s not catching. Let’s see. There we go. So I want Facebook. I want Twitter so I’m going to grab that and
drop that here. I want LinkedIn. And I want Google+ and put that one here. You can also sort these as you can see. You can move them around if you’d like to
reposition them. And then here, there’s a box right here that
says, “Services dragged here will be hidden behind a share button.” So here’s the live preview right below. We can see this is what it’s going to look
like on the website. So I want to add all these other options,
but I don’t want to have a long bumper sticker list of every single social network. So I’ll just keep it to the top four and then
I’ll add the other ones that I want. I’ll add them but I’ll add them in this plus
more button here. So Pinterest, Tumblr. I’ll add Reddit. You can add Email to give people a way to
share via email. And if you want to add these other features,
you can do so as well. For the moment, I’ll just keep it like this. So we can see this is how it’s going to display
under my blog posts on the website. Next you can choose what style you want. So if you want the icon and text you can have
that. I really like this style so I’m going to keep
it like that. But if you want to have just the icon only,
you can do that. Or if you want text only or if you want the
official buttons, you can do that. I’m going to keep it with icon and text. I kind of like the uniformity of that display
that look. You can also change the sharing label if you’d
like. Share with friends or you can just leave it
as Share this. I’ll just leave it there. Then you can click on Show buttons on where
do you want these buttons to be displayed. I want these displayed on my posts. I don’t really want them displayed on the
front page of the website or pages or media. If you like to, of course, feel free to check
these boxes. I’m just going to have these buttons displayed
on my content posts. Next, you just come down here. You click on Save Changes to save the changes. Now when we go to check out a post, I’m going
to go check out the post by visiting the site. Then I’m going to scroll down and click on
my gallery posts right here. And now we see, not only do we have the gallery,
but we also have Share this feature so anyone can now share your website across the social
web. And then when they hover over More, they have
all of these additional social sharing options that they can share on these networks as well. So that is how you can add social sharing
of your content to your site using Jetpack. The last one that I want to point out in the
Jetpack plugin, which I love, is the comments feature within Jetpack. So right now, the comments feature that comes
built in with WordPress is very simple. It’s just Leave a Reply and there’s a comment
box here with Post Comment. With Jetpack, we can add a few more features
to the commenting system. So let’s go ahead and activate the Comment
module within Jetpack as well. So I’m going to go back to the dashboard. Click on Dashboard. Then I’m going to click on Jetpack once again. Then I’m going to scroll down to where it
says, “Jetpack Comments.” And again, as we did before, you can click
on Learn More to learn more about this module. And you can see here that “Jetpack Comments
enables your visitors to use their WordPress.com, Twitter, or Facebook accounts when commenting
on your site. Jetpack tries to match your site’s color and
you can make manual adjustments” as well if you would like. So this just gives you some extra features
when it comes to commenting which I really like. So I’m going to activate this by clicking
on the Activate link. Okay, Jetpack Comments have been activated. Let’s go look at what this looks like now. So I’m going to go back to visit the site. I’m going to scroll down to this post, click
on it. Then I’m going to scroll down. And now we see it does say, “Leave a Reply”
but when I click in this box here, there are some extra features that now pop up. First of all, it does show that I’m already
logged in. But if I wasn’t logged it I’d have some additional
ways to comment. We also see that there’s an image next to
my name which I need to set up. This is the Gravatar that’s associated with
your account. Also, you can check whether you want to be
notified of any comments that come after you comment. Also, you can be notified of new posts via
email. So having this comments system within Jetpack
is really great because it just adds a few more extra features that do not come automatically
with the built-in commenting system when you install WordPress. So this is a great option to add to your website
as well. So you can go through all of the different
Jetpack options. There were quite a few additional options
that you can choose. I’m going to leave it as is right now. And I’m just going to go ahead and I’m going
to turn the Coming Soon page back on by clicking on Dashboard. And then I’m going to click on Plugins to
go back to the ThemeFuse Maintenance Mode plugin. And here at the bottom, I’m going to click
on Activate right under where it says, “ThemeFuse Maintenance Mode” to turn the Coming Soon
page back on. So I’m going to click on Activate to activate
this plugin once again. And now the plugin has been activated. So let’s take a look at the home page. I’m going to go back to the visit the site
by clicking on Visit Site. And we see here that we have pretty much we
have a lot of different features pretty much set up already. One thing that we are missing is I want to
create a menu item at the top here that says, “Blog.” I know that this is the entire blog, but it’s
pretty common to see Blog in the navigation menu and I like the way that it displays when
I add Blog there. So let me show you how to add Blog to the
menu navigation list right here at the top. To create a new menu item, we want to go to
the Menus screen. So to do that I’m going to go to the top left-hand
side, hover over the site name, and in the drop-down box here I’m going to click on Menus. Here on the Menus page we can see our current
list of menu items listed right here. And what I want to do is I want to add Blog
to this list. So if you recall when I created each of my
blog posts, I had categorized them in the category called “Blog.” So I’m going to come down to this group here
where it says, “Categories” and I’m going to click on Blog and then I’m going to click
on Add to Menu to add this to the menu. Now we see that here is the Blog, and I just
want to add it, maybe let’s see, I’ll add it right before the Contact page so I just
dragged it up a little bit. And then I want to click on Save Menu to save
my new menu. Now if you don’t see Categories on your screen,
you might want to come up to Screen Options at the top. And when I click on that, you can see here
are all the other things that you can add to your screen. So with each of these check boxes you can
show each of these different boxes on your screen. So if you don’t see Categories, be sure to
check out Screen Options and then you want to check the box and then click Screen Options
once again to collapse the box and then you should be able to see the Categories group
here on your Menus page. So I had just saved the menu. Let’s go take a look at it by clicking on
Visit Site in the top left-hand side. And now we see here is the navigation item
going directly to all of my blog posts. So I’m going to click on this to show you
what that page looks like. And here we can see that I have really nice
display of all of the different blog posts that I’ve added so far. There are also some navigation items down
here as well. So if you want to display your blog posts
in this way, this is one option to do that. But of course when we click on Home we also
have the blog posts featured here also. So it’s really up to you. It’s optional. But I like having Blog featured in the menu
navigation in the top on my menu. So we have a few more things to finish before
we can launch the website. The first thing is we need to configure our
widgets. Widgets, if you click on the Contact page
right here, the Contact page we had created earlier in the video; you will see that we
have the default widgets showing up on the right-hand side of our sidebar with Recent
Comments and this Meta log-in info right here. So we want to remove this and we want to create
our own content here in the widgets area. Specifically, the two types of content we
want to add in this widgets sidebar are number one, we want to add our social icons so anyone
visiting our site can easily connect with us on our social networks whether it’s Twitter
or Facebook or LinkedIn or YouTube. And we also want to add an email opt-in sign-up
form here as well. So looking at our demo, the site that I’ve
created earlier, these are the two things that we want to add on the sidebar. We want to add all of our different social
icons. And then we to add this email opt-in form
here as well. So let’s go ahead and create some customized
widgets for this area. So going back to our site, we want to go to
the left-hand side and click on Dashboard. And here we’ll see on the dashboard under
Appearance, when you hover over Appearance or click on Appearance, you’ll see that you
have a number of different options that pop up in the drop-down box, one of which is Widgets. So we want to click on Widgets this time. And here we’ll see all of our default widgets
that come with this particular theme. So we see here are our Recent Comments and
the Meta info. So these two things we don’t want. So I’m going to just click on this carrot
here to remove it by clicking on the Delete link here. I want to remove the Recent Comments from
the sidebar. And I also want to remove the Meta info as
well. So I’m going to open that by clicking on the
carrot and then clicking on Delete. You’ll see that there are some other widgets
here as well. And these currently don’t have any content
in them which is exactly how we want it. So the first widget that we want to add here
are our social web or social icons to Facebook or Twitter or YouTube. So to do that we’re going to be using a plugin
called “Simple Social Icons.” So first we need to go over to the left-hand
side, click on Plugins here in our sidebar. So I’m going to click on Plugins. And then we want to click on Add New where
it says “Add New” under Plugins. Now we want to do a search for simple social
icons. So you just add simple social icons into the
search field and click on Search Plugins. And here it is, the first one at the top. So going to click on Details and here we can
see it was last updated 10 days ago. And it is compatible up to 3.5.1, which is
what we are using right now for WordPress. It has been downloaded over 50 million times. So that is a really good sign. So, I’m going to click on this button here
to install this particular icon. And then once it’s installed, I’m going
to click on activate to activate the plug-in. Now, when I go back to widget by clicking
on appearance, and then clicking on widgets, now we’ll see in our list here we should
see the simple social icons listed as an option on our widgets area right here. So, to install this on the sidebar, you want
to drag this particular simple social icons widget. You want to drag it up to the top and then
you want to place it in the primary widget area, which is both often used as a sidebar. So, we see here now we have the simple social
icons in our primary sidebar. So, when I clicked on this right hand side,
now what we’ll need to do is to configure this. So, I’m going to give this a title “connect
on the web.” Next, there’s a number of other options
that you can adjust if you’d like including the icon size, icon border, radius, or the
alignment. I’m going to keep this all as they are. I do however want to change the background
color of the icons so that it matches the link color that I added previously. So, I want this to be an orange color to match
my links. So, I’m just going to paste in this color
here. Now, I happen to know the color of the background. If you want to keep the default color, you
can do that or if you want to add a new color you can add a new color right here. I happen to know that this orange, this code
is the orange color of my link, so I’m just going to add them in here and then if you
can come down here and you can add in any of the different social networks that you
have that you want to be featured in this set of icons. So, I want the email to be showing up. So, for email you want to include “mailto”
and the colon and then you want to add your actual email address. So, I’m just going to add my email address
here. Once again, it’s “mailto” and a colon
followed by your email address and there are no spaces at all. Next, I’m going to add my let’s see what
also I want to add, I’m going to add my Twitter. So, you need to add the full URL, which starts
with http:// and then you want to add Twitter.com/ followed by your actual Twitter handle and
I’ll also add my YouTube here as well also. Once again, http:// then you want to add www.YouTube.com/
followed by the handle that you have on YouTube. You can also fill out any of these other ones
if you’d like. I’m going to keep mine pretty simple. I’m just going to add these three right
now and then I’m going to click on save to save all of these different settings. Now, when I go to check out my site by clicking
on visit site and then I’m going to click on the contact page to check the widgets on
the sidebar, we see here are the three different social networks that I added to the simple
social icons plug-in. So, I have my email, my Twitter, and my YouTube. So, that’s how you set up the simple social
icons on your website and the sidebar. The next thing that I want to add here is
an email opt-in form so that anyone who comes to this page can sign up for my email list. So, to create the email opt-in form, we are
going to be using a plug-in called Magic Action Box. So, looking at the Magic Action Box within
the plug-in directory on www.WordPress.org, we see here that Magic Action Box is an easy
to use but powerfully generation plug-in. It enables us to create really nicely designed
opt-in forms for anyone to sign up for our email list when they are on our website. So, we want to add this particular plug-in
to our website. To do that, I’m going to go back to the
dashboard by clicking on dashboard on the top left hand side then I’m going to click
on plug-ins in my sidebar and then under plug-ins, I’m going to click on add new to add a new
plug-in. Here in the search field, I’m going to search
for the Magic Action Box and click on the search plug-ins button and here is the plug-in
right here listed at the top. I’m going to go ahead and click on install
now to install this plug-in. “Are you sure you want to install this plug-in?” Yes. I’ll click on “okay” and once it has
been installed, I want to click on activate plug-in to activate this plug-in. So, once you have the plug-in activated, you’ll
notice on the left hand side you have two new links that pop up. One is the Action Box’s link and the other
is the Magic Action Box settings. So, in order to configure this plugin and
get the opt-in form working, we need to first click on the Magic Action Box settings. So, I’m going to click on this right here
and then we’ll see that we’re now at the Magic Action Box Settings page. By default, you’ll land on the general tab
and I’m going to leave all of these things as they are. I’m not going to touch them but I do want
to check out the accounts tab right here. So, I’m going to click on accounts and here
we will see this is where you can connect your email provider with the plug-in with
the Magic Action Box plug-in. So, in order for this opt-in form to work,
you do need to have an email provider and if you’re just getting started, then I do
recommend checking out MailChimp because with MailChimp you can get started for free. So, two of the built-in email providers for
this plug-in include Aweber and MailChimp. As it know, you may also use other email marketing
services as long as you are able to generate the html code for the form from your provider. So, I’m not going to get in to that. I’m going to be using MailChimp in this
demo in this example. If we look at MailChimp.com, I’m on MailChimp.com
right here, we can see that MailChimp enables you to send easy email newsletters to your
subscribers. So, this is a way for you to start building
your email list, and if you’re a business, that’s a really smart thing to do because
you want to have a way to stay in touch with your subscribers and others who are interested
in your business. So, right here at the top, you see that there’s
a link here for pricing. I’m going to click on this here and now
we see when I scroll down just a little bit, we see that there’s a Forever Free account
where if you have fewer than 2,000 subscribers, you can send up to 12,000 emails per month
absolutely free. So, MailChimp is a great email provider to
get started with to start building your email list and also to keep your expenses low. You can start with this Forever Free account
and then as your email list grows then you can consider whether or not you want to do
an upgrade on your account or move to some other kind of email provider account. So, once you have signed up for free by clicking
this link and creating your account then you’re going to back to the plug-in here on your
WordPress website and you want to click on this link here that says get your API key. You want to highlight and copy your API key
and you want to make sure that you keep this in a special place because as it notes here,
API keys provide full access to your MailChimp account. So keep them private and there are some tips
on keeping your API key safe. So, once you have copied your API key, then
you want to go back to your WordPress website and you want to paste that key and write here
and then once you have pasted in the key, you want to click on this link here that says
save changes. Once your account settings have been saved,
the next step is you want to click on styles and buttons on the left hand side underneath
where it says Magic Action Box settings. So, the first thing I’m going to do here
is I’m going to click on this link here that says styles and buttons and then I’m
going to come up to the top and then I’m going to click on this box, this button here,
that says create new style. Here on the add new styles screen, you can
change all the different styles of your often forms. So you can change the general design and layout,
the content copy, the main heading, the subheading, the form elements aside or if you want to
add custom styling, you can click others and here you can add custom CSS. So, I’m going to keep all of the default
styles as they are. The only change I’m going to make is the
form elements right here. So, I’m going to click on form elements
then I’m going to scroll down and right where it says submit button, I want the submit
button once again to be orange so that it is consistent with the other links and buttons
on my theme. So, I’m going to change the background here
to this orange color and I’ll do the same thing for the background cover. You can see here there’s a color wheel so
you can choose any color you’d like just by clicking in this color field and then the
color wheel will pop up. So, I’m just going to keep it all orange. So these four blocks here I’m just going
to change and once I have my submit button the color that I would like, I’m going to
come to the bottom and click on save style. Once your styles have been changed, the next
step is you want to actually create the opt-in box. To do that, we’re going to come to the left
hand side here and click on action boxes. Once we click on action boxes, we want to
add new a block, so we want to click on add new right here underneath the action boxes. So I’m going to click on add new, and here
we see we have a number of different types of boxes that we can create. So the one that we want is this opt-in form,
the opt-in form is used to build your email list. So I’m going to click on this link right here
that says opt-in form. The first thing we can do is create a title
for our opt-in form, so I’m just going to call it Sign Up. And the next step is to choose the general
settings of our action box. We see here, when I click on user styles,
there are a number of pre-configured styles that we can choose from. I’ll show you what they look like one by one. When I click on default, we see that this
is what the style looks like, a gray background, and then there’s some content on the right
with an image. The next option is dark. So we see if your theme has a dark color,
perhaps this would be a better fit for you. Then we have royalty if you want a blue opt-in
box, then pink if you want a pink box, and finally, if you don’t want an opt-in box,
you can just click on none. The other options for action box style also
include the user styles, which we just created in the previous step. So when I click on user styles, now you’ll
see that here’s my style that I just created in the previous step. So I’m going to use this one right here,
and then I’m going to scroll down and we need to start adding our opt-in form settings. So first we need to select our mailing list
provider. In the previous step, we had created an account,
a free account with Mailchimp. So I’m going to leave it as Mailchimp. You can see that you can also choose other
mailing list providers. The next step here is List. We need to select the list to subscribe users
to. So I’ve already created a list, I want to
click on update list here to update the list. And I had previously in a previous step, not
in this video though, I had created a list called 77webstudio. So If you have only at this point created
an account, what you need to do is go back into Mailchimp on the dashboard and then you
want to click on lists. Once you click on lists, you want to click
on this button here that says Create List to create a new list. And then it says do you really want to create
a new list, and you want to say yes. You want to create a list so I’m going to
create a list. And here you’ll see all the different fields
that you need to fill out to set-up your new list. The good thing is that Mailchimp will give
you tips on how to fill out these fields each time you click inside the field. So we see I just clicked in here under list
name, and Mailchimp is suggesting a good example is a company name, like Acme Company Newsletter. So as you go down this screen and you start
filling out all these different fields, Mailchimp will give you tips to help you fill out the
form to create your new list. Once you’re done setting up all these different
form fields, then you can come to the bottom and you can just click on save to save your
new list. Once your list has been saved, you want to
go back to your magic action plugin screen on your WordPress website, and you want to
actually select the list to subscribe users to. This refers to the list you just created in
Mailchimp. So you want to click on the Update List button,
and once you click on Update, your new list should appear here in this box. Next, I’m going to leave all of this pretty
much set as it is. I’m not going to change any of it. But here where it says Main Heading, Main
heading of your opt-in form, I’m going to give this a heading right here so I’m just
going to add my heading “Like this content? Sign up for free updates.” Then, I’m going to leave the rest of the plugin
settings as they are, and I’m just going to scroll up to the top and click on save. Once a new action box has been created, we
need to add it to the sidebar of our website. So I’m going to go to appearance now and click
on appearance, then I’m going to click on widgets to go to the widgets. Here, under Primary, under the Simple Social
Icons widget, I want to add the magic action box. So I’m going to scroll down here on my list
and we see here I have the magic option widget. So I’m going to grab this and drag it to the
top so that it displays right underneath the simple social icons and then I’m going to
leave it there. And here we see the action box to display
is the signup box. If you’d like to give the opt-in box a title,
you can do so by typing in a title here. I’m just going to type sign up for updates,
and then I’m going to click on save to save the settings for the magic action box. Now, when we go to the contact form by clicking
on visit site at the top, I’m going to click on contact here to see the sidebar. And now we can see here is the opt-in box
that we have created in the previous step. Now we see that the heading title I did add,
Like this content? Sign up for free updates.” is rather large,
and I do already have the same message posted above. So I’m just going to go back really quick
and I’m going to remove the heading I have in this opt-in box. So I’m going to click on dashboard, then I’m
going to click on action boxes to go to that action box, then I’m going to click on edit
underneath the sign-up title for the box. Then I’m going to scroll down to where the
heading was, and right here where the main heading is, I think I’m going to take this
out. So I’m just going to remove it. And then I’m going to come up to the top and
click update to update my action box. Now when I go to visit my site and I go to
the contact page over here on the right hand side, now we see that it looks a lot simpler
and a lot nicer because the heading was removed, and it does say right above it, sign up for
updates. We also see I have my orange submit button
here, and I’m good to go. So that is how you add a magic action box
to the sidebar of your WordPress website. In addition to adding an opt-in form to the
sidebar of your website, you may also want to add the opt-in form to the bottom of your
blog post to serve as a kind of call to action to your readers to sign up for your email
list. So for example when I click on Blog, and then
I’m going to click on this post here. Below the post when I scroll down you’ll see
we have our sharing options and the comment form right here. If you want to add the opt-in form in between
these two, you can do so by clicking on edit post. Then you want to scroll down to the bottom
of your post and you want to click on this box here where it says magic action box, you
want to select the action box to be displayed. I’m going to click on sign up here, then I’m
going to click on update to update the post. And once the post is updated, we can view
the post by clicking on view post. Now when I scroll down, you’ll see that here
is the opt-in form that is displayed beneath the post and above it looks like above the
sharing features. So this is when having a heading title does
come in handy because without the heading title it’s hard to really call anyone to action. Also, without having a heading title it’s
hard to even know what the signup form is for. So, for this instance, and for all opt-in
forms that fall underneath the blog post, let’s create a separate box that falls includes
the heading title. To do that, we want to go back up to the dashboard
by clicking on dashboard, and then on the left hand side, we want to click on action
boxes, so I’m going to click on action boxes. And actually, what we want to do here is we
want to duplicate the signup form we’ve already created. That’ll save us a lot work of creating all
the settings and things like that. So I’m going to click on edit to edit this
existing action box. And then you’ll note on the right hand side,
there’s this duplicate action box option where we can basically duplicate the box we’ve
already created, so that will save us some time and some extra steps. So I’m just going to click on this button
that says duplicate this action box. And here we see a message at the top that
says a duplicate of this action box has been created, and you can edit it here, and there’s
a link. So I’m going to click on this link here to
edit the duplicate. And here we see there’s a copy of the first
box that we created. So the good news is that we don’t need to
really adjust any of the settings. They’ve all been copied from the previous
box, so I’ll leave them all here as-is. And the only thing I want to add to this new
box is I want to add a main heading title. So I’m going to add my heading here, “Like
this content? Sign up for free updates.” That way anyone who sees the opt-in form underneath
the blog post will know what the signup form is for. So I just added my new heading, then I’m
going to scroll up here and I’m going to click on update. Now just to be clear what this is, I’m going
to put a note here, I’m going to change the title, and I’m going to put sign up,
and I’m going to put (blog post). That way I’ll know for my own reference what
form this form is for. So I just kind of gave myself a note here,
blog post, and I’m going to click on update to update the title. Now, when I go back to my site to visit my
site, and I click on Blog to visit my different blog posts, and I click on the previous post
we were looking at, the seaweed post, I’m going to click on that, we see now that the
first box is being displayed. To change that I want to edit the post by
clicking on edit post in the top toolbar, and then on the edit post screen, I’m going
to scroll down to where is says magic action box and I’m going to select an action box,
and this time when I click in the options box here, I get an extra option which is the
signup form that is specifically for blog posts. So I’m going to click on that, so this is
the form I want displayed underneath the blog post. Then I’m going to scroll up and click update
to update this post. Now when I go to view the post by clicking
on view post, and when I scroll down, now we see that there’s a really good title here
that lets everyone know what this signup for is all about. So that is how you add an opt-in form on your
blog post which can also provide a really good call to action and help you to capture
leads directly on your blog post. Okay so our website looks good so far; the
only other thing that I want to point out here is that we see in the URL, that currently
the permalinks, the URL here, this is called a permalink, we see that is just has a number. When we click on any other page here, we see
that there’s a page ID. That’s not really the best way to display
our URLs for our website, both for search engines and for people. So let’s go ahead and change our permalinks
before we turn our site on. So to change our permalinks, I’m going to
click on dashboard once again, then I’m going to scroll down to where it says settings,
and I’m going to click on this link here that says permalinks. We’ll see by default, the default permalinks
settings when you install WordPress is this question mark followed by p and then an ID
number. Once again that’s not the most search engine
friendly or people friendly kind of way to display your links, so let’s go ahead and
choose some more custom permalinks that makes a little bit more sense. So I’m going to choose this one that says
post name. So then I’ll click on save changes to save
the changes. Now when we go up to my site by clicking on
visit site, and when we click on the about page for example, now we see that the permalinks
no longer has a random ID number, it now has an actual word. This is a lot easier for search engines to
read, and it’s a lot easier for pretty much everyone out there to read as well. So you notice once again when we click on
blog this time as well, we have actual words in the URL structure instead of having an
ID number. So we have a few more house keeping tasks
to take care of before we launch the site. Number one, we want to include a call to action
here directly on the homepage, so that anyone who visits can easily contact you directly
from the home page. Number two we want to add the same call to
action here on the about page, so that right underneath this text, there’s a call to action. The other thing we want to add is we want
to add those simple social icons which we have already added on the sidebar of the website,
we want to make sure those also show up in the footer of the website down here as well. Lastly, we want to add a video to the Video
Services page. So let’s begin by adding the call to action
here, right under this text on the about page. To do that, we want to go up to the top here
on the toolbar and click on Edit Page to edit the page. Then we’re going to scroll down, right below
the text here, and I’m going to place the cursor where I want to add this call to action. Then I’m going to add a message that says
“for more info, please send me a message.” Now we want to make this a hypertext link,
so that when anyone sees this, there will be a link that they can click on to go directly
to the contact page. So to create a link you want to highlight
this sentence right here and then I’m going to scroll up to this top row here on the kitchen
sink in this window here. And you see that there’s a chain. When I hover over that, it says insert/edit
link, so I’m going to click on this icon here. And then you see that it says “enter the destination
URL”. We also see here that is says “Or link to
existing content.” Now we already have the contact page created,
so that is existing content, and that’s what we want to do. So I’m just going to click on this right here
where it says “or link to existing content” and when I do that, you’ll see that all
of my previous posts and pages now show up below in this box. So I want to find the page called contact
which we see right here, I’m going to click this right here, I’m going to click Contact. And you see that automatically WordPress will
fill in the URL and the title of the page. So that looks like it’s good to go, so I’m
going to go ahead and I’m going to add link to add this link. Once the link has been added, the next step
I want to do is I want to make this line a little bit larger than the regular paragraph
formatting. So I’m going to highlight the link and then
up above here, in the formatting box, I’m going to click on paragraph and I’m going
to select Heading 5, to create a heading 5 format for this sentence. That way it’ll stand out from the rest of
the text. Then I’m going to click on update to update
the page. And once the page is updated we can view the
page by clicking on view page. Okay so here is the link, we see that it’s
in orange, so that’s a hyperlink, and also it’s a little bit larger with the h5 tag,
so that’s good. Now when anyone clicks on this now, it will
go directly to the contact page. So that is how you create a link in WordPress. Now the next step is, we want to add the same
call of action right here with this message to the homepage. So a simple way to do that since the code
has already been created, is to grab this particular sentence on the about page and
simply paste it on the homepage. So to do that I’m going to click on edit
page, and here we see we’re on the about page. Now we’ve been looking at the visual view,
but this time I want to click on the text view because I actually want to see the code
that generated that hyperlink. So we see here, there is an h5 tag, that is
the h5 tag that I added to increase the size of the sentence, and here we see there is
a closing h5 tag as well. So everything in the middle of that starting
withhere, this is the code that we want to add to the WordPress
website’s homepage. So I’m selecting everything in between my
two h5 brackets. Then I’m going to copy it, and I’m going
to go up go to the right hand side, hover over my name, and right where it says edit
my profile, I’m going to click on Edit My Profile. Here we are on the Profile Settings page,
I’m going to scroll down. And here is the bio info that is featured
on the homepage of the website. So I’m just going to grab that and move this
box down a little bit and then right after the last sentence, I’m going to paste the
code that I just grabbed from the about page. So we can see I just pasted it here. It starts once again with
right here. So we can see here is the hyperlink code that
has been added to the sentence. And then we see in between these two pieces
of code, there is the sentence “for more info, please send me a message.” So, I’m going to just going to add that in
the box here, in the bio info box, and then at the bottom I’m going to click update
profile to update the profile. Now, when we go to the homepage by clicking
on visit site at the top, now we see here is the call to action, “for more info, please
send me a message”. Once again, when you click on this link, it
will go directly to the contact page. Okay, so housekeeping task number one has
been checked off. The next thing is we want to add those social
icons to the footer down here. So to do that, we want to go up to the dashboard,
and actually, we can bypass the dashboard and go directly to widgets. So right at the top I’m going to hover over
the website name and click on widgets, and then here we see on the right hand side, we’ve
already added our primary sidebar widgets, but we have this second one called subsidiary
which says this is a widget area that is loaded in the footer of the site. So we want to add the same thing that we added
here, these super social icons, we want to add that in the other widget area called the
Subsidiary widget area, the footer widget area. So one thing I want to do is I want to grab
this color code I used previously, this orange code, so I’m going to highlight that and copy
it. And then I’ll just collapse this box right
here, then I’m going to go down to my simple social icons widget. I’m going to grab it and drag it up to the
subsidiary box and drop it in there. I’m going to give it a title the same as before,
Connect on the web, then I’m going to keep all the settings the same except for the background
color I’ll change to that orange that I just copied from the previous step, and I pastes
that in. I’m also going to paste the same color in
the background hover color. And here once again as we did before, we can
add our email URL. You want to start with mailto: and then put
your email address. Then, I’m going to scroll down, I’m going
to add my twitter once again. And again you want to make sure you start
with http and then I think I’ll put my youtube here as well. Once again you want to start with http://youtube.com
and then you want to add a foward slash and the name of your youtube account. Okay so now I’m going to click on save to
save all of these settings, and now when I go to the website by clicking on visit site
we should see those icons in the footer which we do right here. Okay, excellent. So the last thing that we want to do is that
we want to come up to the top and we want to add a video on the video services page. So I’m going to click on video services right
here. And I want to add the video right after all
of this text. So I’m going to click on edit page at the
top, then I’m going to scroll down right below the second paragraph. And to create a video or add a video to your
Wordpress website is really simple. All you need to do is go to YouTube or Vimeo,
you want to grab the URL, you want to highlight the URL and copy it, and then you can just
come back to your page and you want to paste the URL directly in the page like that. Then you just want to go ahead and click update
to update the page, and once the page is updated, you can view the page by clicking on the view
page link right here. So I’m going to click on view page, and here
we see the video that was just added. Now the good news about this theme is that
it is responsive, which means that it will look as good on a mobile tablet or on a mobile
smartphone as it does here on the desktop. So we see, for example, when I start to collapse
this, that the video player actually responds to the new size of the window. So that is really great it means that the
video will look just as good on a smartphone as it does here on the desktop. So that is how you add a video to your WordPress
website. So there you go. If you’ve made it this far, you’ve most likely
have successfully created a WordPress website that looks something like this. The last step that I just want to mention
before we actually launch the website, is how to keep the website maintained and secure
going forward. So to do that, let’s go ahead and click on
the dashboard once again- I want to point out an important page to updates. So here under the dashboard, there’s a link
here that says updates. When I click on that, you’ll come to the WordPress
updates page, where you can find out whether or not you have the latest version of WordPress,
your plugins, and your themes. Just as a side note, it’s really important
going forward with website security to make sure that you always do have the latest versions
of your WordPress plugins and themes. Be sure to check out this page from time to
time when you’re logging in to your site, and just keep an eye out for any of the updates
that will pop up in your toolbar up above. We don’t have any updates to do, we have the
latest version of everything, so we’re good to go. But just as a reference, going forward, this
is something to be aware of. The other thing I want to mention is related
to WordPress backups. You want to make sure that you are backing
up your WordPress website. I have another video on my YouTube channel
called WordPress Backup to Dropbox, where you can watch, step by step, how to create
backups automatically to your Dropbox account. So if you’re not yet scheduling your backups,
be sure to check out that video as well. Okay, so now we’re ready to launch our website. Let’s do that by deactivating the coming soon
page. To deactivate the coming soon page, you want
to click on plugins on the left hand side. And then we want to scroll down and we want
to click on deactivate where it says ThemeFuse Maintenance Mode. Okay so the coming soon plugin has been deactivated,
so the website is now live on the web for everyone to see. Congratulations, thank you so much for watching
the video, I hope you enjoyed it and learned a lot about WordPress along the way. And of course, if you enjoyed the video, feel
free to leave me a comment below. You can also like or favorite the video, and
I will be coming out with more videos, so please do subscribe to the channel. If you have any friends who are looking to
learn WordPress, feel free to share the video with them as well. So thanks for joining, and I will see you
soon!

Only registered users can comment.

  1. hi i have some questions to ask you. can you please answer them.  my email is [email protected] i tried to  buzz you on fb and youtube to get information but i didnt get any answer . kindly update me. thanks

  2. Very helpful for me. Thank!   Let me ask you a question. Can WP do E-Commerce C2C (like Ebay/Amazon)? Thank in advance for your reply.

  3. Very nice and helpful video. Its helped me in creating my website end-to-end. You have done a great job done creating this video. If you get time please visit my website: www.anupam-photography.com and checkout my galleries. Thanks

  4. Hey, this video is really helpful and I am using it. Thank you for this. 
    However, please don't get me wrong but you are explaining every little tiny actions you are doing and this makes it quite frustrating for the watcher.
    For example you don't really need to explain the every square pixel that your cursor visits. Thank you again for your help. 

  5. Great tutorial!!! Thank you for this!
    I'm having one problem – all thumbnails from home page looks a bit blurry.
    Is there a way to fix this issue?

  6. Thank you so much for your generous and very informative video, very easy to follow. I have been able to implement most of the steps covered, except for the activation of the Carousel from the jetpack, all other jetpack functionalities have worked. To test it I deactivated and activated carousel again, however I am not able to get a carousel functionality up and running.  All I get is a full size photo from the gallery, but there is no carousel. Any suggestion what I could be doing wrong?

    Many thanks for your response

  7. Hi, I'm trying to log in to my new wordpress admin  and it's telling me it doesn't exist…I've received an email confirming it and I'm following you step by step. any ideas?

  8. hi, super helpful, i am really thankful! Just cant get the carousel to work, it is active but does not change the gallery i created. Any suggestions?

  9. Thank you for creating this tutorial!  I'm working my way through it but have hit a bit of a roadblock.  I'm trying to set multiple featured images on my site (apx. 1 hr. and 18 minutes into the video) but when I navigate between the images, it crops them so that they're the same dimensions, even though I set the dimensions differently.  Do you know how I can change this so it does not crop my featured images? 

  10. Halo! This video is very helpful 🙂 Thank you for posting it! I am wondering is there any way to change the font type? 

  11. Thanks for your video tutorial..Realy I like this. So, I can to build my online portfolio.
    One again many thanks.

  12. Thanks for the tutorial! I need some help though. When I click on "theme settings" (theme: "Hatch"), the following error message is given: "Cannot load theme-settings".
    It's not only in this theme, it's in every theme i tried. To solve the problem i've deleted every plugin but still no cigar. WordPress version 3.9.2 – Theme: Hatch – No plugins installed. I've done some research about this, but can't find the solution. Do you know what to do? Much appreciated! Greetz! Phil.

  13. Hi Katrina, this seems like a great video but I do have a combination question. Can the main photo be made larger and can a slider be added to it while maintaining a responsive website?

  14. I realize I need to make pages to make a tiled gallery, at least it does not work in my post right now. anyway, i want to link the post fromt eh front page to different galleries like event, wedding etc., but I am not aware how to do this.

    1. Can I make tiled mozaic galleries in a post?
    2. Can I make the front page posts link to a page when pressed?

    Thanks a bunch!

  15. Useful Tutorial. Can you make a video series on creating a similar version of this website http://www.ashleighsigns.co.uk/ which is more of a gallery in every page.

  16. Thanks so much for putting this out there!  However, when I take the step of going from the Quick Install page to the WP admin page I am taken to a page that has "sponsored listings."  What have I done wrong? I don't see the same page that you have on your video.  Thanks again!

  17. Great video! 🙂 I tried signing up to 77webstudio. I haven't received the email confirmation yet. I've checked all my email tabs. Nothing. Can you advise?

  18. Amazing, I was not looking for this tutorial, but I found that Hatch was what I needed, and looked for a tutorial. And here it was… again! Couple of weeks ago you also helped me out with 20 14. The result was greatly appreciated, and hopefully helped sway some parlementairians in my country. Keep up the good work! Thanks a lot 🙂

  19. Great video Katrinah!! As a layman in this area, this kind of instruction is exactly what I needed to build my own photography website. There is though one thing I would like to ask you. My current WP 4.2.2 with curent Hatch doesn't seem to be able to communicate with current Jetpack 3.5.3!! Unfortunately, as result Carousel doesn't work 🙁  Problem also exist when all other plugins are deactivated, so no plugins conflict. Though Jetplack does work with Twenty Twelve!! It seems a conflict with the theme Hatch!
    Is this a known issue? Do you have an alternative solution? I hope to hear from you soon.

  20. Hi katrinah,
    WordPress still looks great but can we make aaa gallery whose pictures are displayed randomly?like the the videos on youtube that appear randomly with each visit a different displayed set.
    Thanks katrinah for your charm and enthusiasm.

  21. As you made 12 latest post to show on front page(home page), which is appearing in grid view. How can i make those latest post to show on slider when i see the page in mobile view.?

Leave a Reply

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