Web Burble   How_To_Build_A_Website

 

How To Create A WordPress Website

speed up outlook

go tour thailand


Below is the written text for the audio in the YouTube video on how to  "Make a WordPress Website 2017"

 

Tutorial Beginning

In this tutorial I am going to show you how to register a domain name,... select a hosting providor,... install WordPress and create a WordPress website and blog.
I suggest you make the video display in high definition, cinema-theater mode or full screen

Hostgator Website

One of the most reliable and cheapest hosting companies is Hostgator where you can select from a wide range of plans to suit your requirements.

If you are just starting up your first website then the most suitable choice would be selecting either a wordpress hosting plan if you expecting many visitors to your website in a short period of time or a regular shared plan which is more economical and probably more suitable. You can always upgrade in the future.

The standard "Web Hosting" plan is a shared plan where many other websites are hosted on the same web server.The advantage with these plans is you can have as many domains as you like on the web server, you just need to register and purchase the domain names, and you can always upgrade from the shared plan to a wordpress plan later on when your website gets busy.

The "Baby" plan would be the recommended plan for a regular website.
Click on the "Buy Now" to start.

HostGator Signup Page

Now, if you have a registered domain name already you want to use then select the "I already have a domain name", else we can search and register a domain name.

Hopefully you have already got a good idea of what you want your website name to be.
Just type in the name and select the type of domain you want, usually a .com or a .org or .net

Here you will see that domain name is already taken by some-one else, so we need to find one that is not already registered. You can also see none of the domain type alternatives such as .net are also not available .

Now we can see the TLD , top level domain using .com is taken but another type such as .net or .org IS available. I dont recommend using an existing name, a unique name would be best.

OK, now we have found a domain name that is available.
You COULD register for yourself multiple types of the most common TLD's such as .com, .org, .net , right now, so nobody else will be able to take your website name and "piggy-back" on your good reputation,... but the disadvantage is you will need to pay the yearly subscription for each of the domain types to be able to keep them.

- 1 -

There is an option for Domain Privacy where your personal details are kept private. This is a very good idea as it stops scammers from knowing who you are and where you live. They often send bogus emails, mail and sms messages declaring to be from your hosting providor or other legitimate organization and try to scam you for futher information or money.

- 2 -

Next, select the lenght of the plan you want, one year is normal. I'll give you a promo code later so you can claim a larger discount rate.
Enter a username for the account, dont use "administrator", using a unique name would be best.
Enter a random 8 number security PIN code and write it down so you dont forget and keep it in a secure location.

- 3 -

Enter in your billing info and make sure it is completely correct else you may have issues if you need to contact accounts or support at a later stage.
Make sure your email address is entered correctly because this is where your login details will be sent.
Fill out all the other details.

You can choose the credit card option, which is safe becasue the site uses the HTTP encrytion method for sending data, OR, you could use Paypal if you have an account.
If you select paypal then you get redirected to the paypal page when completing the signup.
And, make sure you are using YOUR OWN credit card for the payment so names and address match.

- 4 -

There are a few more options you can choose from, Sitelock protection could be a good idea, automatic backup may also be a good idea so you dont lose all your hard work.
and, HTTPS would only be needed if you will be creating a payment gateway for online sales for your website, OR, if any other type of sensitive data will be sent by your wwebsite visitors.

- 5 -

You will see the amount due which is the yearly subscription cost plus any extras.
Now enter the coupon code BURB60 and click on the "validate" button to get your extra discount.

Checkout

OK, now you can "checkout" to proceed with payment and get your domain and hosting, but dont forget to read the terms of service and conditions.

You will be able to get into your Hostgator account immediately after signup but your actual "website domain name" wont be available until it "propergates" the Internet.
which means the domain name will take a few hours or sometimes longer before it gets registered on all the DNS servers worlwide.
The next steps will go through the process of actually setting up your website with Wordpress. Without doing this all that will display for your actual website will be a blank page or some generic page.

Check Email

Now go to your emails and you will find one from Hostgator that has your login details. Now, keep this in a very safe place.
click the "your control panel" link and log into your hostgator cPanel account with the username and the password.

cPanel

Ok, type in the username and password and click "login"

The cpanel page displays.
This is one of the best control panels used worldwide for managing websites, it looks pretty daunting if you have never seen it before but you dont need to learn anything here yet.
Just scroll down and locate the "wordpress 1 click install" and click the link.

The first prompt is asking which domain to use for installing Wordpress, and since you only have one now, there would only be one choice from the drop down box.
Later on if you register other domains for creating more websites then you would obviously need to pick the right one.
Do not add anything to the "directory" box because any name would make wordpress install into a sub-directory of your domain and its not what you want to do.
Click next

Enter the website title which will display on your web pages. This can be changed later.
Enter an administrator name for logging into Wordpress. Make it a unique name that is not easily guessed so your website is more secure. "Admin" is the worst name to choose.
Enter your first and last name and then an email address such as a gmail account or the one you used for signing up to Hostgator.
Tick the box to automatically create the database. And you agree to the terms of the service agreement.
Click 'Install Now"

Make a note of the username you chose and the automatically generated random password. Keep it in a safe place !

Log into WordPress

The login for wordpress will be yourwebsitename.com/wp-login.php BUT you may need to wait for your domain name to "propagate" thoughout the Internet to the DNS servers before it will work. It can take a few hours to 24 hours until your website can be accessed.

To log into your wordpress administration just add forwardslash WP dash admin dot php to your domain name.
Enter the unique username you created for wordpress and the password that was automatically generated and click the "remember me" to make it easier next time.

Ok, this is the the administration for Wordpress where you will select a template to use and create your website content.

The "Home" page is where we are right now.
And the very first thing to do is select the "Updates" on the 'Dashboard", check is the version is up to date by clicking on the "check now" button, if you dont have the very latest then update straight away so we have a current version.

Next is the "Posts" for blogging. We will be creating a "website" and then adding a blogging page later on. You can have wordpress work as a "blog" only and I will show you later how this id done.

The "Media" is where you upload and store your images, videos and music and any other files for using in your website.

"Pages" are where you can create "static" pages for your website and menus can be linked to these pages.

"Comments" are managed here, if you allow your website visitors to make comments on your website.

Here is where you will be creating the "Appearance" of your website, by selecting a template theme, customizing fonts and colours, selecting a menu, adding widget functionality to sections of the page, how the top header of the pages look, etcetera. The "Editor" is for the more advanced area where the template "theme" code can be changed.

The "Plugins" section is for downloading add-ons that integrate into Wordpress,

OK, "Users" is where you can add and remove login credentials for Wordpress. So, you are one of them now and thats how you were able to login to Wordpress.

"Tools" can be used for making life much easier such as the "Export" and "Import" where you can transfer content from one Wordpress website to another wordpress website.

"Settings" is where you can change certain default features, and, this menu list will expand to include settings for any added "plugins".

You can also "collapse" the sidebar menu.

Top Menu Items

Going to the top right is where you can log out of your wordpress site.
The other top menu lets you quickly create a post or page and add media files
The "My Website" is a link to bring up your website.
And, the worpress icon for going to the wordpress site that has documentation and support forums if you want to ask questions and search answers.

Viewing the Default Theme

Here we can see a default wordpress theme and the top menu which remains on the top whenever you are logged into your wordpress website. Its not what a visitor would see, only you.
If you want to see exactly how it looks to a visitor bring up a different browser, e.g. use firefox if you are currently using chrome as your browser. Just enter your website name to view.
click on the "Dashboard" link to go back to your wordpress administration page.

OK, now we are going to select a template theme to use for our website.

Selecting a Theme

Click on "Appearance", then "Themes" and the "Add New" button.

The actual template you choose will determine what can be customized for your theme. It is more like a "website builder", so you need to ensure the template "Theme"
you select has all the customization features you require. Also, many "themes" that are available for free are the "basic" version and the fully featured "premium" version has a download fee
but there are many very good themes available that are free.

The actual content you write such as articles and menus you create are seperate to the template theme, so in theory you -could- change themes at a later stage but there can be issues and it is best to do some research first on the best theme to use and also do some "practice runs" before doing any serious work.

I am going to use the "Plum" theme.
Click on "Install" to upload it into WordPress.
Then "activate" it so it becomes the current theme.
Now you can see it is the "Active" theme.

OK, now we can see how it looks, click on the "my website" link to view the basic theme with no real content. It is currently in "blog" mode with no image.

Plugins

Now back to the admin and we need to install some "plugins" which will make it easier to do things.
Select "Plugins" and "add New"
These are the plugins available from the wordpress download site that we can upload and active on our wordpress site.

Coming Soon

First is the "coming soon" plugin which allows the website to display a fixed page for visitors as the site is developed and before we publish and put it "online"
And click "Save All changes"
Enable the "coming soon" mode and create a basic "headline" for the page.
Click on the "Live preview" , and this is what visitors will see. But, when you are logged in and developing your site you will actually see the the real content as its being created.
Its only visitors who see the "coming soon" page.

this plugin is very versatile and a lot more can be created to make the page fancy, if you want to spend the time.

Later on, after creating the website, the "status" just needs to be set back to "disabled" and click "Save All changes"

Now install easy google fonts and active

SiteOrigin and siteOrigin Widgets Bundle

We will activate all these a bit later,
its quicker to downlaod first and then active in one go.

Spacer to make formatting easy.
Black Studio TinyMCE to make editing much easier
Title Remover for cleaning up page titles if we dont want them.
Contact Form 7 for a setting up a nice contact form for visitors to send enquiries.
WP supercache to speed up the website.

Now go to "Installed plugins" to activate them
We DONT want to activate "WP Super cache" yet when developing the website as any changes may not display immediately.
Only after the website is published and "online", then turn it on.

You can see new menu items appear for many of the plugins that have been activated, although some actually have their settings in the "Plugins" section.

Settings Configuration

Now we need to perform a few setting changes to get the website working as we want.

go to "Settings" and 'Reading"
change the "Front Page displays" option to a "Static page", and select the front page, which is currently a default page we will update soon.
So, what we are doing here is changing our site to be a "website" instead of a simple "blog",... but we we will add a blogging page in later.
Now we can view the website agin to see how it looks. If you make any changes then a "reload" of the page can ensure you are actually seeing the updated view.
We have a static page now instead of the previous blog page.

Customizing

Typography
Next we are going to change some settings in the current theme using "customize"
Because the "easy google fonts" was installed we have the option for changing the themes Typography.
Choose what fonts are to be used for the website, but only select two types at the most or your site may look a bit funny.
Paragraphs are what is used in the articles for each page of the website. Headings are for page titles and sub-titles.
Choose the "font family" and the "font weight" which is how bold the text will display.
You can see the preview on the right shows the change in typography.

Dont forget to "save and publish" when done.

Title & Logo

A logo can be added to all pages which replaces the current 'site title" and "tagline"
You would want to create a nice logo in a graphics application beforehand. A PNG image would be best so you get a transparent "see through" background instead of a "coloured box" background to you logo.
Upload the your logo from your computer to your wordpress website into the "media library"
You can add extra info to include an "alternative text" which displays on a loading web site page as the image loads.
Crop the image if required or skip entirely.
You can now see the page preview has the new logo.
Now we should add a "site icon" to make our webpage look a bit professional. make sure any image you create is 512 pixels square as a minimum or you will get an error message.

Now save and publish else you will lose all your hard work.

Featured Content
This theme has two "featured content" positions allowed for a post.

Blog Layout
We are going to change the layout so the site is more like a website than a blog site but later on we will modify it to have a "blog" page.

Sidebar Layout
Disabling the sidebar for the front page will allow a beautiful full width page to be created as the main page.

Custom Footer
Now add some copyright message to the bottom of each page of the website.

Theme Skin and Colors
If you were to change the header image then this theme allows for a green or orange top section instead of the current Plum colour.

Google Web Fonts
select a default "title" font and most importantly a default "body" font which will capture all text on the website that has not been allocated a particular font
we have already chosen fonts for paragraphs and headings previously, so this is a "fall-back".

Social Icons
add some social icon links to your facebook or youtube page, etcetera, if you have any.

Header Image
here you can change the image displayed for the header to you own, just upload it into the "media library", crop if required and "save and Publish"

Menus
the current theme allows for only one menu, but you can use a widget for adding other menus to the website.

Widgets
the current theme allows adding installed and activated widgets to the sidebar and footer of each page

Static front page
we have already seet these options up from within the "settings" previously.

Additional CSS
CSS stands for 'cascading style sheets" and these files have code inside that controls how the website looks. Its definately a more advanced area.

Pages

Now we can create some content for the website by adding pages.

The first thing we can do is change the heading for the initial sample page and call it our "Home" page.
Because we added the "Title Remover" plugin previously, we have an option to hide the page title which can be a bit ugly and unnessessary.
Update an preview the changes. You will se it opens into a new tab,... leave this tab open for previewing

What we are looking at here is the default editor for wordpress which is a very good WYSIWYG editor plugin that comes pre-installed.
The formatting buttons are very similar to what you would expect in a computer program such as Word or Openoffice and is very easy to use.
I am going to add some generic latin text for demo purposes.

There are three tabs here, the "visual" editor for normal WYSIWYG editing, a "Text" tab where you can format the content with HTML "tags" and also write HTML code in here yourself if you wanted.
The third tab is for the "page builder" method of creating content and shows here because we installed the "SiteOrigin" plugin.
Just a warning... dont go back and forth between the regular "visual" tab and the "page builder tab" because it can mess up your content if it's copied between the two, just stick to using the "page builder".

OK, now we can copy the content we have already done and allow page builder to use it.

The great thing about this feature is being able to create content as distinct rows which can be formatted and moved very easily.

Now we add a row, select how many colums we want and how wide each column is to be, ... the percentage of each column needs to add up to 100 for the total row.
Now that we have the structure, click to highlight the individual column,... and add a widget. we select the siteorigin editor so we can create text content.
Just to make it easy, duplicate the editor widget and drag and drop to the other columns.
Click the "edit" for the content widget and create whatever is required,... the editor is just the same as the default editor but with some easy to use styling options in the right hand side drop menu.

I'm just going to paste some text in to make it quick.
To add an image, we go to the "media library" and upload some nice photos from my computer.

Now we edit the image how we like, ... click inside to get the formatting bar and select the pencil icon...
Add a caption for the image...
Include some alternative text... this will make for a more friendly website if the image takes a long time to load.
Make it centred
and select a more suitable size for the image
Save changes

You will see that no Title has been entered, this is optional.

Add content to the other columns.

Clicking other browser tab
Click the update and we can view the result.

Back to edit page
Each row can be easily moved up or down as required.

Any rows of content can be easily removed using the "delete" option.

Publish

Now we have some content and can publish the website.
From the "settings" menu click on "coming soon..." and disable this feature and "save the change"

And from the installed plugins we can activate the "WP Super Cache" to make the website pages load faster.
Then edit the settings and turn on caching.
Now test the cache.
There is a "delete cache" option whenever the current cache needs to be cleaned up and started afresh and a delete expired cache to save disk space.

New Plugin

Some template themes will already have a "full width" edge to edge option when you create "pages" with the option in the "page attributes"
But, the Plum theme does not have this so we are going to copy and paste some code that is specific to this theme only.

Ok, now go to plugins and install and activate "simple custom css and js"
Go to the settings for this plugin and click on the "add CSS code"
Add the name as "Full width Pages" and go to www.webburble.com from another tab
Select "Template Scripts" from the "Advanced" menu and copy the CSS code. Make sure all the code is copied and nothing is left out.
Now paste this code into the custom CSS page.
This will tweak the "Plum" theme we are using as a template to have full page width on selected rows which will make it look really fantastic.
click on the "update" button to save the changes.

Back to Home Page

OK, now we go back to the "Home" page and preview how the page looks now.
So, it now looks too wide for what we want for regular columns of content. We go to the "tool" icon for the row and select "edit row"
From the "layout" drop down menu, change the right and left padding only to be 10%, or whatever looks to be a good fit.
Click "done" to save and then "update" the changes and "preview" the page.
Now this looks much better.

Paralax Images
Now add a new single column row with some text and padding.

So, what we are going to do now is add in some images that will display edge to edge on the page and have an amazing "parallax" effect.
Create a new row, but do not add any widget or anything else yet, and select the "tool" icon and "edit the row"
From the "Layout" add a "Row Layout" select the "Full width Stretched" style.
From the "Design" select a "Background Image" select an image from the "media library" or download a new one. Choose a good quality image that is wide, at least 1920 pixels so it does not end up looking blurry because we are adding a full width edge to edge section to the page.
Now, from the "Design" select a "Background Image Display" select the "Parallax" option to create a greate effect.
Click "Done"

Make sure the same row is highlighted and click on the "add widget" and add in the "siteorigin editor"
Select the edit on the widget and add in a "spacer". This spacer is one of the plugins we added previously.
Change the spacer px pixel height to be something like 175px.

Update the chanmges and preview the changes...
We can see a full width image with a parallax effect which is when the image scrolls as the page scrolls.

We now add some more full width content and parallax images.

But, we want to make the image taller... so just adjust the "spacer"

Contact Page

Ok, now we are going to add a contact page to our website so visitors can send a message to us.

From the Pages menu, click on the "add new" button
Name the pag e"Contact" and click the "hide the title" option
Select the "page builder" tab and add a single column row
Click within the new row to highlight it and click the "add widget" button
We are going to select the siteorigin contact form

The contact form settings do not need to be changed unless you need to modify the email address all messages are sent to.
Also, adding a default subject line and a subject prefix line can help identify emails that are sent by visitors of your website.
Click "done" and "publish" the page

View the changes and we can see the form needs to have padding unless you want it full width.
Add some padding.

Now we need to add a menu item for the contact form and link it.
Click on the 'appearance" menu and select "menu"
Select the "Contact" page item and "Add to menu"
"Save" the menu

Go back to the "contact" page and "preview the changes"
Now we can see the new contact menu item that has been linked to the contact page.

Now we will add a google map to the contact page,
So return to the page and add a new single column row and move it to the top if needed.
Click inside the row to highlight it and then add the google map widget

Once added, the settings need to be configured to tell it where in the world we are...
Add your full address, with the street, city and country seperated by a comma.
Now you need to create a google map API key, which is like a licence key from Google maps.
You can also choose the "zoom level" to tell google maps how close or far out to display the map from where your business is located. 12 to 15 is about normal.
Add some padding, update and preview the page.

Easy Fancy Box for Front Page

OK , now we are going to add a media display to the home page.
Install the "easy fancy box" plugin and activate.

Go to the "settings" and select what type of media you want the plugin to work on... it will automatically see it on a page and create a pop-up box when the link is clicked.
Here i will be using youtube video displays. There is a huge array of settings to adjust how it displays media....

Save the changes....

Adding Graphics
Go to the "Home" page editor and add a new row. I am adding three columns.
Add an editor to each column
I am adding some graphics i created and uploaded previously just to make the links stand out on the page.

Adding Buttons
Add a new row with 3 columns and move the row under the 3 graphics,...then give the row some padding.
Now highlight the first column and add a siteorigin button, duplcate it twice and move to the other columns.
OK, add some text to match whatever videos we are going to display,,, and copy and paste the Youtube link for the video into the "Destination URL"
Complete the other two columns with more buttons...

Update the changes and we can now preview the videos
Very easy and simple way to display media on your website.

Creating a Blog Page

Add Plugin
OK, now we are going to add a blog page to the website
First we need to install a new plugin called "disable comments"... here is a different way of doing this by searching from within the existing installed plugins and using the "wordpress plugin directory" link to find it.
Now,... go into the settings and disable for "Posts" and "save changes"

Customize

Go to 'Appearance and "customize" and change the "design and layout" for "blogs" to be the "plum theme 3 column" layout
and,... the "sidebar layout" to display on all pages except the Home and Front page
and,... set the width to be 25%

Blog Page

Now we go to pages and add a new page called "Blog"

Settings
Then into "settings" and ... "reading"... and make the "Posts page" the new "Blog" page we just created

Appearance
Go back to "appearance" and "menus" and add the new "Blog" page to the existing menu.
You can see if we dont save the changes a warning appears...

Posts
Now go to "Posts" and you will see i have already added 3 posts...
To add a new post click the "Add New"
If you click on the "screen options" tab there are several options available.... make sure the "featured image" box is ticked.
and publishing options also can be set.

Scroll down and add a featured image for the blog.

Then add a blog title and some content...

Now we can publish the blog and preview the new page

Thats it for this tutorial,.... and if you have enjoyed the presentation please click on the "like"

Tutorial End

 

 

The landscape and blog images are from my website  gotour-thailand.com
and... you can also visit... mywebsite.netburble.com to see this Wordpress site.

 



© 2018 WebBurble.Com. All Rights Reserved.