Slides from ym p

1. WordPress web apps
techniques and plugins for creating web-based
apps with WordPress
Rachel McCollin
rachelmccollin.com
rachel@compass-design.co.uk
@rachelmccollin

2. Why a web app?
• Quicker
• Cheaper
• Platform-agnostic
• Not reliant on updates
• SEO-friendly
rachelmccollin.com
@rachelmccollin

3. The starting point - a responsive site
http://rachelmccollin.co.uk/carborellis/
rachelmccollin.com
@rachelmccollin

4. Part One - building a web app layout
• Removing unwanted content
• Changing the site title or description
• Change and style the navigation
• Style the layout
rachelmccollin.com
@rachelmccollin

5. The web app design
• Different navigation
structure
• Buttons
• No home page content
• Different site title
rachelmccollin.com
@rachelmccollin

6. Using a mobile theme for the web app
• Switcher plugin (WordPress Mobile Pack)
• Existing theme used as starting point for mobile theme
rachelmccollin.com
@rachelmccollin

7. Removing unwanted content
• CTA in the header
• Home page content
• new template file -
home.php
• remove everything in the
loop
!
rachelmccollin.com
@rachelmccollin

8. Changing the site description - 1
In the main site the site name is present but hidden:
<span id="site-description"><?php bloginfo( 'description' ); ?>
</span>
#site-description, #site-name {
position: absolute;
left: -9999px;
}
rachelmccollin.com
@rachelmccollin

9. Changing the site description - 3
In the app the site name is replaced by static text:
<span id="site-description"><?php bloginfo( 'description' ); ?>
</span>
#site-description {
position: relative;
float: right;
width: 60%;
text-align: right;
left: 0;
}
rachelmccollin.com
@rachelmccollin

10. Changing the site description - 4
Alternative solutions:
• use the site name and site description, only using one in each
theme
• add theme options screen (probably neatest)
rachelmccollin.com
@rachelmccollin

11. Changing the site description - the result
!
rachelmccollin.com
@rachelmccollin

12. Web app navigation - 1
• Set up new menu in WordPress admin - save as ‘web-
app’
rachelmccollin.com
@rachelmccollin

13. Web app navigation - 2
Replace:
wp_nav_menu( array( 'container_class' => 'menu-header',
'theme_location' => 'primary' ) );
with:
wp_nav_menu( array('menu' => ‘web-app’, 'container_class'
=> 'menu-header', 'menu-class' => ‘web-app-menu' ));
rachelmccollin.com
@rachelmccollin

14. Web app navigation - 3
Style the buttons:
.access li {
width: 100%;
margin: 15px 0;
}
.access a {
background: #0cf;
border-radius: 5px;
color: #fff;
height: 50px;
font-size: 1.4em;
}
.access ul li.current_page_item > a {
color: #fff;
}
rachelmccollin.com
@rachelmccollin

15. Web app navigation - the result
!
rachelmccollin.com
@rachelmccollin

16. Style remaining layout
• Social media icons
• Address
• Footer text
• Add link to switch to main
(responsive) site using
plugin, and style
!
rachelmccollin.com
@rachelmccollin

17. Part Two - web app functionality
• Useful plugins
• E-commerce and PayPal
• Map and directions (with geolocation)
• Additional options and the future
rachelmccollin.com
@rachelmccollin

18. Useful web app plugins - 1
• Events:
• Eventbrite for WordPress - http://wordpress.org/extend/plugins/eventbrite
• Events Manager - http://wordpress.org/extend/plugins/events-manager/
• E-commerce & subscriptions
• WP E-commerce (http://wordpress.org/extend/plugins/wp-e-commerce/)
• Jigoshop (http://wordpress.org/extend/plugins/jigoshop/)
• WooCommerce (http://www.woothemes.com/woocommerce/)
• s2member (http://wordpress.org/extend/plugins/s2member/)
• Gravity Forms (http://www.gravityforms.com/)
• WordPress Ultra Simple PayPal Shopping cart (http://wordpress.org/extend/
plugins/wp-ultra-simple-paypal-shopping-cart/)
rachelmccollin.com
@rachelmccollin

19. Useful web app plugins - 2
• Geolocation & maps:
• GeoPosty (http://wordpress.org/extend/plugins/geoposty/)
• MyGeoPosition.com (http://wordpress.org/extend/plugins/
mygeopositioncom-geotags-geometatags/)
• MapPress Easy Google maps (http://wordpress.org/extend/plugins/
mappress-google-maps-for-wordpress/)
• Social media
• BuddyPress (http://wordpress.org/extend/plugins/buddypress/)
• Simple Facebook Connect (http://wordpress.org/extend/plugins/simple-
facebook-connect/screenshots/)
• Photography
• PhotoSmash (http://wordpress.org/extend/plugins/photosmash-galleries/)
• iDump (http://wordpress.org/extend/plugins/i-dump-iphone-to-wordpress-
rachelmccollin.com
photo-uploader/) @rachelmccollin

20. Ice cream sundae builder - adding a form - 1
! rachelmccollin.com
@rachelmccollin

21. Ice cream sundae builder - adding a form - 2
!
!
rachelmccollin.com
@rachelmccollin

22. Mobile form UX
• Size of buttons etc.
• Use correct virtual
keyboard
• Use select boxes where
possible
• Access Autofill
• Use conditional fields
! • ...anything to reduce the
amount of typing!
rachelmccollin.com
@rachelmccollin

23. PayPal integration
!
• Full e-commerce isn’t always necessary
• Gravity Forms integrates easily with PayPal (with a developer
license)
rachelmccollin.com
@rachelmccollin

24. Give the user feedback
!
• A feedback page, confirmation email or preferably both
• Always important, especially when money has changed hands
• GF lets you specify a popup or separate page
rachelmccollin.com
@rachelmccollin

25. Geolocation and maps
!
!
• Use a plugin that accesses user location
• Provide a map and directions
• Link to native maps app (the jury is out on this one right now!)
rachelmccollin.com
@rachelmccollin

26. Other options - accessing mobile browser
capabilities
• File Upload - available with iOS6
• Local storage
• Web video and audio APIs (web
audio API now available with iOS6)
• Canvas
• Drag and drop
• Location-dependent content
rachelmccollin.com
@rachelmccollin

27. Summary
Web apps are the future of apps!
(IMHO)
rachelmccollin.com
@rachelmccollin

28. And finally...
rachelmccollin.com
@rachelmccollin