A presentation on the value of WordPress, tips on the website design process, and how-tos on setting up a WP.COM site using as examples 3 common types of sites and related Theme options: Photo, Blog and Organization:

1. WordPress Websites for
Professionals
40 Plus DC Presentation
June 11, 2018
By
Gary L. Vaughan

2. Intro
• Quick Poll of audience: Who in IT? in Job Market? Have website, WP?
• Relevant for both groups: a tool for everyone, and a growing IT and career
field with opportunities at various levels
• My background: USAID – SP – WordPress + craft beer/wine blog!
• WP is dynamic…and fun!
• “cool” – each big new version named in honor of jazz artist
• Meet people from variety of backgrounds at events

3. Some happy WordCamp Attendees!

4. WordPress Roles…and Opportunities!
Managers
Developers Designers
Users
WP
ADMIN
Community
Member!

5. Presentation Agenda
• What is WordPress?
• Why need WordPress vs Social Media?
• WordPress.Com as entry-level (vs. WP.ORG)
• How to Create a WP.COM site (ADMIN role!)
• Importance of Design
• Next steps - 3 site models to get you started
Optional “coaching” on site set-up after class!
Wapu

6. WordPress (WP) Definition
• 30% of Web is on WP
• Includes big organizations such as Bloomberg, CNN, NASA, the
National Park Service, and the Houston Zoo
• Over 50,000+ Plugins, and well over 11,000 Themes
• Free or low-cost – user friendly – flexible and “modular” in nature
• Evolution from simple blog to broad CMS
• More robust than simple “site builders”, less complex than Drupal, SP

7. WP is Dynamic!
• Open Source, with Updates each quarter in Core WP
• Next big version release later this summer: WP 5.0
• Will include new “Gutenberg” changes – “a new publishing
experience”
• Opportunity for you to get involved at various levels – community!

8. Why Need a Website vs Social Media (SM)
• Website a place you control content, “brand” – unlike SM
• A “hub” to connect to other info, sites, social media
• But to be useful, a website has to have a purpose and plan!

9. Image Credit for Slide 10:
WordPress Can Help Focus Your Social Media Presence!

10. Why Should You Have a WP Website?
A variety of reasons for you to get involved in WP…as a…
• User - for a personal website, or to support one where you work
• Developer – coding, IT nuts and bolts, enable WP functionality
• Designer – graphic arts, how to render best look and feel
• Manager – see how a WP platform can help your organization
• WP Community member – social, educational…a lot of fun!

11. But first…Do Your Business Case…and Plan!
• Why (rationale, results)
• Who (audience for site)
• What (your content, plus other links)
• When (project plan for rollout)
• How (Admins, WP Learning Curve, SM Promotion, Site Metrics)
• Action: Do site Outline and/or a Sketch…before “tinkering” with WP!

12. Two WordPress Options
• WP.COM (our focus today!)
• Basic site – easy, free setup
• Mainly bloggers (can post by voice!) – but CMS, business capability
• Fully supported by Automatikk, and can grow (various paid plans)
• Short learning curve – a “one-stop-shop”!
• WP.ORG
• More flexible, customizable, robust site – configuration important!
• Wide variety of users, from bloggers to large organizations
• More expensive, requires a hosting company on Web
• Longer learning curve – for IT Developers, Designers, Site Admins

13. Basic WP Concepts – a Glossary
• Site Dashboard
• Content Inputs
• By Admin: Posts, Pages, Media
• By Users: comments, surveys
• Data Location/Navigation
• Blog categories, tags
• Menu, Sidebar(s)
• WP “front end” w/ links to other
sites
• WP.COM (easy) vs WP.ORG
(custom)
• Themes (framework)
• Plugins (add big functionality)
• Gravity Forms (surveys etc)
• TablePress (tables)
• Widgets (add small features)
• Search, Events, Text Box, etc.
CONTENT FUNCTIONALITY
*Site Usage Analytics (Jetpack, Google Analytics)

14. Get Started with a Simple WP.COM site
• WP.COM is a cheap, entry-level step into Wordpress
• Let’s look at our Class Site as an example…………….

15. Site Example: Our 40Plus Class Site
• Purpose: for training reference and student feedback
• Functionality:
• Classic top tabs for key content
• Featured Page and Posts on Home Page
• Tags Cloud for easy reference
• Sidebar for WP ref links
• Threaded Comments, Polls for feedback
• 6 Built-in Color Schemes, Stock images
• Cost: Free!

16. Design WP Site for this Class:
https://wpwebforpro.wordpress.com/, with “Textbook” Theme

17. First, Choose a Suitable WP Theme
• Check out WP.COM portal info re Themes
• Do filtered Search of Themes available: by purpose, function
• Scroll through Theme displays of functionality, access a live demo
• Check out tips on WP.COM by Automatikk, users on “Reader” blog
• Activate, test on a new WP.COM site
• See if layout right for your content, apply customizations.
N.B.: Check speed, security, support of Theme (caveat emptor!)

18. Search for Theme on WP.COM
(300+! Options – Browse Theme Dashboard/Search)

19. Check out WP.COM Info on “Textbook” Theme

20. DEMO (Tutorial): Starting a WP.COM Site –
Twenty Sixteen Default Theme
• To show some typical actions that you as Admin would take
in starting and managing a new site from your
“Dashboard”…..
• Goal: Do a Travel Blog…..

21. Basic Steps to Produce a Simple
WP.COM Blog Site
CREATE INFORM FORMAT RE-VIEW!

22. 1. Site Creation (DEMO)
• Create site, select domain (DONE)* - Site Link
https://40PlusDemo.wordpress.com
• Adjust General Settings
• Select and activate Theme
• Upload Header image…tagline?
*FYI, initial Site creation/domain selection steps:
Step 1 [Name-About-Goals-Level]; Step 2 [Domain-Free!]; Step 3 [Plan – Free!]

23. 2. Share Content (DEMO)
• Draft 2 Pages (static)
• “About Me”
• “Packing Tips”
• Draft/Preview/Publish…Enable Comments
• Draft Posts (dynamic)
• “Welcome”
• “Field Trip Report”
• Draft/Preview/Publish…Enable Category, Comments

24. 3. Navigation (DEMO)
• Set up Menu (drag and drop)
• Set About “Static Front Page”
• Sample “widgets”: Text box, Search, Tag cloud

25. 4. View Site (DEMO)
• Check out “look and feel” of Home Page, etc.
• Do edits on the fly, test Reply to Post [See in Comments on
Dashboard]
• Toggle Admin Dashboard vs Site View
• See effect if Themes changed: Twenty Sixteen vs. Twenty Seventeen
(both default WP.ORG themes)

26. Detailed Technical Steps to Produce a More
Complex WP.COM Site
SKETCH
SKETCH
SET-UP
THEME
LAYOUT
CONTENT
TESTING
LAUNCH
Widgets + Plugins
for “functionality”

27. Detailed Design + Marketing Steps to
Produce a More Complex WP.COM Site
SKETCH
CONCEPT
BRAND
IMAGES
DESIGN
CONTENT
UX TESTS
MARKET
Customizing Font,
Color, Images, Look
and Feel,
“Moodboard”

28. Website Design Best Practices
• Design Impact: Clean and simple...good use of white space, limit 3
Fonts in 3 sizes, few colors...key message (call to action?)
• Navigation: Easy to find info (Visual Hierarchy), leverage
conventions, consistency, accessiblity, menus max 3 levels deep.
Contact info clear
• Content: Well written, engaging, varied content for audience
• Engagement: Build for usage/traffic on Web, SEO, check Google Tools
• Devices: X browser/device compatibility

29. Site Maintenance
• No matter how great the design, Maintenance is a chore!
• Keep content fresh
• Maintain site layout, functionality
• Respond to user feedback
• Keep in touch with advances, issues within the WP community!

30. 3 Possible Student Sites…
[your optional “homework”…after this presentation!]
Try one of 3 types of WP.COM sites on your own…
1. Creative Photos
2. Personal Blog
3. Organizational Site
A good starting Theme “framework” is key!

31. 1. Photo Site
• Purpose: creative display of photo collection as profession/hobby
• Key Content:
• Logo
• About…Contact
• Type: Wedding, Portrait, Artistic, Hobby…
• Media: Gallery of photos, podcast, video…
• Social Media Link: Pinterest

32. Suggested Themes for Photo Sites
•  ideas of other photo sites on the Web: Vandelay Design Portfolio
or After the Coaldust
• Free Photo Themes
• AltoFocus – Clean Grid
• Rebalance – 6 Color schemes
• Illustratr – Minimalist layout
• Premium site option: Photo blog {recommended by WP.COM] 3
layouts, 4 style packs, 26 photo filters…$36

33. Sample Theme Functionality: Grid vs Masonry
Layout of Photos – for “ Photo Blog “ Theme
VS.

34. 2. Personal Blog
• Purpose: promotion of individual professional or hobbyist
• Key Content
• Bio, Resume, Client Testimonials
• Blog about tips, “thought leadership”
• Areas of expertise/service
• Work Sample: Papers, Slides, Project Summaries…eBook
• Events (either presenting or attending)
• Social Media Links – Linkedin, Eventbrite, etc.

35. Suggested Themes for Personal Blogs
• Get ideas from other professionals’ sites on the Web:
https://tsavoneal.com/best-consultant-websites/
• Free Personal Themes
• Editor, left menu
• Cerauno, clean magazine design
• Hemingway Rewritten, my blog’s theme, well supported
• A Premium theme: Maxwell, trad’l layout, 6 color palettes, $69

36. Sample Theme Functionality : Color Palettes, for
“Maxwell“ and Pullout Quotes for “Editor” Blog Themes

37. 3. Organization Site
• Purpose: an info hub for non-profit or business
• Key Content for Non-Profit [Detailed Site Map/Hierarchy]
• Call to Action/Donate
• Programs
• Testimonials
• About: Staff, Board, Annual Report, Careers
• Blog: Newsletter
• Social Media Links (broad…yet targeted!): FB, Twitter, LinkedIn, etc.

38. Suggested Themes for Organization Sites
• Model sites on Web
• Free Themes:
• Canape (for restaurant) - food menu, or Pique (for restaurant or other) - one
page, easy, Font Awesome
• Twenty Sixteen - default WP.COM theme, can instantly change background
color
• Textbook (see this class site)
• One Premium option:…Organization, specific for non-profits, call to
action, Page templates, $69

39. Sample Theme Functionality:
3 Columns for “Organization”, Menu for “Canape“

40. If you decide to “graduate” and move up in
WordPress complexity…
• WP.ORG site more complex, configuration, and you maintain the software
• Need a Host – fees vary
• Selection criteria: speed, uptime, cost, support, “shared” vs “managed”
• Many hosts, but a few to consider:
• BlueHost
• DreamHost
• SiteGround
• HostGator (my recent choice)
• Note: migration from WP.COM to WP.ORG relatively easy with right tools

41. Optional “Homework”!
• Share feedback on my presentation in a “Poll” at the Class site.
• Create a free WP.COM site (on own, or with my/class help!)
• Attend a WordCamp (super low cost…just your time!)
• WC Baltimore – Oct 6-7, 2018
• WC DC – July or August - TBD
• WC US in Nashville (National Conference), Dec 7-9, 2018
• Participate in informal monthly Meetups: DC or VA [links]
• Get ready for big WP 5.0 Upgrade and new “Gutenberg” interface

42. Key WordPress References
• WP Platforms: WP.COM, WP.ORG
• WP.TV (all WordCamp presentations on video!)
• WP Beginner site (how-tos)
• WordCamp Central Calendar (world-wide)
• Link to this Presentation at FortyPlus DC at the site for this Class, at
https://wpwebforpro.wordpress.com/

43. Other References: WP Hosting Links
• https://en.support.wordpress.com/com-vs-org/
Comparison of WP.COM vs WP.ORG
• https://howtomakemyblog.com/wordpress-com-org/
Comparison of 2 platforms, plus WP.COM to WP.ORG migration
tool/process

44. Other References: UX + Photography Links
• https://blog.hubspot.com/marketing/user-testing-tools
• https://clearleft.com/posts/visual-design-explorations
• https://wordpress.tv/2015/05/01/melissa-eggleston-top-strategies-
for-better-photography-on-your-website/

45. Other References: Personal Blog Links
Examples of personal blog content/strategy (not
WordPress sites)
• https://www.themuse.com/author/alexandra-nuth
• https://www.ximenalarkin.com/
• http://www.pascalvangemert.nl/#/profile

46. Other References: Design Links
• https://optimizerwp.com/wordpress-websites-examples/
• http://www.wpbeginner.com/showcase/excellent-wordpress-website-examples/
• https://blog.hubspot.com/blog/tabid/6307/bid/30557/6-guidelines-for-
exceptional-website-design-and-usability.aspx
• https://webflow.com/blog/the-web-design-process-in-7-simple-steps
• Image Credit for Slide 9:

47. My Contact Info: Gary Vaughan
• Reply to Contact Form via Class Site:
https://wpwebforpro.wordpress.com/help-contact-form/
• My personal contact info and bio
• Email: glvconsulting@hotmail.com
• Twitter: #glvaughan
• Linkedin: Gary Vaughan PMP
• Blog: dcwinebrewadvisor/about