WordPress Website Creation Training Course Slides

  • View
    4.103

  • Download
    1

  • Category

    Design

Preview:

Citation preview

WORDPRESS

WEBSITE CREATION

1

WordPress Website Creation Training CourseAcademyEquinet

2

Introduction

Welcome to our WordPress Website Creation Course - Learning how to create a website from scratch with WordPress.!

!

Creating a website can be both a fun and tiring task, however the results are always rewarding!

!

In my years of experience creating websites for both my clients and my own businesses, I have developed a systematic approach in

designing and creating websites. !

If you follow along step by step, you will be able to get a basic WordPress website set up and running by the end of this course.

!

A demo website will be provided to each participant for practical hands-on, and you will be able to take home the website for

practice during your own free time. !

Without further ado, let’s get started!

WordPress Website Creation Training CourseAcademyEquinet

33

WordPress Website Creation Training CourseAcademyEquinet

WordPress Website Creation Training CourseAcademyEquinet

4

3 Essential Elements to Build a Website

Domain Name

Web Host

Web Application Framework

WordPress Website Creation Training CourseAcademyEquinet

Web Browser

www.example.com

Hosting Server

1. Domain Name

2. Hosting Server

3. CMS Resides Here

UserYou

5

How Is It All Connected?

1. User types in www.example.com in his web browser

2. User gets “redirected” to where your hosting server is located.

3. Website files get downloaded from your hosting server to be displayed onto

his web browser.

WordPress Website Creation Training CourseAcademyEquinet

CMS

6

What is a

A Content Management System is a web application for non-technical users to create and

edit web content, manage, and customise a website with ease.

WordPress Website Creation Training CourseAcademyEquinet

7

Some Open Source & Proprietary CMSes

WordPress Website Creation Training CourseAcademyEquinet

WordPress Website Creation Training CourseAcademyEquinet

8

Open Source CMS vs. Proprietary CMS

Open Source CMS

Proprietary CMS

Open Source CMS Proprietary / Closed Source CMS

Support: Due to a larger user base, it is generally easier to find solutions to common problems on the web.

Costs: Generally less expensive to maintain than proprietary systems.

Support: Dependent on how reliable and proactive the developers are.

Costs: Generally more expensive to maintain than open source systems. Some vendors charge yearly licensing fees.

Customisation: Less costly to customise but may be more costly if advanced customisation is required.

Customisation: Unless CMS is built purposely for a specific niche, advanced customisation may be required and is usually quite costly.

Security: Dependent on how consistent security updates are launched for the core system and third party plugins.

Security: Generally believed to be more secure due to obscurity of the code. But also dependent on consistent security updates.

Portability: Easier to move from on platform or web host to another.

Portability: Exporting data may be tricky and may require expertise from original developer.

Read More: http://www.bloomtools.com/articles/open-source-vs-proprietary-cms.html

9

Google Search Trends

WordPress Website Creation Training CourseAcademyEquinet

10

WordPress.org vs. WordPress.comWordPress.ORG WordPress.COM

Free to download WordPress software. However domain name and web hosting is not included. You need to purchase your own domain & hosting and install WordPress software on your own.

Free to sign up with subdomain and web hosting included. Paid upgrade options available i.e. TLDs (.com & .net.), space upgrades (>3gb), and more.

Cost

Able to customise core files i.e. PHP, CSS, install third party themes, and plugins to extend functionality of site.

Plugins are not available for installation. Unable to customise core files unless you pay for upgrades.

Backing up and updating your site, preventing spam, and enforcing site security is your responsibility. Only forum support available.

Security and backups are included. Personal support and forum supports are available.

Customisation

Maintenance

WordPress Website Creation Training CourseAcademyEquinet

WordPress Website Creation Training CourseAcademyEquinet

11

Introduction to Domain

& Web Hosting

WordPress Website Creation Training CourseAcademyEquinet

12

Domain Name Registrars

WordPress Website Creation Training CourseAcademyEquinet

13

Buying a Domain

Name From Namecheap

1. Navigate to www.namecheap.com 2. Think of a domain name and enter your domain name into the domain name search

box.

WordPress Website Creation Training CourseAcademyEquinet

14

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Click the “add to cart icon” 2. Click “View cart”

WordPress Website Creation Training CourseAcademyEquinet

15

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Visit www.namecheapcoupons.com to get a promo code

2. Click “Confirm Order”

WordPress Website Creation Training CourseAcademyEquinet

16

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Create an Account if you don’t already have one

2. Log in to your account if you already have one

WordPress Website Creation Training CourseAcademyEquinet

17

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Fill in your account contact information

2. Click “Continue”

WordPress Website Creation Training CourseAcademyEquinet

18

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Select and enter preferred payment method

2. Click “Continue”

WordPress Website Creation Training CourseAcademyEquinet

19WordPress Website Creation Training Course

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

AcademyEquinet

1. Once you have bought your domain name, navigate to your account dashboard.

2. You can manage your domain names from your account dashboard

20

Web Hosting Providers

WordPress Website Creation Training CourseAcademyEquinet

21

Types of Hosting Plans

Shared Hosting

~ $10/mth ^

Reseller Hosting

~ $30/mth ^

VPS Hosting

~ $80/mth ^

Dedicated Server

~ $200/mth ^

For websites which do not require high server resources

& want to save cost.

Shared with many users

Shared bandwidth

Shared or allocated disk space

One cPanel

Shared with many users

Shared bandwidth

Allocated disk space

Able to create multiple cPanels

Allocated server resources

Allocated bandwidth

Allocated disk space

Able to create multiple cPanels

Dedicated server resources

Allocated bandwidth

Allocated disk space

Able to create multiple cPanels

Able to scale up Root-level access

For web design providers who wish to manage hosting for clients.

For high server resources, faster data transfer & data

isolation requirements.

For resource-intensive dynamic pages, database,

or email services.

WordPress Website Creation Training CourseAcademyEquinet

22

What is a CDN?

Servers

Human

Benefits of a CDN

Improves content delivery speed and performance across various geographical regions

A content delivery network (CDN) is a system of distributed servers (network) that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the

webpage and a content delivery server.

Saves cost compared to investing in an infrastructure of web hosting servers across the globe

Pre-cached web files still deliver to users globally even in cases of power outages or downtimes on the main server

WordPress Website Creation Training CourseAcademyEquinet

Reliable: Compared to dedicated hosting and other hosting plans which rely on a single server, cloud hosting draws its resources from multiple servers.

Benefits of Cloud Hosting

Flexible and Scalable: Should you require higher performance and resilience, it is relatively easy to upgrade your plans. Typically with cloud hosting, you pay as you go.

Load Balancing: Maximises availability of resources in event of any disruption of a local server, delivering users to the closest regional server without disruption to the user.

23

What is Cloud Hosting?A typical cloud hosting offering can deliver the

following features and benefits: Reliability; rather than being hosted on one single instance of a physical

server the website is hosted on a virtual partition which draws its resources, such as disk space, from an extensive network of underlying physical servers.

WordPress Website Creation Training CourseAcademyEquinet

24

Buying a Web

Hosting Package

From Vodien

1. Navigate to www.vodien.com 2. Select “View Web Hosting”

WordPress Website Creation Training CourseAcademyEquinet

25

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Choose a web hosting package of your choice

2. Click “Purchase”

WordPress Website Creation Training CourseAcademyEquinet

26

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Select the 3rd option 2. Enter the domain name you

have bought from name cheap

WordPress Website Creation Training CourseAcademyEquinet

27

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Select billing cycle 2. Click “Update Cart”

WordPress Website Creation Training CourseAcademyEquinet

28

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Check your details 2. Click “Checkout”

WordPress Website Creation Training CourseAcademyEquinet

29

Buyi

ng a

Dom

ain

Nam

e Fr

om N

amec

heap

1. Enter your contact details 2. Select payment method 3. Click “Complete Order”

WordPress Website Creation Training CourseAcademyEquinet

30

How to Point/Link Domain Name to Website

Step 2

Step 1

Step 3Step 1!!Once you have bought your web hosting package, your web hosting provider will send you the Name Server details i.e. (ns1.hostingprovidername.com and ns2.hostingprovidername.com).

Step 2!!Login to your domain name registrar and find the registrar settings of your domain to input the name servers into. It should be something like “Manage DNS servers” or “Configure/transfer DNS servers”.

Step 3!!That’s it! Wait 24 to 48 hours for propagation before your website will start working.

WordPress Website Creation Training CourseAcademyEquinet

31

How to Point/Link Domain Name to Website

1. Navigate to your Namecheap dashboard

2. Find the domain name you wish to modify and click “Manage”

WordPress Website Creation Training CourseAcademyEquinet

32

How to Point/Link Domain Name to Website

1. Navigate to your Namecheap dashboard

2. Find the domain name you wish to modify and click “Manage”

WordPress Website Creation Training CourseAcademyEquinet

33

How to Point/Link Domain Name to Website

1. Navigate to your Namecheap dashboard

2. Enter your name servers into the blanks. (Your hosting provider will email you the name server details)

3. Click on the green checkbox and wait 24 - 48 hours for propagation

WordPress Website Creation Training CourseAcademyEquinet

34

Hands-On

1. Setting up emails in your web hosting account

2. Syncing emails with your email provider

3. 3-step WordPress installation

WordPress Website Creation Training CourseAcademyEquinet

35

Setting Up Emails in Your Web Hosting Account

1. Navigate to www.yourdomain.com/cpanel 2. Enter your login details

WordPress Website Creation Training CourseAcademyEquinet

36

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

1. Enter your desired email address

2. Click create account

WordPress Website Creation Training CourseAcademyEquinet

37

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

Next, we are going to connect your cPanel email to your gmail account. !

1. Under your email accounts list, click “More”

2. Click “Configure Email Client”

WordPress Website Creation Training CourseAcademyEquinet

38

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

There are usually two settings Secure SSL/TLS Settings and Non-SSL Settings. Secure SSL encrypts your emails for more privacy while Non-SSL doesn’t encrypt your emails !

1. Choose either one setting 2. Copy the details of the

incoming and outgoing server as well as the ports. In this case, we will only need the POP3 and SMTP ports.

WordPress Website Creation Training CourseAcademyEquinet

39

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

!1. Log in to your Gmail 2. Click on the gear icon and

click “Settings”

WordPress Website Creation Training CourseAcademyEquinet

40

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

!1. Click on the “Accounts and

Import” tab 2. Click “Add a POP3 mail

account you own”

WordPress Website Creation Training CourseAcademyEquinet

41

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

!1. Enter the cPanel email

address you wish to connect to your Gmail account

WordPress Website Creation Training CourseAcademyEquinet

42

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

!1. Paste the fields you have

copied from your cPanel email settings

2. Click “Add Account” !You will now be able to receive incoming emails from your specified email address into your Gmail.

WordPress Website Creation Training CourseAcademyEquinet

43

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

We will now set up email sending from your specified email address. !

1. Select the first option 2. Click “Next Step”

WordPress Website Creation Training CourseAcademyEquinet

44

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

!1. Enter your Sender’s name 2. Click “Next Step”

WordPress Website Creation Training CourseAcademyEquinet

45

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

!1. Refer to your cPanel email

settings and copy and paste the SMTP details

2. Click “Add Account”

WordPress Website Creation Training CourseAcademyEquinet

46

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

Gmail will send a confirmation email to verify that you own the email address. !

1. Enter the verification code 2. Click “Verify”

WordPress Website Creation Training CourseAcademyEquinet

47

Setti

ng U

p Em

ails

in Y

our W

eb H

ostin

g Ac

coun

t

To confirm everything is working fine, send a few test emails to yourself.

WordPress Website Creation Training CourseAcademyEquinet

48

3-Step WordPress Installation

1. Under “Software and Services” of your cPanel home, click on either one of the following

• Softaculous (We will be going through Softaculous in the next steps) • Quick Install • Fantastico

The above softwares vary depending on your web hosting provider.

WordPress Website Creation Training CourseAcademyEquinet

49

3-St

ep W

ordP

ress

Inst

alla

tion

!1. Click on WordPress to go to

the next screen

WordPress Website Creation Training CourseAcademyEquinet

50

3-St

ep W

ordP

ress

Inst

alla

tion

!1. Choose the domain you wish

to install WordPress on 2. Delete “wp” and leave the

field blank 3. Enter your Site Settings

WordPress Website Creation Training CourseAcademyEquinet

51

3-St

ep W

ordP

ress

Inst

alla

tion

!1. Click “Install”

WordPress Website Creation Training CourseAcademyEquinet

52

3-St

ep W

ordP

ress

Inst

alla

tion

You can now access your site through www.yourdomain.com/wp-admin!

1. Enter your login details 2. Click “Log In”

WordPress Website Creation Training CourseAcademyEquinet

53

3-St

ep W

ordP

ress

Inst

alla

tion

Welcome to your WordPress dashboard. Feel free to explore around.

WordPress Website Creation Training CourseAcademyEquinet

WordPress Website Creation Training CourseAcademyEquinet

54

Modern Web Design Best

Practices &

Choosing the Right WordPress

Theme

WordPress Website Creation Training CourseAcademyEquinet

55

Modern Web Design TrendsFlat Design

Mix & Match Typography

Compact Navigation Menu

Responsive Design

Micro UX Effects

Parallax Web Design

Rich Media Content

Minimalistic Design

Full-Width Imagery

Screen Estate Maximisation

Translucency & Transparency Minimal Text

Infinite Scrolling

Monochromatic Colours

View full article at www.equinetacademy.com/latest-web-design-trends/

WordPress Website Creation Training CourseAcademyEquinet

56

Installing a WordPress

ThemeChoosing a reliable theme before even building your WordPress site is of paramount importance. One of the implications you will face if you switch themes in the middle of your site development is redesigning all your pages from scratch again. !In the next slide, we’ll learn how to choose a great WordPress theme.

WordPress Website Creation Training CourseAcademyEquinet

57

How to Choose a Reliable WordPress ThemeGood Customer Support:

Sometimes even with web development experience, solving theme issues can be

quicker with the help of the theme developer.

Good Reviews: Choosing a theme thousands have already tried their hands on instead of testing a newly developed theme

can save you from headaches and wasted time.

Consistent Theme Updates: A theme that’s outdated and incompatible to the latest WordPress version risks security vulnerabilities and display-rendering flaws.

Cost-Effectiveness: Look for themes that have life-time theme updates and customer support.

Responsive Design: Browser responsiveness is ever more important as smartphone and tablet usage overtake desktop usage.

Compatible With Mainstream Browsers: It is important to test the theme against

popular browsers such as Chrome, FireFox, Safari, Internet Explorer, and Opera

Well Documented: A well documented theme can save you a

lot of time trying to figure out theme-specific features and customisations.

Features Availability & Customisability: It is generally easier to customise the front end of your website with a theme fully loaded with built-in design features and a flexible internal design framework.

Inst

allin

g a

Wor

dPre

ss T

hem

e

WordPress Website Creation Training CourseAcademyEquinet

58

Once you have purchased a premium theme (we will be using the Enfold theme for this course), you can now proceed to install it into WordPress. !

1. Navigate to Appearance => Themes

Inst

allin

g a

Wor

dPre

ss T

hem

e

WordPress Website Creation Training CourseAcademyEquinet

59

!1. Click “Add New”

Inst

allin

g a

Wor

dPre

ss T

hem

e

WordPress Website Creation Training CourseAcademyEquinet

60

!1. Click “Upload Theme”

Inst

allin

g a

Wor

dPre

ss T

hem

e

WordPress Website Creation Training CourseAcademyEquinet

61

!1. Click “Choose File”

Inst

allin

g a

Wor

dPre

ss T

hem

e

WordPress Website Creation Training CourseAcademyEquinet

62

!1. Select theme file in .zip format 2. Click “Open”

Inst

allin

g a

Wor

dPre

ss T

hem

e

WordPress Website Creation Training CourseAcademyEquinet

63

!1. Click “Install Now”

Inst

allin

g a

Wor

dPre

ss T

hem

e

WordPress Website Creation Training CourseAcademyEquinet

64

!1. Click “Activate”

!Repeat the previous steps to install and activate the “child theme”.

Inst

allin

g a

Wor

dPre

ss T

hem

e

WordPress Website Creation Training CourseAcademyEquinet

65

Once you have installed and activated your child theme, you should see the following in your Appearance => Themes.

Inst

allin

g a

Wor

dPre

ss T

hem

e

WordPress Website Creation Training CourseAcademyEquinet

66

Adding Site Content

One of the first things you do after installing your theme is creating your site pages and organising the structure of your site. 1. Navigate to “Pages”

WordPress Website Creation Training CourseAcademyEquinet

67

End of WordPress Course Preview

Thank you for previewing our WordPress course. !

If you wish to learn hands-on how to create a website from scratch, sign up for our 2-day WordPress course: !

www.equinetacademy.com/wordpress-course-singapore !

If you enjoyed reading, share this course with your friends!

WordPress Website Creation Training CourseAcademyEquinet

Students’ Work

www.cataleya.com www.meligallery.com

www.simplicitygifts.com.sg www.alkalife.sg

Recommended