Free Webdesign Tutorial
A Complete Step-By-Step For Beginners
Follow along and learn how to build a professional WordPress website in an afternoon. From how to find the best domain name to launching the site and how to promote it.
Examples of Websites Built Using This Strategy
Hi, my name is C.J. Hallock and I have been building websites since the late 90's. I have built websites for many different niches & industries across the United States. I started my freelance website design career because I started seeing businesses getting charged $5,000+ for websites that should only take a few days of work. So in order to help more people, I decided to launch this site.
My goal was to create an easy to follow tutorial for entrepreneurs, bloggers & anyone else who wanted to have their own website to market or build awareness for their brand. Building a website is not complicated and I plan to prove that you can build your own website in an afternoon without having to know how to code or being forced to hire an expensive website design firm. All while delivering videos and templates to get you a professional and successful website.
Watch The Introduction Video Here
5 Steps To Create A Successful & Professional Website
in under 2 hours
The process starts with doing your homework to make sure that you can use the name you want. Trademark searches and other things that most people may forget.
The setup process is going to walk you through buying your domain, setting up your hosting, installing WordPress, your theme and the necessary plugins.
The design process is the longest part of this free website design tutorial. It's left to your imagination but there are templates you can use to assist in getting the look you want.
Once you finish designing your website the next step is the most important. This is where you take down the coming soon pages and let the search engines know you exist.
A website cannot be successful without promoting it. This section will cover some tips & tricks I've learned to promote your website over the last 15 years or so.
I need to cover a few things before we start the tutorial.
In this tutorial we are going to be using WordPress to build your website. So I want to start by taking a second to go over what WordPress is.
WordPress is a platform that enables you to set up a professional looking website on the internet. The best part? It is completely FREE! (OK the platform itself is free, but more on that in a few seconds.)
Like they say, millions of people can't be wrong! I've personally used WordPress to build my own websites since 2009.
I feel like I need to let you know that it is not just bloggers on a small level that use WordPress for their websites. Below are some of the brands that use WordPress.
Brands That Use WordPress
What You Will Need To Build A Website
You will need a logo. It is best to have a logo that is a PNG file with a transparent background. Once you have one you will need to create two different files for the header of your website. The first size you will need is for the regular display which is 320 x 100. The second size you will need is for the retina display and that will be 640 x 200.
You can use a logo with a different size but you will need to change the spacing in the header to work across the different devices so making them fit those sizes will make the process easier.
Website Icon & Favicon
This is basically your logo that is going to be edited down to a 512 x 512 square icon. This is going to be the image that displays at the top of the window and/or tab. This doesn’t have to be a PNG file but if you want it to blend in with the color of the background then I’d recommend it. See image below for an example of a favicon used by Gmail.
This is tricky and really not going to be a “one size fits all” answer. I do recommend that you have at least 300-400 words of written content for the home page. Don’t worry this could be split up into different sections so you won’t have a book on your homepage it will be easy to the eye.
The next content you will want to work on is the “About” content. You will want this to be also about 300-400 words. If you choose not to use the about page you can skip this one. But, I’d recommend using this to make your customers connect with you on a personal level. So don’t go boring. Include fun facts like your favorite food or maybe your favorite basketball team. If you have a staff then use this page to showcase the individual staff members as well.
For businesses, the about section should cover the history of the business. Why you started it, your mission statement, your vision statement, and things like that. But depending on if you offer services or products, you would want to include 500-750 word write up for either a “services” or a “products” page. If you need both, then work on both.
The last piece of content I’d recommend is a small write up (about 150-200 words) for your contact page to try and encourage your website visitors to contact you. This can be via a contact form, email, phone or text.
When it comes to using images on your website, it is always best if you have your own images, especially if you are promoting a specific service. For example, if you are a landscaping company you don’t want to use stock photos of perfect looking yards that you didn’t do the work on. It would be looked at as lying and could cost you in the long run.
If you do not have images and need to find some stock photos, I’d recommend checking out the blog post I wrote on stock photos. (Link Below) I go into what sites you can use to get FREE Stock Photos and if you want to buy them I give my recommendation there as well.
Having brand colors will help you be more recognizable to your customers. The same way when you see that red and white colors together you think of Coke or when you see the blue and yellow you think of Best Buy. Get the colors together and be sure you have the color codes for the colors you plan on using. You can get color codes by using this awesome tool –> www.paletton.com I would suggest that you compile four colors for your brand. If you look at my content, website or business cards you will see that I use a light blue, red, black and white. If you feel more comfortable waiting to decide on this later it is not a problem you can do that and include the colors when you get to it.
Other Website Content
Let’s be honest. I do not know your business so there may be a few things that you need that I don’t know about. So take the time to look at other websites in your industry and see what they have and if that would help you. Once you see what successful websites in your industry are using, put that content together for your own website.
Just so you know you can view the process to build a professional website and what we are going to cover in the mindmap below!
A little bit about WordPress:
WordPress is a totally FREE suite of computer programs that enable you to set up a website on the internet without having to buy any crazy expensive software.
It works like this…
You sign up for a hosting account and install WordPress. This process literally takes minutes and then you can customize your brand new site.
There are only two things that you NEED to pay for. Unless you are wanting to build an e-commerce website. We will cover that later.
Outside of an e-commerce build everyone will have the cost of buying and registering your domain which usually costs about $15 per year and hosting which you can get at a very affordable rate.(often less than $10 per month) Use my recommendation and link to get your hosting for about $99 if you pay for a year in advance, and if you do that you can get your domain for FREE.
Just to clarify the difference, in this report, we are talking about using WordPress.org and NOT WordPress.com. WordPress.com is for blogs only and is hosted on WordPress.com, WordPress.org is for blogs and websites that you host on your own hosting account that is associated with your domain. Very important distinction there.
If you want more information on WordPress, you can go to the main website WordPress.org. There you will find all kinds of documentation on how the software works as well as many add-ons (plugins) & themes that we’ll discuss as we go through this report.
Ok… Let’s Walk Through It!!!
Now that you know what we are going to cover, the first thing you need to do is find the domain that is right for you. (for example yourwebsitename.com).
When you’re buying your domain keep in mind that you don’t want to include terms that have been trademarked (for example Facebook, WalMart, Skype etc.)
Also, you want to keep in mind that the shorter the domain the better.
Need help coming up with a name you may want to try using Business Name Generators.
For more suggestions and information about picking the best domain along with making sure you are not going to infringe on any trademarks … Click here.
Now you have a domain in mind … What Next?
The next step is to set up a hosting account & registering your domain. For this walkthrough, I’m going to use InMotion Hosting. I am an affiliate and will receive a commission if you use my link. I also am moving my websites and clients over to them because after a few weeks of research I found them to be the best
The Big Question – Which Hosting Plan to Choose?
InMotion Hosting has plans that make this is an easy decision. If you only plan on running one or two websites you just need the Launch Plan which you can get as low as $5.99/mo(when you pay for 2 years). That breaks down to $143.76 plus ICANN fees.
Lower down the Business Hosting Page you can see “supported websites” and decide on the plan you need based on the number of websites you plan to have. (I am currently signed up under the “Pro Plan”)
If you would rather watch a tutorial video you can watch the “Sign up for Hosting with FREE Domain” video. You can watch that below.
Walkthrough “How to Sign up for Hosting with a Free Domain“
If you would rather watch the video for this tutorial you can watch it down below this section.
Start by going to MyHostLink.com.
Once you are there you need to select what hosting package/plan is best for you. You can see the specifications for the different plans and compare them about halfway down on that page. Basically, if you are only building one website for your business and do not plan on doing any other websites, then I’d recommend you sign up for the “Launch Package”.
Other than that I’d recommend the “Pro Package”. The reason for this is because once you get started building websites, most people get addicted to it and since your total number of websites supported with the “Power Package” is only at 6. It’s worth the extra $5 or so per month to ensure you don’t have to worry about it.
Once you select the hosting plan that you want then you will need to select which data center you want InMotion Hosting to use for your website files.
Basically, all you need to do is select the one that you are closest to. If you are building an online brand that is for everyone then it really won’t matter.
After that, you can choose to have a CMS (Content Management System) installed for you. You can use this step to Install WordPress. If you chose to then don’t worry about the next step but if you want to skip this step now we’ll cover how to install WordPress in a sec.
So if you are going to install WordPress here then click on “Install WordPress” and then click on continue. I would recommend installing later so you can set a username and password later without issues to access it.
If you are not going to install WordPress in this step then just click continue.
The next step is to do a search for your domain. Once the results are back and you see that your desired domain is available then just click add to cart. Then click continue
Next page will want you to decide if you want to use “Private Registration“. What this means is…
When you register a domain without private registration then your personal information is public with a simple whois.com search. This does include your address, phone number and all that stuff you don’t want out there. The main downside to not registering your domain private is the fact that telemarketers can scrape that information off of a whois search … so if you don’t want it private, be ready for some sales calls.
The main downside to not registering your domain private is the fact that telemarketers can scrape that information off of a whois search … so if you don’t want it private, be ready for some sales calls.
Once you have that checked (or not) click on continue.
The next step is to start the process of creating an account. So enter your email address and click on continue.
Now, you need to enter in all of your personal / billing information in order to create your account. Once you have filled in all that information then click on “Review My Order”.
On the next page you will need to look over your information and make sure everything is entered correctly then check the “I Agree” box to agree to the Terms of Service. Now, click on Checkout.
There are two more things you need to do real quick. The first is to verify your email which you can do by checking the email that you signed up with and following the link sent to you by InMotion Hosting. Then follow the instructions to set your password. This is how people access your account so keep this secret and difficult for people to guess. Once you have done that …
Congratulations, you have now officially signed up for your hosting and registered your domain for your new website. Now we can move forward with building your website.
Watch The Video Walkthrough On How To Buy A Domain & Set Up Hosting
Next Step | Install WordPress
Now that you have registered and you have your domain, the next thing to do is install WordPress.
There are two ways to do this.
If you followed along with the video above and clicked “Install WordPress” then you are already set up. If this is the case then the username and password for your WordPress installation should be emailed to you.
If not then you need to install WordPress from your cPanel. In order to get to your cPanel, you need to go to InMotion and log in through the AMP login. (This is a button on the top right-hand side of the page.)
Once you are logged in, you will need to click on the cPanel logo to access your InMotion Hosting cPanel.
How to Install WordPress from cPanel
When you are in your InMotion Hosting cPanel you need to scroll down the page to “Top Software” and click on the “WordPress” icon.
On the next page, you will click on “Install”.
Choose the right protocol. If you are going to be setting up an e-commerce website or would like to have the site encrypted then you will be using https if not then use HTTP. (This is an easy change from HTTP to HTTPS so if you are not sure then just install on HTTP)
The next thing you need to do is to choose the domain you want WordPress installed on. This area should only have your domain in it that you just bought unless you have added some “add-on domains”. (We will cover this later)
Should I Install WordPress In a Sub-Directory?
This next section, in my opinion, should never be used. (I learned the hard way with my first main blog Stay Boosted!)
This is only to be used if you want the entire installation of WordPress to be not the primary URL. Meaning your installation will be myurl.com/wordpress instead of myurl.com. Don’t worry you can still have a blog page myurl.com/blog without installing here … so leave this field empty.
This is going to seem confusing at the moment but just trust me …
In the Site Settings just leave it alone and we will get this information later. (We’re going to be removing all this info in a later step so anything you do here will be lost … FYI)
In the Admin Account, you will need to create a username and admin password for your site. This is going to be changed in a few steps so it doesn’t matter what you use. But, you will need to know what it is so please write it down or save it somewhere.
If you just want to use something basic this is what I’d recommend:
We are going to be using this information in a later step so that’s why I recommend this.
Then be sure that the email you enter in the next field is one that you have access to. If you see the email “[email protected]” don’t worry we will get into how to create emails and use Gmail to check and send from that account. But, that will be in some bonus tips we’ll cover in a bit.
Choose the language you wish to use …
The plugin section makes some suggestions for what you should use. Uncheck all of them and move on. (We’ll cover the plugins you need in a bit)
In the “Advanced Options” you can choose to auto upgrade and set your name for the database and table prefix but I’d recommend if you are not familiar with this stuff then just leave it alone.
The last step to install WordPress is to enter your email address to get the installation details and then click on “Install”.
Once you have done that it will install the software on your shared server. It will also show you the notes for your domain and administrative URL (more on that in … 3…2…)
Logging into your WordPress website for the first time.
If you click on the admin link showing on that page. It will automatically log you in. If not then follow the directions below.
(The WordPress admin link will look like this – www.yoursite.com/wp-admin)
For example, if you registered bobshomeimprovementworld.com then your login page will be bobshomeimprovementworld.com/wp-admin (By the way, that domain is way too long but you should get the idea.)
So go to that page and once you are there use your username and password and log-in.
Ok, you’re logged in and you now see the Dashboard.
WordPress Dashboard Walkthrough
Now, before you go too much further I recommend you take some time to look over your “Dashboard”. There are a lot of different things you can do with your dashboard. You can create pages, blog posts, upload media and much more. In fact, there are so many things you can do I won’t talk about them in this blog post as I don’t want to overwhelm you.
But, I do want you to understand how powerful and fantastic the program you just installed really is!
Let’s go over what each general section does.
Click this to bring you to the main page of your WordPress dashboard. Here you will see various items relating to your WordPress website. It will give you a summary of your posts, pages, comments, etc. You will also see links to the WordPress.org site, recent comments, incoming links, etc. You can customize this page.
If you are going to set up a blog on your site this is where you can create, view and edit your posts. (for a “website” you will not be using posts unless you are blogging.)
You can use the media section to upload images and various other documents. (videos, audio files, pdf etc.)
***Note*** Any time you upload media you want to make sure that you have the caption(if you want), Alt Text(This tells Google what the image is) and the Description filled out on EVERY image.
This is where you create, view and edit your pages.(this is the part you will use the most for adding new pages to your website)
Here you can view all comments you’ve received, check your spam comments, edit or delete comments.
This is for the contact forms on your website. We will cover this later.
This is where you change your theme, customize your widgets and set up a custom menu. You can also work in the CSS and PHP files if you have some advanced coding knowledge.
We’ve yet to talk plugins aside from installing WP Clone, but here is where you can upload and activate them. We’ll get into the different plugins you will want to use later on.
This area lets you set users to your site or update current users.(in case if there is going
to be more than one person working on the site or adding content.)
This is where you can import or export WordPress files. Some plugins will have their settings in this section. So, pay attention to that part below.
You can set options about how people read your blog/website, how many posts they see, set up a custom “front page”(This is called a static front page, which is what we are going to be doing for your website.), how the permalinks are set, etc. Any plugins you install will often show up here too, with the options to customize.
This is the plugin we are using to build your own website. It is a WYSIWYG (What You See Is What You Get) front-end designer. More on this in a bit.
This is where you would update the WordPress theme options for the WP Ocean WordPress theme. This is the theme you have activated for this walkthrough. You should not have to access this as I have already set everything the way you need it.
This is what we used to install the dummy data. You can use this in the future to create backups so you are safe in case you get hacked.
Simply put you need to make sure the version of WordPress you installed was up to date. 99.9% chance that you are going to have to do this step and this is because WordPress updates the software a lot to make sure it is the best out there.
If you need to update you can hover over “Dashboard”. The dropdown will have an “Updates” section. Just click on that link and it will show if you have an available WordPress update as well as if your plugins or theme needs to be updated. Check the boxes next to what you need to update and click on “Update Plugins”.
Delete and/or Replace Placeholder Content on WordPress
When you install WordPress, there will be existing “content” on the site. These are samples and placeholders. Some of these you will be deleting and some you will be using.
We are going to start with the “Pages”
The “Blog” and “Contact” pages need to be left alone.
The next few pages I’m going to cover are the legal pages. I am not a lawyer so don’t take my word for it. They are just good examples. I’d recommend seeking out legal counsel to see if these pages will work with what you are going to be doing.
The “Earnings Disclaimer” page is optional. If you plan on doing any type of “Affiliate Marketing” then I’d highly recommend keeping this. If you don’t the F.T.C. won’t be happy with you.
Return Policy – This is exclusively for e-commerce websites. This walkthrough is not made for e-commerce websites as the theme we are using is not compatible with WooCommerce unless you have the add-on (it costs about $70 & if you plan on doing e-commerce it would be best if you used the Salient WordPress theme – That tutorial will be coming soon & by the way it will only cost $60 for that theme.) So if you are not going to be doing e-commerce, continue to follow this tutorial and go ahead and delete the “Return Policy” page.
Once again I am not a lawyer and not liable for anything in regards to the sample legal pages or any other content that comes with this tutorial.
Outside of this we will be creating other pages you need later on in this tutorial.
Comments & What Should I Do? (On or Off?)
If you click on “Comments” in the sidebar you will see any comments left by your readers and can use this area to respond and engage with your readers.
If you are planning on keeping your WordPress site for its original use as a blog. You want to keep the comments on. You will also want to keep comments as a website if you plan on blogging.
If you are wanting to just make a website with no “Blog” feature then you need to turn the comments off.
You can do so by going to “Discussion” under the “Settings” tab.
Simply make sure all boxes on this page is unchecked and then go to the bottom of the page and click “save”.
We’re going to be taking a shortcut. This shortcut will install all the plugins you need along with some content and placeholders to get your website built faster.
***NOTE*** If you would rather do it the long way you can do that later by following along with the tutorial & uploading the plugins and themes you want. Pick back up reading with the WordPress Dashboard Walkthrough. (I’d recommend against it. It will just be an additional few hours of work.)
So what we are going to do is hover over “Plugins” on the menu to the left and click add new. You are going to want to browse for “WP Clone by WP Academy“. You will find the plugin in the results and to be sure you have the right plugin it is titled WP Clone and is coded by WP Academy.
Once you find it you need to click install. This will automatically install the plugin. Then you need to activate the plugin by clicking on “Activate”.
Now that you have that installed, we are going to be installing a "Template Build". So go to the left sidebar/menu again and click on WP Clone.
Now we are going to be checking inside the circle for “Restore from URL” and then we will be typing in the URL for the template build. That URL is going to be (type everything in between the ” but do not include the “) “http://str82work.com”.
Then check “I Agree”. You are agreeing that you don’t have anything of value on the current site, that you are ok with re-installing WordPress if the dummy content load fails & that you acknowledge that your database will be overwritten.This is going to delete everything on your site and install the template build.
Now, click the “Restore from URL” orange button.This is going to delete everything on your site and install the template build.
NOTE: When I refer to the template build it is just a template I put together with the best free WordPress theme, along with all the plugins you need.
Do not worry if it takes a while to finish. This process can take a few minutes. Once it is complete, you can go to your home page and see the free website template I build for you. On a rare occasion, you will see some crazy code pop up on the screen or the screen will go white. Most of the time this is just a small issue if you give it 10-15 minutes and refresh the home page you will see the dummy data installed. If you continue to have issues email me [email protected] and I’ll try to help.
Now that you have the website template installed, it’s time to get busy!
You will need to log in again and when you do that you will need to use the following credentials.
The next thing you need to do is to create a new user.
This is very important … USE SOMETHING YOU WILL REMEMBER!
Username: I’d recommend you create a username that is lowercase and FYI you can’t use spaces
Password: When you create the password you will have a section that will show the strength of the password. At the absolute minimum, you need to have a medium strength password. But, I’d shoot for strong.
I’d also suggest that you fill out all the information you can including the website with your actual URL.
If you are curious about getting your image to show with your profile you will need to go to Gravatar and set up an account.
After you’ve created a new user you need to log out and then log back in using your new username and password.
Then, Delete all of the other users by clicking on users and then delete any user but yourself.
Now We Are Ready To Customize YOUR Website!
The first thing your going to do is hover over “Appearance” and click on “Customize”
There is going to be a lot that we are going to cover here. Please be sure that you have the website content suggested at the top of this blog post so we can move forward without problems.
Site Identity – This is one of the most important parts of this process. This is where you will be giving your website a name, tagline, and uploading your website icon.
Set your “Site Title” as the name of your business, type in your “Tagline” and upload your “Site Icon”. Don’t forget the Alt Text and the Description when you upload the Site Icon.
Click “Save and Publish” and once it is saved go back to the main customize tab by clicking the left facing arrow underneath the save button.
Login Customizer … you will be the only person seeing this. If you want to customize this with your logo and your own background image/color then, by all means, go ahead but we are not covering that now. (There will be a blog post that will cover that later.)
Menus tab is already set for what we are doing but if you wanted to set different menus for the different parts of your website you will use this section. You can also use the Menus tab under “Appearance” if you want.
Widgets are not something we will touch here. We will cover the widgets later on … so keep going.
Static Front Page – This is one way you can set a Static Front Page. The other way you can do so later by using the “Reading” section under “Settings”. You also want to set the “Blog” page up for the Posts. But don’t worry we will be covering that later on.
Note: there are multiple options here so hang in there.
This is where you are going to put in your colors. There will be a Primary Color which is just what it says. The Hover color should be a darker shade of your primary. Then the next thing you will change is the Links-Color. This is going to be universal through the site so be sure what colors you use can be read with the chosen backgrounds you plan on using.
This is already set but if you want to change your layout or width for your content you can change this here. I’d recommend against this unless you are familiar with what you are doing.
You will be changing the Text Color, Link Color, and Link Color: Hover.
You will need to change the Background Color and Background Color: Hover in this section.
Now, you need to back out to the main Customizer menu.
Typography tab is used to change the global font settings for your site if you feel the need.
Top Bar is a feature is not enabled for this walk-through but feel free to use it if you wish.
General – This section is set but you can change the website header style if you wish. Disclaimer: if you do change the style you may need to change the padding and spacing for the header to display properly when responsive.
Header Media is a section that we are not going to touch.
Logo – You guessed it! This is where we upload our logo files we discussed earlier in this tutorial. Please keep in mind that everything is set up for the logo to be sized at 320 x 100 for the regular logo and 640 x 200 for the retina logo. If the logos you upload are a different size you will need to adjust the spacing settings.
Menu – The only thing you will be changing here is the colors to fit your color pallet
Social Menu – In this section, you will be changing the colors and putting in the URLs for the social icons you want to display in your header. The software will automatically add an icon that has a link in it so be sure to delete any of the links that are currently listed that you don’t use and add the URLs to the profiles you want to drive traffic to.
Mobile Menu – This is already set up with the exception of the Links-Color: Hover … so change that to your primary color and continue.
We are going to skip down to the Sidebar section as everything else is finished.
Sidebar – In this tab, all you are going to be doing is changing the Titles Border Color to your Primary Color.
Footer Widgets – If you do not want to use the footer widgets you can turn them off here. If you plan on using them you can just change the Links-Color: Hover to your Primary Color. We will be working on the content that goes into these in a little bit.
Footer Bottom – This is where the copyright information is listed on your website. This is automatically populated so no need to touch this unless you wish to remove the credit link that goes back to my website. I won’t hate you if you do this but if you keep it I’ll love you even more
You also need to change the Links-Color: Hover to your Primary Color and continue.
The last section is for Custom CSS/JS … Unless you know what you are doing please don’t touch this section.
WordPress Plugins I Suggest To Build Your Own Website
A plugin for your WordPress blog is a little tweak to make your blog perform better (in some cases) or do something an ordinary blog can’t do. As an entrepreneur, you’ll have different needs for plugins than someone blogging for pure entertainment reasons.
Before we talk about which plugins you should consider, you should be aware that plugins have the ability to mess up your blog, too. One that’s not maintained well can have bugs that wreak havoc on your blog.
Luckily, all you have to do is delete or make the plugin inactive, but you first have to know which one is causing the problems. Make sure you stay on top of your blog’s performance so that you’re aware whenever a problem arises.
I’m not going to spend your time trying to tell you all the plugins there are out there. That is because there are a bunch! I’d assume that there are millions of different plugins that can help you with different things.
So what I’m going to do is to break down the plugins that I have included in the free website design template I put together for you.
Before we start you will need to understand that if you need to delete, deactivate or activate any of the following plugins you can do so by hovering over the name of the plugin and simply clicking on the action you need.
These WordPress Plugins are not in any order … Just Alphabetical
ABD Dashboard Widget Manager – (by ABD Web Design) This plugin is how I’m able to put the “Stuff from CJ” tab inside of your Dashboard so I can update the videos and the monthly link. You can deactivate this plugin and delete it if you wish but you will not receive the updates from me. If you wish to continue to receive updates from me you can just leave this alone.
This is already activated for you … if you wish to, you can deactivate and delete this. It will turn off “Stuff from CJ” Tab.
Admin Block Country – (by TheOnlineHero – Tom Skroza) We’ve all heard of hackers and if you have ever had a website hacked you would hate them. This plugin helps keep hackers out. While it doesn’t guarantee that you won’t get hacked, it does block people from accessing the dashboard of your WordPress website if they are outside of your country.
I was going to activate this plugin in the template I made for you but if I did that and you or any other awesome people are not in the U.S. then you wouldn’t be able to use the site. So you need to activate this plugin. It will be able to tell what country you are in so if you are in the U.S. it will block all countries but the U.S.
Akismet Anti-Spam – (by Automattic) This one is simple. It blocks a lot of the spam comments that come through your WordPress website. You will need an account with Akismet in order to activate and run the plugin successfully. Don’t worry, you can sign up for FREE to get an account.
In order to do this, you will want to start by creating a wordpress.com account. This will also help you out with some other plugins we are going to cover along with setting up your Gravatar account. Once you have the wordpress.com account set up you will need to follow the steps after you activate the plugin to input the API Key and get it running right. There will be a blog post on this in case if you need it … just may take me a while before I get to it.
Blubrry PowerPress – (by Blubrry) This is the plugin that I currently use in order to display my podcast on my website. It gives you an RSS feed so that you can submit your podcast to the Google Play Store as well as iTunes. (Disclaimer: Do not host your files on your own server. You will want to host your podcast files with a podcast hosting company. )
Do Not activate this unless you are hosting your audio on a separate host and plan on doing podcasts.
Coming Soon Page & Maintenance Mode by SeedProd – (by SeedProd) This is an awesome plugin that gives you the capability to create a stunning coming soon page that you can put up in a few minutes.
There is a basic coming soon page currently active on your website with the template. You will see it if you try to go to your website while logged into the backend/dashboard. Once we finish designing your home page and ready to launch we will turn this off. For now, if you want to customize your coming soon page, it is fairly easy. I’d recommend just leaving it alone since it won’t take long to get the site live but you can customize it by going to the “Settings” tab. Click on “Coming Soon Page & Maintenance Mode” then you can update the text on the page, add a logo or change the background image.
Custom Login Page Customizer – (by Hardeep Asrani) This is the feature we had discussed earlier. It allows you to customize your login page. You can use this WordPress plugin to change the background image, form styling and the main logo for your login page.
Duplicate Post – (by Enrico Battocchi) If you run a blog that reports a lot of the same stuff or just would like to create a template for your blog posts, you can use “Duplicate Post” to do just that. Ever wondered how to duplicate or clone a WordPress blog post or page? This plugin is your best friend for that.
Easy Theme and Plugin Upgrades -(by Chris Jean) This was an answered prayer. When you are using “Premium WordPress Themes”, they don’t always release updates that you can install from within your WordPress Dashboard. So this plugin allows you to update the plugin and/or theme without losing any information. When some of my bigger sites that are built with the “Salient WordPress Theme” shows that there are theme updates available, I used to feel like crying. Now, with this amazing plugin, it is really stress-free and SUPER EASY!!!
Elementor – (by Elementor.com) This is a front-end editor for WordPress. I have used a lot of different similar plugins like “Visual Composer” and many others. But the problem was with what the average small business needing to watch every penny means you may be wanting a WordPress (WYSIWYG) visual composer for free. I searched for hours and hours and this is the best free front-end editor on the market in my opinion. That is why I decided to use this plugin for this training. No need to touch this plugin, it is already active and ready to roll!
Featured Image Generator – (by DesignilCode) Not everyone will be comfortable trying to use sites like Canva or software like Photoshop. For those people, I added this plugin. It gives you access to some awesome free stock photos and allows you to add color overlays and text. Once you finish your design you can save the image you created directly to your media library. So now you can use that image for your blog posts inside of WordPress.
If you want to try this plugin out just activate it and you will see the generator inside of your “Add New Post” page where the Featured image settings are in the bottom right-hand side of the page.
Fonts – (by Brad Dalton) This plugin works great with the Salient Theme that I use here on cjhallock.com & the WPOcean/Elementor template we are using for this training. It opens up the opportunity to use all the Google Fonts inside of your “Page Builder”.
This plugin is already Active and ready to use.
Formidable Forms – (by Strategy11) For years if you asked a website designer what the best WordPress plugin for forms was, their answer was Contact Form 7. Now, not so much. I still think CF7 is amazing but in the last 2 years, I’ve grown to love Formidable!! This plugin allows you to create custom forms in minutes.
This plugin is already set up and you will only need to change the settings if you want to change your current contact form or create a new one.
Jetpack by WordPress.com – (by Automattic) This plugin is a default plugin that comes installed with most auto-install files of WordPress. It adds a lot of features but for beginners, the main thing you will want to “Turn On” is the “Site Stats”. This allows you to track the traffic that is coming to your website. Yes, Google Analytics is the best way to track your traffic but this is a way to get a good understanding of your traffic when you log in to start working.
This is another plugin that you will need to use your wordpress.com account with. The main thing that people use this for is basic reports for traffic to your website with “Site Stats”. It will not replace Google Analytics but will help get a good understanding of what traffic you are getting.
Ocean Extra – (by OceanWP) This plugin is just to help with extra features like widgets, meta boxes, import/export and a panel to activate the premium extensions for Elementor and the WPOcean WordPress theme.
This plugin is active … no need to touch anything here.
P3 (Plugin Performance Profiler) – (by GoDaddy.com) See which plugins are slowing down your site. Create a profile of your WordPress site’s plugins’ performance by measuring their impact on your site’s load time.
This plugin is not active. If you want to run a scan on your website you can activate this and run the scan but I’d recommend keeping it deactivated unless you are running a scan.
Pretty Link – (by Blair Williams) This is a URL shortening tool for WordPress. For example, if you are wanting to link out to your awesome new book on Amazon, instead of posting the full link (https://www.amazon.com/InstaGuide-Instagram-guide-Covering-tactics/dp/1548967122/ref=pd_rhf_se_p_img_1?_encoding=UTF8&psc=1&refRID=4BETRZ7D1QAQSXSDZC7F) you can shorten it (https://cjhallock.com/igbook) then when they go to that link it will redirect it to that long & ugly link.
This plugin is active and you are ready to start creating short links with WordPress!
Remove Query Strings From Static Resources – (by Speed Up My Website, Your WP Expert) This is one of those things that can be complicated to understand so I will say that this plugin is made to speed up the loading time of your website. You’ll want to use this!
Already active and running on your site to move on.
Salient Visual Composer – (by Michael M – WPBakery.com) This is the plugin that comes with the Salient theme in order to build out your pages & website. Now, it only works with the Salient WordPress Theme so if you are using the template build this will not apply. If you are using the full template this plugin will not be for you and you can keep moving through the other plugins listed.
StarBox – (by Squirrly UK) This is a plugin that adds an author box to the bottom of your posts. I’ve fallen in love with this plugin over the last few years. I’ve tried many different author box plugins and this one stands out above the rest.
This plugin is optional. If you wish to use it then use this time to activate and go through the settings to include your social links and other features.
This plugin is active. If you want to deactivate this plugin and want to continue using the legal pages on your website you will need to go through the pages and change out the shortcodes with your information.
Velvet Blues Update URLs – (by VelvetBlues.com) When you start moving websites or if you build a website on a temporary URL you will need to change the URL of the site in the coding for where images and things like that are located. This plugin is a shortcode for that. You can use this tool and enter in the old information (www.oldURL.com) and the new info (www.newURL.com) and run it. This will go through the entire website and change like “Find and Replace” does in Microsoft Word.
If you need this plugin activate it and use it. If you are not sure then there is a very good chance you don’t need it so just keep moving.
W3 Total Cache – This plugin “Caches” or saves a “quicker to load” version of your website in order to speed up the loading time. With faster loading times on your website, you should also notice higher rankings in the search engines like Google.
Already active and running. If you want to go look at or change any of the settings just click on “Performance” in the menu on the left of your dashboard.
WooCommerce – This plugin is what gives you an eCommerce platform within your WordPress website. It is not the only option. Feel free to look around and find one that works for you but I will tell you I wouldn’t recommend it. Just use WooCommerce! The only downside is that if you are going along with this tutorial you will find that this plugin doesn’t work with the WP Ocean WordPress theme and Elementor plugin. So if you are planning on doing e-commerce, once again I suggest that you use Salient. (This plugin is not active in this template & should not be used. It is not compatible with this theme without purchasing the add-ons – You can get them here if you want)
WP Clone by WP Academy – This plugin is the easiest and most automated way to move a WordPress website. (Disclaimer – It is not guaranteed but it works 99% of the time for me. Also, if you are using GoDaddy, HostYak or other “Managed WordPress” hosting platforms you will not be able to use this. So please consider using a hosting company like InMotion or something similar.
Yoast SEO – This is one of the few plugins that I use on EVERY website that I build. This plugin will help Google and the other search engines find your website. It also will help you make sure that you do what you need to in order to be sure your site and/or page is optimized for the search engines.
While I would love to include even a small basics training in SEO in this website design guide, SEO is a massive beast and doing so would take this already massive blog post and add more than 7,000+ words to this, so I’ll cover that in an additional training later.
This will open up the Elementor Page Builder inside of your Dashboard in WordPress so you can start designing.
There is some placeholder content there if you want to go ahead and just use the layout that is there, go right ahead. If that is the case all you need to do is click on the content you want to change on the website and you will be able to edit the content in the window to the left.
If you want to start from scratch you can delete the content by hovering over each of the sections and clicking on the X. Once you have deleted each of the sections of the home page you will see the header and footer. In the body of the page, you will see “Add New Section” and “Add Template” buttons. You can drag the widgets over from the left or chose to add a new section or template.
Given that you are like 99% of the people who will be taking this training and evolving your website over time you may want to start small and continue to add to the pages over time. If that is the case, feel free to click on add template and get started with content so you can take your website live and put more time into it as you have it.
Or, if you want to take your time and build out something you specifically have in mind you can start by adding a new section here.
If you start with a template you will need to understand that there is going to be two different types of templates. Free and Paid. You will be able to see which templates aren’t free by looking in the upper right-hand corner of the template. Premium templates are listed as “Pro” with a red image in that corner.
Once you have the template you want to use, you can select it by hovering over the template and clicking on “Insert”
If you are going to build the template I already had installed or will be using one of their templates, the next section is going to go over designing your homepage with the free website template.
For this write-up, I’m going to be using the “Homepage – Law firm” template. Keep in mind you are going for the look, not the “industry” so you can use the law firm layout and make it for a photographer or a painting company so go for it.
For starters, once you have the template inserted into the page you just need to replace the content.
Each of the different widgets can be edited by either clicking on it or hovering over it and clicking on the pencil icon.
The “Edit” window will have 3 different tabs.
Content, Style, and Advanced.
Content is content, this is where you will change the text, images etc.
The style tab will change size opacity and stuff like that.
The Advanced tab is where you will change margins on your page.
The main thing you need to understand is the importance of being “Responsive” which is when your website changes and displays differently depending on the size of the screen that is viewing it. For example, your layout with a desktop view should be different than what people see when they view on a smartphone or a tablet.
You can view how the site will look on each of the 3 main display resolutions by clicking on the monitor icon at the bottom of the “Edit Window”
Then you need to select Desktop, Tablet or Mobile. View every page in all three previews to be sure it looks good for everyone!
If you chose to build your website from scratch you can use the different widgets to match a sketch or idea you have for your website.
I’d recommend starting with clicking on “Add New Section”. This is the first step. You need to select the column layout for this row.
If you want to have a background image that covers, let’s say, two wide columns all you need to do is select two columns and hover over the area and at the top of that section, you will see five different options.
The option on the left that looks like a sketch of a website. This will bring up the settings for this row. At the bottom of the “Layout” tab will be where you can change the Structure as far as if you want to two columns to be 50/50 70/30 or what you want.
The “Style” tab will be where you can add or edit background images for this row. you can click on the paintbrush icon and add an image there. Or if you want to stand out you can add a URL for a video on youtube if you want a video background. I’d recommend if you are going to do this to make sure it is not a video with a lot of text or people talking it needs to be a basic video. You can try video.pexels.com or do a search for “free stock video footage HD” in google and find some awesome background videos. Then all you need to do is upload it to youtube and grab that link.
I could go through every scenario when it comes to making your website but unfortunately, there are thousands of different things you can do with this template so I’ll just say this…
Use this time to go through and add content and get the layout you want for your website. This is going to be your “Home” Page.
Depending on the other pages you are going to be needing you want to take the time to create all the other pages you want, now. The only page I’d recommend not creating is the contact page. The page I have created for you is a great start so you can get some content on there without having to write much.
Once again … remember to save! And Publish when you are done!!!
Other than finishing the pages you need, you’re almost done.
Once you finish creating all the pages you need, you will need to take the website live. You do a few things for this process.
For starters, take down the coming soon page.
You do this by hovering over “Settings” and then clicking on “Coming Soon Page & Maintenance Mode”
Check the circle for “Disabled” and then “Save All Changes”
The next thing you need to check on is to make sure your website isn’t asking Google not to be indexed.
So in the “Reading” settings, you want to look at the section that says “Search Engine Visibility” and be sure that it IS NOT CHECKED to discourage search engines from indexing your site.
You Are Done!
Get out there and let people know that your website exists! I’m not going to cover the hundreds and hundreds of ways to get traffic here. You need to build a plan you can follow and one that works for you. But know this, just because you build a website that doesn’t mean people will automatically find it. You need to put the word out there!
A few ways to get your website found…
- Post a status update on facebook and ask your friends to check it out and share
- Tweet a link and ask for feedback
- Add your URL in your email signature.
- Add it to your voicemail (for more information you can check out www.mywebsite.com)
Set your goals, stick to them and you’ll start to see your efforts pay off as you build a website that people love to come back to again and again.
So… That is it on how to get your Website up and running with WordPress.
I hope this helped!
If you have any questions you can contact me online or just shoot me an email to [email protected]