WI.org Site Training

1. WI.org Site Training Laura Peterson lpeterson27@yahoo.com 3/31/2014

2. Overview • Overview of WordPress (WP) • Hands-on tour WI.org WP site • Simple HTML tutorial

3. WordPress provides… • A well tested content management system • A comprehensive system for managing pages, images, links • The ability to add special features via WP Plugins and Widgets • Login/user security • A comprehensive set of blogging features (that you won’t use and will sometimes get in the way!) • Lots of online tutorials and a great community of support • See http://www.wordpress.org/

4. WordPress is awesome! But WP… • Is not WYSIWIG - WordPress dramatically eases website management and authoring, but does not give you complete web WYSIWIG editing • Is not optimized for websites - It was designed for Blogging • Doesn’t have block layout. We use the plugin Page Maker for most pages, but also some custom layouts (Our Results, What to Expect from the Program) and it’s easy to mess them up if you aren’t careful • Doesn’t support table editing. You can work around this by using other tools and cut&paste • Is fragile wrt to updates. If you update WP, a plugin, or the Vantage theme can break the site • There is limited revision control and “Undo” is limited Now that I’ve scared you… Let’s dive in!

5. Demo Wordpress There are thousands of Wordpress tutorials online. Here are a few starters: http://codex.wordpress.org/First_Steps_With_WordPress http://www.youtube.com/watch?v=znu2sZpgATE

6. WordPress Authoring Rules of Thumb Always, always, always… • Make a backup of a page before editing the more complex layouts • Avoid editing the live site - create test pages first, then publish them after they’ve been reviewed • Preview frequently to know if you are on track • Know the tricks through practice: • Enter vs. Shift Enter, Visual vs. HTML view, Copy& Paste of Tables from other apps, etc. When creating a new page, get in the habit first setting the… • Title to something unique • Permalink to something simple • Page Attributes for Parent & Template (“Full Width Page, No Title”), and • Adding the breadcrumb (<h2 class=“wi-breadcrumb”>…</h2>)

7. Let’s get hand-on • Login • Dashboard view vs. Browse • Edit mode and Page Maker layout • How do I change…? menus, header, footer, social media • How do I add…? new pages, calendar events, photos • User management • Plugins & widgets • Form Maker Let’s review some simple HTML before we make changes to the site!

8. HTML/WordPress 101 URL Why do we care? A website can use just the “Path” portion in references to images and hyperlinks Protocol Domain Name Path http://www.womensinitiative.org/about

9. HTML 102

10. CSS – Cascading Style Sheets • CSS is the mechanism for making HTML look all fancy • The only CSS you really need to know about for WI.org is the notion of “class” • A CSS class is a group of element styling details defined by a single identifier • You apply that group of stylings to an HTML element by adding the class identifier to the elements class attribute • <h2 class=“wi-breadcrumb”> • <div class=“wi-rdash”> • <table class=“wi-gradient-style”> • The WI.org Site Authoring Guide has a section on predefined CSS classes that are enabled on the WSI.org website

11. Now for real! • Exercise 1: • Fix typos on a page • Update the “what’s new” section of the home page • Exercise 2: • create new pages for job descriptions • fix the Employment page links • Exercise 3: • update the social media link for LinkedIn • Exercise 4: • Create a 2 column page • Add the breadcrumb • Add the content • Add photos

12. That’s it My contact info is on the Developer Notes Page