Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Website Weekend WP Basic Training by Karen McCamy

Website Weekend WP Basic Training by Karen McCamy

Presentation slides by Karen McCamy FreelanceTechnologyReview.com

Suzette Franck

October 23, 2016
Tweet

More Decks by Suzette Franck

Other Decks in Technology

Transcript

  1. ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  2. ©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)

    View full-size slide

  3. Dashboard Tour…
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  4. Dashboard: remember…
     When you login, this is where you start!
     Where editing takes place
     Where you add to your site
     Where you customize elements
     Where you modify/view WP settings
    Your Theme affects Dashboard appearance!
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  5. Main
    MENU
    The Dashboard TOUR
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  6. Content
    Area
    The Dashboard TOUR
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  7. *Contextual HELP
    The Dashboard TOUR
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com
    *What shows here
    is specific to the
    page or section
    you are viewing

    View full-size slide

  8. Customizing the Content Area
    Use: the “Screen Options” area
    1. Click on the ▼
    2. The Options tab expands
    3. Check or uncheck the options
    4. Your changes appear immediately
    5. Click on the ▲ to close the tab
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  9. Settings
     Where you configure
    WordPress…
     General
     Reading
     Writing
     Discussion
     Media
     Permalinks
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  10. WordPress Elements
     PAGES
     Posts
     Plugins
     Widgets
     Templates
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  11.  Purpose: for “evergreen” or “static” content
     Examples
     HOME page
     ABOUT page
     CONTACT page
     PRIVACY POLICY/DISCLOSURE
     As PARENT for sub-pages
     Codex: http://codex.wordpress.org/Pages
     Difference from Posts:
     No Categories or Tags
     No Comments (typically)
    Pages
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  12. ©2014 Karen McCamy 
    FreelanceTechnologyReview.com
    Walk-thru: Creating a PAGE
    1. PAGES Menu
    2. Select “New”
    3. Enter a Title
    4. Enter some
    content
    5. Click “Publish”
    That’s it!

    View full-size slide

  13.  What is a Post?
    ○ Often most confusion…
    ○ Posts are what makes WordPress so powerful!
     Purpose: for current or news-y content
     Examples:
    ○ Articles (as on my sites)
    ○ “Blog” posts (examples)
    ○ Galleries
    ○ Portfolios
     Use Categories & Tags for organization (Session #3)
    Posts
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  14. Walk-thru: Creating a Post
    Start at the
    “Posts” menu
    1. Option 1: “All
    Posts” (shows
    existing posts)
    2. Option 2:
    “New” (where
    you add a new
    post)
    ©2014 Karen McCamy 

    View full-size slide

  15. Working with Images
     Legal Issues
     Image Sources
     WP Media Library
     Uploading Images
     Image Sizes
     WP Image Editor
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  16. 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

    View full-size slide

  17. Image Sources
     Public Domain
     GPU License(s):
    ○ http://commons.wikimedia.org/wiki/Common
    s:Reusing_content_outside_Wikimedia
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  18. Image Tips
     Image sizes: for the web, small rules!
    (DEMO on FTR)
     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

    View full-size slide

  19. ©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
     Pablo (buffer.com/pablo)
     Canva (www.canva.com)

    View full-size slide

  20. 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

    View full-size slide

  21. 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

    View full-size slide

  22. ©2014 Karen McCamy 
    FreelanceTechnologyReview.com
    UX (User Experience)
     It’s not about you…
     It’s all about your site visitor!
     UX Factors:
     MENUs / Navigation
     Taxonomy = an organizational structure
    ○ WordPress Categories
    ○ WordPress Tags
     Site Aesthetics (WP “Theme” [Session #3])

    View full-size slide

  23. ©2014 Karen McCamy 
    FreelanceTechnologyReview.com
    MENUs Review
     2-Step Process:
    1. Create Your Taxonomy (Posts Menu)
    ○ Categories
    ○ Tags
    2. Create Your Menu
    ○ Appearance  Menus
     Edit Menu
    - Create or Select Menu
    - Make sure to select the correct menu!
    - Menus are theme-specific
    *NOTE: WP menus are powerful… Use them!
    Your theme should not use their own menu system!

    View full-size slide

  24. 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

    View full-size slide

  25. Plugin Review
     What’s a Plugin?
     WP Codex (http://codex.wordpress.org/Plugins
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  26. Plugins (continued)
     Two Types
     Internal:
    ○ add functionality to your Dashboard or
    "backend“
    ○ They do not impact your site load times!
     External:
    ○ add functionality to your site or "frontend“
    ○ These DO impact your site load times
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  27. Plugins (continued)
     Examples
     Internal:
    ○ Post Notes
    ○ Lorem Ipsum
    ○ Duplicate Posts
    ○ Editorial Calendar
     External:
    ○ Subscribe Form (such as MailChimp)
    ○ Adsense
    ○ Related Posts
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  28. 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

    View full-size slide

  29. Plugins (continued)
     Two Types
     Internal:
    ○ add functionality to your Dashboard or
    "backend“
    ○ They do not impact your site load times!
     External:
    ○ add functionality to your site or "frontend“
    ○ These DO impact your site load times
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  30. Plugins (continued)
     Examples
     Internal:
    ○ Post Notes
    ○ Lorem Ipsum
    ○ Duplicate Posts
    ○ Editorial Calendar
     External:
    ○ Subscribe Form (such as MailChimp)
    ○ Adsense
    ○ Related Posts
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  31.  Where to find plugins
     Only the WordPress Repository:
    www.wordpress.org/plugins
     Researching plugins
     Take your time…sometimes lots of
    time!
     See previous slides:
    Basic WordPress Elements
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com
    Plugin Review (continued)

    View full-size slide

  32. Walk-thru: Plugins MENU
     Start at the “Plugins” MENU
     Hover → opens the Plugins sub-menu
    1. Installed Plugins – for reviewing, support
    2. Add new (just what it sounds like!)
    *NOTE: We’ll be working with plugins
    next week in Class #2
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  33.  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

    View full-size slide

  34.  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

    View full-size slide

  35. Why “Themes” ???
     Aesthetics…
     “Look & Feel”
     For Example…
    Karen McCamy -

    View full-size slide

  36. Theme Basics
     WordPress MUST have 1 theme to
    function…
     WP includes 2-3 FREE themes, produced
    by Automattic (the company behind
    WordPress)
    Karen McCamy -
    “2014” “2013” “2012”

    View full-size slide

  37. Using a Theme
     Custom Theme Menu
     In your Dashboard
     Every theme developer is different!
    Karen McCamy - Freelance
    Theme
    Menu

    View full-size slide

  38. Using a Theme
     Customizing “Best Practices”:
     Explore your Theme Options
     Look for Theme Doc’s & Read!
     Link to the Docs & Support!
     Decide on changes (make a list!)
     Prioritize those changes
     Try out 1 change at a time!
    Karen McCamy - Freelance

    View full-size slide

  39. Summary…
     Themes are for aesthetics
     All themes are different…
     In style and format
     In support and licensing
     There is no shortcut…
     invest your time to do the requisite research
     Find something you like
     Make sure you can work with it yourself
     I’m happy to help: email me…
    Karen McCamy - Freelance

    View full-size slide

  40. Managing Your WP Site
    WP Updates:
    WordPress: automatic, hopefully!
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  41. Managing Your WP Site
    Plugin Updates:
    *Always check compatibility!
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  42. Managing Your WP Site
    Theme Updates
    Remember my ‘theme’ caveat:
    every theme is different
    TIP:
    Always do a manual compatibility confirmation of
    plugins & your current theme whenever WP is updated!
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  43. Backups
    ! Don’t rely on your host for backups!
     Read the fine print…
     Most hosting companies don’t guarantee their
    own (free) backups!
     Take control…manage backups yourself
    1. Plugins
    2. Paid Hosting Add-ons
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  44. Backups: Options
    Plugins:
     Backup Buddy
     VaultPress (by Automattic)
     Updraft Plus
     Lots more…just Google it!
     Host Options Differ…
    Check with your hosting company
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  45. Backup Plugins:
    What to look for:
    1. Storage options
    ○ Dropbox or other cloud locations
    ○ Email option
    2. Scheduling
    ○ Daily
    ○ Weekly
    3. Simplicity of restoring!
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  46. Managing Users
     Users Menu
     Create new
     Manage
     Delete
     Codex:
    http://codex.wordpress.org/Users_Add_New_Screen
     Important TIPS here… READ!
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  47. Users: “LEVELS”
    Codex:
    http://codex.wordpress.org/Roles_and_Capa
    bilities
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  48. Users: TIPS
     Use LOWEST user level necessary
     Subscribers can register themselves…option in
    ‘Settings’
     Why ‘self-registration’?
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  49. Security Overview
     “Open Source” means…
     Security “holes”
     Publication
     Global Access
     “Admin” login
     Vulnerable…
     Change it!
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide

  50. Security
     Login Tips
     Don’t use “admin”
     Create hard passwords
    ○ Use a Password Generator
     Secure “User Account” Policy
     Plugins:
     “WordFence”
     “LimitLoginAttempts”
     Consider removing “WordPress” ID in footer
    ©2014 Karen McCamy 
    FreelanceTechnologyReview.com

    View full-size slide