demystifying wordpress

117
Photo by Dex1138

Upload: mykl-roventine

Post on 16-Jan-2015

1.497 views

Category:

Design


0 download

DESCRIPTION

Pick up tips, tricks, and techniques that illuminate how WordPress can become a viable opportunity for you to provide professional web design and maintenance services to your clients. Explore free and premium themes, plugins, and other resources that are available to help jump-start your next project. You’ll also learn step-by-step instructions to customize themes with ease.Presented at AIGA Minnesota's Design Camp 2011.

TRANSCRIPT

Page 4: Demystifying WordPress

Assumptions

Page 5: Demystifying WordPress

• You want to learn tips, tricks and techniques on how WordPress can become a viable opportunity for to provide professional web design and maintenance services to your clients

• You want to learn more about premium and free themes, plugins and other resources to help jump-start your next project

Page 6: Demystifying WordPress

• You want to customize WordPress themes with ease

• You want to learn ways to prevent headaches and heart-attacks when deploying a WordPress site

• You have great taste in session choice

Page 7: Demystifying WordPress

Overview

Page 8: Demystifying WordPress

History• First released on May 27, 2003, by Matt

Mullenweg

• Grown to be the largest self-hosted blogging tool in the world, used on millions of sites and seen by tens of millions of people every day.

- wordpress.org

Page 9: Demystifying WordPress

Stats• WordPress is used by over 14.7% of

Alexa Internet's "top 1 million" websites

• Powers 22% of all new websites (As of 8/11)

• Wordpress is the most popular CMS on the internet

• Version 3.0 has been downloaded over 32.5 million times (As of 2/11)

- Wikipedia

Page 10: Demystifying WordPress

Why WordPress?• Open Source

• Full Standards Compliance

• Free

• Flexible

• Awesome

Page 11: Demystifying WordPress

.com vs .org.com +• Free

• Easy to setup

• Everything is taken care of: setup, upgrades, spam, backups, security, etc.

.com -• Can’t run custom

themes

• Can’t hack PHP code

• Can’t upload plugins

Page 12: Demystifying WordPress

.com vs .org.org (a.k.a hosted install)• Can upload themes

• Can upload plugins

• Complete control to change code

• Need to pay for web host

Page 13: Demystifying WordPress

Themes

Page 16: Demystifying WordPress

Anatomy of a Great Theme

• Customizable - can add your own logo, color scheme, change layout, etc.

• Flexible - can handle a variety of different post types

• Adaptable - can grow with your needs

• Ongoing support and upgrades

Page 17: Demystifying WordPress
Page 22: Demystifying WordPress
Page 24: Demystifying WordPress
Page 25: Demystifying WordPress
Page 26: Demystifying WordPress

Blank Themes• Thematic

http://themeshaper.com/thematic/

• WP Frameworkhttp://wpframework.com

• Whiteboard – A Lightweight WordPress Frameworkhttp://whiteboardframework.com/

Page 27: Demystifying WordPress
Page 28: Demystifying WordPress
Page 29: Demystifying WordPress

Plugins

Page 31: Demystifying WordPress

However...Recent investigation of the current state of the WordPress plugin repository found:

• More than half of the plugins in the repository are not compatible with WordPress 3.x.

• Only 32% of those 15,000+ plugins have been updated in 2011!

- wpmu.org

Page 32: Demystifying WordPress

The Times They Are A-Changin'

Plugins not been updated in past two years will be hidden both in the repository and in the WP admin plugin search.

- Announced by Matt Mullenweg at WordCamp San Francisco in August 2011

Page 33: Demystifying WordPress

Do your homework• Check compatibility, when last updated

• Average rating, others’ comments/issues

Page 38: Demystifying WordPress
Page 40: Demystifying WordPress
Page 42: Demystifying WordPress

Customization

Page 43: Demystifying WordPress

Case Study:Adding Sidebars

Page 44: Demystifying WordPress

• Why? Added functionality, can use widgets

• How?1. functions.php

<?php if ( function_exists ('register_sidebar')) { register_sidebar ('custom'); } ?>

2. Copy sidebar.php (sidebar2.php)

3. Call where needed <?php include ('sidebar-cat.php'); ?>

Page 45: Demystifying WordPress
Page 46: Demystifying WordPress
Page 47: Demystifying WordPress

Other Options

• Visual Composer for WordPress (paid)

• Magic Fields Plugin (free)

Page 48: Demystifying WordPress
Page 50: Demystifying WordPress
Page 51: Demystifying WordPress
Page 52: Demystifying WordPress
Page 53: Demystifying WordPress

Case Study:Mystique Theme

Page 54: Demystifying WordPress
Page 55: Demystifying WordPress
Page 56: Demystifying WordPress
Page 57: Demystifying WordPress

Case Study:Luxury Theme

Page 58: Demystifying WordPress
Page 59: Demystifying WordPress
Page 60: Demystifying WordPress
Page 61: Demystifying WordPress
Page 62: Demystifying WordPress
Page 63: Demystifying WordPress
Page 64: Demystifying WordPress
Page 65: Demystifying WordPress
Page 66: Demystifying WordPress
Page 67: Demystifying WordPress
Page 68: Demystifying WordPress
Page 69: Demystifying WordPress
Page 70: Demystifying WordPress
Page 71: Demystifying WordPress
Page 72: Demystifying WordPress
Page 73: Demystifying WordPress

Case Study:Realtor Search Tool

Page 74: Demystifying WordPress
Page 75: Demystifying WordPress
Page 76: Demystifying WordPress
Page 77: Demystifying WordPress
Page 78: Demystifying WordPress
Page 79: Demystifying WordPress

Case Study:Events Calendar Pro

Page 80: Demystifying WordPress
Page 81: Demystifying WordPress
Page 82: Demystifying WordPress
Page 83: Demystifying WordPress
Page 84: Demystifying WordPress

Typography

Page 85: Demystifying WordPress

Web Fonts/@fontfaceAllows you to use virtually any font as a true text element. No longer limited by traditional browser-safe fonts (Arial, Verdana, Times, etc.)

Page 87: Demystifying WordPress

@fontface@font-face { font-family: 'Colaborate'; src: url('http://kernest.com/embed/colaborate-regular'), url('http://kernest.com/embed/colaborate- regular#colabreg') format('svg');}

#content h1 { color: #000; font-family: 'Colaborate', Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; font-size:32px;}

Page 88: Demystifying WordPress

Case Study:

Page 89: Demystifying WordPress

Alternative Uses

Page 92: Demystifying WordPress
Page 93: Demystifying WordPress

Case Study:Visitor Kiosk

Page 94: Demystifying WordPress
Page 95: Demystifying WordPress
Page 96: Demystifying WordPress
Page 97: Demystifying WordPress
Page 98: Demystifying WordPress
Page 99: Demystifying WordPress
Page 100: Demystifying WordPress
Page 101: Demystifying WordPress
Page 102: Demystifying WordPress
Page 103: Demystifying WordPress

Case Study:Wireframing

Page 104: Demystifying WordPress
Page 105: Demystifying WordPress
Page 106: Demystifying WordPress
Page 107: Demystifying WordPress

Peace of Mind

Page 108: Demystifying WordPress
Page 109: Demystifying WordPress
Page 110: Demystifying WordPress
Page 111: Demystifying WordPress
Page 113: Demystifying WordPress
Page 114: Demystifying WordPress

Get Help

Page 117: Demystifying WordPress

Thank You!