Sydney: How To Create A WordPress Website 2016

Sydney: How To Create A WordPress Website 2016


Hi everyone. I’m Katrinah and in this video,
I’m going to go over how to create a beautiful WordPress website for your yoga business or
your wellness business. The good news is is that the website we’re going to be creating in
this video is good for any kind of business but I’m specifically going to be creating
a website for a yoga business. Before we begin though, I want to give a quick update on what’s
been going on in my world since I posted my last video on the Periscope app, the live
broadcasting app developed by Twitter and if you watched that video, you may recall
that I was a little bit nervous to get started with a live broadcasting app because all the
bloopers are in the video and all that good stuff. But anyway, I have to say there’s nothing
like expanding your comfort zone by simply jumping in the water and doing something a
lot. So, as a little nugget of inspiration in this video, if there’s anything that’s
kind of outside of your comfort zone that you’re trying to overcome, I encourage you
to just dive in and do whatever it is a lot. That’s a really good way to expand your comfort
zone and to overcome whatever fear or anxiety that you may have about something. So anyway,
that’s my little token of inspiration I hope from my own personal experience and if you’d
like to join on Periscope, I would love to see you there. You can find me @katrinah on
Periscope and we can talk about all these webs stuff in a live broadcasting format.
So, I have been going over some of the questions that you’ve submitted on my website so thank
you so much everyone for submitting those questions. I’ll be posting those videos if
you didn’t catch the live broadcast so I’ll be posting them shortly on YouTube so stay
tuned for answers to your questions. I’m going to try and answer as many of them as I can.
And the other update to what’s been going on in my world since my last YouTube post
is I’ve released a new website. It’s called katrinahyoga.com and on that website, I’m
going to be sharing all the stuff I’m learning about yoga and stand up paddleboard yoga because
those are two of the things I love to do outside in addition to all this fun web stuff.
So if you’re interested in yoga or stand up paddle board yoga, please feel free to join
me on my other website as well at katrinahyoga.com. I also have an Instagram, same name – @katrinahyoga
and I just started a site YouTube channel as well. It’s going to be a fun YouTube really.
But I’m going to, again, just be posting stuff about yoga, stand up paddle board yoga. So
if you’re interested, please join me at katrinahyoga.com. So, without further ado, let’s get started
in building this awesome WordPress for our yoga business or our wellness business using
the free WordPress website theme called Sydney. So let’s take a quick tour of the business
website we’re going to be creating in step by step from scratch in this video using the
free WordPress website theme called Sydney which is available in the WordPress theme
library. At the top, you have your website logo or your title then we’ll have our menu
navigation items right here in the top right hand corner. Then we’ll have our title, subtitle
and a call to action which leads to an internal page on the website. And note that here, I
have a static image on the homepage but you can also have a revolving slider if you prefer.
So the cool thing about this unique theme is there’s lots of customizations especially
related to adding Google fonts really easily and also different styles that you can use
for your homepage. In this demo, I’m going to have a static image however, so I’ll show
you both ways how to set up the homepage either with a slider or with simply a static image.
Underneath the image then we’ll move in to the various sections on our homepage starting
with the mission statement so than when your visitors come to your site, they know really
clearly, really easily and fast what your whole website is about. Underneath the mission
then we’re going to add our services so it’s clear what you’re offering on your website.
We’re going to add a video to bring to life our website with a video and then, we’ll have
our testimonials section, our latest on the blog section and then finally at the bottom,
we’ll have our footer section where we’ll add an email opt–in form so you can start
capturing leads directly from within your website. And we’ll also add our social network
icons so anyone who visits can easily connect connect with you on the social web. So that is the
homepage right here. To take a look at some of the internal pages,
I’m going to click on the Classes page and of course, this is the page where you can
outline all the different services or products that you’re offering on your website. Next
stop – we have our Blog Archive page where you can start driving traffic to your website
through your blogs which is always a good idea. Note that on the Blog Archive page,
we also have our email opt–in form so you can start capturing leads on the sidebar of
your site as well. We have a search box and our recent post so this is all customizable
content and I’ll show you how to customize it in this video.
Next up, we have our About page. This is one of the most important pages on your website
because it’s one of the most visited pages. Everyone wants to know who you are, what you’re
about and what they can expect from your website. So I’ll show you how to add an About page
here on this website. And last but not least, we’ll have a Contact page so anyone can fill
out a form and easily connect with you directly from within your website.
So this is where we are headed toward in this video. We’re going to be creating this awesome
business WordPress website using the free WordPress business theme called Sydney. Let’s
get started. So to get started, how much is this website
going to cost? Well, we need several things. Number one, we need a domain name and we need
web hosting. In this video, I’m going to be using Hostgator for both the domain name and
the web hosting. And I’m going to be using a special coupon code at Hostgator to get
an extra amount off of my order. So if you’d like to go with Hostgator, feel free to use
either one of these coupons to get an extra discount on your order as well.
The best coupon to use if you want to sign up for six months or more of web hosting is
wpcoupon25 and if you prefer to go month to month with your web hosting, the best coupon
to use is 1monthbonus. I do want to note I do receive a small referral from Hostgator
when you use either of my coupons so thank you so much in advance for your support in
helping me to continue to create these free WordPress training videos.
Once we have the domain name and the web hosting, next up we need a theme and in this video,
we’re going to be using the free WordPress business theme called Sydney. So, I will show
you where to get that and how to set that up in this video. And once we have a theme,
the next thing we’ll need is some time to watch the video and build up the website.
So I’m expecting that the video should take roughly about two hours so please set aside
at least two hours to watch the video. Okay. So once we have all these things, the
total to get started with this website is less than 25 dollars. And again, that’s using
either coupon code wpcoupon25 or coupon code 1monthbonus. And again, that’s at Hostgator.com.
Okay. So what are the steps to build up this website? Number one – we need to get a domain
name and the web hosting. Step two – we need to install WordPress and step three – we
need to build out the website. So let’s take care of step number one; getting the domain
name and the web hosting by heading over to Hostgator.com.
Here in Hostgator.com, to sign up for web hosting, you’ll see that right underneath
this Powerful Web Hosting section, there’s a big yellow button that says, “Get Started
Now!” So I’m going to click on that and that will bring us to the various plans offered
by Hostgator. So when I scroll to the bottom here, you can see the three different plans.
There’s a Hatchling Plan, Baby Plan and a Business Plan. If you’re just getting started
with your website, most likely you could either use the Hatchling Plan or the Baby Plan.
The main difference between these two is that with the Hatchling Plan, you can only host
one single domain; whereas with the Baby Plan, you can host an unlimited number of domains.
I usually go with the Baby Plan. This is the one that I’m currently using because I have
a number of different website domains. But if you only have one domain, most likely you
can just use the Hatchling Plan. I’m going to go with the Baby Plan though because that
is the best value and that’s one I’m currently using so I’m just going to click on this button
here that says, “Sign Up Now!” under the Baby Plan.
At the top, you can either register new domain or if you already have a domain, you can click
on this tab. I’m going to register a new domain by just putting something super random in
this box and then when I got to scroll down, we’ll see that of course it’s available because
this domain is super random but we’re just going to go with that for the sake or purpose
of this demo. So once you have your domain name entered then you just want to scroll
down, you want to choose which hosting plan that you’d like. Again, I chose the Baby Plan
but if you only have one single domain, you can go with the Hatchling Plan and save some
money so with the Baby Plan. Next up, we can choose what kind of billing
cycle we want. So the more months so you sign up for, the more of a discount you’ll
get. So I’ll show you a couple of different ones. When I click on six months at the time
then you want to add your username and a security pin and then scroll down. You want to add
your billing info right here. Moving forward, we have additional services and these are
checked by default; however, they’re optional. You don’t need to get them so I’m going to
unselect these for the moment; unselect all those.
I’m going to come down and here where it says, “Enter a Coupon Code,” by default, you get
this ‘snappy’ coupon code. We can see here’s the total right here, 70 dollars. But I have
a better coupon for you if you’d like to save some money and who doesn’t want to do that.
So if you put in WPCOUPON25 and then validate it, you’ll see it will go from 70 dollars
to 54 dollars. So you’ll save quite a bit of money when you use coupon code WPCOUPON25.
Now if you’d like to sign up for only one month of web hosting at a time then you can
just change the billing cycle here to one month and then there’s another coupon that
would actually be better if you’re only signing up for one month at a time. And that is coupon
code 1monthbonus. So when I add 1monthbonus in here and click on validate then we’ll see
it drops to about 13 dollars. So either way, if you want to use 1monthbonus or the other
coupon, WPCOUPON25, you can definitely save some money on your order for web hosting and
your domain name. Now, I want to circle back because we go up
here, these default additional services, there’s one specifically I want to mention and that’s
the privacy protection for roughly about 10 dollars a year. So this is really important.
I add this to all of my website domains because essentially, what this does is it keeps your
private info off the internet. For example, when you sign up for web hosting
at any kind of web hosting provider, there’s a database and people kind find out things
like the name of the person who owns the website, the email address, the phone number and the
address. So I like to keep all of my private information private; not in a public domain,
public database on the web so I always invest in this privacy protection for 10 dollars
a year. So I’m just going to click on that. That one’s really important.
So now, we scroll down to the bottom to review the details of our order, we can see that
our total to get started with this website with privacy domain protection is less than
25 dollars. So once you review your order details here then you just want to scroll
down, click on this agree to terms of service box right there and then you want to click
on the Checkout Now! button to check out. So once you click on create your account,
you’ll get this page which will thank you for your order and will tell you to go check
your email for information related to logging in to your web hosting account. So I’m going
to go 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 it 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. Right below that, you’ll see that there’s
a link for your control panel with your username and a temporary password. So I’m going to
copy the temporary password here and to log in to 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 will be needing this information as well as the link to the control panel to log in
to your Hostgator web hosting account. So I’m going to click on this link here and then
here is my username; you want to type in your username here that was found in the email
and then you want to add your password right here as well.
Once you have that set up, you want to click on Log in to log in to the control panel of
your web hosting account. So here we are in the control panel of our Hostgator account.
To install WordPress which is step number two, we need to scroll down to the bottom
and here where it says Software and Services, we want to click on this button here that
says Quick Install. Once we click on Quick Install then we want to go to the left–hand
side and here where it says WordPress, we want to click on WordPress.
Once we click on WordPress then we’ll see this Install WordPress For Free section and
then we want to click on this button that says Install WordPress. Here, we want to fill
up the form to get started with our install so you just want to choose which website you
need right here. And once you filled out the form then you can click on this button here
to install WordPress. Once your WordPress installation is complete, you’ll get a message
at the top here that says, “Your install is complete. Click here to view your notifications,”
and you can also view your credentials. So, I’m just going to click on this little
caret here to view my credentials and here we can see I can go directly to the admin
area by clicking on this link here and here’s my username and my password. So you just want
to copy your password, highlight and copy it, click on this link and then you can log
in to your new WordPress website. So here, we’re on the dashboard. This is the
first thing you’ll see when you log in to your WordPress website and when you first
install WordPress, you’ll also see this message at the top that says, ” Welcome to WordPress!”
with a number of links to get you started. So, I’m going to be going over each of these
things within this video so I’m not going to look at these now; instead, I’m just going
to dismiss this message by clicking on this X right here at the top that says, “Dismiss”
Here we’ll see a number of different sections that you can, at a glance, see what is going
on within your website. We have At a Glance, 1 Post; that’s what comes with your WordPress
installation. Activity, your Quick Draft and news and you can move any of these around
if you’d like so kind of like reorder them whatever works best for you; whatever view
you would like to see. Also note that at the top, we have this Screen
Options tab which when I click on it, if you want to see that Welcome message once again,
you can do so by simply clicking on this X. Or if you’d like to just turn off any of these
different sections, you can also do so by simply unchecking each of the boxes and one
by one, they will disappear from your dashboard. So, I’m going to leave At a Glance, Activity
and Quick Draft up; I’ll leave the WordPress News as well. I’m just going to close this
tab by clicking on Screen Options. Okay. So now, let’s take a look at what our
website looks like right when we first install WordPress. So to visit your site, you’re going
to go up to the top left–hand corner, hover over your website name and click on Visit
Site. And here we see wallah, this is what our website looks like when we first install
WordPress using the 2015 theme. It actually looks really nice and clean just to get started
and I do have a video on this theme if you’d like to use the 2015 theme. But in this video,
I should say we’re going to be using a different theme so that when we’re done, our website
will look like this instead. So this is our end result that we’re headed
toward where we can see there’s quite a bit of work to do but we’re going to cover all
of that in this video so by the time we’re done this video, our website is going to look
just like this. Okay. So step number one, going back to our
dashboard, the first thing that we need to do is we need to install the new theme called
Sydney. So I’m going to go to Appearance, hover over Appearance and click on Themes.
Here we can see 2015 theme is the theme that is currently installed. To add a new theme,
you’re going to click on this link right here that says, “Add New”; here we’ll see the WordPress
library of themes and you can choose any of these themes that you’d like.
We’re going to be using the Sydney theme though so in the top search box right here, I’m going
to do a search for Sydney. And here it is on the left–hand side, “Looking for a Business
Theme?” Sounds good. We can check out the details and preview it by clicking on Details
and Preview. Here we can see it has five stars based on 47 ratings and you can read a little
bit of the content right here. So I’m just going to install this by clicking on Install
or if you want to go back, you can do so by clicking on Install right here. So I’m going
to click on Install to install the Sydney theme.
Okay. So once the theme has been successfully installed then I’m going to activate it by
clicking on Activate link right there and okay, now this theme has been activated. Awesome.
Now at the top, it says, “This theme recommends the following plugins: Page Builder by SiteOrigin
and Types – Custom Fields and Custom Post Types Management” so all we need to do is
click on this link right here that says, “Begin Installing plugins,”.
Okay. Install the required plugins. Now we need to check them so I’m going to click on
this button here to select both of these different plugins; then where it says, “Bulk Actions”
I’m going to click on that and then click on the Install link right there. I’m going
to finish this by clicking on Apply. Okay, so once the installations have been completed,
you’ll see this note right here letting you know that those installations have been completed.
Next, we’re going to return to the Required Plugins Installer by clicking on this link
down below. We’ve got one more thing to do. Now we need to do actually activate these
plugins because we can see here that the status is Installed But Not Activated. So I’m going
to select them one more time, click on Bulk Actions and now, we see there’s another link
here that says, “Activate” so I’m going to click on Activate then click on Apply to complete
the installation and activation of these two essential plugins for this theme.
Okay. “The following plugins were activated successfully.” Awesome. So once these two
plugins have been installed and activated, the next step is we need to go back to our
dashboard by clicking on Dashboard here on the left–hand side. So here I am on my dashboard.
Whenever I’m getting a new website up and running, I always like to create a child theme
so that I can create customizations to my website and not worry that future updates
to the parent theme will override any of my customizations.
So for example, when I go down to Appearance, hover over Appearance and click on Themes.
Here we see that the Sydney theme which we’ve just installed and activate is now the active
theme which is exactly what we want. However, what would be better would be to have a child
theme of the Sydney theme so that we can make changes to the child theme and then when the
developer of the Sydney theme comes out with updates, we can safely update the Sydney theme
and to have the peace of mind that goes along with knowing that our changes, our customizations
will not be overwritten by developer updates to the main theme.
So next step, we’re going to add a child theme to our WordPress website using the child themify
plugins so I’m going to come to the bottom, click on Plugins, click on Add New then here
on the right–hand side where it says, “Search for Plugins” we can search for this in the
WordPress plugin library. Here we go. Child Themify. I’ve used this many times. So here
we have the child themify plugin on the left–hand side. As it notes, it has 10,000 active installs
with close to a five star out of five star rating which is awesome.
So I’m going to click on Install now to install the Child Themify plugin. Once the plugin
has been successfully installed, I’m going to activate it by clicking on Activate Plugin.
And then, we’re going to go back to our themes. Here we see that the plugin has been activated
and it’s listed down below in our Plugins list. So, we’re going to go to our theme once
again; hover over Appearance and click on Themes.
Now when I click on Theme Details for the Sydney theme, here on the bottom right–hand
corner or bottom row right here, it says, “Create a child theme” So I’m going to click
on this button here and then I’m going to give my new child theme a name. I’ll call
it Child–Sydney, all one word with a dash in the middle. You can call it whatever you’d
like simply child if you like then I’m just going to click on Let’s Go to create the child
theme. Okay. The child theme was created successfully.
Super. So now, I’m going to click on Themes to check it out; Appearance and then Themes.
And now, on the right–hand side, we see we have a duplicate of the Sydney theme right
here but this one says, “Child–Sydney” So this is a child theme that we want to activate
instead so I’m going to click on Activate to activate our new child theme.
Okay. Wallah. It’s that simple. We’ve just created a child theme so now we can safely
make any customizations to this theme. So moving forward, next stop I’m going to
make some general changes to our settings down below. So here in the left–hand side
bar, I’m going to scroll down to Settings, hover over Settings and click on General.
Here at the top, you want to give your website a site title as well as a tagline so I’ve
added mine here – Katrinah Yoga, Outdoor Yoga for Everybody. So this will be a website
for my yoga business. So there you want to add your title and tagline then you want to
scroll to the bottom and click on Save Changes to save your changes.
Once the General Settings have been saved then on the left–hand side, we’re going
to go down each of these. Well, most of them at least. Click on Writing. There are few
changes that I want to make here starting with the Formatting at the top. If you’d like
to convert the emoticons to graphics, you could do so by just leaving this checked.
Here where it says, “WordPress should correct invalidly nested XHTML automatically,” that
is really a lot of geek streak right there and we don’t really need to go over what that
is; however, I do want to check this box because it sounds like a really good idea that WordPress
corrects anything that’s invalid so I’m going to click on that, go to the bottom and click
on Save. The other thing I want to note here on this
page now that I see it is that here, this Update Services box right here will notify
Google and all the other different services when your site is updated. So it’s a good
thing to click on this link here that says, “Update Services” then you want to go to the
WordPress.org Codex here, just scroll to the bottom. I like to highlight all of these things,
all these ping services, highlight them and copy them then I’m going to go back to my
website and then here where it says Update Services, I’m going to paste in all of those
services down below. Here we can see them when I open the box a
little bit bigger. Here it says, “When you publish a new blog post, WordPress automatically
notifies the following sites about your updates. So this is really helpful to have your content
get viewed by as many places as possible. So I’m going to add all those in here in this
box and click on Saves Changes to save my changes.
Next, clicking on Reading here on the right–hand side, the Reading settings. Here on Reading
settings, they just want to point out one really important option that we have at the
bottom called Search Engine Visibility. Here we can check this box to discourage search
engines from indexing this site. And usually when I’m creating a website behind the scenes,
website is not yet online, I usually do start by clicking on this box and then clicking
on Save Changes. However, if you’re concerned that you may
forget later down the road to come back here and uncheck this then you can just leave it
unchecked and click on Save Changes. So it’s really up to you but mainly, when your website
is online, you definitely want to make sure that this is not checked because if it’s not
checked then search engines will not index your site. So I guess just to be safe, I’ll
leave it unchecked for now and click on Save Changes.
The other thing that I really want to point out here in the Settings panel, I’m going
to jump down to Permalinks. This is something we definitely should check and change. So
usually by default, when you first install WordPress, it’s on the default Permalink settings
which gives us really funny URL with a number and it doesn’t really make sense to people
or search engines so I always come to the Permalink settings when I’m starting to create
a website. The first thing that I do is I click on the
Post name here, you can choose any of the other ones but I prefer Post name which will
give us a more descriptive URL which search engines will understand what the page is about
as well as your audience. So I’m going to click on Post name, scroll to the bottom and
click on Save Changes. Once the Permalink settings have been set, next stop, we can
begin the fun part which is setting up our website using the Sydney theme and making
our own customizations. So, let’s take a quick look at what the theme
looks like right out of the box when we first install it. To do that, I’m going to go up
to the top, hover over my website name and click on Visit Site. Here we can see what
the theme looks like when we first install it. Notice that there’s default image that
rotates, a title and then the call to action. Below this section, there is the blog archive
page. So of course, we’re going to be adding a number of different homepage sections here
that are going to look something like this, jumping over to our finished site.
Over here, we’d see I have my own custom image and then we have these various sections here.
So let’s go ahead and make the first change to the site to get this started which is we
need to set the front page as well as our blog page so that the blog archives are not
being displayed down below. To do that, I’m going to go back to the dashboard and the
first thing that I want to do is I want to go to Pages, hover over Pages and click on
Add New. You can also create a new page by going up
to the top, hovering over + New on the top toolbar and also clicking on Page right here.
Here for the Add New Page, the page that I want to create is the homepage so I’ll just
call it Home. And then on the right–hand side where it says Page Attributes, I’m going
to click on this and I want to use the Front Page template so I’m going to click on Front
Page and then I want to turn off any comments just in case those are there.
So, I’m going to click on Screen Options, click on Discussion; this will display the
Discussion options then I click on Screen Options to close that box, scroll to the bottom
and here, I’m going to uncheck these to disable comments from the front page. I’m just going
to click on Publish to publish the homepage. Once the homepage has been created, next stop,
we need to create the blog page. So just like we did with the homepage, I’m
going to click on this Add New button once again to create a new page and this time,
I’m going to be creating the blog page. I’ll just call it Blog. On the right–hand side
for Page Attributes, this time I’m going to leave it as the Default Template right here.
So I might come back to this later but for the moment, I’ll call it the Default Template.
And also for this one, I do not want comment showing up on the blog archive page. We will
have comments on the actual individual blog post themselves but for the archive page,
I prefer not to have any comments so I uncheck those. I’m going to click on Publish to publish
the blog page. Now that we have these two pages created,
we need to set them within the Theme settings so I’m going to go to Settings then I’m going
to click on Reading. And here where it says the Front page displays, I’m going to click
on static page right here and then for the front page, I’m going to set the homepage
as the front page. And for the post, I’m going to set the blog page as the post page. I’m
going to scroll to the bottom and click on Save Changes to save my changes.
So now when we go to the homepage by going up to the top and clicking on Visit Site,
now we’ll see that all we have is the image and we can see that that big white blog archive
section is no longer there so that looks really good. Actually, if we add a menu, you could
almost just have this as your main homepage but we’re going to be adding those various
sections; as noted, all these different sections down here below.
Next step – let’s create some pages so we can create a menu for our website. So going
back to the dashboard, I’m going to click the Back button. Here on the Dashboard, I’m
just going to click on that. Here on the Dashboard, I’m going to create three different pages,
an About page, a Contact page and a Services page. So as we did in the previous step creating
the blog and the homepage, once again we can go up to the top, hover over + New and click
on Page. Or on the left–hand side, we can hover over Pages and click on Add New.
WordPress gives us a number of different ways to do exactly the same thing. Here on our
new page, we want to give our page a title so the first one I’ll do is the About page.
So just add About right there. Here in the white box, you can just add the content for
your About page. There’s three different tabs here. There’s a Visual tab, Text tab and a
Page Builder tab. I’ll go over the Page Builder a little bit later but right now, I just want
to focus on the Visual tab and the Text tab. The Visual tab is the what you see is what
you get view of WordPress and this is really helpful if you don’t know HTML or you just
simply don’t want to use it which I prefer just simply to work within the Visual tab
because this is just like a Word document; you can just add your text in here and then
you can use all these different icons to format it for you. So when I click on this icon at
the end, the Toolbar Toggle, note that it opens up another line of different options
for formatting. This is really helpful. The Text tab will be the behind the scenes
code that WordPress is generating to format your content. So here in the Visual tab, I’m
just going to add some content right in here for my About page. I also want to add an image
on this particular page so I’m going to place the cursor where I want the image to be displayed
then I’m going to click on Add Media. Next stop, here on the Insert Media screen,
we have our Upload Files tab as well as our Media Library tab. So we haven’t added any
images yet so we don’t have any images in our library yet; that’s okay. So what we need
to do is we need to upload some files. So I’m going to click on Upload Files then I’m
going to select the file. Here’s the folder that I need; here’s the image that I want,
this one right here. I’m just going to click on Open to open this image and upload it to
WordPress. Once it has been uploaded, you’ll see the
attachment details on the right–hand side; the dimensions, the title of the image as
well as a lot of metadata here. Now, it’s really important whenever you are adding image
to your WordPress website, you always want to make sure you give your image at least
a title and an alternative text. This is helpful both for people who are viewing your website
and if anything happens and they’re not able to see the image, at least they’ll know what
it’s about. And for anyone who is using text–to–speech software, they’ll also be able to know what
the image is about. Finally, Google and search engines in general
cannot really read what an image is about unless there is metadata to go along with
it. So for search engines, it’s important to have a title and alternative text as well.
Once you’ve added a title and alternative text, we can scroll to the bottom and here
we have the Attachment Display Settings. The alignment for this image, I want to have
this right align so I click on Right. I want to link this to nothing so I’m just going
to click on None and then we can choose a size of the image that we like. I want to
use a full size which is 300 pixels wide and 354 pixels tall. When we have all our settings
set the way we’d like, we can click on Insert into Page to insert the image into our page.
So now that we have the content ready to go, we need to look on the right–hand side at
the Page Attributes and this time, we want the template to be a Full Width page. Of course,
choose whatever kind of page you’d like but for the About page, I do not want a sidebar
so I prefer the Full Width so I will keep it as that; Full Width template. I’m going
to scroll to the bottom and once again, on my pages, I prefer not to have any conversation;
I like to keep conversation on the blog post but not on my static pages. So I’m going to
uncheck them here then I’m just going to go up to the top and click on Publish to publish
my new page. Once the About page has been created, next
stop, we can create our Services page. So once again, I’m going to click on Add New
to create a new page. And this page, I’m going to call Classes because I’m going to be offering
yoga classes so just title it Classes right here. Once you have the title set, as we did
previously, we can add our content in this white box. I’m just going to drop my content
in here and I’m going to format the titles by highlighting them and then I’m going to
click on Paragraph and instead, I’m going to give it a Heading 3 tag.
So that is how you format it. It’s really simple, really great with WordPress. You don’t
need to know any code. You can just use the what–you–see–is–what–you–get Visual
editor here and that will create the code for you. So once again, Header 3. And then,
just to show you the Text tab when I click on Text, here we can see the HTML that WordPress
is generating behind the scenes to format this particular title.
So if you’d like to learn HTML, this is a really easy way to go about familiarizing
yourself with HTML by simply formatting things here within the Visual tab and then hopping
over to the Text tab and seeing what WordPress does behind the scenes. I prefer to work within
the Visual tab so I’m going to go back to the Visual tab. And then once again, I want
to add an image at the bottom of the page so I’m going to place my cursor where I want
the image to be displayed. I’m going to go up to the top here and I’m
going to click on Add Media to add another image to my site. So, I’m going to click on
Upload Files, Select Files then I’m going to select the file that I want and click on
Open to upload the image to WordPress. As we did with the first image, I also want to
add a title and an alternative text to my image so that Google and search engines and
anyone who cannot read or see exactly what the image is, they will understand what this
image is. Once you’ve added a title and an alternative
text, we can scroll to the bottom and again, for the Attachment Display Settings, this
time, I want to center align this so I’m going to click on Center alignment; I want to link
it to nothing so I click on None and I want the Full Size which is 827 pixels wide and
827 pixels tall. I’m going to click on Insert into Page to insert this into the page. And
there we have it. On the right–hand side, because once again
this is our Classes page, similar to the About page, I do not want a sidebar so I’m going
to use the Full Width template and I also don’t want any comments on the page so I’m
going to disable them by unchecking them right here; go to the top and click on Publish to
publish my Services and Classes page. Last page that we want to create is our Contact
page. I’m going to click on Add New then I’ll call this Contact and we’re going to come
back to this a little bit later because we need to add a plugin for our Contact page.
So I’ll just create this right now as a placeholder and as we did with the other two pages, I
do not want a sidebar so I’ll click on Full Width. And I know for now at least, I don’t
want any comments either because this is going to be a Contact form. So I’ll uncheck this
two Discussion options right here, go to the top and click on Publish to publish the Contact
page. Again, we’re going to come back to this because
we don’t really have a form here yet but once we add that plugin a little bit later in the
video, we will update this page. So now that we have our three pages created,
the next step is we can create our menu for our navigation area on the top right–hand
side of our website. So to create a menu, we want to go to the left–hand side bar,
hover over Appearance and click on Menus. And here on the Menus page, we can create
a new menu by either clicking on this link here that says Create a New Menu or we can
click on this blue button that says Create a Menu.
I’m going to just call this Menu, take out the number one then I’ll click on Create Menu
to create my menu. And once the menu has been created then we need to add different pages
to our menu. So all the pages are here on the left–hand side and you may see the pages
as well populated in this structure here. I want to remove the homepage so I’m going
to click on this caret to drop it down and click on Remove and I don’t know why it’s
showing up twice but I’ll remove it there as well.
Okay. I have my four pages. If you have additional pages you’d like to add, you can simply click
on View All or Most Recent, either one and then you can click on the page you want to
add and then click on this button here that says Add to Menu. So, I want to remove the
Home button though, the Home menu link because the logo will be its own return to the homepage.
So I don’t think we need to have this additional one.
Of course, if you’d like it, go ahead and keep it here as well. It never hurts to have
it twice but for simplicity, I’m going to remove it and then I’m going to order this
by simple dragging them around where I want them to be displayed. So I’ll have Classes
first, Blog, About and then Contact. Then down below here where it says Menu Settings,
you want to make sure that you click on this link here to set the location to Primary Menu
then you can click on this button here that says Save Menu to save your menu.
Also note at the top, there’s this Manage Locations tab and when I click on that, here
we can see that the location that I just set in the previous panel can also be found here
as well. So we see Primary Menu and then here you can choose the menu that you’d like and
click on Save Changes. Now that we have our menu set, let’s go ahead
and take a look at it by going back to our website by going up to the top, hovering over
the website name and clicking on Visit Site. Here on our website, we can see our title
and tagline and on the right–hand side, here we have our navigation. Awesome.
Next step, we need to change this image to our own image as well as the title and the
call to action button. And I also want to add my logo here to replace the title and
the tagline right here. So going back to the Dashboard, first stop, we will change the
logo and then we’ll change the image. So going back to the Dashboard, I’m going to go down
to Appearance, hover over Appearance and click on Customize.
Here on the Customize page, this is where all the fun begins because this is where we
can change the images on our homepage and our internal pages. So first stop, we have
our General tab; I’m going to click on that. This is where you can add a favicon to your
website, a customized favicon. A favicon is, Wikipedia says, “It is a shortcut icon, a
website icon, it’s a file containing one or small icons most commonly 16 by 16 pixels
associated with a particular webpage. So this particular favicon will follow your
website all around the web. You’ll see it places like YouTube. For example, here we
see that I have my favicon which actually this is the default favicon that came with
my theme. So it looks like I have to customize this myself. But we see this little black
G, that’s a favicon. In order to change your favicon, you’re going to need to create one.
There’s lots of resources on the web that will show you and guide you in how to adding
a favicon to your website. So I’ll drop a couple links down below to
guide you. This one is really good – How to Add a Favicon to your Website. And then
there’s lots of different generators as you can see here – favicon.ico, favicon–generator.
There’s all kinds of generators. So I’m not going to go over that in this video but I
will drop some resources down below so you can check them out.
Once you have your favicon, you can go back to the Customize setting and you can upload
it by clicking on Select Image and uploading your favicon. Moving forward, I’m going to
go to the Site title, tagline and logo. Here when I open this, we have my title, my tagline
and I need to upload my logo. So I’m going to click on Select Image then I’m going to
click on Upload Files and Select Files and here is my logo, yoga–logo. I click on Open.
As we did in the previous two images, we need to make sure that we give our new image a
title and an alternative text. So once you’ve added the title and alternative text, go ahead
and click on Choose Image to choose your image then back on the Customizer panel, we need
to save our changes by clicking on this blue button at the top that says Save and Publish.
So once the changes have been saved, I’m going to close this panel here by clicking on this
caret and moving on to the Header area, this is where we can change the image on our homepage
and our internal page. So I’m going to click on Header area. At the top, we need to decide
what kind of header type we’d like. With the Sydney theme, we have a number of different
options which is really awesome. We have the front page header type; select the header
type for your front page. You can have a Full Screen slider with a call
to action, a title and a tagline or you can have simply an image. I’m going to click on
that to show you what that looks like. Just a static image. Or if you don’t want any image
or any slider at all, you can simply have no header with only the menu. So choose the
one that you’d like. In this video, I’m going to be creating a Full Screen slider so I’m
going to click on that. Moving on to the Site header type, here it
says, “Select the header type for all the pages except the front page. So for your internal
pages, you can also have the same things – either a slider, an image or no header. So for the
internal pages for this demo, I’m going to be including a static image so I’m going to
click on Image right here. And going to the demo, the one that’s already done, I’m going
to pop over there. This is what it’s going to look like. This is the internal page with
the static image and then of course, we go to the homepage and here we have the slider
with a call to action. So going back to our customized panel here
for the Site header type for internal pages, I’m going to choose Image. Go ahead and feel
free to add whatever you’d like then I’m going to click on Save Changes to save my changes
and I’m going to close this. So next, we want to go to the Header slider
so I’m going to open that. As a notes, you can add up to five images in the slider. Make
sure you select where to display your slider from the Header type section found above which
we’ve already done. You can also add a call to action button at the bottom of this settings
area right here. Also note that if you are using a slider,
you can set the speed. Personally, I don’t like all this movement happening. It’s a little
bit distracting but that’s just my personal preference so I’m going to make this slider
speed really slow so that almost it deactivates the slider. I’m going to make it like so many
seconds. But of course, if you prefer to keep the slider rolling as it is right here, maybe
the default is 4000 so you can leave it at 4000.
So once we set the slider the full slider speed, next stop, we can also set the text
slider speed. So by default, that’s 4000. I’m going to leave it as 4000. Note there
is a small little option here if you want to stop the text slider all together. You
can do so by clicking on this box here. I’m going to click on that because as mentioned,
I prefer not having a lot of movement on my page so I’m going to deactivate it by clicking
on this box. But of course feel free to choose whatever you would like.
Coming down here at the bottom, we want to give our first slide a title as well as a
subtitle so I’m going to pop in my title right there as well as the subtitle. So my title
is going to be Outdoor Yoga for Everybody and the subtitle will be Join us at the Beach
or At the Park for Daily Yoga. So once I have my title and subtitle, next step we need to
change the image itself. Before I do so though, I’m going to click on Save to save the changes
I’ve created so far. I want to change this image so I’m going to
click on this button here that says Change Image then I’m going to click on Upload Files
to upload my file and then Select Files. And then I’m going to select my files and upload
it to WordPress. So once the image has been uploaded, on the right–hand side, you’ll
have your attachment details and here we will add, of course, our title as well as our alternative
text. Also keep in mind that the best image dimensions for the slider are 1920 pixels
wide and 1080 pixels tall. So it’s important to make sure you have the dimensions right
so that it displays correctly within the slider. Once you’ve added the title and the alternative
text, you can click on Choose Image to choose the image then we’ll see the image that we’ve
just uploaded to our WordPress website being displayed on the right–hand side. To finish
this process, of course, we need to save it by clicking on the Save and Publish button
right here so I’m going to click on that. If you’d like to add another image to this
image slider area as well as add a second title and subtitle, you can do so right here
where it says Second Slide; we’re going to do the same process that we just did up above.
We’re going to add a second image, a title and a subtitle and then we’ll click on Save.
Because I don’t want too many images going on here, I’m going to use the same image that
I’ve already used for the first slide. But of course, if you want to have like a variety
of different images and a variety of titles and subtitles, you can customize those right
here. So I’m just going to change the image by clicking on Change Image then I’m going
to use the same image that we used for the first slider image so I’ll just choose it
and then click on Choose Image. I’m also going to have the same title and tagline.
Once you’ve added the image, a title and subtitle for your second slide, go ahead and click
on Save and Publish to save and publish your changes. So you can do this process as well
for the third slide. You see there’s a third slide here, a fourth slide as well as a fifth
slide. The important thing I want to note down below is here we have the call to action
button and as we can see here, the cool thing about this slider is that you have a call
to action button right on the homepage, front and center; so this is really an important
thing to take advantage of on your homepage. So I’m going to add a title for my call to
action button right there. So my call to action text is Learn More and then I’ve dropped the
URL which is my About page so that when someone clicks on this Learn More button, they’ll
go directly to my About page. They can learn more about what’s going on on my website.
Once again, I’m going to click on Save and Publish to save and publish my changes. So
once you’ve saved the changes to the header slider then we can close this section by clicking
on this link right here at this little caret and we can open the next section which is
the Header image section. So I’m going to click on this box right here,
this little triangle and at the top, it says, “While you can crop images to your liking
after adding the new image, your theme recommends a header size of 1920 pixels wide and 600
pixels tall. In my experience, it’s a lot better just to follow the instructions and
use the dimensions that they recommend that makes everything so much easier down the line.
So I recommend that you make your cropping and do all that outside of your website here
and then when you import it or upload it then you’ll upload exactly this dimensions, 1920
by 600. This particular header section is for the
internal pages of your website so this, of course, will not be on the homepage but it
will be on all of the internal pages that you select within the internal pages of your
website. So I’m going to click on Add New Image to add a new image then I’m going to
click on Upload Files and Select Files. I’m going to select the file that I need, the
yoga header right there and click on Open. Once the image has been uploaded to my site,
we’ll see down the right–hand side, I can add a title as well as an alternative text.
Note that the image dimension once again are 1920 by 600.
So then I’m just going to click on Select and Crop and then I’m not going to crop it
because it’s already been perfectly created to have the proper dimension, 1920 by 600.
So then, I’m just going to click on Skip Cropping and then here we will see on the left–hand
side, in the sidebar, now we’ll see the current header which is great. I’m just going to scroll
down. Everything looks good. If you want to cover or contain the background size, you
can do so right here. I’m going to leave it with the default of Cover. I’m going to leave
the Header height as 300 for the moment. Do I want to disable the overlay? Yes. I think
I’ll do that. This overlay is like a dark kind of color that kind of goes on top of
the image so if you’d like that look, go ahead and leave it disabled or unchecked. I am going
to check it though because I want to turn off the overlay that goes on top of this.
So you can experiment and see which way you would prefer. I’m going to check that to disable
it on my demo right here then I’m going to click on Save and Publish to save and publish
my changes. Once the changes have been saved and I’m just
going to go up to the top and close the Header Image section by clicking on this caret, this
diamond one more time. Last stop in this section, we have our Menu Style so I’m going to open
up this box. I’m going to leave the default to Sticky Menu and the Inline Menu. If you’d
like to center the menu and the logo, you can click on this button right here. If you
do not want the menu to stick at the top of the page when someone scrolls then you can
click on the static button right here. I prefer the Sticky Menu so the menu’s always
visible no matter where my viewer is on the page. So I’ll leave it like that and click
on Save right here. Actually, it looks like it’s already saved so we’re good to go. I’m
going to go back one page by clicking on this little caret right here, this arrow to go
back to the other settings within the Customize panel.
In this demo, those are the main changes we’re going to make within this Customize panel.
Of course, there’s more changes that you can make if you want to change the blog options,
the fonts, the footers, the colors. You can go and do so by just opening up each of these
different boxes and customizing each section. When we look at Blog options for example,
now I’m going to click on that. Here we see that we have the Classic layout. I’m going
to go with that – that’s the right–hand sidebar. If you’d like to change or customize
the content and the excerpts, you can do so. If you want to display a full content of your
post on the homepage, you can do so by clicking this. If you’d like to display the full content
of your post on all archives, you can do so by clicking this. Here we have the Excerpt
Length. 55 words or 55, I should say, letters. Then we have all these stuff down below. Do
you want to hide the post meta? Yes. I think I will hide the post meta actually. Hide the
post meta on singles? Sure. I’ll do that too. The post meta data refers to things like the
date that the post was published and the author tags and categories. If you don’t want that
extra info showing up on the archives or on the single blog posts, you can hide them by
clicking on these two buttons. I prefer to hide them because it keeps the
content a little bit more evergreen, a little bit more relevant. Sometimes when people see
that the date was like two years ago, they might think that the content is no longer
relevant. But a lot of times, the content still is relevant so I like to remove the
dates from my blog posts. So go ahead and do so if you’d like to do so as well by clicking
on these boxes. Or if you prefer to show the date and the author and the tags and the categories,
you can leave these unchecked. So that’s pretty much the only change I’m
going to make to this Blog options section then I’ll just click on Save and Publish to
save and publish my changes. I’ll close this and then note that if you’d like to change
the fonts, you can do so by clicking on this. Here you can add any kind of Google fonts
and you can see what kind of fonts you can add by going to Google.com/fonts. There’s
a little directions here at the top. Google fonts can be found here. Google.com/fonts.
If you need help with this Google font thing, you can see the documentation at this link
right here. Also, if you’d like to change the font sizes
of the titles, descriptions, any of the header sizes, you can do so by changing these sizes
here in this box, coming up to the top and clicking on Save and Publish. To look at a
few other things here in this Customize panel, we have the Footer section. If you’d like
to select the number of widget areas that you’d like to have display within the footer,
you can do so. I want two footer areas only so I am going to click on two then I’ll click
on Save and Publish. If you’d like to change the colors to match
your brand, you can do so by changing all the colors here. As you can see when I click
on this Select Color, it gives me this color wheel and I can just move it around and I
can choose whatever color works best with my brand. I’m going to keep a white background
color though so it’s really clean. So just keep it as white. Click on Save and Publish
to publish that change. Here you can just see all the other stuff that you can change
the color of. Moving on from colors then we have a Background
Image if you’d like to add that. There’s some Theme info so if you’d like to check out what
is going on in the pro version or premium version of the Sydney theme, you can click
on this link right here. Then we have Navigation. I prefer to deal
with Navigation within the Menu section on the Dashboard so I’ll show you that in just
a moment. But as it notes here, this theme supports one menu so select which menu you
would like to use. You can also edit your menu content on the menu screen in the Appearance
section and this is on the Dashboard. That’s how I like to adjust my own menu. But I just
want to point out that it’s also available if you’d like to change it here.
Next stop, we have our Widgets section so I’m going to open that up. In here, we can
add the widgets to our Footers section. I also prefer to deal with this on the Dashboard
so I’m going to circle back on this in just a moment. Going back to the last thing on
our list here, I’m going to click on Back. Going to the very bottom, here we have the
Static Front Page. We have already gone over this because we have set this as a static
page earlier in this video so that the front pages, the homepage and the post page is a
blog archive page. Once you’ve added all of your customizations,
just make sure that this says Saved. If it doesn’t, click on the Save and Publish box
then we can close this all out by clicking on this X right here to go back to the WordPress
Dashboard. So back on there, we pressed Dashboard, let’s
take a look at what our website looks like now that we’ve added our customizations to
the Customize panel. To check out the site, I’m going up to the top, hover over the website
name and click on Visit Site. Here we’ll see the homepage of our new WordPress website.
We have our logo at the top, our menu items here on the top right–hand side, the title,
our subtitle and our call to action. We have our slider image here on the homepage.
Now when I slide to the bottom or scroll down, we’ll see that we don’t have any of the homepage
sections yet nor do we have the footer section. So let’s start by adding the footer widgets
at the bottom to add the footer to our homepage and to the other pages throughout our website.
To add the footer widgets to the bottom of our site, we want to go back to the Dashboard
then we want to go down to Appearance, hover over Appearance and click on Widgets.
Here on the right–hand side, we’ll see a number of different widget areas. We have
the Sidebar widget area and this refers to the sidebar of the blog post page. So we will
adjust those in just a moment. Down below, we see the two Footer widgets that we’ve added.
Note that in the Customize panel, we selected a footer widget with only two widget areas.
If you’d like to have more than two widget areas then you would customize that by going
to the Customize link right here and clicking on the Footer and then you can add more widgets
to your footer. We have two widget areas. I’m just going to
open these up by clicking that right there. I’ll open this one up as well. In the second
Footer area, I want to add some social icons so I’m going to scroll to the bottom here
and find the widget related to the social icons. Now note on the left–hand side, we
have all these different widget areas and these are specifically related to our theme,
the Sydney theme and those our noted with Sydney right before the title of the widget.
So the one that I want is a social profile or social icons ones so here we see it is
right here, Sydney Social Profile – Display your social profile on your front page. So
I’m just going to drag this to the Footer 2 area and drop it right there. Note that
here, we can add a title if we’d like. I’m not going to leave a title. I’m going to leave
it blank. And then, we need to create a menu with our social links and then once that menu
is created, we can come here and we can select our social menu.
As it notes here, in order to display social icons in a widget, all you need to do is go
to Appearance>Menus, create a menu containing the links to your social profiles then come
back here and select it. So for the moment, I’m just going to leave this as a placeholder,
click on Save then I’m going to go to the Menus area on the left–hand side. Here under
Appearance, I’m going to go down to Menus and I’m going to create a new menu called
Social Media. So I’m going to click on Create a New Menu then I’ll give my menu a name then
I’m going to click on this button that says Create a Menu to create the menu.
Here for the actual menu items, I’m going to scroll to the left–hand side here where
it says Custom Links so I’m going to open that up. I want to add the custom link of
my social profile as well as some text for the title of the link. For example, the first
one is going to be my YouTube. I’ll just call it YouTube and I’ll add my YouTube address
right there. I’ll just call this YouTube then I’m going to click on Add to Menu to add this
to my Social Media menu. I’m going to do the same thing for Instagram,
Twitter and Facebook. Once you’ve added the social links to your menu right here, you
can resort them if you’d like by simply dragging them up or down to place them in the order
where you’d like to have them displayed. Once you’ve added them how you like them right
here, go ahead and click on Save Menu to save your menu. Once your Social Media menu has
been created then we want to go back to widget area.
So I’m going to go back to Appearance and Widgets and now, we can select the Social
Media widget to add to the Footer 2 section. So here where it says Footer 2, I’m going
to open this up then I’m going to scroll down. Now, I can select my Social Media menu so
I’m going to click that one right there and I’m going to click on Save.
Once we’ve added our social icons to the Footer 2 section, next stop, we need to add some
content to Footer 1. I’m going to open this up and here, I want to add my email opt-in
form to this particular area. So that one when done, it looks like I’m going to jump
over to my finished site, it looks something like this. So I want to add a call to action
Sign up for yoga inspiration – direct to your inbox and I want to add an email opt-in form
right there in the left-hand side which is the Footer 1 widget area.
To add this custom email opt-in form, I’m going to be following behind the scenes another
video tutorial that I have already created on my YouTube channel. I will drop the link
down below so that you can find it like here it is – Add A Custom Email Opt-in Form To
Your Website using WordPress and the Magic Action Box plugin. When you watch this video,
this video will guide you step by step to show you how to create this custom email opt-in
form. So behind the scenes in the essence of time,
I’m going to watch and follow the steps in this video then I’ll see you on the other
side once the email opt-in form has been created and we can add it to our Footer 1 widget area.
Back on the WordPress Dashboard, I have already added the Magic Action Box custom email form
to my website following the steps in the video that I showed you on my YouTube channel. Now,
I’m going to add the email opt-in form to the Footer widgets. To do that, I’m going
to go to Appearance, hover over Appearance and click on Widgets then here on the right-hand
side where it says Footer 1, I’m going to open up this Footer area and I’m going to
drag the Magic Action Box widget into Footer 1 widgets section.
I’m going to choose the Action box called Footer so I’m going to select that right there
and click on Save to save my changes. Now, we take a lot at the website by going up to
the top and clicking on Visit Site. Now we’ll see our footer showing up down below at the
bottom of our page. So here is our email opt-in form – that look’s great. Here’s are our social
network icons. These are little bit close together to one another so I want to adjust
that by changing the styling formatting for this.
So to create some space between these social media icons, I’m going to be using a tool
within the Google Chrome browser called Inspect Element so you need to be using a Google Chrome
browser to follow along for this particular section. But within Google Chrome up at the
top on the right-hand side, there are these three lines. I’m going to click on these then
I’m going to go down to More Tools then I’m going to click on Developer Tools. We’ll get
this box that shows all the code that’s being used to generate this website.
On the left-hand side, we have all the HTML that will create all the structure of the
site – the layout and how everything is kind of organized. The right-hand side, we have
all the CSS styles and this refers to all the things that make up the appearance of
the website. So what we need to do is we need to find, first of all, the HTML that’s generating
these social media icons then from there, we can change the style to create some space
between these different icons. So on the left-hand side here, I’m going to
drill down one by one until I find the code that’s being used to generate the social media
icons so it looks like it’s in this sidebar footer right here. I’m just going to drill
down one by one until I find it. We’re getting a little bit closer. You can see when I click
on each of these things, it does highlight the section over here so we know we’re getting
closer. It looks like this may be the section right here. So here we are right here, we
can see that here we have .social-menu-widget [01:04:15]. This part right here.
We can see there’s some padding but this padding is crossed out. In order to make this the
priority code that’s being used, I’m going to add an important tag right here. We can
see when I add !important then this creates some space in between these icons which is
exactly what I would like. Now it’s a little bit too far spaced out so I’m going to reduce
that. So instead of having five pixels and 20 pixels, I’ll make it 10 pixels and that
looks a little bit nicer. So that’s what I’m going to go with.
Any code that you change here on the right-hand side, this is just kind of like a sandbox.
It’s not really saved on your website so in order to save it, I just need to highlight
this code, highlight it and copy it then I can close this box right here and then I’m
going to go back to my Dashboard. I’m going to click on Dashboard. Go down to Appearance,
hover over Appearance and click on Editor. Once I click on Editor, I’ll see the stylesheet
being used for our theme. Remember that earlier in this video, we created a child theme so
this is what we’re seeing right here – the child theme style.css.
I just want to drop the code that I just copied in the previous step right below the @import
code right here. After this, I’m going to close it off with a closing bracket. Note
that I didn’t make any changes to the display so I can take that out because I didn’t change
that. I just left that. The only change I really made was to the padding so I’m going
to add that right here and then I’m going to come to the bottom and click on Update
File to update my file. Once the padding has been added and customized
then we can check out our site by going up to the top and clicking on Visit Site. Now
you see when I scroll down to the bottom of the website, we have some really nice spacing
going on in between these icons so they’re not so on top of one another which is exactly
what I want. Now that we have the Footer section set up, the next step is we need to add all
those various homepage sections here in between that slider image and the footer so that when
we’re done with this part of the video, we’ll have our homepage so that it looks something
like this. I’m going to jump over to my finished website.
This is the finished website right here. We can see underneath the slider image, we have
all these different sections here on the homepage. Next stop, we’re going to be adding all of
these middle sections on the homepage of our Sydney theme.
Going back to our website, I’m going to go back to the Dashboard. Here on the Dashboard,
the first step is we need to add those sections to our homepage so I’m going to go to the
homepage by hovering over Pages and clicking on All Pages then I’m going to go down to
the homepage itself, Home Front Page, I’m going to click on Edit to edit my homepage.
Here on this visual editor right here, we have a Visual editor, a Text editor and because
earlier in this video, we added the Page Builder plugin, we also have an extra tab right here
called Page Builder This is what I’m going to be using to add
those sections to the homepage. I’m going to click on Page Builder and then as we see
here, we can add a widget, a row or a prebuilt layout to get started and if you’d like to
read the documentation, you can click on this link right here. In order to create this particular
section, I’m going to jump over to the finished website here. Here we have the image slider.
We’ve already added that. First stop, I’m going to add this row with the widget inside
of it which includes my mission. To add the row, we’re going back to our Page
Builder here. We can add a widget, a row, prebuilt, look at our history or live editor.
First thing, I need to add a row so I’m going to click on this button here that says Add
Row then I’m going to create the row. Note that right now, the row by default is set
to two columns. But actually, I only want one very wide column so I’m going to put one
right here, one column; then at the bottom, I’m going to click on this Insert to insert
this new row. Once the row has been inserted then I’m going
to click on it to highlight it and now I need to add a widget to the row so we have content
within the row. So once this is highlighted then I’m going to click on Add Widget and
then we have all these different widgets that we can add to the row. Note that all the one
that start with Sydney, these are the widgets that are specific to this theme and you can
also see the Sydney Them Widgets right here on the left-hand side.
I also have just some general widgets. In order to create this text right here, all
I really need is a text widget. I don’t really need a Sydney Theme Widget right now. Instead,
I’m just going to choose this one, a text widget and then, there we go. Now, it’s in
my row. In order to add text to this particular text widget, I’m going to click on this button
here that says Edit. I’m going to give it a title. I’m going to call it Our Mission.
And then here in the content row, I’m going to add my mission, “We promote wellness in
mind, body and spirit through outdoor yoga classes and retreats.”
Awesome. So that looks good so far. I’m going to save that for the moment by clicking on
Done to add that. I’m going to click on Update to update this particular page. Now, let’s
take a look at it there. We do have some formatting stuff we need to take care of. But just to
see what that looks like in a really simplified view, I’m going to go back up to the top of
the website, hover over the website name and click on Visit Site just to see what it looks
like. Here we have our image slider then I’m going
to scroll down below. It’s looking okay. Of course, we’ve got some formatting stuff to
change but it’s alright. We’ve got our mission here in the middle; that looks good. What
I want to do now is I want to make this larger and I also want to center it and last but
not least, I want to change it so it’s the same color as where it says Our Mission so
that when we’re done, it looks something like this.
Back on our homepage, the easiest way to customize this content especially if you’re new to HTML
and CSS and you don’t want to actually code it yourself is to have WordPress make the
code changes for us. In order to do that, I’m just going to highlight this content that
I want to customize; highlight and copy it then I’m going to go back to my Dashboard.
Here on the Dashboard, I’m going to create a post. I’m going to hover over Post and click
on Add New. Keep in mind this is not a post we’re actually
going to use. I’m simply going to use this editor in order for WordPress to create the
code for me. Here in the Visual tab, I’m going to paste the content that I just copied in
the previous step. Here is my mission statement right here. And because we have all this formatting
icons, we can use these and WordPress will create the code for us.
So, I want to center this and I want to make it a little bit larger so I’m going to highlight
everything then I’m going to click on Paragraph. I use a Header 3. We’ll see what that looks
like. I’m going to align it in the center by hovering over the Align center icon. Now
we can see that WordPress has customized this content for us so we don’t need to actually
know any code. Once we have it customized the way we want,
we can click on the Text editor and this is the behind-the-scenes code that WordPress
has generated. So this is kind of a behind the back scenes kind of like way to get WordPress
to create the code for us so we don’t have to actually create the code ourselves. Once
you do this often enough, you’ll get familiar with how the code works and you can probably
freehand do it yourself without this technique. But this is just kind of a little trick to
use if you’re new to coding and you want to format your text.
Once you have this content customized the way that you’d like, go to the Text editor
right here, highlight and copy all of this then we’re going to go back to our homepage
by going to Pages and then All Pages. Of course, it will say here, “Do you want to stay on
this page or leave this page?” we don’t really need this page anymore so I’m going to click
on Leave This Page. I’m going down to the homepage, click on Edit and go to that first
row that we created, this text row and I’m going to click on Edit.
Here we see that here is the mission statement without any formatting but I’m going to highlight
all that and kind of delete it and I’m going to paste the code that I copied in the previous
step from that kind of mock post that we created. Here we can see, we have the HTML tags h3.
The style is text align center and then we have the beginning of our mission statement
right there and then we have our closing HTML which is great. You just want to click on
Done to complete that. Last but not least, we need to update this whole page by clicking
on Update. So now that we have that saved, we can go
back and check it out by going up to the top and clicking on Visit Site. When we scroll
down to that section, we’ll see now it looks really good. We have it’s all the same color,
it’s center align and it’s larger. The only other thing that I want to do actually is
I want to create this so that’s on two different lines, not running all like that. I want it
to actually look like this so that after Body and Spirit, it kind of pushes the next line
down to the second line. In order to push the second line down, we’re
going to use another HTML code so I’m going to go back to my Dashboard. Here in the Dashboard,
I’m going to go down to the homepage once again by hovering over Pages, clicking on
All Pages, then I’m going to go down to the Home page, click on Edit. We’re going to go
to the Text row right here, hover over this widget and click on Edit.
Right where I want the second line to be displayed, I’m going to place my cursor, put it on the
second line and the HTML that we need to add here is a opening bracket, br for break and
then a closing bracket so we want to add this tag right there then click on Done. Click
on Update and that will move that second line, force it down to the second line.
Now, we will go back to the homepage by going up to the top, hovering over the website name
and clicking on Visit Site. We’ll see, when we scroll down to the first section, here
we see these two lines showing up one line after the other. Awesome.
Now that we have the first section of the homepage set up, next stop is the second section
so hopping over to the finished site, here we see that after the mission statement, I
want to create our three different services. Also note that this particular row is gray.
So not only do we need to create another row but we need to change the colors so it’s gray
and our title at the top, Practice with Us and then we’re going to add three different
services with a call to action. Back on our WordPress Dashboard, first stop,
we need to add some custom post types to our website in order to add the second section
to our site. There’s a number of steps that we need to take in order to do that. On the
left-hand side, you’ll notice that there’s a Types link down below and when I hover over
Types, I have all the different menu items related to our custom post types. This particular
option here is related to the plugin that we added earlier in the video called the Types
plugin. If you made it this far in the video, you
should have already added your Types plugin and it should be installed and activated.
So when I hover over Types then I’m going to click on Getting Started, here you’ll see
that you can choose what kind of side you’re building as it notes at the top, “Types plugin
includes a lot of features and there are many possibilities so by selecting what kind of
site you’re building, you allow Types to advise you what features are needed and how to use
them.” So you can choose whichever you would like
here. I’m going to be using the Blog / Magazine particular option so I’m going to click on
Blog / Magazine, click on Continue and this will just give this particular plugin some
idea what kind of site I’m building so it can guide me in what kind of custom post types
I may need. I’m just going to add that for future reference but then, I’m just going
to move forward and then underneath Types, there’s another Settings tab here.
I’m going to click on Settings and this is the important part. When I scroll to the bottom
of the custom post types settings page, you’ll note that there’s a link here that says Import/Export.
This is what we need in order to import the custom post types that have already been given
to us by the theme developer. I’m going to click on Import/Export. This is going to save
us a lot of time in this particular website. Here you can see it says Import Types data
file. So we need to go to the theme developer’s
website, the documentation for this site. I’m going to hop on over to this particular
theme and here we can see there’s a link that says Importing the Settings File. When I click
on that, there’s a quick video here but more importantly, this is the link that we need
right here. It says Import the Settings File for Types – this will create custom post types
for your services, employees, testimonials, clients and projects. Then you can go to Types,
Import/Export and you can upload this file. So we have already gone to this particular
link right here. We’re ready to go. All we need is the file in order to import it. Hopping
over to the developer’s site here, I’m going to download this by clicking on this link
right here. This will download the custom post types settings file to my website. We
can see here it is down below right here. And then, all I need is to import it to my
WordPress website so I’m going to click on that then I’m going to click on Choose File.
I’m going to find the Sydney settings file and then I’m going to click on Open to open
this file. Once the file is listed right here, I’m going
to click on this button right here that says Import File to import the custom post types
from my computer. All these things are the General default settings. I’m going to leave
all of these intact. I’m not going to touch any of them. I’m just going to scroll to the
bottom and click on Import to import all of these settings. Wonderful.
Once all of these settings have been imported, you’re going to see a lot of additional options
here on the left-hand sidebar including Services, Employees, Testimonials, Clients and Projects.
These are all different options that you can add to the Home section on the homepage of
your website using the Sydney theme. Next stop, we need to add our three services.
I’m going to click on Services, All Items right here. First stop, I’m going to add a
new service by click on the button at the top that says Add New. Here on the Add New
Service page, first stop, I need to give my new service a title. I’m going to call this
Yoga Retreats and then you want to add some text related to this particular service. So
I’ll just add a short sentence right here then I’m going to scroll down and I want to
add a Service icon. Here, as an example, we’re going to be using Font Awesome and the full
list of icons is located here. When I click on this link, it’ll open up a
page for Font Awesome with a Cheatsheet where here I can see all the different icons that
I can use. The one that I want is the heart icon actually so looks like here it is right
here, fa-heart. This is the one that I’m going to use. I’m just going to highlight and copy
that then I’m going to go back to my Services page and here, I’m just going to drop the
icon that I would like right here. I’m going to click on Publish. Before I click on Publish,
I also need to add a Services link so that when someone does click on this particular
call to action, it will go to a specific page. Because this particular service is related
to retreats then I want to add a Service link related to a retreats page. I may need to
add this page afterwards but for the moment, I know that I’m going to be creating a URL
called Retreats so I’ll just add the URL right here then I’m going to click on Publish to
publish my first service. Once the service has been published, I have
two more services to go. As we did in the previous step, I’m going to click on Add New
to create a new service. For my second service, I’m going to call this Group Yoga Classes.
So I’ll just add Group Yoga Classes for the title. Then again, I’m going to add one sentence
explaining what it’s about – Enjoy yoga with friends. It’s going to be a group yoga class.
I need another Service icon so I’m going to click on this link one more time to go to
the Font Awesome page with the Cheatsheet. This time, I want to use the users 1. So there’s
a group of people right here so I’m just going to highlight and copy this particular Font
Awesome code then go back to my Service icon and drop that in right there. And again, as
I did previously, I want to add a Service link. This one is going to go to my Classes
page so I’ll just add the URL where I want the call to action to go and then I’ll click
on Publish to publish my second service. Last but not least, we have one more service
to go so I’m going to click on Add New. For the service title, I’ll call this Private
Yoga Classes. Once again, I’m going to add one sentence; what this is about. Scroll to
the bottom, click on the icon here to go to Font Awesome. This time, I want to use a single
icon so there’s just one person showing. You can choose any icon of all these icons that
you’d like but I’m just going to choose this one for the moment. I’m going to go back,
drop that code for Font Awesome here. Once again, I’m going to add a URL where I want
this call to action to link to. In this case, it’s going to go to the Classes
page as well as this is related to it’s a different kind of class. I’m going to click
on Publish to publish my third service. Once we have three services created, now we can
add a section to our homepage which includes these three services.
To add the section to our homepage, I’m going to go to Pages, click on All Pages right here.
I’m going to go down to the homepage. I’m going to click on Edit to edit the homepage
and as we did for the first row, the text Our Mission row, I’m going to add another
row to the homepage but clicking on Add Row. I only want one column so I’m going to click
on one to create one full width column then I’m going to click on Insert. Now I have my
second row. Cool. Then I’m going to highlight this row and I
want to add a widget so I’m going to click on this button here that says Add Widget.
We can see on the left-hand side, we have our Sydney Theme Widgets if you want to go
there directly or we can scroll to the bottom and we see all of these themes specific widgets.
The one that I want is a Services widgets and we can see here there’s a Sydney Front
Page Services Type A – Show what services you are able to provide. That’s the widget
that I want. I’m going to click on that then we add that to my second row right there which
is super cool. I’m going to click on Edit because I need to edit this. We need to give
our services row a title so I’ll call it Practice With Us.
Once you add a title then you need to add a URL for the call to action so I’m going
to add my Classes URL right here. The text for the call to action button, I’m going to
say “Learn More”. Once we have those three things there then I’m going to click on Done
and I’m going to click on Update to update the entire homepage.
Once the page has been updated, let’s take a look at what it looks like on the front
page by hovering over the website name and clicking on Visit Site. Now we should see
our second row with our services listed in that section. Here we go. We’ve got our icons;
that looks good. Our title. So this looks really great. The only catch is that we want
this to have a gray background instead of a white background.
So I’m going back to my Dashboard. Here on my Dashboard, I want to go back to the homepage
by hovering over Pages and clicking on All Pages. I’m going to go down to the homepage
and click on Edit. What we need to do is to add the gray background to that row is we
need to edit the actual row. Note that we’re not editing the actual widget.
There’s another little wrench here and when I hover right on top of that, I can edit the
entire row. That’s what we want. I’m going to edit the entire row by clicking on Edit
Row. On the right-hand side, I’m going to click on Theme. This will give us a number
of different settings related to the row. The Bottom Border Color – I’m not going to
touch that right now. I do want to add Top and Bottom padding so I’m going to make that
50 pixels. I do want to center align the content so I’m going to click on this box to enable
that. Most important, here’s the background color
for the row. I’m going to click on Select Color and we can see right now it’s a white
color. I’m going to change that to a gray color right here and I happen to know the
code but if you don’t know the code for whatever color you want to make your background for
the row depending on your brand then the colors you’re using for your website, you can use
this color wheel here to guide you in the kind of whatever color you want the background
to be for the row. I want it to be a gray color so I’m just going
to pop that code in right here then I’m going to click on Save to save my changes. I need
to update the entire page by clicking on Update. Once the page has been updated, let’s take
a look at the row by going up to the top clicking on Visit Site.
Now when we scroll down to section number two, here we have our white section; now we
see that looks really great. Note that there’s a column here, I should say there’s a margin
on the left and the right. That actually looks okay but I prefer to have it be full width
so there’s no margin going on. So we need to go back to the Dashboard one
more time. I’m going to click on the Dashboard then I’m going to go down to Pages and All
Pages. Go back to the homepage by clicking on Edit. This time, for the second row, I’m
going to click on Edit row one more time then I’ll open the Theme settings. When I scroll
down here, there’s another Row Layout section that I need to set.
The Standard layout includes the margins on the left or right. When I click on this, the
other option is a Full Width Stretched option so that’s what we want to remove those margins
on the left or right. So I’m going to use Full Width Stretched then click on Save. Last
but not least, click on Update to update the page and we’re getting the hang of this.
Now I’m going to back to the homepage by clicking on Visit Site and I’ll scroll to the bottom
and now, wallah. Those margins are gone; it looks so much better. That looks really good.
If you don’t want the red, we’ll come back to this. We’ll circle back to this later.
I think actually it looks really nice with red. I might just keep it as red. But as we
saw in my finished site over here, I changed it so that it’s black. It’s really up to you.
I’ll go over that a little bit later in the video how to adjust the colors. But for now,
I’m going to leave it like that because it looks really good.
Next stop, we need to add our next section which is a video. I’m going to be adding a
really cool, wide video that takes up the whole area to the third section here. It’s
going to be called Stand Up Paddleboard Yoga: Join Us! We’ll have a video and then that’s
what that section will be all about. Going back to our Dashboard. Here on the Dashboard,
to add the third section to our homepage, we want to go back to the homepage by hovering
over Pages, clicking on All Pages. We’re going to go back to the homepage by clicking on
Edit. Here on the homepage, once again, we’re going to add another row to our homepage.
I’m going to click on Add Row. I’m going to make it one column then I’m going to click
on Insert. You can see that it’s showing up above my Services which I really don’t want.
I want it to be the third one listed. So I’m just going to drag it down below so it’s on
the third section right here. I want to add a widget so I’m going to highlight this row
and click on Add Widget. Once again, we want to add a Sydney widget so I’m going to scroll
down to the Sydney widget. This time, I’m going to find the Video widget right here.
Sydney dash Video. I’m going to click on that. Here we have our video widget. We need to
click on Edit to edit this widget. We need to give it a title. Here you can add a URL
like either a YouTube video or a Vimeo videos. I’m going to be using my new YouTube channel
for my yoga website; my yoga channel. It’s a new channel that I just created. It’s my
side channel. Anyway, I’m going to go to that channel over
here. Grab the video by clicking on the video right here. I’m going to grab the actual URL
by clicking on Share then I’m going to scroll down and here’s the URL that I need right
here. I’m going to highlight that URL and copy it then I’m going to go back to my page
here and paste the URL that I just copied in the previous step. I’m going to click on
Done to complete that update. Once the video section has been added then
I’m going to click on Update to update my homepage. Now let’s take a look at our homepage
by going up to the top, clicking on Visit Site making sure everything is as we want
it to look. I’m going to scroll down on the homepage. Here we have the first section,
the mission. The second section, our services. Here we have the third section, our giant
video. Cool. These particular black bars on the YouTube
video, this is related to how I uploaded my video to YouTube. But if I’d use different
dimensions, I probably would not be having this black bars. On the Vimeo video actually,
if I add a Vimeo video instead then I won’t have this black bars. Something to do with
how I uploaded the video to YouTube. So because I like to get it just right when
I’m creating a website, I uploaded the same video to my Vimeo channel. I’m going to grab
that URL instead really quickly. I’m going to jump over to Vimeo then I’m just going
to scroll down to where I have that video right here and click on the Share button.
This is on my Vimeo.com channel. I’m just going to click on Show Options and I’m going
to remove the text link underneath the video and I’m just going to grab this link right
here, highlight it and copy it. I’m going to go back to the settings, go back
to this homepage by going back to the Dashboard. Here on the Dashboard, I’m going to go to
Pages, All Pages then I’m going to go back to the homepage by clicking on Edit. Here
on the homepage where it says Sydney Video, I’m going to click on that, click on Edit
and I’m going to swap out the YouTube URL for the Vimeo video URL that I just copied
in the previous step. So I’m going to add a Vimeo video instead right now and then I
click on Done. I click on Update. Now when we go to the homepage, those bars
will not be there. They should not be there. So I’m going to click on Visit Site then I’m
going to scroll down to section number three. Here we see when I scroll down to section
three, we have section one, two and three, now we can see the video without those black
bars. I uploaded the same exact video to YouTube as I uploaded to Vimeo. The Vimeo one just
doesn’t have the bars so I’m going to go with the Vimeo video embed instead.
Next stop, we need to add section four to our homepage. Jumping over to the finished
site over here. Here is my finished site and after the video, now I have my Testimonial
showing up and once again, I have this full width row with a gray background. We have
two more homepage sections to add – the revolving Testimonial section with the gray background
and we have our latest blog post section right there and then we are done with our homepage.
To add revolving Testimonials to the section four row, first we need to create those testimonials.
Back on the Dashboard, I’m going to click on Testimonials, hover over Testimonials and
click on All Items. Here we can see that we don’t have any testimonials yet so we need
to add one by clicking on Add New. Here in the title of the testimonial, you want to
add the name of whoever is giving you the testimonial right here.
I’ll just put a name. As it notes, enter title here. This is the name of whoever gives you
the testimonial and then I will add the quote of this person right here. You can also add
a client function or company name in this field down below if you’d like. I’m not going
to do that. I’m just going to click on Publish to publish this testimonial. Once the testimonial
post has been published, I can create a few more.
So click on Add New. I’ll give this particular testimonial whoever gave me the testimonial.
I’ll just add it in the name right here then I’ll add the quote right here. Again, you
can add a client function or company name then I’m going to click on Publish. You just
want to do this however many times you want to, however many testimonials you want to
include. You just want to repeat these steps. I’ll add one more so that we have three total
testimonials. Once I have my third testimonial, I’ll click
on Publish. Once we have all of our testimonials, we can add a new row to our website with the
Testimonials widget. To do that, I’m going to go back to the Pages, hover over Pages
and click on All Pages. I’m going to go down to homepage, click on Edit. As we did it for
previous rows, I’m going to add another row. Add a row. I want this to be one full width
column then I’ll click on Insert. Now note it’s showing in the second position
so I’m just going to move it by dragging it underneath the video row right there, going
to click on that so it’s highlighted and then I’ll click on Add Widget to add a widget.
Here we want to add the Testimonials widget so we see here is a Sydney Front Page Testimonials.
I’m going to click on that. Once this is added, keep in mind we want this one to be having
gray full width background. As I did for the Services row, I’m going to customize the entire
row by clicking on this gear right here and clicking on Edit Row.
I’m going to click on Theme on the right-hand side. I’m going to give it a Top and Bottom
border of 50 pixels. I will center align it by clicking on this Enabled button. For the
Background Color, as we did for the other row previously, I’m going to click on Select
Color and I’m going to give this a kind of gray color so f4f4f4. I’m going to scroll
down and I also want to change the Row Layout so instead of Standard, it is a Full Width
Stretched row layout. I’m going to click on Save to save that change for the entire row.
Once the row has been customized, we still need to customize the Testimonials widget
so here in the widget area, there’s another Edit link. I’m going to click on Edit then
I’m going to give this a title of Praise since this is my testimonials. You can also add
a call to action to this row by adding the URL for the call to action as well as the
text. For the button, once people read the testimonials,
I want to encourage them to, any of my viewers, to sign up for my yoga classes. So for the
text, I’m going to write Practice with Us and I’m going to send people to my Classes
page so anyone who is checking out the testimonials, they can then click on a button which will
go directly to the Classes page and they can read about what my services are.
Once I have that all set, I’m going to click on Done and then I’m going to click on Update
to update the entire page. Now when we go to check out the homepage, I’m going to go
up to the top, click on Visit Site. When I scroll down to section four, we have section
one, section two, section three and here we have section four so that is really cool.
This is a rotating testimonial and we have this call to action which when someone clicks
on it, they go directly to the Classes page. Our last section that we need to add here
is our blog post. Once again, I’m going to go back to the Dashboard. Here on the Dashboard,
I’m going to go to Pages, click on All Pages and go back to the homepage. Here on the homepage,
we can edit the homepage by adding a last row. I’m going to click on Add Row to add
a row. I want this to be a one-column row so I click on one right here. I’ll click on
Insert. Last but not least, I need to move this to the bottom so I’m going to drag it
underneath the Testimonials row right there. I’m going to click on this full width row
and click on Add Widget. The widget that we want is the latest post widget for the Sydney
theme. Here it is right here, Latest News – Show the latest news from your blog. I’m
going to click on that; that will add the latest news widget to my bottom row. I’m going
to click on the Edit right here, this little link, to edit this particular widget. For
the title, I’m going to call it Latest News or I should say Latest on the Blog. Here in
the third row, it says “Add the text for the button here if you want to change the default.”
I’m going to make this a little bit larger so you can see it a little bit better. There
we go. So we have the Latest on the Blog and then we have the third field right here. I’m
going to add my call to action which is Visit the Blog. Once that’s all set then I’m just
going to click on Done and then click on Update to update the homepage.
Now that we have all the widgets added that we like, I’m going to go back to the homepage
by clicking on Visit Site. Now, when I scroll down to the last section, here we have our
Latest on the Blog and then we have our first post. The posts are not showing yet because
we haven’t created any blog post so let’s create three blog post so at least three of
those show up here in the homepage section for Latest on the Blog.
So to create a blog post, I’m going to go back to the Dashboard. Back on the WordPress
Dashboard, to add a blog post to your website, I want to go to the top toolbar, hover over
the + New link right here and then you can click on Post. Or on the left-hand sidebar,
you can go to Posts, hover over Posts and click on Add New. WordPress gives us a number
of different ways to do exactly the same thing. Here on the Add New Post page, I’m going to
start by giving my new blog post a title so add my title in there. Here in this white
box, you want to add the content of your blog post. Note that there’s three different tabs
here, a Visual tab, a Text tab and a Page Builder tab. For the blog post, you don’t
need the Page Builder tab. All you really need is the Visual tab and the Text tab.
The difference between these two tabs is that the Visual tab, when I click on that, this
would give you some formatting icons so that you can format your content without knowing
any code and WordPress will generate the code behind the scenes. I’m just going to drop
in some content here for my blog post. Once I have my content here in this white
section for the Visual Editor, if I want to add a link or format or do anything like that,
just like a word processing document Microsoft Word, an email or something like that, all
you need to do is highlight the text that you’d like to format and then click on one
of these buttons above. You’ll see over here when you click on the Text view, WordPress
behind the scenes will generate the HTML for you that will create a formatting for this
particular text. I prefer to work within the Visual tab though
so I’m going to click on Visual and leave it on Visual tab. I really don’t need this
bolded so I’m going to unbold it by highlighting it once again and clicking on the B to unbold
this text. On the right-hand side, I’m going to leave it as the Standard blog format right
there. If you’d like to add this particular blog
post to a specific category, you can do so by creating a new category by clicking on
this link here that says Add a New Category. I’ll just add the category called Yoga. I
will create the category by clicking on the link once again that says Add a New Category.
We’ll see it will be checked right here and this blog post will be organized under the
Yoga category. If you’d like to add any tags, you can do so right here. I’ll just put Practice
and then I will put Yoga. If you have more than one tag, you want to separate them with
a comma. Once you have your tags here then you can
click on Add to add the new tags. Earlier in the video, I followed another video on
my YouTube channel that showed how to create a custom email opt-in form on my website using
the Magic Action Box plugin. Following up on that, that’s why we see this option here
to add an email opt-in form underneath blog post which is always a good idea.
I’m going to click on this and then I’m going to click on the actual email opt-in form that
I created earlier in this video. That will be showing up underneath my blog post. The
last step here is here we have a Featured Image that I need to add so I’m going to click
on Set Featured Image and the image I need is not in my media library yet so I need to
upload it by clicking on this link here that says Upload Files. I’m going to click on Select
Files. I will select the file that I want by highlighting it, clicking on Open.
As we’ve done for previous images, I want to add any title and an alternative text.
Once I have the title and alternative text, I’m going to click on Set Featured Image to
set the featured image. Also keep it mind that the dimensions that I’ve added here for
this particular image are 827 by 827. You can add any dimension you’d like but most
likely, it will look the best if it’s a square image. Of course you can play around with
the dimensions and whatever dimensions that you’d like. Feel free to add.
I’m going to go with the square image right here, click on Set Featured Image and then,
I’m going to come up to the top and click on Publish to publish my blog post. Once the
blog post has been created, I’m going to create two more blog post so that we can fill out
the homepage section with the thumbnail images of the different blogs. I have two more blog
posts to go. Once again, I’m going to click on Add New.
Here on the blog post page, first stop, I’m going to give my new blog post a title. Here
in the Visual Editor, I’m going to add my blog contents. Once I have the blog title
and the content added, on the right-hand side, I’m going to add my blog post to a category,
scroll down then I’m going to add my email opt-in form to the bottom of the blog post
by selecting the Magic Action Box right here. I’ll choose the box I created specifically
for blog post. Finally, on the right-hand side, I’m going
to set the Featured Image by clicking on Set Featured Image; click Upload Files and Select
Files. I’m going to select the file that I want right here and click on Open. As we did
for the previous images, I’m going to add a title and an alternative text. Once I have
the title and alternative text for this image, I’m going to click on Set Featured Image,
scroll up to the top and publish my blog post. So now that our blog post has been published,
we have one more to go so I’m just going to click on Add New, add a blog post title as
well as a blog post content. On the right-hand side, I’m going to scroll down and add this
blog post to the category that I created. I’ll scroll down a little bit further. Here
where it says Magic Action Box, I’m going to add an email opt-in form underneath the
blog post so I will click on that. Last but not least, I’m going to set the Featured Image
by clicking on Set Featured Image, clicking on Upload Files and Select Files. I will select
my file and upload it to my WordPress website. Once an image has been uploaded, I’m going
to give it a title as well as an alternative text and then I’m going to click on Set Featured
Image to set the featured image. Finally, at the top, I’m going to click on Publish
to publish my blog post. Now that my three blog posts have been published, last stop,
I’m going to revisit all my blog posts by clicking on All Posts right here.
There’s one post that I need to delete because this post comes with the WordPress installation
as an example, as a demo. We really don’t need it – the one that says Hello world! I’m
going to delete that one by clicking on Trash to delete that. Once it goes to the Trash,
I’m going to click on Trash and I’m going to permanently delete it by hovering on top
of this title and clicking on Delete Permanently. Now, I have three published posts and when
I click on the All link here, here we see my three posts. When I go back to my homepage
by going up to the top, hovering over the website name and clicking on Visit Site. Now
we have my homepage completely set up the way I’d like it. We have the logo at the top,
our menu items, the title, the subtitle and a call to action on top of the slider.
Then we have the various sections of the homepage including the Mission section, our Services
section then we have this large video right here, our Testimonials and last but not least,
now we have our images for the Latest on the Blog so anyone can read the post on our blog.
We have our call to action to visit the blog archive page. Finally at the bottom, we have
our Footers section with our email opt-in form and our social media icons.
Let’s test a few of these. I’m going to go back up to the top then I’m going to click
on Learn More and that should go to the About page which it does, which is really great.
Of course, we have our internal image at the top so that looks really good. I’m going to
go back to the homepage and check the next link. It’s always a good idea, once you’re
done, to check all your links and make sure that everything works the way it should.
Here we have Private Yoga Classes. This one goes to the Classes page so I’m going to click
on that. Here we have our Classes page so that looks good. Once again, going back to
the homepage, I’m going to check out this other one. Note that when I hover on top of
this, I can see the URL down here in the left-hand corner so I know this one goes also to the
Classes page so that link works properly. However, this other one as you may remember,
goes to our Retreats page and I’m not sure if I made that page out already so when I
click on this link, let’s see what happens. Okay. Oops! That page cannot be found. So
we need to create the Retreats page. So I’m going to go back to the WP Admin, to the Dashboard.
Here on the Dashboard, I’m going to create a new page for my Yoga Retreats. I’m going
to hover over + New then I’m going to go down to Page to create a new page.
First stop, we need to give our page a title so I’ll just call this Yoga Retreats then
you want to add some content within the white box here. I’ll just post some content there.
If you’d like to add an image anywhere on this page, you can do so. I’m going to add
one at the bottom so I’ll just put the cursor at the bottom, go up to the top and click
on Add Media. I think I will select this image right here
that I already have in my media library. I’m going to click on Insert into Page. We’ll
have that image showing up. I’m going to scroll up to the top and click on Publish to publish
my Retreats page. Note that the URL that I actually need is
simply Retreats; not yoga-retreats. So I’m going to edit this here by clicking on the
permalink Edit button right here. I’m going to remove the yoga dash part and then click
on OK because this is the actual URL that I used for that call to action box button
on my homepage. It’s simply the domain name forward slash retreats. So then I’m going
to update this page by clicking on Update. When we go back to double check that link
for Retreats, I’m going to go back up to my website name, Katrinah Yoga and click on Visit
Site. Now when I scroll down to the Retreats service option, I’m going to scroll down there.
Here we see it right here. When I hover on top of Yoga Retreats and click on Retreats,
now this will go to the page for Yoga Retreats. Note that there is a sidebar here and for
my pages, I kind of preferred not having a sidebar.
I’m going to remove that by editing this page. I’m just going to click on the Edit link right
here and I’m going to scroll down and I’m going to choose the option where I don’t have
a sidebar on the right-hand side. In order to remove the sidebar, we want to go to the
Template section here under Page Attributes. Click on that. We want to choose the Full
Width template. That will remove the sidebar on our page. I’m going to click on Update
to update the page. So now when I click on this link to check
it out, I’m going to click on View Page right here. You can also click on this link here
that says View Page. Now we’ll see that the sidebar has been removed which is exactly
what I’d like. There we go. You may want to also add a call to action
button here and you can do so by simply adding some text and a link to either contact you
or to sign up or whatever call to action you’d like. For now, I’m just going to leave it
as an informational page and if anyone wants to contact me, they can come up here and click
on Contact. But it’s always best to have a call to action directly on each page.
Going back to the homepage right here, I’m going to scroll down and this Learn More button
should go to the Classes page so I’m going to click on that just to double check it,
make sure that it works and it does. That looks really good. Last but not least, we’re
going to check out the other section here. We have our video. We know that that works.
You just click on the Play button and it will be begin to play.
Scrolling down, we have our revolving Testimonials so that looks really good. Here’s the Practice
with Us link or call to action which also goes to the Classes page. Last but not least,
we have the Latest on the Blog, our three blog posts followed by, at the very bottom
here when I scroll down, here we see we have a Visit the Blog link where you can go directly
to the blog archive page by clicking on this button. Here we see, here’s the blog archive
page and one after the next, we have each of our different blogs posts. Awesome.
Note that on the right-hand side, we have the default sidebar content showing up with
Recent Posts, Archives, Categories, Meta data. This we really don’t need so last thing I
want to do is I want to customize content here on this sidebar. To do that, I’m going
to go back to the Dashboard. Here on the Dashboard, I’m going to go down to Appearance, hover
over Appearance and click on Widgets. Here on the right-hand side, we can see all the
default widgets that come with your WordPress installation.
A lot of these we really don’t need so I’m going to get rid of them by opening them up
like this and clicking on Delete. You can also simply drag them to the left-hand side
and they should just remove themselves by just kind of disappearing.
I’m going to get rid of all of these stuff so that all I really have here is the Search
box; however, I do want to have my email opt-in form on the sidebar so I’m going to use the
Magic Action Box Widget right here and drag that up to my sidebar. Of course, I need to
choose the correct action box. I created one just for the sidebar so I’m going to select
that one then I’m going to click on Save. So we have our email opt-in form on the sidebar
and we have a search box so viewers can find what they’re looking for within your website.
Last stop, I’m going to add some recent post so I’m just going to grab the Recent Post
widget right here and drag that up to make it a little easy for my viewers to find some
post that they may be looking for, the most recent post so I’ll just display three posts
because I only have three at the moment and then I’m going to click on Save.
To check out the sidebar now, I’m going to go back up to the site and click on Visit
Site. I’m going to go to my blog page by clicking on Blog. Now we’ll see here we have the blog
archive page one by one, all by different blog posts and on the right-hand site, here
we have the sidebar with my customized email opt-in form, my search box and my recent posts.
Now, let’s take a look lastly at this Contact page so I’m going to click on Contact. We
do need to add our contact form. I forgot about that. I’m going to click on Edit and
in order to create this contact form, we’re going to be using a plugin called Contact
Form Seven. So I’m going to go to my Plugins page, hover over Plugins and click on Install
Plugins. I haven’t yet added the Contact Form 7 to
my website so I need to do that by clicking on Add New to add a new plugin. I’m going
to go to the WordPress plugin library. I’m going to do a search for Contact Form 7. Here
it is on the top left-hand side. Contact Form 7. It has over one million active installs
with close to a five star rating and it was just recently updated three weeks ago so this
is a super awesome contact form plugin to use.
I’m going to install it by clicking on Install Now and once the plugin has been successfully
installed, I’m going to activate it by clicking on Activate Plugin. Once the plugin has been
activated, we can check the settings by clicking on Settings right under the plugin name right
there. Here we have, by default, our first contact form comes with this particular plugin.
I’m just going to click on Edit and here we can see all we need to do is copy the short
code and paste it into our post page or text widget.
I’m just going to highlight all of this right here. Highlight it and copy it. Then I’m going
to go to Pages on the left-hand side. I’m going to look for the contact page; here it
is right here and click on Edit. Actually, I want to make sure that I’m in the Text box.
Note that there’s a Visual tab, a Text tab and a Page Builder tab. I’m going to click
on text right here so I’m in the Text tab. I’m going to paste the code that I just copied
in the previous step, pasting the short code for Contact Form 7 like so.
Right above it, I’m going to add a short note inviting my visitors to leave me a note by
filling out the form. Once you have your message and a short code listed right here then I’m
just going to review everything else on the page. We see that it is a full width template
so that looks good. I’m going to scroll down; everything else looks good so I’m just going
to click on Update to update my Contact page. So now when we go to the Contact page by clicking
on View page, we can see we have a really simple, really cool contact form here so my
visitors can contact me directly from within my website. If you’d like to also add an image
here on the right-hand side, you can do so. I’m going to do that. Why not. That sounds
like a good idea. Click on Edit then I’m going to place the
cursor where I want the image to be displayed and click on Add Media. I’ll use this image
down below; this one on the right. I’m going to scroll down; Attachment Display Settings.
I want to align this on the right-hand side so I’ll click on right alignment. I want to
link it to nothing so I will click on None and I want the full size that it states right
here. Then I’m going to click on Insert into Page to insert my image into the page.
Finally, I’m going to update the page by clicking on Update. So now when we check out my Contact
page by clicking on View Page, we’ll have both the contact form, a message and an image
here on the right-hand side. That looks great. Back here on the homepage of our WordPress
website, there’s one last customization I want to make. Because earlier in the video,
I promised that I would circle back and I would show you how to customize these three
icons here within our Services section so that instead of red, these are black.
Actually, it looks really nice with red right here but just to show you how to change the
color, once again, I’m going to be using the Google Chrome Inspect Elements tool. In order
to do that, here in Google Chrome, I’m just going to hover over the icon right here, click
on the Control button on my mouse then click on my keyboard. If you’re on a PC, I believe
it’s right-click and then Inspect Elements. This box will open up and we want to click
on Inspect Element. This will go exactly directly to the code
that we need to customize. Here on the left-hand side, we can see all the HTML that’s being
used to generate the structure of the website. Here on the right-hand side are all of the
CSS styles which determine the appearance and what it looks like on the website. We
can see here we have the row icon box and the color is this red color.
I’m just going to click on this and I’m going to change it to black. So that is my new color
right there. I’m going to highlight all of this code and copy it because any change we
make in this right-hand section is not yet saved on our website. We actually have to
add this to our custom style sheet that we created earlier in this video.
Once I have highlighted and copied this code, I’m going to close the developer tool window
and go back to my Dashboard. Here on my Dashboard, I’m going to go down to Appearance and Editor.
Once I click on Appearance Editor then we can see here, I’m on my child theme stylesheet
and this is where I can drop the custom code that I just copied in the previous step making
sure that I have two brackets, an opening bracket right here and a closing bracket.
Once I’ve added this code to my stylesheet, I’m going to scroll to the bottom and click
on Update File to update my file. Once we go back to the site by clicking on Visit Site
and now when I scroll down to the Services section, now we can see the icons are now
black. However, we still have the border that we need to change as well. In order to do
that, once again, I’m going to hover over this icon right here, hold down the Control
key on my Mac and then click on the keyboard or the mouse then I’m going to choose Inspect
Element to open up the code for this particular section.
Here we see that the border has been highlighted. We see it here on the right-hand side. We
see the red color right here with roll icon box.icon and this the border color that we
need to change so I’m going to click in this area right here and that will pop up the code.
I’m going to change the red code for the black code right there by just pasting in my other
code. Now we can see on the left-hand side, we have a black border as well as a black
icon. The last step in order to save this change
is to highlight the code that I just customized right here. Going to highlight all of these
and copy it. As we did in the previous step, I’m going to click Close this box right here,
go back to my Dashboard and here on the Dashboard, I’m going to go down to Appearance, hover
over Appearance and click on Editor. Here on my child theme stylesheet, I’m going to
paste the code that I just copied in the previous step, scroll to the bottom and click on Update
File to update my file. So now when we go back to the homepage by
going up to the top and clicking on Visit Site, we see when we scroll down to the Services
section and now we have the black border and the black icon within our Services section
so we’re good to go. So this is how we create a really professional
looking business WordPress website for a yoga business or a wellness business or pretty
much any business you may have using the free WordPress website theme called Sydney. At
the top, we have our logo, we have our menu items right here, our title and our tagline
and our call to action. If you created a slider, you also have some revolving images right
here. I created a static image however. Scrolling down the homepage, we have our Mission,
really clear; our Services – what we offer for our yoga business. We have a YouTube video
or a Vimeo video right here to kind of bring to life our website. Underneath that, we have
out testimonials, our latest blog posts followed by out footer section with an email opt-in
form to start capturing leads directly from within our website. We have our social network
icons so that anyone who visits our site can easily connect with us on the social web.
We have here at the top, we have our Classes page where we spell out in detail all the
different services that we offer for our yoga business. We have our blog archive pages so
that we can start driving traffic to our website through our blog which is always a good idea.
On the right-hand side, once again, we have our email opt-in form to capture leads and
we have our recent posts and a search box. We have our About page to share what our website
is about and who we are. Last but not least, we have our Contact page so anyone can easily
contact us from within our website. So I hope you enjoyed this video. If you made
it this far, congratulations. You should have a WordPress website for a yoga business, wellness
business or other business that looks something like this. Before we go, I want to give a
big shout out thanks to aThemes, the developer of the beautiful Sydney theme that we used
in this video. Thank you so much for providing this awesome theme for all of us to use within
the WordPress community. Thank you everyone for watching. I hope you
enjoyed this video. If you did, please feel free to drop me a comment below, like the
video and share the video with your friends. I will be coming out with more videos related
to WordPress, web skills and building your online business. Please subscribe for updates
to my YouTube channel. Until next time. I hope you have a great week and continue learning
new skills that help you to build your business on the web.

41 thoughts on “Sydney: How To Create A WordPress Website 2016

  1. Thank you for this video; it helped me make a great website! One thing though, do I need a plugin to set up parent and child pages?

  2. Great tutorial. thanks so much as i've learned so much. would you please teach me how to adjust the thumbnail image for blog at home page that fits the original featured image in blog page. what i mean is the featured image in blog page looks fine, but once i add 3 blogs in home page, the thumbnails are cut off.the margin doesn't fit in. thanks in advance

  3. great video…but i have trouble with sydney video…after paste the url….why my video not showing? plese help me

  4. This is simply great Katrina. I am struggling to reduce the font size of
    Out door ….. and also I would like to insert some text on the main
    them below join us at beach… and remove the learn more button

  5. Good day,
    Thank you for your Sydney theme tutorial. I built my website with sydeny theme but the navigational bar is not showing directly, I will have to click on a button first before the opens. Please what can I do? I need your help. Hope to hear from you. Warm regards.

  6. Hey Katrina, Happy 2017! 🙂 Question: Is it possible to build a site with a domain name and at a later date change the domain name for that site, or would you have to start again because wordpress would need to be installed on the new name and therefore I would have to start again from scratch?

  7. Is there a way to change the font size on the font widgets? Like the section where it says "our mission" and "practice with us", can the size be decreased? I can't figure it out!

  8. Hi Katrinah,
    Great presentation, thank you!

    I just wanted to ask. When you added the logo around the 41th minute, how did you get your logo without a box around it? I have a logo but it has a white background, and I'm not sure how to get rid of it.

    Thanks in advance

  9. Can you tell me how to make the second call to action button scroll down without having the services type A . because i have a layout out builder that has 2 other call to actions buttons . and i just want that call to action button make scrolling down smooth after reading the services .

  10. Hey, Katrinah, you are great. Because of you I am constructing my website, just following every step you teach here. And girl you rock! Thank you a lot. God bless you in every single way.

  11. thanks for the wonderful tutorial but i want to remove the proudly powered by sydney theme from the footer.. can you please help?

  12. Hi,
    I am currently using Sydney theme on my website and I am not able to
    change H1 font size neither through customization nor even by changing
    the h1 in style.css. Please help me.

  13. Hi Kathrinah , thank you so much for your tutorial videos. Fantastic as always. Which plugin do you recommend for a real state based on Sydney theme. Thank you and have a nice day.

  14. Awesome video, I love the detail! See this video for the quick 5 minute setup part and hosting coupon: https://www.youtube.com/watch?v=lXPnigTLJYs

  15. Thanks Katrinah. I just built my site watching this video. However, I've one issue. Please take a look http://monkeygoesdigital.com/
    On the home page, the "Find Out How" button and the content above are not appearing on the image but below it. Can you please provide a solution? Thanks

  16. Do you know where I go to change the layout for this theme? Seams like I've seen the options but cannot remember. Thank you very much.

  17. Namaste, thanks for your your great effort. Just clarify how to adjust header slider image size? thanks

  18. Copy-Paste FAST CASH System…

    100% FREE Traffic & Zero Experience..

    In LESS Than 20 Minutes Per Day –   https://wp.me/Pasoo3-9

    Introducing  Blistering Is The FASTEST Way

    To Consistently Bank BIG Money Online

    👉 BLISTERING fast profits – start making $100-$200 daily in PURE PROFIT within just a few hours from right now

    👉 Copy / Paste Simple – we GIVE you the campaigns PROVEN to drive massive commissions … all you do is add YOUR link

    👉 Make The Big Money Most Only Dream Of – we use this EXACT method to effortlessly crank out $10 – $15 THOUSAND every single month

    👉 100% Beginner Friendly – zero previous experience or tech skills needed

    👉  Plug & Play Software COPIES Our Most Profitable Campaigns For You – for multiple set & forget income streams

    👉 Easy To Scale To Quit Your Job Income – in literally just a few minutes per day

    👉 A-Z Traffic System Included – well show you how to start with 100% free traffic, then how to scale up once youre in profit

    👉 CANT FAIL Process Proven For Over 2 Years

    So, What Can I

    Expect on Blistering?

    [+] 1st-of-its-kind TRUE copy & paste method for pulling in DAILY profits from PROVEN cash campaigns

    [+] 100% beginner friendly AND the ultimate solution for seasoned marketers looking to add extra income streams

    [+] EVERYTHING you need to start banking ONGOING profits in just a few hours from now is included

    [+] Verified case study & step-by-step videos show you how to go from scratch to 3+ figure daily profits in 24 hours or less

    [+] Scale to LIFESTYLE income simply by rinsing and repeating with the TEN included campaigns

    [+] This whole method is about copy & paste, so here youll literally be able to copy EXACTLY what we do on-screen for maximum profits.

    [+] We cover EVERYTHING – from copying the campaigns, where to insert your links, and exactly how to drive traffic that converts into profits.

    [+] Youll even discover advanced strategies for scaling with low-cost ads once youre in profit to REALLY build your passive income.

    Check Here –   https://wp.me/Pasoo3-9

Leave a Reply

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