The presentation I made during WordCamp Manila 2016 See topics about tools we use for developing sites faster like Underscores, Visual Composer and Pantheon

1. Faster WordPress Workflows
(For Agencies, Freelancers)
EL Abquina | WordCamp Manila 2016

2. EL Abquina
ask@techops.ph
Who Am I:
- I work at HPE as a Consultant, but I love making websites as a
hobby.
- I turned WordPress as my new venture as an entrepreneur
What was my first WordPress experience:
- emanilapoetry.com as a Contributor (Tanaga and Sonnets)
Why I Use WordPress:
- With the less time, I can make websites as much as possible and
as fast as I can

3. Let’s Talk About Stuff:
 Development Environments
 Making Code Quicker, Use Underscores and Dev Plugins!
 WYSIWYG with Visual Composer
 Sliders to Animations with Slider Revolution
 Adding Functionalities with Plugins : WooCommerce
 Summary

4. Workflow: Defined
 As per Wikipedia: A workflow consists of an orchestrated and repeatable pattern of business
activity enabled by the systematic organization of resources into processes that transform
materials, provide services, or process information.
Workflow is simply, how you complete your work.
Faster is better.

5. My Workflow Gauges:
Normal
Moving…
Faster
Workflow
Total
Lifesaver!!!

6. Let us Start!

7. “My” Development Environment(s)
Where can you start making a WordPress site!

8. AMP Stack on
your Desktop
 HOW TO:
 Download and Install XAMPP
 Download and Extract WordPress
 Configure Database
 Run WordPress Installation
Requirements:
- Installation of XAMPP, WAMP
or MAMP
- Wordpress Installation
- Database Installation
Normal
Moving…

9. KALABOX
and
PANTHEON.IO
 HOW TO:
 Download from Kalabox.IO
 Add New Site….. DONE!
 Note: Connect your Pantheon Account (Token)
Requirements:
- INSTALL KALABOX
Total
Lifesaver!!!

10. Making Code Quicker
Developer Items For Better Development and Code Testing

11. Child Themes and
“Grandfather”
Themes
 HOW TO:
 Get an existing theme
 Follow the THEME HANDBOOK
https://developer.wordpress.org/themes/getting-started/
 Inherit and enhance using a Child Theme
Requirements:
- DEV - WordPress Installation
- Any IDE for Web Dev
- Pick your preferred Theme
Normal
Moving…

12. _S or aka
UNDERSCORES
 HOW TO:
 Download from undescores.me
 ADD:
 Theme Unit Test Codex Data Plugin
 Developer Plugin
Requirements:
- HTML + CSS + JS skills
- Any IDE for WEB DEV
Faster
Workflow

13. Simple and Quick “Template-parts”
system for developing views

14. Using
Theme Unit Test Codex
Data
- When building a custom
theme, it's important to test it
against all the different types of
content people can place on that
WordPress site the theme we're
running on.
Requirements:
- Install Wordpress Importer
- Download XML Data
- https://codex.wordpress.org/Theme_Unit_Test
- https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml
Faster
Workflow

15. Install Wordpress Importer
Import the WXR (.xml) file
of the Theme Unit Test
Data
Enjoy Your New Content
Items

16. A set of POSTS are generated that
contains various kinds of posts
ranging from TEXT, IMAGES and
even COMMENT and SECURE
posts

17. Using the Developer
Plugin
- Used to develop themes or
plugins and enable “debug”
mode
- To make this possible, there are
a handful of plugins that you
can choose to install in your site
for debugging purposes.
Total
Lifesaver!!!

18. Developer, is a plugin built by
Automattic, and can be installed
from the Plugins search page

19. Developer plugin will help you for a
project either a
- Custom Plugin for self-hosted sites
- Theme Development
- Wordpress VIP Theme

20. For Developing Themes:
- Debug Bar
- Monster Widget
- Regenerate Thumbnails
- Theme Check
Developer, is actually a plugin
that prompts you to install a long
list of other plugins so you don't
have to source them out, one at a
time.

21. Reconfigure your Developer
plugin:
Dashboard > Tools > Developer

22. Additional Tip:
- Ensure you enable WP_DEBUG
in the configuration file to make
Debugger work

23. Show Current Template
plugin for Theme Views
- Understanding how template
hierarchy works in WordPress
requires mastery of the codex
basics
http://developer.wordpress.org/themes/basics/template-hierarchy/
Faster
Workflow

24. Show Current Template plugin will
show in the toolbar all the PHP
template files that has been used
this page, post, category view, etc.
This will help easier tracking of your
view, visit a page and see the list

25. Works nicely with the underscores
(_s) framework and follows the same
concept

26. Design and Site-Building Magic
Generate features and site-structure as fast as possible

27. Plain-o’l-
Photoshop
 Create Your Layout in PhotoShop
 Convert Layout as Code in IDE
 Sync or Review on WordPress Site
Requirements:
- Adobe Photoshop or
Illustartor
- Or maybe use
Muse/Dreamweaver?
Normal
Moving…

28. WordPress
WYSIWYG IDE
 Built-In Theme Preview for Templates
 New IDE: Pinegrow
 https://pinegrow.com/docs/wordpress/
 For Plugins: PHPStorm. Period.
Requirements:
- Install Pinegrow + WP
- $$ XXX.00
Faster
Workflow

29. Super-Cheap All-
In-One Theme
 HOW TO:
 Go To XXXXX.com and buy that THEME
 Install Theme and Enjoy!!
Requirements:
- Some initial $$$$$$
- Any WordPress Installation
Total
Lifesaver!!!
Faster
Workflow
 Common Bundled Tools:
 Built-In or Custom “Customizer”
 WYSIWYG (What you See is what you get)
Builder
 Slider / Tools , Animation
 SEO Built-In or Custom Fields

30. Visual Composer for
page and post layouts
- Create Layout for any
WordPress Content and Page
https://vc.wpbakery.com
Total
Lifesaver!!!

31. Backend Editor Mode
Create Sections, Wraps
and Items of content in
your Page or Post with
writing any code
Treat the editor as if
you are making a
WireFrame for your
page, with content

32. Available Design Elements
Attach In any Part of
Your Page;
- Slider Widgets
- Custom Headings
- Common Elements
You can also make
content via:
- Mini Visual Editor
- Custom HTML Code
- Custom PHP Code

33. Real WYSIWYG Editor
Attach In any Part of
Your Page;
- Slider Widgets
- Custom Headings
- Common Elements
You can also make
content via:
- Visual Editor
- Custom HTML Code
- Custom PHP Code

35. Slider Revolution for
any content display
- “It’s not just a slider, but a
new way to deliver ideas.”
- Build Sliders, Content Feeds,
and other related
- Perpetual License for $ XX.00
https://revolution.themepunch.com/
Total
Lifesaver!!!

36. A custom plug-in that
enables you build:
- Sliders
- Parallax Animations
- Custom Content
Feeds
All without writing any
code

37. Default content slider, Post-Based, Social Media Feeds, and a new WooCommerce
Product Slider

39. Create Slider Animations with Layered Objects: Text, Images, Shapes, or any kind of Object pluggable
http://www.themepunch.com/wp-content/uploads/2015/12/stackingorder.mp4

40. Examples: Product Sliders

41. Examples: Youtube Video Stream - Slider

42. Examples: Slider Home Page with SEARCH BAR

43. A plugin for that
feature you are
thinking of…
- Social Media
- Forums / Bulletin Boards
- Knowledgebase
- E-Commerce
- Reservation etc.
Total
Lifesaver!!!

44. WooCommerce Plugin Guided Installation

45. https://docs.woocommerce.com/document/importing-woocommerce-dummy-data/
Download WooCommerce
Test Data

46. Revolution Slider + WooCommerce Products

47. Time to Wrap-up…
Summary

48. Dev Environment Code Development
Theme Design
Site Build / Plugins
• AMP STACK on
YOUR DESKTOP
• WordPress Codex • Layout / Wireframing
• Photoshop/
Illustrator
• KALABOX.IO • Underscores.me/
Skeleton, etc
• Theme Unit Test
• Pinegrow WP,
PHPStorm, etc
• KALABOX.IO +
PANTHEON.IO
• Developer Plugin • Visual Composer
• Slider Revolution
• WooCommerce
Total
Lifesaver!!!
Faster Workflow
Normal
Moving…

49. Workflows will help to
enhance your
confidence…
• To complete Work
• To estimate your
capabilities
• To help manage
your Time

50. Thank You!