Wordpress Workshop From Zero to Hero (September 2018) Contents 1. - - PowerPoint PPT Presentation

Wordpress Workshop

From Zero to Hero (September 2018)

Contents

1. Admin 2. Wordpress Basics 3. Create a Basic Wordpress Website 4. Using Oxygen 5. Website Design 6. Client Portal

Course contents

1. Admin and Set up

a. (Give students a choice to buy their own site or to use my multisite installation), and I’ll leave it open for 6 months b. Give login and password to client portal (learning site)

2. Good design

a. Fonts, Colours and Graphics b. Mobile responsiveness c. UX (Give some basic questions to ask other classmates to get feedback

• n their site)

3. Different Uses

a. Landing page / Single page b. Woocommerce c. Forum / Community Site d. How to use Plugins - Questions to ask yourself

4. Page Builders

a. What are there out there b. Comparison and Why I recommend Oxygen c. Special discount for students (I hope)

Client Portal Contents

1. See description 2. Course reg

a. Get all participants to reg and then mass import the participants into the website

3. Upon Login, Redirect to the client portal thing 4. Dont have checked (completed) modules.

Admin

Get your login and password and website url. Login URL: http://yourname.iotaforce.com/wp-admin Username: Password: (### not set up yet)

Pre Course Reflections

• https://docs.google.com/forms/d/e/1FAIpQLSdj0soUU_ETDnvhc

Va_d3415xuHenJjztsUAL372vbQkSKSNA/viewform Include name and company to both reflection forms, and send them a copy of their response

(Round 1) Wordpress Basics

Wordpress Themes

• What are themes?
• We will try changing the default themes to see how it

affects the look of the site

• Themeforest.com

○ Themes with many different extra functions

• For this course we will not be using themes - we will be

using a theme builder called Oxygen

What is the difference between a post and a page? Wordpress started off as a blogging platform. Posts belong to the blog, where it is shown in a reverse chronological

• rder. Pages have no order and are usually accessed by a

menu or a link from another page. Discussion: What sort of content should be put in a post or what should be put into a page? Tip: Is the time/date of the post important?

Posts and Pages

Making a basic Wordpress Website

To Do:

• Create 3 new pages and one new post
• Configure Home page and Blog Page
• Change Blog Title
• Add one main menu
• Add widgets to sidebar
• Navigate around your new site

Adding new page or post

• WYSIWYG Editor/Text editor

○ <h1>, <h2> tags

• How to embed a video/audio/twitter post
• Title
• Content
• Categories/Tags
• Add featured image
• Yoast SEO

SEO Basics

What are your keywords? What do you want to appear on the search engine?

Example 1: Post Duplicator (Plugin Tutorial)

• What are plugins?
• How to search for plugins?
• How to install plugins?

“Is there an easier way I can do this?” “Can wordpress accomplish this for me?” <what you want> + “wordpress plugin” Check ratings and reviews!

Example 2: Header and Footer Plugin

Important for adding tracking codes (advertisements, monitoring traffic)

• Google
• Facebook Pixel

List of Useful Plugins (1/2)

• Attachment Pages Redirect - because wp creates attachment pages

which are not needed

• Duplicate Page - self explanatory
• Head, Footer and Post Injections - for installing google or fb

analytics

• Imagify - compress images
• Insert Pages - to insert a post (php thing)
• ManageWP - Worker ---- backup
• Media Library Assistant ---- change image meta and title and

description for SEO purposes

List of Useful Plugins (2/2)

• Ninja Forms -- forms
• WP Cerber Security & Antispam --- security
• WP Disable ---- website speed and performance
• WP Fastest Cache --- website speed and performance
• WP Maintenance Mode -- maintenance page
• WP Sitemap Page --- sitemap for seo
• Yoast SEO ---- seo for blogging
• Imagify -- optimizes images, need to install and create account

Where do widgets appear on a website? Widgets are the components that you find at the sidebar or the footer.

• How to configure widgets
• How do you make widgets disappear for certain pages?
• Search for more widgets

Try searching for widgets (plugins) that enable that

• function. What did you find?

(Tip: Google <function> + “wordpress widget”) What is the difference between a widget and a plugin?

List of Useful Plugins

(Round 2) Get Started with Oxygen

Using Oxygen

https://oxygenbuilder.com/documentation/getting-started/gett ing-started-tutorial/ 1. Create a template (header and footer) 2. Create a new page 3. Use oxygen elements and configure them 4. Play around with the styles 5. Try duplicating or rearranging elements

HTML and CSS in Oxygen

You can access the HTML editor at the right side of the oxygen

• editor. (Click on “structure”)

HTML reference Don’t need to understand or memorize all! Just learn and refer to it on a need to know basis.

• https://www.w3schools.com/html/

default.asp

• https://htmlreference.io/

Changing Styles (Without CSS)

You can edit the CSS of the selected element on the left side of the oxygen editor. CSS References Don’t need to understand or memorize all!

• https://www.w3schools.com/cs

sref/

• https://cssreference.io/

CSS Selectors: class and id

Supermarket analogy: If you have 2 types of products and multiple cans of soup... .classes (reusable, general) #id (more specific) What is it? (class) Which one is it? (id)

.mushroom #mushroom1 .mushroom #mushroom2 .mushroom #mushroom3 .corn #corn1 .corn #corn2

Use Oxygen to Change Styles

• Primary

○ Changes depending

• n what was

selected

• Advanced

○ Always the same

• ptions

Website Design

Fonts, Colours and Graphics

Fonts:

• Google fonts
• Fontpair.co

Colours:

• Coolors.co
• https://color.adobe.com/

create/color-wheel/

• http://paletton.com

Free stock Images:

• Pexels
• Unsplash

More resources in the q\works

Try seeing how your site looks

• n different sizes. Is there

anything that you need to reconfigure?

Mobile Responsiveness

Columns

• Why do we need columns?

○ Mobile responsiveness

• What size of columns are there?
• How do we create mobile responsive pages?

Creating a Minisite

• What is it useful for?

○ Landing page ○ Single product or service ○ Special Offer

• Single focus - don’t let user get distracted
• Anchor Tags

○ What do they do? ○ How to set it up

• Call to Action

○ Mailing list form / order form ○ Make a purchase

Exporting your website into HTML and CSS

In some cases, clients might want a static website. We can export the website that we have created using oxygen and Wordpress. You need these plug-ins:

• Autoptimize
• Fast Velocity Minify
• Simply Static

Required Settings

Export Settings

Challenge

Go onto pinterest and search for web design to get some

• inspiration. Try to see how you would replicate these

designs E.g. https://www.pinterest.com/pin/339881103114504958/ Managing Expectations: Most of the images are made by photoshop, and some are very difficult to implement. Just take the images as inspiration.

How to Use Client Portal

• What is it?
• What do we use it for?
• How to set up

○ Download and install the plugin ○ Activate the plugin with the license key

• How to use

○ What are templates for?

• Other features

○ Mark as complete ○ Adding “Up Next” for phases ○ Changing styles ○ Adding contact information

Client Portal

Objectives

• Create new project
• Add new Phase
• Add new Module

○ Change title, subtitle, icon ○ 3 different types: URL, File upload, and Content page ○ Edit content Page

• Save project as template
• Create new project from template

Wrapping Up

Feedback

• https://docs.google.com/forms/d/e/1FAIpQLSedT6wSv7pwScLXH

w0hTkEcEDYp75pic0NIVwWgtaWsJR6qLQ/viewform

Extra for future courses

Extra add ons

• UX: go into detail, marketing questions
• Mobile responsiveness and other design questions