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_Wo rdPress http://codex.wordpress.org/First_Steps_With_Wo rdPress 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 ( … )

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 WhatConceptualExample Tag that wraps content content This is a paragraph block Tag with attributes A hyperlink Simple tag HTML Entity&entity;» » & & (non-breaking-space) WordPress Shortcode[shortcode attr=“val”][slideshow id=“1”] http://www.womensinitiative.org/about ProtocolDomain NamePath Why do we care? A website can use just the “Path” portion in references to images and hyperlinks URL

9. HTML 102 TagWhat it’s for Text Block of text (a paragraph with carriage return at end) … Hyperlink (“anchor”) where href=“URL” is the URL to navigate to Heading 1 Heading 2 Heading 3 Header 1 – largest Header 2 – next largest Header 3 – etc. Displays an image pointed to by the src attribute … Arbitrary block of HTML. Blocks re-flow on small screens. Line break. In Worpress, use text Inline text (like with no carriage return) text Makes text bold text Makes text italic

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 The WI.org Site Authoring Guide has a section on predefined CSS classes that are enabled on the WSI.org websiteWI.org Site Authoring Guide

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