- By
I’d never normally start a post off so dramatically, but DAMN – have we got something special today: a complete step-by-step video guide (with no steps skipped) to creating a professional small-business WordPress website!
What makes this video so special though, isn’t the title: it’s essentially three things: 1. the fact that this is exactly how we ourselves would go about doing it (and we are, ahem, pretty much experts at this); 2. the level of detail we go into (the video is a whopping one-and-a-half-hours long) – note: in the video we create an example small business website from start to finish; and 3. that the video is aimed at complete beginners – folk who very likely haven’t done anything like this before (and still see the whole idea of creating a site for themselves as something really quite daunting).
By simply following along, by clicking where we click, and with a little thought put into changing a few aspects to suit your own particular business, you’ll hopefully be able to make a similarly fantastic (and technically superb) WordPress website entirely for yourself!
So what are you waiting for? Get started:
How to Make a Professional Business Wesbsite with WordPress:
Direct link to watch the video over on Vimeo.
– (note: video credits to Topher DeRosia – creator of HeroPress)
Video Transcript:
In this video, I’m going to show you how to make a professional business website with WordPress. We’ll go step by step, and I won’t leave anything out. The business that we’re going to use as a model is a coworking space. If you’d like to take a look at the final version of this website, you can go to coworkerpro.com. The elements that we’re going to put into this site could be used on any business site. There’s a call to action. A little bit about us. Some staff, testimonials, and a contact form, as well as several other pages. So whatever your business, at the end of this video, you should have a top-notch website for it. We’re going to host our site at Siteground. And we’ll take a look at all they have to offer, and how easy it is to get things rolling. We’re going to install a few extra plugins to help out, and we’re going to use the Hestia theme from Themeisle. Hestia allows us to use the customizer built into WordPress to edit each part of the page, right from the front end. We’ll also look through several tools that can help make our site work faster and better. We’ll look at Siteground’s own optimizer. We’ll connect the Google Search Console and Google Analytics, as well as Yoast SEO, for search engine optimization. And then we’ll use Automattic’s Jetpack plugin to manage spam, backups, and some additional statistics. If you follow along, in only a couple of hours, you should have a complete, beautiful, functional, business website ready for use. So let’s get started. The first thing we want to set up is web hosting. Now web hosting is where your site is going to be on the Internet. It’s sort of like getting a rental garage to store your things. You rent a little bit of space, you put your website on it, and people can come visit it. The site we’re going to use is called Siteground. They’re an excellent host with great prices and lots of features that I really like. But before we get started here, I’m want to show you something on WinningWP.com. Siteground and WinningWP have an arrangement where you can save % off your hosting at Siteground. In addition, WinningWP gets a little slice of the money that you’re going to pay. This money goes to create videos like this, so it’s really a win-win situation, where you get inexpensive hosting, great content, and WinningWP gets a little, as well. Now, in order to use this deal, all you have to do is go to this page, there’ll be a link below the video. And click apply the coupon. And there we are, it says, special deal for WinningWP.com visitors. And we’ll choose a plan. The plan we’re going to go with is the GrowBig plan. It has just enough extra features over StartUp that I really like it. But the GoGeek is really for slightly larger sites than we’re going to build. So let’s pick GrowBig. And we’ll click get started. Now part of the process for this video is to register a new domain name. If you do already have a domain name registered, Siteground has some excellent documentation here on how to either point it at your site, or actually transfer the name to Siteground. Either one works very well, and they have good information on how to do both right here. We’re going to get a new one, and it’s going to be coworkerpro.com. Now, this domain costs $. a year. And when you think about it, as an annual price, that’s really not very much. Let’s click proceed. Here it says, congratulations, our domain name is available. Now, we’re going to create an account on Siteground. First, we put in an email address, and then a password for Siteground. This isn’t a password for your domain name, or for FTP or anything like that, this is just to log into Siteground. Next, we put in some personal information. Next, we’ll put in our credit card information. And here, we’re going to say that our billing address is the same as given in the contact information above. And now, we’re going to review what it is we’re buying. We’re getting the GrowBig plan. Our data center’s going to be in Chicago. That’s pretty close to where I am. But you have a choice, it could be other places, all you have to do is click this button. I’m buying a -month plan for $. a month, so right now I’m going to be billed $.. Add onto that the domain name registration for $.. Additionally, we really do want domain privacy. This keeps spammers from crawling the domain registry looking for email addresses. Lastly, there’s the Siteground site scanner. This monitors your site looking for hacks and attacks and things like that. It’s well worth it, it gets you one step ahead of the bad guys. So then my total is going to be $.. But the nice thing is, this pays for the entire year, so you don’t have to think about it again for a year. We confirm the terms of service, and we click pay now. And our order has been submitted. We can log into our customer area right away. However, it can take domain names up to hours to be registered. So our domain name isn’t going to work immediately. Now that we’ve created our Siteground account, we can go to the domain name that we created and see this placeholder. All new domain names at Siteground get a placeholder like this, and it’ll stay there until we install our own website. So for our next step, let’s go ahead and install WordPress. First, let’s go to Siteground.com, and log in with the account that we created earlier. Now that we’re logged in, right here on the main panel, there’s a little alert that says you have a new hosting account that you haven’t set up yet. And if we click view, it gives us several options. We could start a new website, transfer a website, or say we don’t need help now. Or we could click this little arrow and this will come back later. But we’re going to go ahead and start a new website. We want WordPress. And now we’re putting in some WordPress account information. So this will be for WordPress on our site. And we’ll click confirm. And now it says, you’ve requested to install WordPress on your account. And then we need to confirm that we have read and agree to the Siteground terms of service. I’m going to leave that as an exercise for you. And now, we’ll click complete setup. And now what it’s doing is creating a database for us, installing WordPress, and connecting the two, using the information we just put in. And there we are. We can proceed to our customer area. But now, if we go back to our webpage and reload, you’ll see that we have a blog. You’ll also note that we’re running HTTPS, which means they created an SSL certificate for us. I’ll show you where that happens, so that you know how to do it if you ever need to again. In the Siteground user’s area, we go to my accounts. And then go to cPanel. We always want to access cPanel securely, so go ahead and choose to remember it. Now there are a great many things on this page, but there’s also this wonderful search over here. The SSL certificate we have comes from Let’s Encrypt. So we’ll type in L-E-T, and there we are, we’re filtered right down. And here you can see our SSL certificate for coworkerpro. But Siteground set it up for us, so we don’t need to worry about it. I just wanted you to be able to see where it is, because it’s important. So now, let’s log into WordPress, and do some minor configuration. This is the username and password I created just a few moments ago. Now something else that Siteground did for us is install Jetpack. We’ll look at configuring that a little later. I’m going to close the welcome bar and the Jetpack bar, and now I have a very vanilla WordPress install. So one of the first things we wanna do is go to Settings → Permalinks, and we want post name, because it makes simpler, more easy-to-read URLs. It’s also much better for search engine optimization, and that can be really important. Then we’ll go to discussion, and for now, we will turn off comments, because we don’t want anybody stumbling on this website and using comments, ’cause they’ll probably be spam. We’ll go to Reading. And we’re going to discourage search engine visibility for now, because we’re not ready to be public. Now don’t forget, once you’re done with your site, and it’s ready to go live, come back to this Settings → Reading page, and uncheck discourage search engines from indexing this site. Because then, Google will be able to come find you. Then, we want to delete the default content that comes with WordPress. There’s one post with one comment. And if we trash that post, and empty the trash, then the comment goes with it, so we don’t need to go find that comment and delete it. But now let’s go to pages, and there are no pages found. So now, if we look at our homepage, it should look pretty bland. Nothing found. There are some things in the sidebar, let’s go take care of that. We’ll just empty that right out, and then, we will have a clean slate. And there it is. An empty site, just right for filling up with our content. Now, our homepage is not going to have a blog on it. That’s going to be a separate part of the site. But right now, our homepage is a blog. So let’s change that. The first thing we’re going to do is create two pages. We’ll call this one home, and simply publish it. And then we’ll make another one, and our site isn’t going to have a blog, it’s going to have a news section, so we’ll call this News. So now we have two pages, Home and News. But now we need to tell WordPress how to use them. Now, we go to Settings → Reading. And right here, it says Your homepage displays, and right now, it’s Your latest posts. But instead, we’re going to choose a static page. And for the homepage, we’ll choose Home, and for the posts page, we’ll choose News, and save changes. Now, if we go look at the webpage, there’s our homepage. And our site is still called my blog and my WordPress blog, but we’re going to change that in just a few minutes. Now that we have the most basic configurations done on our site, we’re going to install a couple of plugins that will help us moving forward. The first one is called TinyMCE Advanced. Now TinyMCE is the name of the editor that WordPress uses. If you’ve ever made a page or post, you’ve used TinyMCE. If we edit this page, you’ll see it right here. By default, it has this one bar. If you click this button, called the toolbar toggle, we get a second bar. But TinyMCE Advanced adds even more. There’s a dropdown list here for different types of headers, and there’s a menu navigation right here of all kinds of other tools. So let’s install this real quick. We go to plugins, add new, and we can search plugins, and there it is. We’ll click install now, and activate. And now, if I go back to pages, and edit home, you’ll see that we have a dropdown for fonts, headers, and we could use tables and all kinds of other things. And this will come in useful later. Now the other plugin we’re going to install is called My Eyes Are Up Here. And this is a really great plugin that helps with cropping photographs. Normally, if you have a photograph that is tall and narrow, and you ask WordPress to make a square, it crops the square right out of the middle. However, with My Eyes Are Up Here, it intelligently detects human faces. Like this. And then creates proper thumbnails. Additionally, if there are no people, you have the option to put this pink dot anywhere you want, and make sure that that part of the photograph is always in the picture. So if you have a photograph with mountains and a freeway, and you want to crop it so you only see the mountains, you can simply select the mountain area, and when WordPress crops, it will keep the mountains. This plugin is really useful when making staff archives and galleries of people, because WordPress will always get their face. So let’s install this. There, now it’s installed. Now there are a few other plugins here that I’d like to go over real quick. Hello Dolly comes with every WordPress install, and we don’t need it. So we’re just going to get rid of it. Akismet we’re going to use later on in the video. It’s used for anti-spam. Jetpack also comes with a number of tools, and we’ll go over those later. And then, SG Optimizer is for speeding up your site on Siteground. It has a great caching plugin, and a number of other things that we’ll look at later. Next, we’re going to install our theme. The theme we’re going to use is called Hestia. And it comes from Themeisle. This is the page for it on Themeisle.com. And it comes in two versions, a pay version and a free version. In this video, we’re going to use the free version. But I wanted to show you a few of the things that it can do. This is Hestia that we’re looking at. And this homepage was built without any coding. It comes fully compatible with page builders, but we’re not going to use one in this video, because we’re not going to need it. Hestia is great without it. It works wonderfully with the customizer. And it’s extremely popular. We’re going to get it from WordPress.org, and use the free version. There are over , installs of the free version. So we’ll go to dashboard, then appearance, and then themes. Add new theme. And search for Hestia. And there it is. We click install and activate. And there we are. Let’s go visit the homepage and see what it looks like. Here’s the site title. And this is a page title, and we could change it in the customizer. It comes built in with a few things, like this blog area, and a populated footer with some pictures. We’re going to change how it looks, we’re going to add a menu, and we’re going to do a number of things to it. But first, while we’re here in the theme area, we’re going to delete all but one extra theme. So let’s delete and . And the reason we’re deleting some is that, if there’s ever a security issue, we could be susceptible to it, even though we’re not using the theme. Now it’s unlikely that there would be a security issue in those that wasn’t fixed quickly. But on the other hand, if we don’t have them at all, then we don’t need to worry about it. So why did we keep one extra? You always want one extra theme, because if something happens to your main theme, like it gets deleted or corrupted, your site will fall back to the secondary theme. Then you’ll be able to see it and get into the admin area. So let’s get started building our homepage. The first thing we’re going to do is click get started with Hestia. And what this actually does is take us to this page under appearance. And it has some information about how to get started, but it has two recommended actions. And we’re going to do both of them. The Orbit Fox Companion is a plugin that adds some front page features. It’s free, and we can install it right here. And there we are. The next one is called Pirate Forms, and this makes a contact form. Now, Pirate Forms isn’t as big and complicated as other forms like Gravity Forms or Ninja Forms. But for our purposes, it’s going to make a great little contact form. Now that said, Hestia Pro is fully compatible with all of the larger form plugins. So if you need those, you certainly can use them with Hestia. Under useful plugins, we see things like page builders and translation plugins. We’re not going to use any of those for our design here. So the next thing we want to do is go to the homepage. And just about everything else we do on the front page is going to be done through the customizer, which you can find right here. We’ll click customize. And now, we can go through the menu over here on the left, or we can click on all of the little blue pencils to change things. The pencils make it very nice to find things in the complicated menu. One of the first things we’re going to do is change the layout of the site. Right now, it’s boxed, and it has this border over here on the right. If we go to appearance settings, under general, we can uncheck boxed layout. And now it goes full width. We’re going to keep sharing icons, and we want to enable scroll to top. That puts a little button down here, to help us zip right back up to the top. Now the next thing we want to do is change our site identity. Right now, it’s simply my blog. We’re going to change it to Coworker Pro. And just like that, it’s changed. And then for the tagline, which we’re not going to see in the homepage but will appear up here in the toolbar, we’re going to write Coworking at its best. Then we’ll click Publish. Publish is like saving your work. Now, you’ll note that it didn’t update the title bar with this, because the customizer can only reload the homepage. So let’s close it real quick. And now you can see, Coworking at its best, right up there. And we’ll go back into the customizer. Now let’s change our background, and that’s this pencil right here. We can change the image. And I’m going to upload one. All of the images that I’m using for this video come from unsplash.com, which is a great place to get royalty-free images. So I’ll click open. And I’m going to take the title out, because that’s not good for screen readers. But I am going to put some alt text in here. You always want to put alt text on all of your images. Then I click choose image. And there we are. Now let’s change this text. Then the next line will be, Come work with us. There we are. Now let’s change this button. Click here, and it takes us right over here. There, now it says learn more. We like the centering, and for the URL, we’re going to leave it alone for a minute. We’re actually going to make a link down to a spot lower down on the page later. But for now, we’re going to leave it alone. But we don’t want this button to be pink, we want it to be blue. So I’m going to back out of here, and we’re going to go to colors, and change our accent color to this blue. You can choose any color you like. I just picked this one ’cause I like it. And then we’ll click publish. And we’ll close this. And now our top part is almost done. Our fonts are just a little too bold right here. Let’s fix that. We’ll go back to the customizer. So now, let’s go to appearance settings, typography, and then I’m going to choose font size. And here’s the front page sections, and here’s the big title section. We’re just gonna make it a little bit smaller. Minus three, let’s hit publish. Close this. There, now it’s all on one line, just like we want. Now before we build out a menu, we’re going to work on building out the rest of these sections. Now that we have our top section done, let’s move on to the second section. Now we’re building a site for a coworking place, so we want to convince people that they should come work here. So let’s change these items to the things that we want them to say. We’ll click customize, and then we’ll click on this pencil by the header. And here we can put in a whole bunch of text. Optionally, any of these sections can be disabled. We could get rid of it all together, and we’re going to do that later with a couple of them. So let’s change this title. There. And then we’ll change the text below it, as well. Freelance life has a lot of perks, and working from home in your pajamas is one of them. So why should you come work with us? Then we have three sections here, and right here are the three admin areas for those sections. So let’s open the first one, and the icons are controlled by a font. Now, one of the reasons you’d want to work in a coworking office is the people. So let’s click right here, and find a people. Either one of these would work. Let’s choose this one. And we’ll leave it that red color, but we’ll change this to be people. And we’ll change this text to say, the people who work here are smart, helpful, and caring. We help each other solve problems and deal with grumpy clients. And we could make this link someplace, but we’re not going to, we’ll just leave it alone. So we’ll close that one, and we’ll open the next one. Another reason you’d want to work in a coworking office is equipment. You don’t want a fax machine at home, who does? But someday you’re going to need one. So let’s change this to a toolbox. It’s called briefcase, but it looks like a toolbox. And that’s good enough for me. We’ll leave it blue, and we’ll write equipment right here. And we’ll put in some new text. We have a fax machine and a nice laser printer, and a conference room with a conference phone. Things you most likely don’t have or want at home. And again, we’ll leave this one without a link. And the third feature will remain support. Except, it’s not technical support. We’re not talking technical support, but emotional support. People need people around them to stay sane. We’re all sane. Most of the time. Now I’d like to point out here that’s there’s a delete field button here on each one of these, so you could do two, or only one if you wished. And there’s also an add new feature, so you could add a fourth, a fifth, a sixth, etc. So now, let’s click publish. And we’ll close this. And there we have it, why you should come work with us. Little effects on each of the icons, and the text looks beautiful. Now before we begin the next section on the page, I’d like to set up the default font for the whole site. And it’s quite simple. We’re going to go to customize, appearance settings, typography. And I’m going to choose cabin. And I’m going to choose the same here. And now, everything is using cabin. The difference is subtle, but it’s there. Now the next section we’re going to work on is the about section, and it’s this little sliver right here. Now this section actually pulls its content from the homepage, the page in WordPress called home. So we’re going to go to the dashboard and pull up that page. And right now, it’s blank. Now, as you noticed, the page title is not being used anywhere right here, so it doesn’t really matter what it is. So let’s put some text in right here. And now, I want to make it a header size one, and center it. Then let’s put some text in underneath of it. We want some text that’s going to make people feel like they want to come be part of our community. So we’re going to put this text in. Every Friday we do a group lunch, and various people take part in cooking in our onsite kitchen. We eat together as a tight-knit group of friends who build each other up and help each other grow. Now, let’s make this a little bigger. And center it. Now you’ll note that our font sizes are in points instead of pixels. We actually want pixels. So we’re going to go to settings, and open the TinyMCE Advanced settings in a new tab. And then right here, we’re going to click font sizes, and it’s going to use px. So now we click save changes. And I’m going to update this, which will refresh the page. And now, we can highlight all this text and choose px. And that’s exactly what we want right there. So now let’s click update, and we’ll look at the page. That’s pretty slick, but we want a little bit more text below this. So let’s go back to our editor, and I want quite a bit of space, so I’m just going to do this, and paste it here. And now, we’re going to make this also px. And also centered, and we’re not going to make this a link yet, because the page that it’s going to doesn’t exist. But we still want a little bit more padding below it. So now I click update. And there we go. But I want it to be a little bit bigger. So let’s simply make this an H. Well, let’s clear formatting and get it started over. So, now it’s an H three, and we’re going to center it again. And I click update. So now, let’s reload. There we go. And later, once we create some more subpages, we will come back and make this a link to the about page. So this is our about section. Every community and coworking site wants to show some of its members. It can help people feel welcome. So we’re going to change this staff page into a members page. And we’re going to do it by clicking customize, then we’ll scroll back down to that section, and we’ll click meet our team. And now, we are editing this section. Let’s change it to meet some of us. And then we’ll put in a different subtitle. Our members are a diverse group of developers, designers, project managers, and many other trades. Our member list is about % women, and we have a wide range of ethnicities represented. So we have four defaults here, and right here you can see the four sections. And there’s a link to add a new team member. So let’s open the first one. Let’s change the name to Tina. And the subtitle will be designer slash artist, and we’ll change her picture, too. And we remove the title, and always put in alt text on any images you upload. And you remember we installed My Eyes Are Up Here? There are the two different previews that it made. Now in this particular case, her face was already in the center, so it didn’t really matter. But it will matter on other images that we upload. We don’t need to choose an alignment or size or anything, because the theme chooses that for us. So we’ll click insert into post, and there’s Tina. Let’s put in a better description for Tina. Now you’ll note, this is a text area, so you can grab this little thing here and slide it down if you need to. Tina spends her days creating digital artworks. Her art has been on display at Carnegie Hall and the London Art Museum. I’d like to point out that everybody that I’m going to put up here is made up. And reiterate again that all my images came from Unsplash. Now we could make a link if Tina had her own page, but she doesn’t, and so we’re gonna leave the link empty. And then, we’re going to choose her social networks. We can choose from an icon, and then put in a URL. And I’m going to leave these as default, because Tina doesn’t really have social networks, because I made her up. But if you wanted to get rid of one, you could click remove icon, and now LinkedIn is gone from Tina. If you wanted to add something else, you could click add icon, and find some other social network. So that’s Tina. I’ll show you one more. And then, through the magic of editing, do the other two for you, because they’re going to be done exactly the same. Our next people are actually going to be a company of three sisters. And here again, we can choose what we want to be the focus of the image. We’ll click insert into post, and there are our three sisters. They are a marketing firm. And now it says Juanita, Juliette, and Jacqueline are three sisters who started their own marketing firm. They work primarily with young inner-city artists and musicians. Now you’ll note that all of these other images are square, but this one is not, it’s a little shorter. That’s okay. They are all the same width, though, and our theme will restrict that. They all need to be the same width, but they could be a little taller or shorter. So now, I’m going to do the next two. Now I have a section showing off some of our community members. As you can see, it’s easy to add more, and each one is quite flexible. So now, let’s click publish, and close the customizer, and make sure it looks good full-width. It sure does. So now that we’re done with this section, we can move on to the next one. Anytime you’re selling a product, people will want to see testimonials. They want to hear from people who’ve made the purchase, and see what they think. So our next section is going to be a testimonials section. And the default is called, what clients say, but we’re going to change ours. We’re going to start by clicking customize, and we’ll scroll back down. And we’ll click right here, what clients say. Similar to all the other sections, you could disable. And by default, there are three testimonials, but you could add more. So let’s change ours from what clients say to what members say. And then, for our section subtitle, we rarely need to market, since our members tend to tell everyone they know what a great place this is to work. So now, let’s get our own testimonials. Going to switch images. And you’ll note that it automatically puts it in a circle for us. Our original image was a square. I chose to keep the first name, and even the subtitle, since it fits. But we’ll put in our own text. I love that I get respect from the people around me. Being a woman in business often means dealing with people who don’t think I should be here. But at Coworker Pro I fit in. And then again, there could be a link, but we’re not linking anywhere, so we can leave it blank. Let’s do our next person. There, now we’ve chosen Hanson. And we’ll put in his name. And insert into post. And again, we’re going to use only first names, and rather than have him be an independent artist, we’ll call him a drafting engineer. And then we’ll put in our own text. The atmosphere of youth and excitement in this space is intoxicating. These people are changing the world, and I get to be there to see it happen. And then we’ll change the third one. We’ll change the image. Browse here. Going to put in our alt text. And insert into post. We’ll leave Natalya as a freelancer. Remove the last name, and put in our own text. Friday lunches with the group are the best. I love group cooking and the feeling of family that comes from everyone around the table. And that’s it, now we have our testimonials area. We’ll publish, close the customizer. And then scroll down to see what it looks like in the wide screen. And it looks great. There’s one more section we need to do, and that’s the footer. But first, I’m going to point out that because we don’t want a blog on this page, we can go to the customizer, and we’ll go all the way down to the blog area, and we’ll click the little eye here. And now it’s gone. And now we have this footer that is prepared mostly for us. But let’s publish. And close this, and see how it looks. It goes right from testimonials to the footer. Editing the footer in Hestia is slightly different from the other sections. It still uses the customizer, but it has some different gadgets. Let’s take a look. Going to click customize, then we’ll go all the way to the bottom. And there’s only one edit link on this whole footer. So let’s click it. Here, you can change the background image just like all of the other images that we’ve changed. I’m going to leave this one because I like the cityscape, but you could put in anything in the background there that you wish. There’s the title, get in touch, we’re gonna leave that, ’cause that fits. But then the subtitle, we’re going to put in that the front desk is attended from : a.m. to : p.m. Eastern Standard Time. Then we have here a form title, and that’s right here. But to determine what form goes right here, we click this little tab right here. And it’s simply a short code. Which means you could put in any short code, and it could render any number of things there. It could render another form or a bunch of information. You may recall near the beginning of this video that we installed the Pirate Forms plugin to go with Hestia. That’s because it’s using it right here. And as you can see, it is a perfectly functional small simple form. So we’re going to leave it. But now, we want to edit this content. So we’re going to click right here, edit. And it pops up here. I’m going to put in a different address, because I’m not in Romania. And I’m going to put in different contact information. But I like give us a ring and find us at the office, those fit nicely. And then, when we’re done, we click edit again, and it goes away, and you can see our new information here. And that’s it for the footer, just like that. Just a little bit of text touch-up, and we left the form alone, and we’re all set. So let’s publish. And close the customizer, and see how it looks. Just great. Now that we have the footer done, let’s look at adding a menu right up here. And most of the menu right now is going to link to various parts of the homepage. In a few minutes, we’ll add some actual pages, and we’ll add those to the nav then. But for now, we’re merely going to make a nav that lets us move around the homepage. Now, the first thing we want to do is get a list of the links that we’re going to use in our nav. And I’ll show you how we’re going to do it. Scroll to the second section. Why you should come work with us. Now this is the only part of the whole video that even looks at code. In your browser, we’re going to right click, right here in this white space, and go to inspect. And the first thing it comes up to is a section. And these sections right here, there’s a list of them, are the things we’re looking for. They’re just under the main div. Now, each section has an ID. This one that we clicked on is features. Next is about. Then there’s team, then there’s testimonials, and lastly, there’s contact. If this all sounds familiar, it’s because it’s the sections of the homepage. So you want to write down on a piece of paper, or a text file on your computer, the names of these IDs. Go ahead and hit pause and write them down. Once you’ve gotten them written down, let’s go back to our browser. Now we’re going to use the customizer. So we click customize. And one of our options right here is menus. Right now, there are only two menus. There’s a default top bar, currently set to very top bar menu, which actually isn’t being used on our theme right now. It has a phone number and an email address that we could use if we wanted. But we’re not going to. And there’s also a socials top menu, and so you could put social networks in the top bar. And we’re not going to do that right now either. We’re going to create a new menu, and we’re going to call it primary menu. And we’re going to click the primary menu checkbox. And that’s what’s going to make it appear right here. So let’s click next. And now we can add items. Now, rather than use the suggested pages and links that we have here, we’re going to create custom links. And we’re going to link to the various sections of our page. Now the first one was called features. And we’re going to use the ID that we pulled out of the code. We’re going to start with a slash, which means, on the homepage, then we’re going to put in a hashtag, which means, go to an ID. And we’re going to type features. And then we’ll click add to menu. So let’s look at just that one for right now. Click publish, and we’ll leave the customizer. So now we have features, and if we click it, it beautifully scrolls right down to the features section. So now, all we need to do is the same thing for all the other sections. So let’s go back to the customizer again. We’ll go back to the menus. We’ll edit our primary menu. And add items. All of these are going to be custom. Now the next ID we have is about. However, we really called that section community. So the link text is going to be community. Add to menu. The next one had an ID of team, but again, we’re going to deviate just a little bit and call it members in the menu. Then we’ll add to menu. The next one is testimonials. And we’ll leave that one called testimonials. And lastly, we’re going to have contact. So now, let’s click publish. And there’s our nav. We can even click while in the customizer, and have it jump around. Now one more thing we want to add to the nav is a little search option off here to the right. So we’re going to actually leave the primary menu, and go to header options. And under navigation, we can enable search in menu. And now, we have a little glass here. So now, we’ll click publish. And close the customizer. And here we have a beautiful nav that lets us jump around the homepage. Now, we’re also going to create some subpages that are actually different pages from the homepage, and we’ll come back to the nav and add those to it when we do that. Now that we are nearly finished with the homepage, let’s build the news page. Before we get started, I want to remind you of a couple things. We’ll go to settings, reading, and I’ll point out that our posts page is actually a news page. So let’s go to pages, and edit the news page. And you’ll note that we can’t put any text in here, because it’s supposed to be an archive. But let’s view it. The posts will go here, and we have this horrible pink bar at the top. We are using the page’s title, and fortunately, we can also use the featured image. So let’s upload a nice featured image. There’s our alt text, and we set the featured image, and update. And now, we’ll go look at it. And there we are. Now as long as we’re here, let’s add it to the menu. We’ll go to customize, menus, primary menu. Add items. And we’ll add our news page, except we want it here at the top. Then we hit publish, and close the customizer, and now we have a news item. And it goes to this page. So let’s create our first post. We’ll click add new, and there is nothing unique about posts in Hestia. This is % stock WordPress. So if you’re familiar with WordPress, you know how this works. Let’s go ahead and make one. Our coworking space has a new refrigerator. The old one saw its last ham sandwich last Friday. And we’ll put an image at the top of the post. And put in our alt text. And that’s too small, so we’ll click the pencil, and we’ll go to large. And we’ll center it. And click update. And there we are. I’m also going to set it as the featured image, and you’ll see why in a moment. So I don’t need to upload it again, it’s already there. We’ll add a new category called kitchen. Publish. And now, when we reload our news archive, there we are. Now this image is the featured image. If we hadn’t set one, then this text would slide all the way to the left, which is usually fine, but it looks really sharp with a featured image. If we click, it also puts the featured image in the bar at the top, so that’s something to remember. Now, you’ll note that it says uncategorized, and we made one for kitchen, so let’s go back. And there we are, we have proper category right there. Now, before we get too much farther, I want to fix the nav in the footer. I want it to replicate what’s in the header, so I’m going to go to customize, and go to menus, and click on primary. And you’ll note that it’s already set to primary, but if I also set it to footer, you can see that it’s now down there at the bottom. So now, I’ll publish and close this, and there, now we have the same nav at the top and the bottom. I’d like to show you one more option with the blog page. And then we’re going to create an about page. Right here on the homepage, we’re going to click customize. And then we’re going to go to front page sections. The sections that are bolded are the sections that we have built. The ones that are grayed out are sections that could exist, but don’t, because we never turned them on. The ribbon simply gives you a background image, and a place to put in some text and a button. The clients bar allows you to post icons of your clients. Subscribe allows you to put in a subscribe form, and then blog is where I was headed here, allows you to put in a blog section. So I’m going to unclick disable section, and we’ll scroll down. And while you were away, I added a second blog post. So we have one here for the kitchen, and a new member. And we can make this say news. And there we are, now we have a news section on our homepage. And if we decide we don’t want that, we click the little I, which checks this, and I’m going to click publish. And now we’re back to where we were, but now you’ve seen how easy it is to add a news section to the homepage. But now, let’s create an about page. Again, there’s very little custom about pages in Hestia. So if you’ve ever built a page, you know how it works. Here’s our about text. We’ll create a featured image, and I’m going to use the same image as the homepage header, for some continuity. And now, let’s view that page. And there it is. And now, let’s put it in the menu. We’ll go to customize. Menus, primary menu. Add items, and we’ll add this about page. We want about way up here at the top. So then we’ll publish, and then close the customizer bar. And there we have about. So let’s test these items. We’ll go first to contact. Which takes us to the homepage, and the footer. Then there’s testimonials, members, community, features, news, and about. And if we want the top of the homepage, we simply click the logo, and there we are. Now, our site is essentially finished. The next things we’re going to do all relate to maintenance items, like setting up stats, SEO things, etc. But our site is built and our content is done. So let’s get started on our maintenance. The first maintenance thing we’re going to look at relates to caching, which helps your site go faster. Caching typically means keeping a copy of your page stored on the server, so that it can serve it faster without having to build it all from the database. Normally, I prefer a plugin called WP Rocket. It’s really excellent. However, many hosts, including Siteground where we’re hosting, cache for you, and you don’t need a plugin at all, and I’d like to go over that with you. If we go to dashboard, then at the bottom, there’s SG Optimizer. And there are several things here that we can do. Let’s configure the SuperCacher Config. Right now, Dynamic Cache is on, and that means when it builds a page and sends it out, it keeps a copy, so that the next person doesn’t have to build the page. The cache is also automatically flushed at the right times, so that if you make a change to a page, it doesn’t keep serving the old one. And you have a button here to manually purge it if you want to. You can choose to exclude some URLs from dynamic caching. But then there’s a section here called Memcached settings, and this stores in the server’s memory some of the frequently executed queries to the database. So we’re going to turn this on, and you’ll note that it says, you must enable Memcached from your cPanel. So let’s go to cPanel. We’ll go to Siteground.com and click login. Then we go to my accounts. Go to cPanel. And then over here in the search bar, we’re going to hit cache. And then click SuperCacher. And right here is level three, Memcached. And we’re going to turn it on, by clicking right here. And now, we’ll simply reload this page rather than click the button again, and now we’ll click the button. And now it’s enabled for our site. There’s a button here to test caching for the site, if we click test URL, it says it’s cached. So now we have two different layers of caching enabled, and it should make the site go much, much faster. But in addition to caching, there’s HTTPS Config. And this is already set properly, and you probably should never touch it. This requires that your site operate on HTTPS. Without this, it could operate on either HTTP or HTTPS. But we never want it on HTTP only. So we’re going to leave this just the way it is. Lastly, there’s PHP Config. We want to be running on at least PHP seven. Right now, we’re at ., and we’re going to leave it there, because that’s better than PHP seven. PHP seven is worlds faster than PHP five. And PHP five is pretty common on a lot of servers. So if your server’s on five, ask your host about moving to seven. Or, if you’re here on Siteground, you can switch. So now we’ve gone through the sections of the Siteground optimizer, and the only thing we changed was, we turned on Memcached. Next, let’s talk about getting the site connected to the search engines. First, we’re going to connect the site to various Google properties. Within WordPress, we’re going to use plugins to do that, but before we can use the plugins, we actually have to create the accounts in Google. If you already have an account in Google, you can use it. I’m going to start from scratch. You can use a single Google account across all of Google’s properties. So it doesn’t matter which one you start with. We’re going to start here with Google Analytics. So I click sign in, and then analytics, and we’re going to create an account. And here you can use either an existing email address, or create a Gmail account. I’m going to create a Gmail account. Then we’ll put in our password, and click next. I would recommend putting in your phone number and recovery email address, but you don’t have to. You do need to tell them when you were born. Then there’s their privacy and terms, and click I agree, and now we have a Google account, and now we can sign up for Google Analytics. We’re doing a website, not a mobile app. We’re going to create an account name and a website name, and then we have to tell it where our site is. Choose an industry category, and time zone. And then we have some data sharing options. You’ll want to read these over and decide for yourself if you wanna share this data with Google. I’m going to say okay, and I’m going to click to get tracking ID. But before we can do that, we have to agree again to the terms and services, and click I accept. Now this is our tracking ID. And in the bad old days, you would have to copy either this or all of this code, and figure out how to wedge it into your website somehow. But we’re going to use a cool plugin in just a few minutes. But before we get there, I’m also going to connect with Google Search Console. It used to be called Google Webmaster Tools, but now they call it Search Console. Now, because we’re already logged in with Analytics, we can simply click search console. And they want our password again. And they really want us to give them a recovery phone number and email, which I recommend you do, but I’m not going to bother, because I’m not going to be using this domain very long. And then we tell them where our website is. And click add a property. Now, in order to verify to the Search Console that we own this property, we need to do any number of several things. The recommended method is uploading an HTML file. Among the alternate methods is Google Analytics, and we’re going to use that in just a few minutes, once we connect our Analytics account. So as of right now, we have created a Gmail account and connected it with Google Analytics and Search Console. Now we need to connect those two things to our website. So let’s get going on that. The first plugin we’re going to connect is called MonsterInsights. We’ll go to our dashboard, plugins, add new. And there it is, Google Analytics for WordPress by MonsterInsights. We’ll install and activate. And right at the top, it says that we should configure the settings. The first thing we’re going to do is authenticate with our Google account. If you ever connected your Twitter account to any other site or anything like that, this is very similar. We choose our account. We tell it what it’s allowed to do. And then we pick the profile that we have under that username. Right now, there’s only the one, so we’re going to choose all website data. And if at any time, you don’t want to do this, you can click cancel, but we’re going to complete authentication. And now, our profile is active, with this UA code. You can click verify credentials, and it will say that it is done. And now our site is set up with Google Analytics, just like that. There are some other things that can be done. You can pay for a version of MonsterInsights Pro, and get some added features. If you wish, you can allow them to do usage tracking. And you can optionally have it do automatic updates. Now, if we go over to tracking, we have some options. For example, if an administrator or editor is logged in, then they are not tracked. That way, you don’t artificially boost your own traffic. You can enable demographics, and you can do things with link attribution and file downloads, etc. I’m not going to change any of the defaults, they’re great. The defaults are perfect in MonsterInsights. Now that we’ve connected our site to Google Analytics with MonsterInsights, we’re going to connect it to Search Console with Yoast SEO. So let’s go to plugins and add new. And search. And there it is, we’ll click install now, and activate. Now the first thing you’ll note is that there are some notifications at the top. The first thing it says is that we’re blocking Google, which is true, and is fine for now, we want to do that. But right here, the next thing they want us to do is connect with Google Search Console, so let’s click that. To allow Yoast SEO to fetch your Google Search Console information, please enter your Google authorization code. Click this button. Choose the account that we are working with. And then, we’re going to allow Yoast. And it gives us this big long code. Then we can close this window, and paste it here. And authenticate. And now, we have authenticated, and we don’t need to do any of these methods. Now that our site is connected to Google Search Console, Google can know much, much more about our website, and all of the tools built into Yoast will work even better. So we’ll take a look at those tools next. The next plugin we’re gonna look at here is called Jetpack. Now Jetpack was installed for us by Siteground. But it’s just a regular plugin. If you go to installed plugins, you’ll see it right here, and if you don’t have it, you can simply install it like a regular plugin. Now Jetpack is a little but different from most plugins. It’s actually a collection of plugins. And what makes it unique is that most of the things that Jetpack does is heavy lifting, heavy work, and it does it out on the WordPress.com servers, so that it doesn’t weigh down your server. It can do things like website statistics, image compression, spam fighting, comments filtering, etc. The first thing we need to do is connect Jetpack to a WordPress.com account. Now you might think that creating a WordPress.com account means getting a blog there, but it doesn’t have to. You can simply have an account there to use with Jetpack. So let’s click set up Jetpack. And here, we can either log into an existing .com account, or create a new one. We’re going to create a new one right now, and we’re going to click sign up here in the top right. We’ll put in our email address, choose a username, and then a password, and then we’ll create our account. And then it immediately begins connecting our website with Jetpack. Now by default, Jetpack is free. But there are upgrades available. Down at the bottom here is a button that says start with free. And there we are, now we’re connected. By default, nothing is turned on. But they recommend that all of these things be turned on. Many of them are good, and I like them. But I recommend reading through them, and making sure that you want what’s there. For example, we don’t need a contact form. We have Pirate Forms from Themeisle. So I’m not going to click activate recommended features. I am going to go to site stats, and it’s automatically set up. We could click configure, and set up some settings. We can have a chart showing hours of views in the admin bar. We can decide who gets counted, even if they’re logged in. One of the ways it works is by putting this little tiny image on the page. It’s not required, but it’s helpful, so I tend to leave it there. And then, here we get to decide who’s allowed to view stats. Right now, it’s only the administrator. Because we just set this up, there’s nothing to display yet. But it says your stats will begin to appear here within minutes, and that’s one of the reasons that I like including Jetpack stats in addition to Google Analytics. With Google Analytics, you get to either watch real-time stats, or you wait until tomorrow to find out what today’s stats are. You can’t look hour by hour today, and see how you’re doing as the day goes on. With Jetpack stats, you can do that. You can look every minutes, and see how your stats are growing. This can be useful when you’re doing a large push on your website. Another great thing that Jetpack can do is filter spam, and it does it using the companion plugin called Akismet. If we go to plugins, you’ll see that it’s right here. Akismet comes with WordPress. Now Akismet is also a service. It processes the spam on an outside server, so that it doesn’t bog your server down. So let’s activate Akismet. And then, right at the top here, we can set up our account. Now because we’re connected with Jetpack, we can simply click connect. Otherwise, we could sign up with a different email address, or get an API key. So I’m just going to connect with Jetpack. Now Akismet has a variety of pricing models. There’s enterprise, for larger sites. There’s $ per month per site for smaller commercial sites. And then, there’s name your price. And what’s interesting is that you can name a price of zero, if you wish. So let’s click get personal. And then right up here is the slider. If we drag this down to zero, the credit card information goes away. Now it says, you may not do this if you have advertising, you sell products, or you publish information about your business or service. Now something very important to note here is that this only works if you do not have advertising, you do not sell products, and you don’t publish information about your business or service. Our site is advertising a commercial space, that’s what it is. So we’re not going to do the free one. But we can choose $ a year, which is $ a month, which is not very much. If you find that it’s blocking lots and lots of spam for you, I would recommend paying more for the service. They’re nice enough to allow you to choose, and they’re providing you great service. So give them what you can. Now because our site is not a real site for a real service, I’m going to choose the free one. But if you’re building a site for a real business, you’ll need to pay for Akismet. Now that it’s processed, we can activate this site. In the background here, you can see the API key that was an option earlier, and it put it into our site for us. Now optionally, it can also show the number of approved comments beside each comment author. So not only does it block spam, it approves quality posts. By default, Akismet takes your spam and puts it in the spam folder. Right now, our setting is that the most egregious spam gets automatically deleted, and does not go into the spam folder. If you really need to see all of it, then you can click this option right here. And now that Akismet is set up, we shouldn’t get any spam at all on our website. If we do, then we have the option to mark it as such, and it will communicate to Akismet, hey, you missed this one, and Akismet learns. That’s how it gets so good. Next, let’s look at backups. For backups, we’re going to use the backup system built into Jetpack. And it used to be called VaultPress, but now it’s just called Jetpack backups. But you may still see VaultPress around. Let’s go to the Jetpack dashboard. And here at the top, there’s a tab that’s called plans. Now the backups for Jetpack are not free. However, their personal plan, the cheapest one, does include full off-site backups. Now these are nightly backups, you get one a day. If you go to the more expensive plans, then you can get real-time backups, where you just push a button and it does a backup right there when you ask. We’re going to do the personal one, and it comes with priority email support, which is pretty useful. So let’s click upgrade to personal. Now this took us to our account on WordPress.com. You may recall, we had to create this account in order to connect Jetpack to our site. So this is the same site. Now I’m going to fill out this form, and click pay. Now that we’ve clicked purchase, it’s setting up a number of things for us. It set up the daily offset backups, with a -day backup archive. That means you can recover your site up to days back, but not , so if you miss something for days, too bad. Unlimited backup storage space, that’s really important. If you are a musician or a photographer and you have a ridiculous amount of data, unlimited storage space is a big deal. Automated restores, which means you don’t have to do anything really, if you just want to restore, you click a button and it does its thing. You don’t have to download zip files and mess around with things. It comes with spam protection, easy site migration, if you’re going to move somewhere, and priority support. So now let’s go back to our site. Now we’ll still here in our dashboard, and we’re still looking at the plans. But now, there’s an option to manage your plan. Remember how I said Jetpack backups were called VaultPress? With here we are, we have a VaultPress menu item. If we click it, you’ll see that VaultPress is backing up my data right now. It’s done with uploads, and it’s going to work on the rest next. Something important to note. The first backup backs up everything, but in the future, it only backs up changes. So the first one is probably going to be quite slow. But from then on, they should be very speedy. The next thing important to know is that you can close this window. It’s not dependent on your browser being open. It’ll do its thing. And they’re going to email us when it’s done. Another cool thing is we can set up remote access, so that you don’t have to be at your computer to restore your site. Right now, we have a license for one site. It says we’ve never backed up, ’cause it’s still in process. If we upgrade our plan, then they will do a security scan on the backup, and let us know if it finds anything wrong. Let’s go to settings. And there’s a wide variety of things that you can do here. We’re not going to cover them all, because it could get really deep. But you can set up SSH access, so that VaultPress can access your site’s server. Now Siteground does offer SSH, but not all sites do. If not, you could set up SFTP, or regular FTP. Or you could say, “I want to restore my site to some other server.” This is really handy when actually moving servers. If we were to leave Siteground and go to some other host, we could say to VaultPress, hey, go install my site over there, and it could do that. It also knows who we are, what account this is. If we go to activity, it tells us that it’s done a full sync of uploads. We’ll look at our backups, and there probably isn’t any yet. You can still see this icon spinning. Now we need to set up access for VaultPress to access our server better, and that takes us right back to here. Now to allow VaultPress to access our website, we’re going to enable SSH. That stands for secure shell, and it’s a secure way for VaultPress to log in to our site and work on it. So we’re going to click right here, and then we need to fill in our server information. Now some of this we’re going to get from Siteground, because that’s where our site is hosted. So let’s go to Siteground, and log in. Now, setting up SSH isn’t very difficult, but there are a number of steps. So if you follow closely, it should work just great. I’m going to click on my accounts, and go to cPanel. Now in this search right here, we’re going to type SSH. And there’s one icon left. Click that. Now what we want to do is upload a public key. If we go back to VaultPress, and click show public key, it’s right here. We just copy everything in the black here, and on Siteground, paste it here. We don’t put anything in the allowed IP address field. Then click upload. And now our key has been successfully added to our account. If we go back, you can see it right here. So now, we need to go back to our cPanel home. Now to find our username and password, we’re going to go back to my accounts. Which actually leaves cPanel, and we’re going to click right here, information and settings. Now, VaultPress wants a server address, port number, and a username and password. For the server address, we’re going to use our FTP server. Our port number is . This is not standard for SSH, it’s custom to Siteground. And you can find that information in the Siteground documentation. Our username is our cPanel username. Because we’re using a public key, we shouldn’t need a password. So let’s click save. And now it works. I’d like to reiterate that because we used our public key, we don’t need to put our password in. That’s the way keys work. So now, VaultPress can connect directly to our server, and work with the files that it finds there. So just a quick review of what we did here at VaultPress. We went to settings, and we set up SSH, so that it can log in. The other things are interesting, but not vital. We can look at our backups, we can look at our activity. And you can see what it did and when it did it. But let’s go back to our website. Then we’ll go into the admin area, and we’ll go to Jetpack, VaultPress, and on this page, you can see an ongoing progress of how it’s doing. Now that we have finished backups, our site is complete. Everything is done. Let’s do a quick summary of what we’ve built. The first thing we did is set up an account on Siteground. Then they walked us through a wizard which set up our hosting, installed WordPress, set up SSL for secure browsing, and helped us buy a domain name. At that point, we had a plain WordPress site, with default theme and original content. The next thing we did is install some plugins that we knew we were going to need. We installed TinyMCE, so that we had a few extra buttons here, and then we also installed My Eyes Are Up Here, so that we could install images of people and make sure their faces were in the pictures. The next thing we did is pick our theme, and we chose Hestia from Themeisle. It proved to be pretty flexible, and I’m very happy with it. Then we built our homepage, and we went through section by section and used the customizer to create each of these elements. We didn’t have to do any coding to build this entire site. We also made a couple of regular pages with normal content on them. Once we were done building the site, we added on some extra tools. We went through the Siteground Optimizer. Most quality WordPress hosts these days have something similar, so if you host somewhere else, make sure you look for a tool similar to this. We connected to the Google Search Console, as well as Google Analytics. And then we also hooked up Yoast SEO, so that we would have good search engine optimization. Then lastly, we configured Jetpack. Siteground installed it for us. If your host does not, you can install it like a regular plugin. But Jetpack gave us Akismet for spam, its own built-in stats program, and lastly, VaultPress for backups. So now we have a complete site, it’s fully functional, and has a robust back end to keep it working smoothly. I hope you enjoyed building your site as much as I enjoyed building this one. Remember to check out the links in the description for discounts, as well as locations for each of the pieces of software we used. And if you’re interested in learning more about WordPress, and further improving and progressing your site, come take a look through some of the other content we offer over on WinningWP.com.
Anything to add?
