Tip:
Highlight text to annotate it
X
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.