How To Make A WordPress Website In 1+ Hours: ZERO TO SITE
Articles Blog

How To Make A WordPress Website In 1+ Hours: ZERO TO SITE

August 27, 2019


Hi I’m Katrina and in this video, let’s
go over how to create a website using the new Twenty Fourteen theme that comes with
WordPress version 3.8. So WordPress just released this new theme as well as the new version
of their software and the new theme is absolutely beautiful. So let’s take a quick look at the
website we’ll be creating in this video. So here on the homepage of the website we’ll
be creating in this video and as we can see photographs and images are really the focal
point of the homepage. So this particular theme, the Twenty Fourteen theme is the magazine
style theme. Content is the focus throughout the entire website. If you’re looking for
a way to showcase your content or if you’re looking for a magazine theme, this could be
a really great theme for you to use. Here at the top, you’ll have six blog posts;
two rows of three blog posts each where you can showcase specific blog content. This theme
also comes with two different menu navigation areas, so we’ll see here right at the top
there’s this horizontal one on the top right hand corner, and there’s also menu navigation
items here on the left hand side bar. Now the really cool thing about this menu navigation
system is that this particular horizontal area here stays fixed which is really great
because note that as I scroll down the page, I can still easily navigate to other areas
within the website, simply by clicking on one of these items right here because its
fixed no matter where I go on the homepage or on any page throughout the website this
horizontal bar right here with menu items will always be visible. It’s a really great
usability feature that WordPress has built in this particular fixed menu area right there.
Now just below the six blog featured post, then we have the beginning of the blog content
on the homepage, and note that the style or design, it’s just beautiful. I love how WordPress
has designed this particular theme. They’ve really raised the bar in terms of all the
themes that they’ve offered, this particular theme I think is by far the best one yet because
note these really large image areas that you can add here for each blog post then you have
this really modern typography for the title, then you have some details about the blog
itself like the publish date, the author and any comments, and then you’ll have the actual
blog content. So on the homepage, you’ll just have one after
the other of blog post, kind of scrolling down the page like that and then on the right
hand side you’ll have this side bar. Here on the right hand side in the sidebar, you
can feature things like videos and I’ll show you how to do that in this video, you can
also feature photos or galleries, or even audio content like this. In this video, I’ll
show you how to put all of this together. Let’s take a quick look at some of the internal
pages that we’ll also be adding to the website, starting with the “About” page. When I click
on “About,” most likely you’re going to one who have an About page, here at the top note
that you’ll have a really full width, really large image above your actual page, then you’ll
have the Page title in the beginning of the page content. Now the thing I love about this
particular design is that it’s a really modern kind of design style so not only do we have
the modern typography here, but we also have a lot of white space which keeps it really
clean and keeps the focus on the actual page content. This is one of the templates that
you can add within this particular theme, you can have several different templates to
choose from. One is a full width template like this with no sidebar. You can also add
a sidebar if you like as we saw on the homepage and the other template to choose from in the
Twenty Fourteen theme is the Contributor’s page.
So as mentioned, this is a magazine style theme with a lot of focus on the content so
most likely you’re going to…usually when you have a lot of content you also want to
have a lot of different contributors helping to produce the content and in this particular
page template gives you a way to feature the different contributors to your website. I’ll
show you as well in this video how to set up this Contributor’s page.
Next we have the Contact page. Most likely you’re going to want to have a way for visitors
to easily contact you directly from within the website. I’ll show you how to set up this
contact page, this form, so anyone can easily just add their name, their email, short message,
and click on “submit” to send you a message. These are the main areas of the website. The
other thing I want to point out that we will be adding in the video are some social icons
here on the left hand side, so anyone can easily connect with you on the social web,
either through Facebook, Pinterest, Twitter, some other social network and I’ll also show
you how to add this Facebook Like box so anyone can simply click on the Like button and become
a fan of your Facebook page if you happen to have a Facebook fan page.
We’ve looked at the main areas of the website. The last thing is that let’s take a look at
one of the blog’s single post pages. So just scrolling down, I’m going to click on this
particular blog post right here and here we come on the actual blog single post page.
On this page, you’re going to have a wide featured image at the top once again with
a sidebar, then you’ll have the blog post title, some details about the blog post; the
publish date, the author and any comments. Then you’ll have the beginning of the blog
content. Note that this particular content is a little bit unique for this blog post.
I’ve added a tiled gallery which I love the layout of this tile gallery. I’ll also be
showing you in this video how to create a tiled gallery like this as well.
Underneath the blog content, finally you’ll have some sharing features, so you can easily
share your blog content to the social web once again either to Twitter, Facebook, Pinterest
or some other social media network and then there will be this section here where anyone
can drop you a comment related to your blog post.
This is where we’re headed toward in this video, this is a responsive WordPress theme
which means that it will look amazing, both on mobile devices, like smartphones and tablets,
as well as on desktops and on laptops. As a quick demo of the responsiveness of this
particular theme, I’m just going to come to the bottom right-hand side and reduce the
window size here and note as a do so, all the different elements on the page start responding
to the new screen size. This is really great because these days, more than ever, we’re
all using our mobile phones to access the web, and of course you want your website to
look beautiful on smaller screen sizes, as well as on larger screen sizes like desktops
and laptops. Here we see on the smartphone view, the menu
is this icon here which when I click on this, then we get this dropdown list of different
menu items and meanwhile all the other elements on the page are stacked vertically really
nicely. Look at how beautiful these images display on this theme. This theme is absolutely
amazing. Thank you WordPress for creating this really cool theme.
Here we have all the different blog posts, and then the beginning of the sidebar area
which again is vertically stacked, and then at the bottom we have our footer area with
our social icons and our Facebook Like button. So this is where we are headed toward in this
video, let’s get started. So before we get started, how much is this
website going to cost? Well we need several things, (1) we need a domain name, and (2)
we need web hosting. In this video, I’ll be using www.HostGator.com,and at HostGator,
you can get both the domain name as well as the webhosting. I’ll also be using a special
coupon codes you get an extra discount off of my order and that coupon code is wpcoupon25.
So if you decide to go with HostGator, please feel free to use the coupon code wpcoupon25
to get an extra amount off of your order as well. I also want to note that I do receive
a small referral from HostGator when you use this coupon so thank you in advance for your
supporting helping me to continue to create these free WordPress training videos.
Once you have your domain name and the web hosting, the next thing we’ll need is a theme
and as mentioned, we’re going to be using the amazing magazine-style responsive WordPress
website theme called, “Twenty Fourteen”. It’s a free theme that comes when you install WordPress
version 3.8. Next we’ll need some time to put the website together and I’m going to
go as fast as I can but I think it should take roughly around one hour, maybe a little
more, an hour and a half, so please set aside some time to create the website and go through
the video tutorial. So the total to get this website up and running
is less than $25, and again that’s using coupon code wpcoupon25. What are the steps to create
this website? Well, Step (1) is we need to get the domain and the web hosting. Step (2)
is we need to install WordPress, and Step (3) is we need to build out the website. So
let’s head over to www.HostGator.comto take care of Step (1) which is getting the domain
name and the web hosting. So here we are on www.HostGator.com.To view
the web hosting plans, go ahead and click on the button in the middle that says “New
Web Hosting Plans,” and here we’ll see there are three plans to choose from — the Hatchling
plan, the Baby plan, and the Business Plan. If you’re just getting your website up and
running, most likely the Hatchling Plan or the Baby Plan will be a good fit for you.
The main difference between these two is that the Hatchling Plan gives you a way to host
only one domain name, whereas the Baby Plan gives you a way to host as many websites,
and as many domains as you would like. So those are the main differences between the
plans. I’m going to go ahead and I’m going to order this one, the Baby Plan by clicking
on “Order now”. As we see at the top, the first thing that
we need to do is we need to enter our domain name. So if you already own a domain name,
you can click on this button here and add your domain name or if you need to register
a new domain you can leave this box checked and you can enter your domain name right here.
I’m just going to add a random domain name for the demo purpose, so I’ll just add something
in random right here and of course it’s available because it’s a very random name. Also note
that you can decide whether you want to use dot com or any of these other domain extensions.
So “dot com” is the most common one, so I’m going to leave it as “dot com”. Then I’m going
to scroll down, and the next thing is we need to choose our package type and our billing
cycle. So we see here, it says Baby because I’ve
already chosen the Baby package type. The billing cycle here however, by default is
at 36 months, and I’d like to save a little bit more on the front end of this particular
order right now so I’m going to change this to one month. Just to keep my expenses low.
Of course there’s many other different cycles that you can choose from so go ahead and choose
the one that works best for you. I’m going to choose this one, the one-month one, and
then of course, coming down here you want to add a username and a security pin, scroll
down and you want to add all of your different billing information.
The next thing I want to point out here down at the bottom is we have the hosting add-ons,
and by default, HostGator will automatically add a few of these to your orders so you can
decide whether or not you want for example domain privacy protection, the site lock or
the site backup. Whenever I’m creating a new website domain I always do choose Privacy
Protection. The reason why Privacy Protection is important is because without Privacy Protection
your order details which include the things like your phone number, your email address,
and your address will be included in the domain database so that anyone on the web will be
able to find that information and as it pertains to your domain name. So things like, once
again your email address, your address, and your phone number that you used to place the
order will be available on the web. I prefer keeping that information protected, so I always
choose the Privacy Protection. Of course it’s up to you, so you can decide what works best
for you. Here we have the Site Lock. I’m going to uncheck
this, and I’m also go to uncheck the Daily Backups because I have other ways to secure
my site, but of course if you like to choose these, go ahead and add those on. Also I’m
going to turn this off just for the moment just to show you what the order cost would
be with and without the Privacy Protection. So scrolling down here we have the coupon
code and by default you’ll get the standard coupon code but if you use a different coupon
code you can get more off of your order. So the standard one is Snappy but if you use
the coupon code wpcoupon25 you will get an extra amount off of your order that’s better
than the standard coupon code. So here we go, I’m just going to click on “validate”
to validate this new coupon code wpcoupon25 and then we’ll see that I have a lower amount
down below. As we see here looking at order details, we
can see that without Privacy Protection we’re looking at just under $13 to place this order
which includes the domain registration and the first month of web hosting. Then if you
want to include the domain privacy for $9.95 a year, I’m going to click on that one and
you’ll see that the order goes to about$22 or so, so it’s still under $25. So once again
decide which posting add-ons work best for you, I prefer keeping the privacy protection,
so I’m going to leave that checked, and then I’m just going to click on this box here;
I have read and agreed to the Terms and Conditions and then I’m going to click on “Create Account”
to place the order and create my new web hosting account.
Once you click on “Create Your Account”, you’ll this page which will thank you for your order
and will tell you to go check your email for information related to logging into your web
hosting account. I’m going to go check out my email and here we see on my email account,
here’s the email from HostGator with my account info.
I’m going to click this email to open it. I want to point out two things: (1) 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 gave you; and then 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 this password here, the
temporary password, and to log into your control panel, you’ll use this link. So this is a
really good email to keep in a safe place for future reference because you will be needing
this information as well as the link to control panel to log into your HostGator web hosting
account. So I’m going to click on this link here and then here is my 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.
Here we are on the HostGator control panel. The next step that we want to do is Step 2,
we want to install WordPress. And thankfully with HostGator, there’s a really easy way
to install WordPress using their simple Wizard Script. I am going to scroll down to where
that is located; you want to scroll down to where it says, “Software and Services,” and
you want to find this icon that says “quick install.” This is what we’re going to use
to install WordPress really easily in HostGator, we’re going to use this quick install link,
so I’m going to click on that. Once I click on that, you’ll note that there are all these
different kinds of software listed here on the left-hand sidebar.
So right at the top you’ll note that it says, “Blog software,” and there’s a link here for
WordPress this is what we want to install, so I’m going to click on that, and then you’ll
see this button here that says “continue”. Note that we will be installing version 3.7
in this video because at the time of this recording, this is the most recent version
provided by the Quick Install script right here in HostGator. Of course, just a few days
ago, WordPress did release version 3.8. So once we install WordPress here version 3.7
when we log into our WordPress website, I’ll show you how to upgrade to the new version
3.8 once we install WordPress and we log into our WordPress website. So right now, in this
video I will be installing 3.7. If you’re watching this video and you do see that 3.8
is available, then by all means go ahead if you want to install that one.
Okay, right now I’m just going click on “continue” and here you’ll get a pan over, you can decide
which domain to install WordPress to. So I’m going to add the domain name where I want
to install WordPress and then I’m going to fill out this information below, starting
with the admin email. So I’m going to add my admin email right there. Next you want
to give your new website a title, so I’ll just call this, “A Name of My Domain,”
and also you want to add an admin username. Now note that this is a very important step
for website security, you want to make sure that you do not use an admin that is something
like admin, support or administration. These three names admin, support and administration,
those are the first names that hackers try when they’re attempting to break into your
WordPress website. It’s important that you use an admin username that is more unique
than admin. So for this instance I’m just going to add my name right here. You can also
add your first name and last name. I’m going to leave that empty and instead I’m just going
to click on “install” to install WordPress. Okay! Congratulations! Your installation is
ready. You can access the installation of your new website by clicking on this link
here and also note that here is the admin area login URL that you’ll use in the future
to access the login panel, to access your website in the future. You want to make a
note of this link here, it’s usually your domain name followed by wp-admin. That’s an
important link to remember as well, so that going forward you can easily log into your
WordPress website. Also make a note of your username and password, this is what you will
also need of course to log into your website when you click on this link. So I’m just going
to highlight this temporary password here and copy it, and then I’m going to click on
this link hereto log into my new WordPress website.
So here we are on the log in screen of our WordPress website. To log in, you want to
enter your username in the username field and your password in the password field, and
then you want to click on this button that says, “Remember Me” so that the next time
you come to WordPress, your username and password will be remembered. In the event that you
forget your password in the future, or perhaps even now, you want to click on this link here
that says, “lost your password” and WordPress will send you a password reset to the email
that you used when you were creating your WordPress website. For the moment, here I
have my username and password I’m going to go ahead and click on the “log in” button
to log into the WordPress website. Here we are on the WordPress dashboard. This
is the first thing you’ll see when you log into your WordPress website. And as we can
see, since we just installed WordPress, you’ll have this message here that says, “Welcome
to WordPress” and they’ll be a number of links here to get you started. These are some of
the common links that people use when they first install WordPress. Right now however,
I’m just going to click on “dismiss” to dismiss this welcome message right here and also note
that because we’ve just installed WordPress 3.7.1 or 3.7, there’s another note at the
top here that says, “3.8 is available. Please update now.” If you’re watching this video
when you’ve already updated to WordPress version 3.8 you’re ready to go, and if you’re on a
previous version, then you’re going to want to click on the link here to update to WordPress
3.8. I’m going to click on this link right here
to update to WordPress 3.8 which brings me to the update page where I can click on this
button to update automatically to WordPress 3.8.So I’m going to click on the blue button
to update now, and once the software has updated, now you’ll see this message that says, “Welcome
to WordPress 3.8” and we see that now, the dashboard looks a lot different than it just
did in the previous step. So here we are on the new layout of WordPress 3.8, we could
see the dashboard looks a lot different than it did in the previous step. Now the right
hand, or I should say the left-hand sidebar has this dark color and the rest of the main
page is gray. You can read about all the changes that have been implemented with WordPress
3.8 by just clicking this tab here “What’s New” and kind of scrolling down the page seeing
all the different changes that have been added. The main thing to note about the changes is
that WordPress has introduced a new modern design, a responsive design with a modern
aesthetic, clean typography and a refined contrast, and the other thing is that with
the dashboard, you can choose which color you would like. So if you don’t like this
dark sidebar and a gray main page, there are all these different colors that you can choose
from and you can change the colors by simply clicking on this link to visit your profile.
You can also change the colors right on the spot by simply clicking on each of these links,
and when you do so, you’ll note that the colors will change and you could see what it looks
like. There we have the light color, blue, coffee, ectoplasm, which is a purple, midnight,
ocean and sunrise. Again if you want to change colors on the spot, just go ahead and click
on one of these buttons right here. Otherwise, you can visit your profile by clicking on
this link right here. Now, once this welcome page has been closed,
the other way that you can change the colors down the road later on is you can just come
up to the top right-hand side and click on “Edit My Profile” to edit your profile. As
i just clicked on that, we can see here is the admin color scheme and I’ve selected Midnight.
So I’m going to be using the Midnight colors. So go ahead and change the color if you like,
otherwise just leave it on the default color and then when you’re ready, go ahead and click
on “Dashboard” to go back to the WordPress dashboard.
So here on the Dashboard we can see on the “At A Glance” box right here that we’re using
WordPress 3.8 and we’re currently running the 2013 theme. The theme that we want to
be using actually is the new Twenty Fourteen theme. Remember that at HostGator I had installed
version 3.7 of WordPress and with 3.7, it comes with a 2013 theme which looks like this.
So I’m going to go up to the top and click on “Visit Site” to view the site and this
is the 2013 theme. The theme we want however, is the new theme,
the Twenty Fourteen theme. To change that, I’m going to go back to the dashboard, and
then I’m going to go to “Appearances.” Hover over to “Appearances” and click on “Themes.
Now if you’ve already installed version 3.8 at HostGator, then most likely you’re already
using the Twenty Fourteen theme and that’s great you’re good to go. If you have 2013
active as it notes here however, you want to activate this one instead that says, Twenty
Fourteen. I’m going to click on this button here that say’s “Activate” to activate the
Twenty Fourteen theme. Okay, so the new theme has been activated,
we can visit the site now by clicking on this link here that says, “Visit Site”, and here
we can see when we first installed WordPress, this is what the Twenty Fourteen theme looks
like. So you have your sidebar that’s all black on the left-hand side, and then you
have this big white space here with a blog post that says, “Hello world”. We have quite
a bit of work to do because of course we’re headed toward this version of our site. This
is the completed website right here, so we’ve got quite a bit of work to do.
The first thing is, let’s go ahead and create some blog post so we can start adding these
featured blog posts in the top section of the website. So going back to our dashboard,
I’m just going to go to the top left-hand side and click on “dashboard”. Here on the
dashboard to create a new blog post, WordPress gives us a variety of different ways to create
a new post. (1) On the top tool bar, we can hover over “+New,” click on “Post” or on the
left-hand sidebar, we can click on “Post” and then click on “Add New” and note that
when I click “Post” right here now there’s this dropdown box, so I can either click “Add
New” right here to create a new post or right next to where it says “Post Here” on the post
screen, there’s an “Add New” button as well. There are a number of different ways to create
a new blog post. I’m just going to click on “Add New” to add a new blog post and the first
thing that we need to do here on the “Add New” post screen is we need to give our post
a title. So I’m just going to give my postas title right here, I’ll call this, “Matisse
at LACMA” the LA County Museum of Art. That would be the title of the post. Then here
on this white box, this is where you can add the text or image or video content of your
post. I’m just going to post some, or paste in some demo text right here, just some demo
text right here, note that there’s two different tabs. There’s visual tab and a text tab. The
visual tab is the “what you see, what you get” view. This is the view you use if you
do not want to use any code. So the great thing about WordPress is that WordPress will
create all the code for you; you don’t need to know any code in order to format or style
the text on your page. WordPress will do that for you.
For example, here are all of the different icons that we can use to style or format the
text. This is very similar to any kind of word processing system whether you’ve used
Microsoft Word, or some other kind of microprocessor. It’s also similar to any kind of email formatting
that you’ve used as well. So there’s a little icon over here. When I hover over this, note
that it will pop up a tool tip. It says, “Show or Hide Kitchen Sink.” So, these icons are
referred to as the Kitchen Sink. When I click on this link right here, we get another dropdown
row of options to help format our text. I usually prefer to keep both of these rows
open so they’re visible, they’re easy to see, So I’ll just leave those open right here.
Note that when I highlight this text, if I want to bold it, I would just click on this
“B” here. Now note also when you hover over each of the icons you’ll get a tool tip that
will tell you exactly what it does. The good news is that you don’t need to memorize
what all these icons do. Just notice that as I hover over one by one, it will tell me.
So this one is Italic, Strikethrough, Unordered List and Ordered List, Blockquote quotes,
Align Left, Align Center, Align Right and so on. You can go through all these different
icons, hover over them and see what they do. I’m just going to, for demo purposes I’m
just going to highlight this and click on “B” to bold this text right here. Note that
WordPress has bolded it simply by clicking on the “B” and were individual tab.
If you want to see the behind-the-scenes code that WordPress is generating, going ahead
and click on the text view here, and now you can see the html code, the strong opening
tags, and then there’s the strong closing tag right here. This is code again that you
don’t need to know, it just what’s happening behind-the-scenes and it’s really cool that
WordPress provides us. So if you want to learn a little bit about html, you can kind of toggle
back and forth between the visual view and the text view and see what code WordPress
is creating,. I prefer to keep it in the Visual View, so I’m just going to click on the Visual
Tab right here, and then on the right-hand side down here we want to choose what kind
of post format we want. There are all these different kinds of options.
I’ll be going over these in more detail in some of the next examples. For this particular
post, I want this to be a standard post, so I’ll just leave it clicked right here on standard.
Then we can scroll down and we can give this post a category. I’m going to create a new
category by clicking on this link that says, “Add New Category”. I’m going to call this
the “Blog Category”, so I’ll just type in “Blog”. Then I’m going to click on this button
one more time that says, “Add New Category” to create the new category. So note that one
I clicked on that, now the blog is categorized in the blog category right here.
Okay, cool. So now when we scroll down, we can add some tags if you like and this is
really important. If you want the posts to be displayed in that featured section on Homepage,
then we’re going to need to create some tags. So I’m going to call this “Art and Design”,
so I’ll just add in “Art and Design” and then I’ll click on “add” and I’m going to be pulling
all the different posts that are in the art and design tag; I’m going to be adding those
to my Homepage which we’ll see in just a moment. For this post, the tag is “Art and Design”.
Finally we need to give this a featured image. I’m going to click on this button hereto set
the featured image and then we can see here is my Media Library, but actually I want to
click on upload files to upload a new file from my computer. Then I’m going click on
this button here that says, “Select Files” Next, a new directory; the next step is you
want to choose the image that you want to upload to your WordPress website. So the one
that I want is this Matisse image so I’m just going to highlight that and click on
choose, and WordPress will upload the image to my website. On the right hand side we have
some attachments details and it’s always a good idea to include at minimum a title
and an alternative text. If you’d like to include a caption and description you can
do so but the main things that we really need include once again the title, and the alternative
text. I’m going to add that in right here and
then I’m going to click on this button at the bottom that says, set featured image to
set the featured image. Also note that the dimensions of this image that I’m using,
I’m going to click on it one more time we see the dimensions that I’m using are 836
pixels wide and 463 pixels tall so you might want to keep that in mind if you’re wondering
what dimensions to use for the featured image. Okay, so once again I’m going to click on
set featured image to set the image, and then I’m going to come up the top here and I’m
going to click on Publish to publish the new blog post.
Okay once the post has been published we can check it out to see what it looks like by
clicking on this new post link right here. Here we see this is what your blog post looks
like. Note that at the moment we do not have the sidebar showing up. I will be adding a
sidebar so we’ll do that in just a few steps from now.
At the moment this is what your blog post looks like without a sidebar. Okay let’s
add some more blog posts to our website, so we can add some more posts to the home page
in that featured section. Once again I’m just going to go up to the top, click on plus
new post to create a new post, we can see once again I hovered over plus new, and then
I clicked on post. Again if you wanted to create a blog post you could also come over
to the left hand side, hover over the post right here and click on add new. There’s
a few different ways that you can create a new blogs post.
Here on the new post screen, the first thing we need to do as we did in the previous step
is we need to give our new post a title. So the first thing I’ll do is I’ll just enter
a title right here. Then once we have our title we can add some content in this white
box right here. Note that I’m in the visual tab, not the text tab.
Here in the visual tab I’m just going to once again paste in some demo content right
here, and you can format any of the content you add by using these icons above. On the
right hand side we need to choose the format of the post and once again this is a standard
format so I’ll leave it checked at standard. Then I’m going to scroll down and as we
did in the previous post example, I’m going to categorize this post in the blog post right
here, and I’m going to give this a tag of art and design because I want this post to
show up on the home page in the featured post section.
I’m just going to add an art and design here, and then I’ll click on add, and finally
here at the bottom we need to choose our featured image. I’m going to click on set featured
image, we can see the images in our media library. But the one I want is actually on
my computer so I’m going to click on upload files. Then select files, and here’s the
image that I want this Rothko image right here. So I’m just going to highlight that,
and click on choose. AS we did in the previous example, in attachment
details it’s always a good idea to include a title, and alternative text so I’ll just
add that right here. And then I’m going to click on Set Featured Image to set the
featured image. Once the image has been set I’m just going to scroll the top here, and
click on publish the new post. Okay so the post has been published. Check
it out, I can simply click on this link here that says view post, and there we go. Once
again we have the full width image at the top, then we have the title, and then the
actual content. Again the sidebar is not showing up right now but we’ll take care of that
in just a few moments. Just as we added these two blog posts in the
previous examples I’m going to add four more behind the scenes, and then I’ll join
you after I created four more blog posts to show you how to add them to the home page.
Here we are in the homepage of the website and as we can see I’ve now added six blog
posts to my site, and they all show up vertically one by one on the homepage. I have all six
posts that I need, and then I also have this other post that I really don’t need, this
is a post that’s called Hello World that comes with your WordPress installation so
we need to remove this. The next step is we want to add the featured
post to the top of the homepage right here so it will look like this. In order to take
those six posts and make them show up like this, we need to go to our dashboard. Here
on my website I’m going to go up to the top and click on dash board, then I’m going
to scroll down to where it says appearance, and there’s a link here that says customize.
I’m going to click on customize and here on the customize screen you can see there’s
a what you see view right here on the right. This is actually what the website looks like
right now. On the left hand side there’s a number of
different settings that we can use to configure the site starting with the site title and
the tagline. When I click on that we can see right here that I just have the domain name.
I’m going to remove the .com and just leave it as my name. So you can see that’s displaying
in real time right here on the right hand side. Also the tagline I’ll leave a tagline
I’ll just call it art and design. You can add any kind of tagline you’d like and if
you do not want to display a title or a tagline you can just uncheck this and it will remove
the title right here. I’m just going to leave that checked, now
I’m not noticing the tagline. We will probably see that later on, on the actual site so I’ll
take a look at that a little bit later. For the moment I’m going to include it right
here. Next we can choose colours, so if you want to change the site title colour or the
background colour you can do so. Note that the background colour may only be
visible on widescreens. This is not a widescreen so we’re just going to keep it as black,
but if you wanted to change the site title right here you can do so by clicking on select
title, and you can just click whatever colour you want. Note that when I do that the colour
is changing right here on the right hand side. I prefer the default so I’m going to keep
it at the white default colour right here, and then I will collapse the colour settings
right here. You can also add a background image if you like, again note the background
may only be visible on widescreens. Next we have navigation, we’ll go over that
in just a moment. That refers to the menu so I’ll leave that kind of as it is right
now we’ll come back to that. The static front page, if you want to create a static
front page you can do so but this theme is actually a magazine style theme so it’s
really designed to have the latest posts being displayed on the home page. So I’m going
to keep it as the default your latest post. And finally this is the section that we need
the featured content section to create those two rows of six blog posts each. So here we
see that the layout, we have two options actually for our featured post. We can either create
a slider or a grid. In the example that I showed you this particular example right here,
this is the finished site this is the grid layout. And that’s the one that I’m going
for. The tag name that I want to use is the tag
name that I’ve used for those blog posts that I’ve created which is art and design.
I’m just going to add art and design right here, and then I’m going to click on this
button at the top that says save and publish. We actually do not see the grid here on this
side view right here, so let’s take a look at the actual site. So I’m going to click
on close to close this window, then I’m going to click on the site by clicking on
my name here at the top. Here we can see now I have the six blog posts set up which looks
really great. Then we scroll down, and now we see that I
don’t have any blog posts down below though, I simply have this hello world post. So the
next step is I want to remove this post right here, and I want to add some posts as well.
The first post we’re going to add is a video post.
To add the video post remove this post, we want to go back to the dashboard, so I’m
going to go to the top left hand side and click on dashboard. Here on the dashboard
to go to the post page I’m going to click on post on the left hand side. And then I’m
going to scroll to the bottom and here we can see we have the hello world post. I’m
going to remove that b y simply adding it to the trash by clicking on the trash link,
and now that post has been removed to the trash.
The next thing is we need to add a new post and I’m going to be adding a video post.
At the top I’m going to click on this add new button. You can also go on the left hand
side and click on add new here, or on top you can hover over plus new and click on post.
I’m just going to click on add new to add a new post. This time I’m going to create
a video post so as we did in the previous example I’m going to start by giving my
post a title. I’ll just call this title here, next we
need to grab the YouTube link that we want to use for the video. WordPress makes it really
easy to add video to your post and pages. All you need to do is grab the URL. I’m
going to go to my YouTube page right here. This is the video that I want to include in
the post. All I have to do is simply highlight the URL at the top, and copy it, and then
I can go back to my post and I can paste the URL right here in this visual tab right here.
That is how you add a video post, it’s really simple. Next I’m going to add this as a
video format. We can see in the previous examples we were adding standard format to our post.
This time because it’s a video I’m going to make it a video format post. So I just
clicked on the video button right here, then I’m going to scroll down. I’m going to
add this to the blog category, you can give this a tag if you like. I’ll just call this
video and then I’ll click on add. And then finally if you’d like to add a featured
image you can do that as well. I’m going to click on set featured image
and then I’m going to upload a file, and then click on select files, and here in the
file directory I’m going to choose the file that I want which is this laptop image. So
I’m just going to highlight it, and click on choose.
As we did with the previous posts it’s always a good idea whenever you’re adding an image
to include a title and an alternative text so I’m just going to add a title and alternative
text right here. And then once I have those in I’m going to click on set featured image
to set the featured image. Okay, now that the featured image has been
set, all I need to do is come up to the top here and click on publish to publish this
video post. Once the post has been published as we did in the previous examples I’m going
to check out the post by clicking on view post. And here we can see our video post.
At the top you’ll have your featured image, then once again the page title, and then here
we can see the embedded video right here. When I click on this then it will begin to
play the video. Okay, so the next post I want to add is a
tiled gallery post. So what we’re going for will look something like this. So we can
see here I have another post, this is a gallery post and here we can see the tile gallery.
This is what we want to add next. Going back to our dashboard I’m just going to click
on dashboard right here. We’re going to need the jetpack plug in to do this so just
make sure that you have jetpack installed and activated. I’m going to click on plug
ins right here. And here on the plug in screen you can see
as I scroll down here is my jetpack plug in and it has been activated. If you don’t
see jetpack on your plug in screen then you will need to add it and you can do so by clicking
on add new, and then searching for jetpack and doing a search by clicking on search plug
ins. And then here it is at the top Jetpack by WordPress. So you want to make sure that
you install it and then you activate it. Once you’ve installed and activated jetpack,
then you can click on jetpack on the top left hand side here. So I’m going to click on
jetpack right here, and the next step is as it notes jetpack supercharges your posts and
Wordpress website with the awesome cloud power of WordPress.com, and there’s all these
different features that you can add to your site when you have jetpack installed and connected
to your WordPress.com account. The next step is we need to connect to WordPress.com
by clicking on this button, here we are on WordPress.com. Now the good news is that you
can sign up for free at WordPress.com by simply clicking on this button here that says get
started. If you already have a WordPress.com account you can sign in with your email and
password right here. I’m going to click on get started, and here
it notes that you can get started with WordPress.com but note that we already have a website that
we’re building. So we do not need a WordPress.com website blog as well. What we really only
need is a username. Down here on the bottom right hand side it says, if you don’t want
a blog you can sign up for just a username. This is the place that I would recommend clicking.
So I’m going to click on this link right here to sign up for just a username. Okay
here you can just fill in your email address, create a username, and a password, and then
you can click on this button here to sign up for a WordPress.com username.
Once you have your username set up, then you want to log in to WordPress.com. Here I’ve
logged in to WordPress.com and now it’s asking me to connect my jetpack plug-in with
my WordPress.com account. I’m going to do that by authorizing jetpack and clicking on
this button right here. Okay so welcome to Jetpack 2.7, I’ve now
connected Jetpack with my WordPress.com username, and now all of these features are possible
down below. When I scroll down, you can check out all these different features that you
can now add to your WordPress website. The one that I want, there’s a few of them actually.
The first one that I want is this one. I want to use Jetpack comments so I’m going to
activate this by clicking on the activate button. Once that has been activated, the
next one that I also want is I want this carousel feature. You can learn more about this by
clicking on the learn more button and it will give you a drop down that will tell you all
about what this feature will do. Mainly just to cut to the chase, this feature
will enable light boxes to pop out on your images throughout your site which I think
is really cool. I’m going to activate the carousel by clicking on Activate. Once the
carousel has been activated there’s a few more that we need to choose here. One is the
sharing feature, I’m going to click on configure to configure the sharing features. This will
enable your visitors to easily share your content to the social web- either to Facebook,
Twitter, Google Plus or some other social network. I’m just going to enable the services
by dragging the ones that I want down into this little field right here where it says
enable services. I want to enable Facebook, and also Twitter,
I’m also going to enable Pinterest, and then I’ll just move all the other ones into
this more box right here. I’ll add Read It, and perhaps LinkedIn, and also email.
As we can see here here’s the live preview down below, so this will be what you will
see underneath your blog post so that looks pretty good.
Also we have this section here where you can set up where you want this to be displayed
on your site. I really only want to show these buttons on posts, so I’m just going to click
on posts right here and then I’m going to click on save changes to save the changes.
Okay once the sharing settings have been saved the next step is to go back to jetpack because
we’re not quite done. We’re almost done with jetpack but there’s a few more that
I want to add. So we’ve added the carousel and the sharing features, the other thing
that I want to add is where is the tile gallery? Here it is right here, it says tiled galleries
and once again you can learn more about it by clicking on learn more. And there’s all
these different info that you can read about tiled galleries.
As it notes, create elegant magazine style mosaic layouts for your photos without having
to use an external graphic editor which is really awesome. I’m going to activate this
by clicking on activate and now that tiles gallery has been activated now we can create
our posts, and we can create a gallery with a tile gallery I should say in the post.
So to create a new post I’m going to go up to the top here, hover over plus new, and
click on post. Next as we did in the previous examples I’m going to give my new gallery
posts a title. I’m just going to pop in a title right there, and then in this box
instead of adding text content I’m going to add a gallery. So to do that I’m just
going to place the cursor right here in the white box and click on the add media button.
Then on the left hand side here where it says create gallery I’m going to click on create
gallery. Next we can choose the images that we like from the media library or we can also
upload new images. I’m going to click on upload files to upload
some more files to my gallery, and then I’m going to click on select tiles, and then I’m
going to choose the files. So I’ll choose this one, and this one, and this one, and
that one as well. And then I’ll click on choose.
Okay so you can see some of these are duplicates so I might want to uncheck them right here
from the gallery. I’ll just uncheck them and it looks like this is a duplicate so I’m
just going to click it once, highlight it, we see it’s checked, and then I’ll click
on delete permanently because we see I have one right here. So I’m going to click on
okay, and let’s see, okay that looks good. The images that I want I’m just going to
click them one by one, I want this one, this one, actually not that one, this one, this
one, and this one. As we can see down here as well we see that I have eight images selected
and here are the different thumbnails. The other thing is as mentioned, you want to make
sure that you have a title and an alternative text for each of the images. And when you’ve
selected the images you want for your gallery, go ahead and click on this button on the bottom
that says create a new gallery. Here on the edit gallery screen you can reorder
where you want the images to be displayed. So for example if I want this one to be at
the top, I would just drag it to the top left hand side and let it go. You can do that with
pretty much all these images, you can just kind of reorder them the way you want to see
them. And then on the right hand side are the gallery settings.
Here you can click on where you want these to link to, either an attachment page, a media
file, or none. I’m just going to click on none right now, but you have those other options.
Then you can choose how many columns you want, if you want a random order and the type. The
type that I want is this tiled mosaic here, so I’m going to click on tiled mosaic, and
then I’m going to click on insert gallery to insert the gallery. On the right hand side
where it says format we want to choose the gallery format. So I’m just going to click
on gallery right here. Next we have our blog post or some other category
that we can add, so if you want to create a new category you can do so by clicking on
this and adding your new category. I’m going to add this to the blog category so I’ll
just click on blog. And then you can use tags if you’d like as well. I’ll just call
this photos and then click on add to add new tag, and finally you can add a featured image.
I’m going to click on set featured image and then I’ll choose one of the images here
from my galleries. So I guess I’ll choose this one right here, then I’m going to click
on set featured image to set the featured image. Once the image has been set I’m going
to scroll to the top and click on publish to publish my new tiled gallery post.
Once the post has been published we can check it out by clicking on view post. Here we are
on the tiled gallery post. We have our featured image at the top, our page title, and here
we have our tiled gallery which looks really cool. The great thing about this tile gallery
is because we’ve activated the carousel feature on jetpack when I click on each of
these images it will now pop up into a really cool light box display. So you can see your
images one by one via the light box. Okay now that we have our tile gallery post,
the next post that I want to create is an image post. To do that once again I’m going
to go to the top, hover over plus new, and click on post. Again the first thing to do
is to give your new post a title. I will add a title in here, then we can add some content
in the white box right here. Next on the right hand side where it says format this time we’re
going to add an image. I’m just going to click on image right there
and then I’m going to scroll down and I’m going to add this to the blog category, I’m
just going to call this photo you might want to call it binoculars because of the binoculars
building. Then I’ll click on add to add these two tags, next I’m going to set the
featured image. I’m going to click on this link here to set the featured image.
Next I’m going to click on upload files to upload a new file, and then select files,
and the file that I want here is the binoculars building so let’s see if I can find that
right here. I’m going to select the file, and then click on choose, next in attachment
details I’m going to give this image a title and an alternative text. I’ll just pop that
in right there and then I’m going to click on set featured image to set the featured
image. Once the image has been set the next things
is, because this is an image post an image format post I also want to add an image in
the content area right here. I’m going to place the cursor in front of the text, actually
I’ll put a carriage return there and I will just place the cursor right here at the top.
Then I’m going to click on add media and this time I want to take an image from my
media library and I want it to be this one once again, the binoculars post. I’m just
going to select that and click on insert into post.
Now note on the right hand side under attachment details, in addition to the title and alternative
text we also have some attachment display settings. If you’d like to align it either
no alignment, left, center or right you can so do. I’m going to center this so I’ll
just click on center alignment. You can also decide where you want to link this file.
I don’t want to link this anywhere so I’m just going to click on none, and then finally
here you can choose what size of image you like. Either a thumbnail size, medium size,
or full size I’ll just click on full size we’ll see what that one looks like. And
then I’m going to click on insert into post. Once the image has been inserted into the
post we can click on publish to publish our image post. Great so the post ahs been published,
let’s check it out by clicking on view post and here we have the featured image at the
top, the page title, and here we have the actual image inserted into the post along
with some texts. Also note here we have our sharing options right here so anyone can easily
share this post to Facebook, Twitter, Pinterest or some other social network. We have our
tags here, and then we have a comment sections so anyone can leave you a comment related
to this post. The last type of post that I want to create
right now is an audio post. Once again we’re going to create one more post. We’re going
to go up to the top, hover over plus new and click on post. Then I’m just going to give
my post a title I’ll just call this audio example this is just a demo. Then here down
in the white visual box, this editor box I’m going to click on add media. And then I’m
going to click on upload files, and then select files. The file that I need is on my desktop
and here it is right here this mp3. I’m just going to highlight that and click on
choose. Once the mp3 file has been uploaded then you’ll see the attachment details on
the right hand side. You can add a title, caption and a description
if you’d like. Then we can see there’s an embed or a link, I actually want to embed
this so I want to leave this as embed media player. Then I’m going to click on insert
into post. Okay we can see WordPress has generated some short code right here, we can see that
right here so I’ll just leave that as it is.
On the right hand side here where it says format I’m going to choose audio. Next I’m
going to scroll down, add this to my blog category and I’ll just call this audio right
here and then I will click on add to add this new tag. And finally if you’d like to add
a featured image you can set a featured image by clicking on that link and choosing some
kind of image. Once again you can add a title and alternative text so I’ll just add that
right here, and then I’ll click on set featured image.
Okay great once the featured image is set, next we can just click on publish to publish
our audio post. Okay as we did before, once the post has been published let’s check
it out by clicking on view posts. Here we can see we have our featured image, our title
and we have this audio embed right here which when I click on it we can see that it plays
the audio that I embedded which is really cool.
Okay great so the next thing is we need to set up our menu. Note that right now we just
have this sample page here in the menu, we want to remove that and we want to create
some additional pages so far we’ve been creating posts now it’s time to create some
pages and add them to our menu here on a horizontal bar right here at the top, as well as in the
sidebar. To create a new page now I’m going to come
up to the top, hover over plus new, and click on page. You can also create a new page by
coming to the dashboard and going to the left hand sidebar and clicking on pages and then
you can see there’s an add new link right here.
There’s also another link when I click on page itself, when I click on this link right
here we can see there’s another link at the top here that says add new. There’s
three different places in WordPress to create a new page. I’m going to click on add new
to create a new page and the first page I’m going to create is an about page.
Most likely you’re going to want an about page about your website. The first thing I’m
going to do in my new page is I’m going to give my new page a title. I’ll just call
this about, and then I’m going to add some content here in this visual editor box right
here. I also want to add an image so I’m going to place the cursor right before the
text. Actually I’ll do a little carriage return there, place my cursor right here and
click on add media. Then I’m going to choose an image from my
computer so I’ll just click on upload files, select files, and then I’m going to click
on images and find the image that I want and here it is right here this pic 2, this profile
pic, and then ill click on choose. Here in attachment details we can add a title and
an alternative text. And then scrolling down we have some attachment display settings.
I’m going to align this to the center, I’m going to link it to nothing so I’m just
going to click on none. And then I’m going to use the full size version here for the
size. Next I’m going to click on insert into page.
Great so now on the right hand side we can choose our page attributes, note that there’s
a number of different templates here. We have the default template, the contributor page,
or the full width page. For the about page I actually do not want a sidebar on this particular
page so I’m going to choose full width page. I’ll show you what the sidebar looks like
in just a moment, this one will be a full width page.
Next I am going to click on featured image because I want to set a featured image, and
from the media library I think I will choose this laptop once again. Then I’ll click
on set featured image and once the image has been set then I can scroll to the top here
and I can click on publish to publish my new page.
Once the about page has been published we can check it out by clicking on view page.
Here we see the featured image, the about page title, the image itself, and then the
content of the about page. Also note that I have a comment form here, I usually prefer
not to have any comments on my pages. I prefer to keep the comments going on my blog. So
to remove this right here I’m just going to click on edit to edit this page right here,
there’s a link that says edit. Or at the top here in the toolbar it also says edit
page. I’m going to click on edit page and then I’m going to scroll down, and it looks
like the discussion section is not showing up.
In order to display that right here and set those settings we need to come to the top
where it says screen options, click on screen options, and then here where it says discussion
we want to click on discussion. This will display the settings for discussion below
the post. Now that we’ve clicked on discussion I can
close this box by once again clicking on screen options and we see it collapses. Now when
I scroll down we have some discussion settings and I’m going to uncheck these two boxes
to turn the comments off. Once we have that set then once again I’m going to come up
to the top here and click on update to update my page.
Once the page has been updated we can double check it by clicking on view page and here
we see the about page. So we have once again the featured image. We have the about page
title and now when we scroll down there are no comments showing, which is exactly how
I wanted for the about page. Also note that here in the top menu area the about page is
now displayed right here. So we have a fewer pages to add to our site – one is the contributor’s
page and the other one is a contact page. So, now let’s create the contact page. Once
again, I’m going to come to the top hover over plus new and click on page and here where
it says add new page I’m going to add contact here to add a contact form to my website.
Then here in the white box you just want to place the curser and you want to click on
this button here that says add contact form. Here, the form builder will automatically
give you what your form will look like and if everything looks good to you just come
down here to the bottom and click on add this form to my post. When you click on that button,
WordPress will automatically create t short code with all the contact form included right
here. Next on the right hand side, we can choose
which kind of template we would like. This time, I am going to use the default template.
This is a template that will include a side bar. So, I’m going to add that. I’m also
going to remove comments. So, here where it says discussion I’m going to turn off the
comments right here. I will also turn off the sharing buttons on this particular contact
page and I am going to add a featured image. So, I’m going to click on set featured image.
Then, I’m going to choose this image right here. I’ll choose this art from the LA County
Museum of Art. We can give this a title if you like. So, I’ll just call this LACMA
for the LA County Museum of Art and then I’m going to click on set featured image to set
the featured image. Once the image has been set, once again come up to the top and click
on publish to publish your new contact page. Okay, once the page has been created, we can
check it out by clicking on view page and here we are in our contact page. So, at the
top we have our featured image, we have the contact page title and then we have the contact
form. Also note the sidebar is not showing up because we have not yet added our widgets.
We’ll do that in just a moment. Before we do that, though, I want to add one more page,
which is the contributor’s page. So, to create a contributor’s page, I’m
going to come up to the top here and hover over plus new and click on page. Then here
for the page title, I’ll just call this contributors and this will be a page where
all of the different contributors who are submitting or adding/contributing page content
to the website they will all be listed on this page.
So, once we have the page title, then we’ll just leave everything blank here. On the right
hand side where it says page attributes, we need to select the contributor’s page template.
So, I’m just going to click on default template here and then we see there is this link here
that says contributor page, so that is the one that we want so I’m going to select
that. Then, I am going to scroll down. You can add a featured image if you like. I’m
not going to do that this time and I am going to turn off the comments and discussion on
this page. I’m also going to turn off the sharing buttons.
So, once you have your contributor’s page set up, then come to the top here and click
on publish to publish your new page. Once the page has been published, we can check
it out by clicking on view page and here we see our contributor’s page. Now at the moment
I only have just me. I’m just one person here as a contributor, but as you add newbie
users to your website and as you add new contributors to your site who are authoring post on your
site, then each one of them will show up on this page.
So okay now we see we have some items here in the top menu navigation area, but we need
to really set this up and we need to remove the sample page. The next step is we also
need to set up the side bar area right here. To do that, first let’s take care of the
menu by going up to the top left hand side. We can hover over the site name and go directly
to the menu’s page or we can click on dashboard and then here on the dashboard we can go down
to appearance. Hover over appearance and click on menus.
Here on the menu’s page, the first step is we need to create a new menu. Here where
it says menu name, I’m just going to add menu right here and then I’m going to click
on create menu. Next here in the menu, we need to add some pages to our menu. So, I’m
going to add the contributor’s page, the contact page and the about page, these three
pages right here then I’m going to click on add to menu. Now, in order to reorder these
because I do want the about page to come first, I’m just going to drag this to the top right
here so that that’s an order and the other item I want to add is a home page icon. So,
that would be requiring a length. I’m just going to click on this one right here. I’m
going to add the URL of my website right here and then I’m going to click on home or should
say I’m going to give this a title called home and once I have that set I’m going
to click on add to menu. Once the home button has been added here once again I’m going
to drag it to the top and then I’m going to click on save menu to save my menu.
The next step is here the menu location. So we need to click on this manage location’s
tab right here and here we note that the Twenty Fourteen theme supports two menus – a top
primary menu, and a secondary menu and the left side bar. We can set the location for
the top primary menu. That’s the one that shows up on the top right hand side horizontally,
the horizontal row. I’m going to click on menu right here. If you would like to create
two separate menus, you can do so by creating a new menu and then setting a second menu
right here for the side bar. I’m actually going to use the same menu for both the top
right-hand horizontal row as well as for the left-hand side bar. So to use the same menu,
I’m just going to click on it two times to set it in two different locations. Then,
I’m going to click on save changes to save my changes.
Let’s take a look at the website now that the menu has been set. I’m going to go up
to the top and click on visit site and now we see this menu items. They are showing up
here in the horizontal row right here on the top right-hand side as well as on the left-hand
side bar. The next step is we need to configure the
widgets on the website. To do that, we can go hover over the site name and go directly
to the widget’s page or we can click on dashboard then go down to appearance, hover
over appearance and click on widgets. By default, when you install WordPress it comes with a
number of different widgets already and the primary side bar. The Twenty Fourteen theme
has three different side bars, a primary side bar, a content side bar and a footer widget
area. Here, in the primary side bar, I want to remove all of the default widgets that
are included in the primary side bar. I’m going to remove all them by just dragging
them over. You can also open them up by clicking on the caret here and then you can click on
the delete length to delete the widget from the side bar area.
Now, on the primary side bar area, which as it notes that’s the main side bar that appears
on the left, I want to include the search box, which is right here. I’ll leave that
one there. Then, I also want to add this Facebook like box. Here, it notes this is a Facebook
like box display, a Facebook like box to connect visitors to your Facebook page. I’m just
going to drag that up to this primary side bar and pop it in there. You can give it a
title and then here you want to add the Facebook page URL. Now, I’m not going to add my own
Facebook page. I’m just going to add Pandora, so I’ll just put Pandora there for the moment.
Facebook page is the Pandora URL right there. You can set the dimensions. I’m going to
use 200 width. I’m going to keep it really small, so I’m just going to make the height
say 110 and because this is a dark color scheme theme, I want to keep the box consistent with
that so it kind of blends in. I’m going to choose the dark color scheme for the like
box. I do not want to show faces or a border, so I’m going to uncheck those. You can decide
how you want to set these up and then I’m going to click on save to save my Facebook
box settings. Once the settings have been saved, then I’m
just going to close this collapse that box right there and the next one to set up is
the content side bar. I’m going to click on this little caret here and as it notes
this is the additional side bar that appears on the right. This is the side bar that will
be showing on your blog post and on the home page. The one that I want is a special widget
here for the Twenty Fourteen theme. It’s down at the bottom here. It says as it notes
use this widget to list your recent quotes, videos, audio, image, gallery or length post.
This is the one that I want. I’m just going to drag this up to the content side bar and
drop it in there and here we can see we can choose the number of posts to show right here
as well as the post format to show. There’s a whole bunch of different options here. I’m
going to choose the video one first. I’ll just put video. For the title, I’ll just
call it video and then I’ll click on save. Next, I’m just going to collapse this by
just clicking on that caret one more time to reduce the size and again I’m going to
go back down and I’m going to grab the same widget because I want to also add galleries,
images and audio. I’ll put this right below the video one. This one is going to be the
gallery, so add the gallery there. The post format of course needs to be gallery, so I
will add that there and then I’ll click on save and then close it once again. I’m
going to do this two more times because now I want to add an image as well as audio. I’m
just going to drag this here. This time this one will be images. I’m going to click on
the post format of images and then click on save.
And then close the box one more time and the last one that I want to add is the audio post,
the audio post. So, I’m just going to grab the 2014 widget one more time, drag it to
the content side bar right here, and then I’m going to call this audio since this
will be my audio post format, post. I’ll just choose audio there and then finally I’ll
click on save. Lastly, we have the footer widget area. I’m
not going to include anything in the footer widget area, but as you saw you would do the
same thing that we did with the primary side bar and the content side bar. You would just
drag one of the widgets that you would like to have displayed in the footer widget area.
You would drag them over into this section right here.
Now, let’s take a look at our website. I’m going to go up to the top and click on visit
site. Now, when I scroll down, note that now the side bar is showing up right here, which
is really great. We’ve got the video post right here, then we’ve got the gallery post,
the image post, and then we have the audio post. Also, when we go to our contact page
now as well, note that we also have the side bar on the right-hand side. It looks like
we’re good to go. The only last thing is that we do have the sharing features right
here, and so this would be just optional. If you want to have this included on your
side bar, you can do so. I’m personally not really a huge fan of having them here
because I will actually we need to add that. We need to add the social network icons on
the left-hand side. The first thing that I want to do is for all
the different content that is displayed in the right side bar. I’m actually going to
turn off the sharing features for these particular types of content. Just as a side note, I have
submitted a question to the WordPress forum asking how to turn off the sharing features
in the widget and keep them, however, on the actual post. It is possible between the time
of this video recording and when you’re actually watching this video and adding your
widget it is possible that WordPress may make some changes to this particular thing. I’m
not sure. I’ll drop the link to this particular question thread asking about this if you’re
interested so you can check out what the answer or reply was related to how to turn off jetpack
sharing in the widget area, but keep it on the post.
For the moment, though, right at the time of this recording the only option really to
remove the sharing features here and the side bar is to remove it both from the post as
well as the side bar. That’s what I’m going to do right here as a quick demo. I’m
just going to click on this link right here to go directly to this video post page. Then,
I’m going to scroll down. Now we can see here are the sharing features here, which
I really love. I’m just not really a huge fan of them also showing up in the widget
area. Once again, this may be resolved by WordPress and I will leave the link to the
forum so you can see what the outcome is of my question, but for the moment I’m going
to actually remove it from both locations. I’m just going to click on edit here to
edit this particular video post. Then, I’m going to scroll down to the bottom and here
where it says show sharing buttons, I’m going to uncheck that to not show them and
then I’m going to come up to the right-hand side and click on update. Now that the post
has been updated when we click on view post, now we’ll see that those sharing icons are
no longer on the right-hand side bar, which is great. However they’re also not here
on the post either, which is not so great, but hopefully WordPress will help to resolve
that and in the meantime now you know how to turn the sharing off or to turn it on,
so that’s good. Good to know both ways to display the sharing features.
The next step is I want to add some social sharing icons to the left-hand side bar right
here and we’re going to be using a really cool plug in called simple social icons. I’m
going to go up to the top and I’m going to click on dashboard. Then, I’m going to
scroll down to plug ins and then I’m going to click on add new to add a new plug in and
this one is called simple social icons. Then, I’m going to click on search plug ins and
here it is at the top you can read more about it by clicking on details or you can simply
click on install to install now. I’m going to click on install. Are you sure you want
to install this? Yes, okay and once the plug in has been successfully installed, go ahead
and click on activate plug in to activate the plug in.
Okay, the plug in has been activated. The next step is we need to scroll down to our
widgets, hover over appearance and click on widgets. Here, where it says, let’s see
the primary side bar is the main side bar on the left. Okay, that’s the one that we
want. I’m just going to scroll down here and find the simple social icons widget and
drag it up to the primary side bar. I’m going to add it in between the search box
and the Facebook like box and here we can give it a title. Next, you can give it a special
color. If you want to add a background color, you can change the color and the hover color
right here. I’ll just leave it as it is right now. Then, you can add the URLs of all
the different social networks that you want to display in the left-hand side bar. I’ll
add Pinterest down here below and I’ll also add Twitter and YouTube.
Okay, once you have the different URLs added for the social networks that you would like
to display, go ahead and click on save to save your settings. Now, we can check out
the website by going up to the top and clicking on visit sites and here we see the social
network icon showing up on the left-hand side. Now note that they’re in gray and the other
colors here on the website are predominantly white, black and green, so it would be much
be better to have these icons be green. To change the color on these icons to green,
the first step is we need to find out what the color code is of the green that’s being
used right now within the 2014 theme. I’m on a Google Chrome browser and in Google
Chrome there is a really cool tool called the developer’s tool that will help you
to see what the code is on the website. To find that, I’m just going to go up to the
top right-hand side here. There are these three different lines and when I click on
that, note that I get this dropdown box here. I’m just going to go to tools and then when
I click on tools then when I have another little dropdown box here and it says developer
tools. I’m going to click on developer tools right
here and here we see all the code that’s creating the website that we’re looking
at on the 2014 theme. Our task now is we need to find out what this green code is right
here. To find the green code, I’m just going to drill down this code, drill down the pages
of each of these different code lines by just clicking on these little carets here and you
can see when I hover over each one of them different sections on the home page here highlight.
That’s gives you a good clue of what we are looking at in terms of the code. For example,
when I hover over the header here we see that I’m highlighting the top header section.
That’s not the part that I need. I really need the side bar section right here. As I
hover one by one, it looks like it is in this domain section here and see it’s in the
secondary section and it looks like I found it right here the nav line right here.
Here, we have the different menu items. The first one right here is home and note when
I click on this one it is highlighted right up here at the top when I hover over this
line and we also see here is the green code on the right-hand side. This is the code we
need. I’m just going to copy it, highlight it and copy it, and then I’m going to close
this box and go back to the widget area by clicking on widgets and then I’m going to
go to the simple social icons box, open it up, and then I’m going to scroll down here
to where it says background color. I’m going to paste in that code that I just copied in
the previous step. I’m going to add it to the background color and the background hover
color and then I’m going to scroll down to the bottom and click on save to save my
changes. Now that those colors have been saved when
I go to the home page by clicking on the home page, now we see that the icons are now green,
which is exactly how I want them to be. The next thing is when we go back to the contributor’s
page I had noticed that there is no image here. In order to correct that, you need to
actually add an image on your user file. To do that, I’m going to go up to the top,
click on dashboard, then you can go down to users, and then I’m going to click on edit
to edit this user and then as I scroll down here in the contact info section on my profile
we see an email address. Now, the email address is what determines what the images in the
profile pic. Whatever image is associated with this email is the one that’s going
to be displayed and in order to set that part up you need to go to a site called gravatar.com.
This is also a WordPress site and you need to actually create a globally recognized avatar.
This is your profile pic. This is a free program that you can sign up for here for your account.
All you need to really do is just sign in here and upload an image to gravatar.com and
then the same email that you’re using on gravatar.com you want to come back to your
profile page right here and your WordPress area right here and you want to add that email
right here, and when you do that and you saved your profile then an image will show up on
the contributor’s page. That’s how that works. This is associated and connected with
gravatar.com. Here we are back on the home page of the website
that we’ve been building in this video and if you’ve been following along then most
likely your website should look something like this. You have six feature posts here
at the top, you should have your menu items here on the top horizontal row as well as
on the left-hand side bar. Then, you should have your social icons here also on the left-hand
side bar, so anyone can easily connect with you to the social web, whether to Pinterest,
Twitter, YouTube or some other social network. Then, you’ll have your Facebook like box
here, so anyone can easily sign up for your Facebook page and like your Facebook page.
Then, because this is a magazine-style theme, there’s a lot of focus on content and images
and photos, so you should have your photos just under the top section right here, which
begins your blog content. So, you’ll have some images then the actual title of your
post with this beautiful modern typography and then you’ll have the actual blog content
itself. Each of this post will be stacked one on top of the other down the home page.
On the right-hand side, you should have your side bar. In this case, we’ve been adding
video content to the side bar, some gallery content, we have some images, and we also
have added some audio content. This is what our website looks like. We’ve
used the beautiful 2014 theme that comes with WordPress 3.8. This is a responsive WordPress
website theme, so this theme is going to look amazing on any kind of mobile device like
smartphones and tablets as well as on laptops and desktops.
Once again as a finale, a quick demo of the finale of the website when I reduce the screen
size, note that all the elements on the page are now stacking up vertically one by one.
This is the smartphone view that we can expect and it’s just absolutely beautiful. We have
our menu item right here when I click on these three lines then the menu drops down really,
really nicely, such a great design, and all the images are stacked one by one on top of
the other. This is just a great website. I love the new
design that WordPress just came out. They’ve really raised the bar. Thank you WordPress
for providing this beautiful free WordPress website theme with the WordPress 3.8 software.
Thanks so much everyone for joining. Also, I hope this video is helpful to you. If it
was feel free to leave a comment below like the video or share the video. I will be coming
out with more videos related to WordPress and how to build your business on the web
so please subscribe to my YouTube channel. Thanks for watching. I’ll see you in the
next video. One more thing before I sign off, I just want
to mention that I began pinning things on Pinterest, so if you are on Pinterest feel
free to connect with me here. Here, I will be pinning things related to WordPress, themes
that I love, quotes that inspire me, and much more. Also, if you’re on Twitter, feel free
to connect with me at 77webstudio. Last but not least, all the conversation continues
on my website at 77webstudio.com, so feel free to head on over to my website to continue
the conversation. Until next time. I hope you have a great week
and continue learning the skills that help you to build your business on the web.

Only registered users can comment.

  1. I'm really grateful! Thanks to you I created this… And the work continues, as always =)
    http://guided-treks.com/

  2. Unbelievable. I've been struggling for weeks trying to make my new site look attractive. I did nothing more than change from theme twenty13 to twenty14. Voila! Great looking site. I love you 77webstudio

  3. Thanks Katrina, your details step by step video made me set up my home page so easily. Thanks so much.  I loved the theme but I struggled 2 weeks to set up my posts in this theme… you are jus wonderful.Thanks again!

  4. Hi Katrina, thanks for the upload. I have two questions: 
    1. For the contributor's page, is it possible to add a short bio, picture, and possibly a "contact *insert name here" button for multiple contributors" If so, how? 
    2.How do you add a prop down menu to show specific categories? 

    Thanks for your help! All the best 😀 

  5. Hello.
    I'm an NGO working for disabled people in Pakistan. Thank you so much for uploading such a great tutorial. I'm confident that I can easily design a good looking web site for disabled people. I'm starting from now. anyone can check it on www.ahsasdpo.org 
    thank you once again. Have a good day 

  6. @Hayder Abbas Hi Hayder, if you don't see the plugins section then you are most likely using WordPress.com and not WordPress.org. WordPress.org is the self-hosted version of WordPress that give you extra features like plugins. Hope this helps.

  7. Hi, In the grid of posts is it possible to have the text for each post on TOP of the featured photo instead of the bottom? Great video BTW!

  8. Hi Katrinah… I have a silly question. I love the theme AND your video. Thanks so much, I've learned a lot. The problem I'm having is the actual site shows the theme all the way to the left on my screen. Is there a place I can center it in the back office? Oddly it's the only Theme that's doing this. (figures right? The one I like the best) Can you point me in the right direction?  Thanks. L

  9. Hi Katrina.  Your tutorial was awesome and got my site up and running!  Now the 2014 theme update is out.  I am wondering about the changes made to 2014 as shown in your tutorial… will they be lost with the update to the 2014 theme?  Before updating, the warning is to consider a child theme if customization has been made or they will be lost.  I wasn't certain what customization meant.  Thanks for your insight here.

  10. Hi Katrinah, I am following every single as you have indicated but when I add a new blog, it appears on the far left close to the categories instead of the middle where I want it.  Do I have to upload six blogs at the same time in order to have the magazine look or can I just add one or two and it will still look okay.

  11. Got a question. For my blog, I sometimes will add content from the web by using that + button, where I can add content that I've discovered on the web.  Can I put that content exactly where I want it…for example, I want to add it to my blogging content, or my social media content, or mlm content and what have you?

  12. Is there a way to control the layout of the featured post? I am trying to keep a portfolio post as the first one, as well as arrange others in a certain order. As new post are featured, I don't want to lose the placement of some of the other featured post. Plus, is there a way to link a featured post to another page listed on the site? Thanks, your video has been very helpful.

  13. Great tutorial but I can't get my featured images to show up as grid on homepage. Does the image size make a difference? I do get a big blank area where the grid would go with a "box" with an "x" inside when I try to as images. Also, when I upload image that are, say, 1250×1500 wordpress seems to change it down to 250-350 just before I insert it. Any ideas? Thanks. Bob

  14. Ok, lets try this again.  I have looked at this website half a dozen times and more, I have the twenty fourteen blog up and running, the six post are there just waiting to be featured in the grid, and there's no grid.
    How can I get the 6 blog post with images up on top there in the grid? 
    Could you help me with this please.

  15. Thanks so much for this great video. This is my Go-To self-training tool. I really appreciate your creating and sharing this.

  16. This is brilliant. I am on WordPress 4.0 And I can confirm your problem with Sharing on Sidebar but keep on post is resolved. FYI I did have a problem with the Dashboard Featured Content in Customize. The Griid just did not work. SO i removed Comments and Pings from the posts and I think that fixed it. I ham a Trainer myself and I compliment you on this Tutorial. Foer almost an hour and a half and your delivery was perfect.

  17. Thnx so much for sharing this on Youtube. You definitely helped me with my blog! So thank you, thank you, thank you! Just one question: on your video I first saw 'blog' written under the photos. But in the end, that word was gone by all six of the photos on your homepage. How did you do that?

  18. Hi Katrinah,Thank you so much for this amazing tutorial video! I was so LOST until I FOUND this video! I decided to use the 2014 theme for both of my niche blogs. I invite you to visit both of my blog websites whenever you get a chance. Thanks again for sharing this video! 
    www.inspireandlove.com
    www.inspireandlovetoo.com

  19. Hii 77webstudio i just have one doubt, what should i do if i want to change the menu color also too green instead of white?
    Please help !! 

  20. When i had finished the blog only 5 of the 6 different grid picture at the top have worked one is empty despite me having done all 6 blog post with pictures exactly the same. Also when i upload new posts they 6 pictures are not changing are they not supposed to change when newer posts of blogs are posted?
    Can anyone tell me where I am going wrong?

  21. Hello Katrina,
    thanks so much for your video! With your help I was able to create my own website. Maybe you can help me with this question: How can I remove DnsRsearch.com from my HOME page? After a few days my HOME page stopped working. It shows up in the beginning but if you want to switch back from the other pages in the menu it connects to DnsRsearch.com. Do you have a tutorial or link for that? I have no idea how to remove it and I couldn't find anything in wordpress support. Thanks for your great work!! Marlen

  22. I started my WP site watching another tutorial from someone else… at 17mins and 10 seconds you advised that we insert a unique user name (sound advise – thank you for that), how do I go about fixing this after the fact. The 'Profile' page in WP says Usernames cannot be changed. Thx in advance! 

  23. Q: Hello Katrina, I can't seem to get my blog posts to form a 'Grid'. I've gone back and resized all of the images to 836 x 463 pixels, changed the setting back to slider, and then to grid again but to no avail. My site is www.TorontoRealEstateMinute.com    

  24. Hello! First I want to say I really like the video and was exactly what I was after for my site, But in the post I got an error stating that I had H1 tags that were multiple, From the blog and the lay out i'm assuming. what should i do to change that but keep the same page formation?

  25. Giving you 25 wows! That's how many dollars I spent at Lynda.com and that video wasn't completely focused on Twenty Fourteen. Love your fast-paced approachI Nevertheless, I had one problem throughout the whole lesson. I couldn't get my posts to appear in rows. They stayed vertical. I'm thinking I messed up somewhere with the featured post tag? Any thoughts? 

  26. Hi Kartinal,  Thanks for the video.  For the home page, if I want to limit the number of posting to be on the home page (which is not static), can I do that?

  27. Hi Katrinah, Thanks a lot for your help here. You saved my life! But I have a question about the grid. Is it also possible to put PAGES in the grid(or slider) instead of POSTS?

  28. Hello, 
    I like your tutorial about the twentyfourteen theme on WordPress. Is there a way to make the menu section pages, to look as the Home Page ? I mean I want the grid view of the Home Page to be the same on the other pages ? Thank you !

  29. A nice tutorial on #WordPress . Beginners are going to like it . Here I would like to add one more thing about a software #templatetoaster . It is perfect theme generating #software I have ever used. With the help of this software anyone can design best #themes , #websites , #templates . The best thing about this software is it supported by all the best #CMSs available in the market.

  30. My gallery isn't showing up properly. I'm getting this error: Fatal error: Call to undefined function aq_resize() in /home/content/p3pnexwpnas05_data01/03/2415803/html/wp-content/plugins/virtue-toolkit/gallery.php on line 91

    Any suggestings on what I can do? I tried resizing the dimensions of the pictures as well

  31. how do i create a gridstyle for catogiries

    iam writing about helth and sports.
     
                    helth is showing in grid model  but sports is not showing in grid model how can I? plz….. help me

  32. @77webstudio im still using the 2014 theme in 2015 cause its awesome! anyway i was trying to see for the CONTENT SIDEBAR is it anyway that you can have the post just there than showing up where the regular post be at? like if i just want a video,gallery,audio post in the content section and not showing on my post timeline at the same time is it possible?

  33. I chose the "Zuki" theme for $24. However, it appears in order to get the results I want, including a better understanding of setting up my website, I must pay more money. This is the 2nd time I've tried Zuki, cancelled out of frustration 2-weeks into the original purchase. I'm about to cancel again… lack of support is astounding. Thinking I should cancel again and practice with a free theme… regardless of how much I believe the Zuki is closest to what I'm attempting to accomplish.

  34. You're the first woman that spoke this much to me without me wanting to go away 😛 Your video is very educational and indeed informative. Thank you for helping us out. 
    God bless you.

  35. I installed Jetpack and activated tiled galleries but no option for "type" appears when I create a gallery, do you know why?

  36. Hi Katrina. You publish a really great and very useful lessons. Thanks a lot. A very good job. In this lesson I have followed you step by step but I have a small problem with appearance of 6 blog posts at the top: not only titles are shown under the pictures but category too between picture and title. How to remove showing of categories and stay only with pictures and titles as in your example? Thank you.

  37. hi, Pls i would like to know how to install jetpack when building a wordpress site with a local server like wamp.

  38. I enjoy your video on the Twenty Fourteen theme.  I am using wordpress.com, not wordpress.org.  Can I still do most of the features you address in the video?  I would expect some tradeoffs but is it essentially the same?

  39. Hi Katrinah, tnx the tutorial was awsm. I just want to ask one thing.
    As I want to give my webpage a cover image also. how is it possible ? please guide me.

  40. Hie again tnx for an awsm tutorial, I am looking for a reply for my last question also I want to ask how can I upload and publish my logo on the page ?

  41. Thank You! This video was shared with me by a forum contributor. I needed help making one of my websites look better….I am using Twenty Fourteen as well …I have had empty black space on the home page just below the nav bar…And I think I am going to try that social icon plugin too…I am tired of the one I have…Voted up 🙂

  42. Hi,katrinah gating I have one simple question to you, If I have one website create other system don,t make with WordPress. Now I want to edit with wordpress can you tell me that system thank you …

  43. I love this video I find it very helpful. However, I'm having a problem with loading video….when try to post the video….only the link shows up. I can see it in editor but I can't see it when I view post. I've had to leave off video when it would make the blog post better. So I have no video on my blog. Any help anyone who has this theme?

  44. Please help! Why is it that when I click on the featured image on the homepage on a featured content post it's an empty page and doesn't lead me to the text I've posted? This has been driving me insane for about two weeks now if anyone can explain how to fix this I'd appreciate it a lot.

  45. Hi Katrinah! First of all, great tutorial, I really like the theme, and all the features, plus you explained it really well. My question is if there is a possibility to some how modify the number of posts I can have on the grid 6 posts section, I would like to have several rows of posts that cover the entire front page instead of just 6 . Thank you for your help!

  46. Hi Katrinah, your video was super helpful! I used it to set up my blog but for some reason, the posts page still says I have not published anything. The featured content works like a charm though. Can you help?

    My blog: http://www.mrbiped.com/

  47. I was able to extend the width for text and videos on my posts, but the images are always contained. Could u help me?

  48. Thank you !! you are amazing teacher !! I giving you A-1 in two days watching you multiple videos I fix a lot issues I had also
    my provider and the company who maintain my site they billing per month for SEO I discover they were using a pluck in for SEO
    also they never install a security pluck in and I was getting 3-4 virus a year also they never back up my site Once again a BIG THANK YOU TO YOU now I can manage my site my self and follow all the videos you have on line.
    Cheers and Happy New Year Bill.

  49. hi katrinah Thanks for the video . can you please tell me . how to fix blurry pic . if i set the pix the way you said 836/463 . it is blurry pic . how can i make the pics clear ? thank you

  50. sorry for me english because i'm french :'D
    With your video,you've simplify me website learning a lot.
    Verry big hug and a many more thank's to you Katrinah ^^

  51. Just watched most of your video while switching back and forth to build my website. I've noticed two issues. 1. If I go into the Home page from Dashboard: Pages: Home Page, the posts don't show up on the page but, if I click on the Home page link while viewing the another page (About, Contact), the Home page includes the posts, which brings me to question 2. The entire posts are in the center of the Home page, one above the other, with the Featured photos on top of each. I would prefer to have a thumbnail of the Featured photo with the title and (possibly the first paragraph of text) and a link to the full and separate post. Do I need a widget for that?

  52. I really LOVE this video! It helped a TON! However… I am having a slight problem. I added the custom link 'Home' and added the appropriate homepage link for my webpage, I found that the right content sidebar did not appear. I know that normally I can edit specific pages that I create and use the default setting to allow the right page to appear, but in this case, nothing appeared. Anyway to solve this?

  53. https://wordpress.org/support/topic/how-to-turn-off-jetpack-sharing-in-widget-area-twenty-fourteen mentioned in video to remove social icons from widget area + leave them on posts. Fix appears to have been rolled into Jetpack.

  54. please katrinah help me , because i am totally newbie, my issue is that i already made this wordpress website ( in Arabic Language) by using the same template 24 template , but i have an issue with the site which is i have a huge white background when i scroll to the left , which i actually do not need , so please help me to eliminate and delete this background, thank you in advance for your cooperation

  55. Can you please demonstrate how to consolidate similar blog into same tile. I mean suppose I have travel related blogs and I want to consolidate all of them into a tile called Travel Guide. Please advise

  56. OMG i just want to say a BIG thank you – i really loved this layout however i am so non techy – thank you to your video tutorial i have now set up my blog/website and it looks really professional

  57. Problem with the woocommerce products section; the variations tab won't load any of the products.
    Please help!
    Thanks

Leave a Reply

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