Branding the WordPress Twenty Fourteen Theme

Presenters Todd Miller IS Program Manger Spokane Regional Health District 1101 W. College Ave. Spokane, WA (509) Naci Seyhanli Health Program Specialist 2 (Video Production) Spokane Regional Health District 1101 W. College Ave. Spokane, WA (509)

Overview The latest WordPress theme, Twenty Fourteen, has a lot of new features and options that were not available in earlier themes. Because of this the theme is an attractive choice for starting a new WordPress site or modifying an existing site. With a few, mostly non-technical steps, this theme can be easily modified to meet the basic needs of many website branding tasks. This involves making changes through the dashboard as well as adding custom CSS. This workshop will walk through the steps we took to modify the out-of-box Twenty Fourteen theme to closely match one of our existing, non-WordPress websites. Agenda: 1.Reviewing the out-of-box Twenty Fourteen theme and features. 2.Creating a child theme of the Twenty Fourteen theme. 3.Customizing the Twenty Fourteen theme through the dashboard. 4.Customizing the Twenty Fourteen theme with custom CSS.

Background Why did we try WordPress – Moving from proprietary custom CMS to off the shelf open source CMS – Layout improvement – Ease of transition, Content migration (copy and paste) Why we are experimenting with the Twenty Fourteen Theme – Just decided to use the newest, latest theme – Twenty Fourteen easily adapted to our needs Roles and responsibilities – Helps with no-code options – Greater division of work among staff with varying levels of knowledge and responsibility

Reviewing the out-of-box Twenty Fourteen theme and features Highlights: Homepage Grid and Slider Three widget areas Page templates, contributor template Mobile scaling

Creating a child theme of the Twenty Fourteen theme Highlights: Using FTP to access the backend web server Create a new subfolder to hold the child theme files Create a new “styles.css” in the child theme’s subfolder – Point to the parent theme Activate the child theme on the site

Customizing the Twenty Fourteen theme through the dashboard Highlights: Walk through the different options available in the Appearance > Customize section Basic overview of the three widgets in the Twenty Fourteen theme Creating menus Header image and text options Background images and color options Tagging posts and featured images

Customizing the Twenty Fourteen theme with custom CSS Highlights: Explain why we are using a child theme Access the child theme’s style sheet through the dashboard CSS changes to: – Top menu – Site Title and Tag Line – Page/Post text – Left Side Bar

References Why Child Themes (from WordPress.org): Twenty Fourteen Theme, deep dive file level: content/themes/twentyfourteen/style.css.source.html content/themes/twentyfourteen/style.css.source.html Customizing WordPress Themes Using Firebug on Firefox (tutorial):

Thank You.