WP101 - Session #1: Introduction to WordPress

For beginners! Session #1 of 6 Sessions, covering the introductory foundations of WordPress: Overview, The Dashboard, how to get around in WP, and WP "Building Blocks."

Transcript

1. Our Sponsors
2. Announcements O LA WordPress – dates vary O Pasadena WordPress – 3rd Thursday O Topanga WordPress – 3rd Wednesday O Advanced WordPress LA – 3rd Saturday And many more in LA County. Just search for “WordPress” at www.meetup.com
3. Keep in Touch! O WP101 Google Group: O WordPress 101: An Introduction to Using WordPress O LinkedIn: O www.linkedin.com/in/karenmccamy O Facebook: O https://www.facebook.com/FTReview O Twitter: O @ftreview O WP101 Meetup: O http://www.meetup.com/Los-Angeles-WordPress-101/
4. Hands-On WP Workshop WordPress: WP 101 Build your own WordPress Website! O 8-hour hands-on workshop O 4 Saturdays, 2-hour Hands-On sessions O Next Class: July, 2016 O Join Girl Develop It, LA to be notified
5. ©2014 Karen McCamy  FreelanceTechnologyReview.com
6. Agenda  WordPress Overview  Web Concepts’ BASICS  ‘Dashboard’ Tour  What is “Content?”  Basic WP Building Blocks  Questions??? ©2014 Karen McCamy  FreelanceTechnologyReview.com
7. ©2014 Karen McCamy  FreelanceTechnologyReview.com About WordPress Why WordPress? Content Management System (CMS): ◦ “…a web application [software] designed to make it easy for non-technical users to add, edit and manage a website.” -- https://plone.org ◦ Natively Handles (“behind the scenes”):  User accounts & permissions  Security  Maintenance (updates & backup)  Navigation elements (MENUs)
8. DIY…not Do-it-for-me!  Common misconception:  Meetups are great for learning!  My purpose is to help you learn… ◦ To DIY it ◦ To build your resources ◦ To know where to get further help  We can’t “do-it-for-you” ◦ There just isn’t time in a 2-hour meeting ◦ It isn’t fair to your fellow members ©2014 Karen McCamy  FreelanceTechnologyReview.com
9. ©2014 Karen McCamy  FreelanceTechnologyReview.com Who’s Using WordPress?
10. 2 Versions of “WordPress”???  Same WordPress!  2 ways to access / use it!  WordPress.com:  No custom “domain” (‘dot com’ name)  They provide FREE hosting  Very little customizing ◦ A few themes (their choice) ◦ A few plugins (their choice)  NOT for commerical use! ©2014 Karen McCamy  FreelanceTechnologyReview.com
11. WordPress.org  “Self-hosted”  You have your own domain  Your site is hosted (hosting company)  Customizable, with no limits  Business/commercial-friendly What this class covers! ©2014 Karen McCamy  FreelanceTechnologyReview.com
12. Hosting Alternative “Local” development:  Build on your own computer  Use “Desktop Server”  Emulates WP-required “server software” ◦ MySQL ◦ PHP 5.xx  www.ServerPress.com ◦ FREE & paid versions  Mac & Windows versions  Not recommended for beginners ©2014 Karen McCamy  FreelanceTechnologyReview.com
13. Web Concepts’ BASICS  “Front-end”  What your website visitor sees  “Back-end”  In WordPress, where you… ◦ Build/design ◦ Edit ◦ Remove ◦ Upload ◦ Publish ©2014 Karen McCamy  FreelanceTechnologyReview.com
14. WordPress BASICS  The Dashboard: WordPress “back-end”  All menu driven  We’ll tour momentarily  Accessing the Dashboard:  Login name  Password ◦ Likely cryptic ◦ Best to copy-and-paste ©2014 Karen McCamy  FreelanceTechnologyReview.com
15. Dashboard Tour… ©2014 Karen McCamy  FreelanceTechnologyReview.com
16. Admin Login • 1st Point of Entry • Access to “backend” • Edits • New Content • Images • Customizing • Updates • …everything! ©2014 Karen McCamy  FreelanceTechnologyReview.com
17. Admin Access  User Name  Provided by host  Can NOT be changed!  Password  Provided by host  Usually cryptic  Can be changed  Change it, make it hard to guess!  Save it someplace “SAFE”! ©2014 Karen McCamy  FreelanceTechnologyReview.com
18. To Log In 1. Enter username 2. Enter password 3. Check box if on your own computer; WP will ‘remember’ your username for the next time 4. Click “Log In” button ©2014 Karen McCamy  FreelanceTechnologyReview.com
19. Dashboard MENU: Your Control Center  Adding new content  Editing  Uploading Media  Adding Users  Performing Updates  Customizing ◦ Themes ◦ Plugins ◦ Settings  Accessing Theme Options ©2014 Karen McCamy  FreelanceTechnologyReview.com You’ll use this constantly!
20. Dashboard Tour: Default 4 Main areas:  Dashboard MENU (left “sidebar”)  Main Content Area (customizable)  Admin Tool Bar (top)  HELP (called “Screen Options”) ©2014 Karen McCamy  FreelanceTechnologyReview.com
21. Main MENU The Dashboard TOUR ©2014 Karen McCamy  FreelanceTechnologyReview.com
22. Content Area The Dashboard TOUR ©2014 Karen McCamy  FreelanceTechnologyReview.com
23. Toolbar The Dashboard TOUR ©2014 Karen McCamy  FreelanceTechnologyReview.com
24. *Contextual HELP The Dashboard TOUR ©2014 Karen McCamy  FreelanceTechnologyReview.com *What shows here is specific to the page or section you are viewing
25. Dashboard MENU: Your Most Used Menus  Posts  Categories  Tags  Pages  Appearance  Menus  Widgets  Themes  Settings (WordPress)  Theme Menu (location varies) ©2014 Karen McCamy  FreelanceTechnologyReview.com
26. Quick “Content” Overview  Q: What is “Content?”  A: Everything on your site!  PAGES  Posts (difference covered soon!)  Galleries  Menus  Images & Other Media  Interactive Elements ©2014 Karen McCamy  FreelanceTechnologyReview.com
27. ©2014 Karen McCamy 
28. ©2014 Karen McCamy  FreelanceTechnologyReview.com
29. WP Basic “Building Blocks”  PAGES  Posts  Images (& Media Library)  Templates  Plugins  Widgets ©2014 Karen McCamy  FreelanceTechnologyReview.com
30.  Purpose: for “evergreen” or “static” content  Examples  HOME page  ABOUT page  CONTACT page  PRIVACY POLICY/DISCLOSURE  As PARENT for sub-pages, for user navigation  Codex: http://codex.wordpress.org/Pages  Difference from Posts:  No Categories or Tags  No Comments (typically) Pages ©2014 Karen McCamy  FreelanceTechnologyReview.com
31.  What is a Post? ◦ Often most confusion… ◦ Posts are what makes WordPress so powerful!  If you’re coming from “static” html web sites ◦ Remember that WordPress is a CMS ◦ WordPress dynamically serves all content  Purpose: for current or news-y content  Author & Date  Examples: ◦ Articles (as on my sites) ◦ “Blog” posts (examples) ◦ Galleries ◦ Portfolios  Use Categories & Tags for organization Posts ©2014 Karen McCamy  FreelanceTechnologyReview.com
32. Working with Images  Legal Issues  Image Sources  WP Media Library  Uploading Images  Image Sizes  WP Image Editor ©2014 Karen McCamy  FreelanceTechnologyReview.com
33. Images: Legal Issues  Copyright  Every image belongs to somebody!  Know legal use!  Do your research  Public Domain  WikiMedia (http://commons.wikimedia.org/) ©2014 Karen McCamy  FreelanceTechnologyReview.com
34. Image Sources  Public Domain  GPU License(s): ◦ http://commons.wikimedia.org/wiki/ Commons:Reusing_content_outside_Wikimedia ©2014 Karen McCamy  FreelanceTechnologyReview.com
35. Image Tips  Image sizes: for the web, small rules!  DEMO: my web site  Create a post format and stick with it!  DEMO: “Featured image”  Don’t duplicate!  Social media posts with images get way more clicks! ©2014 Karen McCamy  FreelanceTechnologyReview.com
36. ©2014 Karen McCamy  FreelanceTechnologyReview.com Image Sources  Stock Photos  StockFresh (http://stockfresh.com/)  iStockPhoto (http://www.istockphoto.com/)  Search “stock photos”  Creating Your Own Graphics  Canva (www.canva.com)  Pablo (https://buffer.com/pablo)
37. Media Library  Preparing Images  Renaming (think SEO)  Choosing the size ◦ “small” or “xtra-small”??? ◦ DEMO: stock photos  Uploading  DEMO: Walk-thru  Adding the “Alt” tag ©2014 Karen McCamy  FreelanceTechnologyReview.com
38. Media Library  Good Housekeeping:  Keep it Lean! ◦ Deleting Images ◦ Archive all your images in a separate folder on your computer  Searching (DEMO) ©2014 Karen McCamy  FreelanceTechnologyReview.com
39.  Purpose: for special-purpose content  If you’re coming from “static” html web sites, NOTE:  WordPress Templates are NOT “themes”  “HTML templates” duplicate the layout (structure & CSS) for “static” sites  “HTML templates” must be hand-coded to customize  Codex: http://codex.wordpress.org/Templates  Examples:  Articles (as on my sites)  “Blog” posts (examples)  Galleries  Portfolios  Sales (“landing”) Pages  “Squeeze” Pages  Custom “404” Pages Templates ©2014 Karen McCamy  FreelanceTechnologyReview.com
40. Plugins  What is a Plugin?  Think “applets”  WP Codex: http://codex.wordpress.org/Plugins  Why…  …use them?  …aren’t they included in WordPress? ©2014 Karen McCamy  FreelanceTechnologyReview.com
41. Plugins (continued)  Two Types  Internal: ◦ Add functionality to your Dashboard or "back- end” ◦ They do not impact your site load times!  External: ◦ Add functionality to your site or "front-end“ ◦ These DO impact your site load times ©2014 Karen McCamy  FreelanceTechnologyReview.com
42. Plugins (continued)  Examples  Internal: ◦ Post Notes ◦ Lorem Ipsum ◦ Clone Posts ◦ Editorial Calendar ◦ Backup  External: ◦ Subscribe Form (such as MailChimp) ◦ Adsense ◦ Related Posts ©2014 Karen McCamy  FreelanceTechnologyReview.com
43. Plugins (continued) I Use & Recommend  Internal:  Akismet*  WP SEO (Yoast)  Backup  XML Sitemap  Cache *shipped with WordPress!  External:  Related Posts (YARPP)  Contact Form 7  Adsense  Subscribe Form ©2014 Karen McCamy  FreelanceTechnologyReview.com
44.  Purpose:  for special-purpose content & “features” (not “functionality”)  Adds content to specific areas ◦ Header ◦ Footer ◦ Sidebar(s)  Widgets are NOT the same as PLUGINS!  Theme-specific widget areas & widgets Widgets ©2014 Karen McCamy  FreelanceTechnologyReview.com
45.  Codex: http://codex.wordpress.org/WordPress_Widgets  Examples:  Twitter Feed (real-time)  Recent Comments  “Editorial” Theme  “Headlines” Theme  “Karma” Theme  Theme Widgets: MySiteMyWay Themes Widgets (continued) ©2014 Karen McCamy  FreelanceTechnologyReview.com
46. Coming Attractions… Session #2: to be announced  Website Models  Designing UX & Building MENUs  The “Content / Traffic” Connection  Why You Need to Specialize  Key Elements to Content Development ©2014 Karen McCamy  FreelanceTechnologyReview.com
47. ©2014 Karen McCamy  FreelanceTechnologyReview.com