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
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
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