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 on 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
Posts and Pages 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 order. 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?
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 ●
List of Useful Plugins 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?
(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/ ●
.mushroom .mushroom .mushroom CSS Selectors: class and id #mushroom1 #mushroom3 #mushroom2 Supermarket analogy: If you have 2 types of products and multiple cans of soup... .classes (reusable, general) #id (more specific) .corn .corn #corn1 What is it? (class) #corn2 Which one is it? (id)
Use Oxygen to Change Styles Primary ● Changes depending ○ on what was selected Advanced ● Always the same ○ options
Website Design
Fonts, Colours and Graphics Fonts: Free stock Images: Google fonts Pexels ● ● Fontpair.co Unsplash ● ● Colours: More resources in the q\works Coolors.co ● https://color.adobe.com/ ● create/color-wheel/ http://paletton.com ●
Mobile Responsiveness Try seeing how your site looks on different sizes. Is there anything that you need to reconfigure?
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
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 ○
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 ●
Recommend
More recommend
