Branding the
WordPress
Twenty Fourteen
Theme
Presenters
Todd Miller
IS Program Manger
Spokane Regional
Health District
1101 W. College Ave.
Spokane, WA 99201
(509)324-1689
trmiller@srhd.org
Naci Seyhanli
Health Program
Specialist 2 (Video
Production)
Spokane Regional
Health District
1101 W. College Ave.
Spokane, WA 99201
(509)324-1529
nseyhanli@srhd.org
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
–
–
–
•
Why we are experimenting with the Twenty Fourteen Theme
–
–
•
Moving from proprietary custom CMS to off the shelf open source CMS
Layout improvement
Ease of transition, Content migration (copy and paste)
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): http://codex.wordpress.org/Child_Themes
Twenty Fourteen Theme, deep dive file level:
http://phpxref.ftwr.co.uk/wordpress/nav.html?wpcontent/themes/twentyfourteen/style.css.source.html
Customizing WordPress Themes Using Firebug on Firefox (tutorial):
http://premium.wpmudev.org/blog/customizing-your-wordpress-theme-using-firebug/
Thank You.