wordpress site designlearnwp.us/wp-content/uploads/2018/02/wp-class3.pdf · themes, plugins &...
TRANSCRIPT
![Page 1: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/1.jpg)
WordPress Site DesignACE #CT01756 Intro to WordPress
By Adrian Mikeliunas
http://learnwp.us/week3/
SESSION# 3 of 6
![Page 2: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/2.jpg)
Themes, Plugins & Widgets
How to find and how to install them
Themes provide all of the front end styling of your WordPress site
Widgets add additional content and features to your WordPress site’s sidebars, configured via Theme
Plugins are bits of software that can be uploaded to extend to expand the functionality of your WordPress site
Week 3 Agenda
2/2018WordPress #3 2
![Page 3: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/3.jpg)
Themes Widgets Plugins
eCommerceMembership
Site
2/2018
WordPress Extensions
Examples:
WordPress #3 3
![Page 4: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/4.jpg)
WordPress Themes
http://learnwp.us http://learnwp.us/wp-admin
2/2018WordPress #3 4
![Page 5: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/5.jpg)
People say: “Content is King” They will come back to your blog…
Or they will run away if they
can’t find what they want
It’s not aesthetically pleasing
If looks are NOT important… 25 Remarkable Examples of WordPress Websites
https://www.elegantthemes.com/blog/resources/25-cool-websites-made-with-wordpresshttp://www.tripwiremagazine.com/examples-of-wordpress-websites/
Content vs. Looks
2/2018WordPress #3 5
![Page 6: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/6.jpg)
Make your site Unique!
Integrate with current company Logo or color theme
Integrate with existing web site
Seasonal changes [community, retailer]
Special occasions [protests]
Why Change Looks?
2/2018WordPress #3 6
![Page 7: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/7.jpg)
Configurable via Dashboard, Appearance:
Theme: change to another theme
Customize (Color, Logo & Banner)
Widgets
Menus
Header/Footer area
Background
Editor [WARNING!]
Theme Options
2/2018WordPress #3 7
![Page 8: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/8.jpg)
Paid Themes ($10-$100) Features, Quality, Support, Uniqueness Examples:
http://themeforest.net/category/wordpress http://www.elegantthemes.com http://www.woothemes.com
Free Themes Less Features NOT Unique! “50+ Beautiful & Free WordPress Themes”
https://colorlib.com/wp/free-wordpress-themes
Themes
Atahualpa 3.7.23 , over 1 million downloads! http://wordpress.bytesforall.com
2/2018WordPress #3 8
![Page 9: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/9.jpg)
WordPress Showcasehttps://wordpress.org/showcase
WordPress sitehttps://wordpress.org/themes
Start Here:
THE DO’S AND DON’TS OF CHOOSING A WORDPRESS THEME https://wpengine.com/blog/dos-donts-wordpress-theme/
Selecting the Perfect WordPress Themehttp://www.wpbeginner.com/wp-themes/selecting-the-perfect-theme-for-wordpress/
Find a Theme
2/2018WordPress #3 9
![Page 10: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/10.jpg)
Find out the technology behind a website:
http://builtwith.com
Or, for a WordPress site:
www.wpthemedetector.com
2/2018
Research
http://www.brainyquote.com/quotes/quotes/c/charlescal203963.html
WordPress #3 10
![Page 11: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/11.jpg)
List of features Columns, colors, sliders or hero image, features
Fast and Lightweight
Responsive looks good in all devices/browsers: mobile, desktop, IE, FF,
Support Free or paid? Frequent updates?
Colors & Fonts, custom CSS
Test before deploying!
2/2018WordPress #3 11
Selecting a WordPress Theme
![Page 12: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/12.jpg)
Lightweight and adaptable
Custom menu, header image, and background
Showcase page template, widget support…
RESPONSIVE!
Twenty Eleven (2011) Theme
http://wordpress.org/extend/themes/twentyeleven
2/2018WordPress #3 12
Last updated: November 15, 2017Active Installs: 300,000+
![Page 13: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/13.jpg)
Header video and immersive featured images
focus on business sites, it features multiple sections on the front page as well as widgets, navigation and social menus, a logo, and more
2017 Theme
wordpress.org/themes/twentyseventeen
2/2018WordPress #3 13
Last updated: November 15, 2017Active Installs: 1M+
![Page 14: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/14.jpg)
From Dashboard, Appearance, Themes, Install Themes
2 Steps for paid themes!
Download from vendor site
Install from local hard drive
1 step from Dashboard for free themes
Install
Activate Theme!
TIP: Always preview your theme before you install it!
Installing a Theme
2/2018WordPress #3 14
![Page 15: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/15.jpg)
At a minimum:
index.php
style.css
A javascript.js file
Additional PHP files
Theme Components
2/2018
http://codex.wordpress.org/Site_Design_and_Layout
WordPress #3 15
![Page 16: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/16.jpg)
Themes Directory
2/2018WordPress #3 16
![Page 17: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/17.jpg)
1) Hire a programmer or designer $$$https://www.upwork.com
http://www.peopleperhour.com
http://creativefolks.net http://washingtondc.craigslist.org/cpg/CraigsList
https://www.fiverr.com/categories/programming-tech/wordpress-services
2) Build custom WordPress Themes without coding!http://themeframe.com [old!]
https://www.optimizepress.com/
3) Take another course! $99https://www.udemy.com/building-custom-wordpress-sites-from-scratch/
Build a Theme
2/2018WordPress #3 17
![Page 18: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/18.jpg)
Price $10 to $100 per year
Online or telephone Support
Money-back guarantee
May offer some plugin bonuses
Examples: https://themeforest.net/category/wordpress?sort=sales
http://www.elegantthemes.com
http://www.woothemes.com
2/2018WordPress #3 18
Commercial Themes
![Page 19: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/19.jpg)
Avada, 400k+ $60
X Theme, 175k $45
Enfold, 147k $59
The 7, 100k $39
Be Theme, 99k $59
Frameworks http://diythemes.com/ $87 - $197
https://www.studiopress.com/ $59 - $499
https://www.elegantthemes.com/gallery/divi/ $89 - $249
2/2018WordPress #3 19
Best Seller$
![Page 20: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/20.jpg)
Both are based on PHP+JS+CSS!
Widgets focus on the UX (user experience)
They get activated by dragging them in Theme, Appearance,
Plugins offers new functionality
May or may not be viewable by some users
User verification
Multimedia: Slide shows, Video or Music players
Widgets & Plugins
2/2018WordPress #3 20
![Page 21: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/21.jpg)
Widgets are drag-and-drop design elements that you can easily add to your WordPress site
On Main Page, Blog Posts, sidebars, or footer
WordPress has a few built-in widgets
Calendar, Tag Cloud, Archives, Pages, Search, …
Thousands more available at WordPress.org!
http://codex.wordpress.org/WordPress_Widgets
Widgets
2/2018WordPress #3 21
![Page 22: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/22.jpg)
Widgets are installed & activated same as plugins
Once installed, go to: Appearance, Widgets to select them via drag and drop!
Or on some themes:
Appearance
Customize
Widgets
+ Add a Widget
2/2018
Widget – Installation
WordPress #3 22
![Page 23: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/23.jpg)
Some themes offer a Widget options feature without the tricky drag and drop! Example: 2015
2/2018
Widget –Theme Customizer
WordPress #3 23
![Page 24: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/24.jpg)
Examples:
Search
Archives
Categories
2/2018
Widgets in Action
WordPress #3 24
![Page 25: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/25.jpg)
My criteria
Check Rating, at least 3 out of 5 stars, and from more than 5 reviewers!
Tested and popular: At least version 1.0!
many plugins are still version 0.x or BETA
Updated: preferably less than 1 year old
older plugins may NOT be compatible with your site
2/2018
Plugin Selection Criteria
WordPress #3 25
![Page 26: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/26.jpg)
Plugins can extend WordPress to do almost anything you can imagine!
In this directory you can find, download, rate, and comment on all the best plugins the WordPress community has to offer…
https://wordpress.org/plugins/
To manage plugins, you need to go to the PLUGINS section of your dashboard, where you’ll find a list of plugins already installed…
Plugins
2/2018WordPress #3 26
![Page 27: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/27.jpg)
Create a backup of your site
Better Editor toolbar for your posts!
Receive data or news feeds from other sites:
stocks, weather, news, etc.
Receive Donations via PayPal
Take look at the most popular plugins here: https://wordpress.org/plugins/browse/popular
2/2018
Plugin Ideas
WordPress #3 27
![Page 28: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/28.jpg)
Most hosting providers include
Akismet - the best way in the world to protect your blogfrom comment and trackback spam
Hello Dolly – first oficial plugin
GoDaddy and HostGator include a few extra plugins
Plugins need to be ACTIVATED before they run!
2/2018
Default Plugins
WordPress #3 28
![Page 29: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/29.jpg)
2/2018
Plugins- Installation
TIP: Check the RATING and the version [at least 1.0 recommended!]
WordPress #3 29
![Page 30: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/30.jpg)
2/2018
Plugins- Update & Delete
TIP: Check on a weekly basis for plugin updates… WordPress #3 30
![Page 31: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/31.jpg)
Find plugins for your site from our curated plugin directory http://wpplugindirectory.org
Best WordPress Plugins http://www.wpbeginner.com/category/plugins/
Plugins https://codecanyon.net/category/wordpress
Widgets https://codecanyon.net/category/wordpress/widgets
2/2018WordPress #3 31
Commercial Plugins
![Page 32: WordPress Site Designlearnwp.us/wp-content/uploads/2018/02/WP-Class3.pdf · Themes, Plugins & Widgets How to find and how to install them Themes provide all of the front end styling](https://reader031.vdocuments.us/reader031/viewer/2022041023/5ed5528812a6d6201a6580ab/html5/thumbnails/32.jpg)
Themes, Plugins & Widgets
How to find and how to install them
Themes provide all of the front end styling of your WordPress site
Widgets add additional content and features to your WordPress site’s sidebars, configured via Theme
Plugins are bits of software that can be uploaded to extend to expand the functionality of your WordPress site
Week 3 Summary
2/2018WordPress #3 32