SlideShare a Scribd company logo
1 of 18
Download to read offline
WordPress Is Not Just For Blogs Dammit!

    Photo credit
    http://www. ickr.com/photos/ardenswayo ife/3184839175/

Wednesday, June 29, 2011
A case study:
               Using WordPress as a CMS
                                       by: Chris Olbekson


                 WordPress consulting and development   Find me on Twitter




   http://c3mdigital.com                                                     @chris_olbekson

Wednesday, June 29, 2011
“   Our editors need to be able to
                               control and adjust the layout
                               and size of the post content
                               boxes
                                                            ”

Wednesday, June 29, 2011
e Solution:




          Play with the code on js ddle
          http://js ddle.net/zdSYG/41/


Wednesday, June 29, 2011
e Solution:
  Build a front end drag and drop post layout interface




          Play with the code on js ddle
          http://js ddle.net/zdSYG/41/


Wednesday, June 29, 2011
e Solution:
  Build a front end drag and drop post layout interface
                use jQuery UI Sortables to drag and drop the post boxes




          Play with the code on js ddle
          http://js ddle.net/zdSYG/41/


Wednesday, June 29, 2011
e Solution:
  Build a front end drag and drop post layout interface
                use jQuery UI Sortables to drag and drop the post boxes
     query the posts by ‘menu_order’ and use ajax to save to the database




          Play with the code on js ddle
          http://js ddle.net/zdSYG/41/


Wednesday, June 29, 2011
e Solution:
  Build a front end drag and drop post layout interface
                use jQuery UI Sortables to drag and drop the post boxes
     query the posts by ‘menu_order’ and use ajax to save to the database
              clean up the oats and ll in the gaps with jQuery Masonry




          Play with the code on js ddle
          http://js ddle.net/zdSYG/41/


Wednesday, June 29, 2011
See the nal production site at:
 http://www.michaelsavage.wnd.com/




Wednesday, June 29, 2011
“    We need to be able to quickly
                       break down and organize our content
                                                             ”

Wednesday, June 29, 2011
e Solution:




          custom metabox glass on GitHub
          http://bit.ly/lB0NDk




Wednesday, June 29, 2011
e Solution:
         Build out custom write panels using an extensible custom
                   metabox class (available on GitHub)




          custom metabox glass on GitHub
          http://bit.ly/lB0NDk




Wednesday, June 29, 2011
e Solution:
         Build out custom write panels using an extensible custom
                   metabox class (available on GitHub)

          custom drop down and radio select taxonomy metaboxes




          custom metabox glass on GitHub
          http://bit.ly/lB0NDk




Wednesday, June 29, 2011
e Solution:
         Build out custom write panels using an extensible custom
                   metabox class (available on GitHub)

          custom drop down and radio select taxonomy metaboxes
                            post box preview metabox




          custom metabox glass on GitHub
          http://bit.ly/lB0NDk




Wednesday, June 29, 2011
e Solution:
         Build out custom write panels using an extensible custom
                   metabox class (available on GitHub)

          custom drop down and radio select taxonomy metaboxes
                            post box preview metabox
                            custom sortable columns


          custom metabox glass on GitHub
          http://bit.ly/lB0NDk




Wednesday, June 29, 2011
WordPress Custom Write Panels
               and Metaboxes




Wednesday, June 29, 2011
Custom Post Columns




Wednesday, June 29, 2011
Technologies & Resources



     WordPress API
     http://wordpress.org/codex

     jQuery UI-Sortables
     http://jqueryui.com/demos/sortable/

     jQuery isotope & masonry plugins
     http://isotope.meta zzy.co/index.html

     Custom Metaboxes and Fields for WordPress
     On GitHub https://github.com/c3mdigital/Custom-Metaboxes-and-Fields-for-WordPress

     Modernizr
     http://www.modernizr.com/


Wednesday, June 29, 2011

More Related Content

Similar to WordPress Houston Meetup - Using WordPress as a CMS

Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
ecommerce poland expo
 
Collective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumCollective Amberjack - European Plone Symposium
Collective Amberjack - European Plone Symposium
Massimo Azzolini
 
Leveraging Eclipse Modeling Stack: case study Bonita Open Solution
Leveraging Eclipse Modeling Stack: case study Bonita Open SolutionLeveraging Eclipse Modeling Stack: case study Bonita Open Solution
Leveraging Eclipse Modeling Stack: case study Bonita Open Solution
Bonitasoft
 

Similar to WordPress Houston Meetup - Using WordPress as a CMS (20)

Mobile WPO
Mobile WPOMobile WPO
Mobile WPO
 
Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)Backbone.js - Michał Taberski (PRUG 2.0)
Backbone.js - Michał Taberski (PRUG 2.0)
 
BDD For Zend Framework With PHPSpec
BDD For Zend Framework With PHPSpecBDD For Zend Framework With PHPSpec
BDD For Zend Framework With PHPSpec
 
Extending NetBeans IDE
Extending NetBeans IDEExtending NetBeans IDE
Extending NetBeans IDE
 
WordPress Gallery Themes & Plugins
WordPress Gallery Themes & PluginsWordPress Gallery Themes & Plugins
WordPress Gallery Themes & Plugins
 
Openedweek 2013
Openedweek 2013Openedweek 2013
Openedweek 2013
 
Authoring In Connexions 2010
Authoring In Connexions 2010Authoring In Connexions 2010
Authoring In Connexions 2010
 
Web development resources brackets
Web development resources bracketsWeb development resources brackets
Web development resources brackets
 
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine DevelopmentEECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
EECI2009 - From Design to Dynamic - Rapid ExpressionEngine Development
 
Improving Site Design and Usability
Improving Site Design and UsabilityImproving Site Design and Usability
Improving Site Design and Usability
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - Gutenberg
 
Meetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - GutenbergMeetup: The big change coming to WordPress in 2018 - Gutenberg
Meetup: The big change coming to WordPress in 2018 - Gutenberg
 
GWT Plus HTML 5
GWT Plus HTML 5GWT Plus HTML 5
GWT Plus HTML 5
 
Build and save your own Gutenberg Block Patterns
Build and save your own Gutenberg Block PatternsBuild and save your own Gutenberg Block Patterns
Build and save your own Gutenberg Block Patterns
 
Backbone web apps - design & architecture
Backbone web apps  - design & architectureBackbone web apps  - design & architecture
Backbone web apps - design & architecture
 
Backbone.js Architecture Example - Echoes Media Player (Hebrew)
Backbone.js Architecture Example - Echoes Media Player (Hebrew)Backbone.js Architecture Example - Echoes Media Player (Hebrew)
Backbone.js Architecture Example - Echoes Media Player (Hebrew)
 
Brackets code editor guide
Brackets code editor guideBrackets code editor guide
Brackets code editor guide
 
Collective Amberjack - European Plone Symposium
Collective Amberjack - European Plone SymposiumCollective Amberjack - European Plone Symposium
Collective Amberjack - European Plone Symposium
 
Facets of applied smw
Facets of applied smwFacets of applied smw
Facets of applied smw
 
Leveraging Eclipse Modeling Stack: case study Bonita Open Solution
Leveraging Eclipse Modeling Stack: case study Bonita Open SolutionLeveraging Eclipse Modeling Stack: case study Bonita Open Solution
Leveraging Eclipse Modeling Stack: case study Bonita Open Solution
 

More from Chris Olbekson (6)

Magical WordPress Development with Vagrant
Magical WordPress Development with VagrantMagical WordPress Development with Vagrant
Magical WordPress Development with Vagrant
 
Managing themes and server environments with extensible configuration arrays
Managing themes and server environments with extensible configuration arraysManaging themes and server environments with extensible configuration arrays
Managing themes and server environments with extensible configuration arrays
 
The Query the Whole Query and Nothing but the Query
The Query the Whole Query and Nothing but the QueryThe Query the Whole Query and Nothing but the Query
The Query the Whole Query and Nothing but the Query
 
Cognac gautier presentation
Cognac gautier   presentationCognac gautier   presentation
Cognac gautier presentation
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
 
Optimizing WordPress for Performance - WordCamp Houston
Optimizing WordPress for Performance - WordCamp HoustonOptimizing WordPress for Performance - WordCamp Houston
Optimizing WordPress for Performance - WordCamp Houston
 

Recently uploaded

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
FIDO Alliance
 

Recently uploaded (20)

Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
TEST BANK For, Information Technology Project Management 9th Edition Kathy Sc...
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
FDO for Camera, Sensor and Networking Device – Commercial Solutions from VinC...
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!State of the Smart Building Startup Landscape 2024!
State of the Smart Building Startup Landscape 2024!
 
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptxHarnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
Harnessing Passkeys in the Battle Against AI-Powered Cyber Threats.pptx
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 

WordPress Houston Meetup - Using WordPress as a CMS

  • 1. WordPress Is Not Just For Blogs Dammit! Photo credit http://www. ickr.com/photos/ardenswayo ife/3184839175/ Wednesday, June 29, 2011
  • 2. A case study: Using WordPress as a CMS by: Chris Olbekson WordPress consulting and development Find me on Twitter http://c3mdigital.com @chris_olbekson Wednesday, June 29, 2011
  • 3. Our editors need to be able to control and adjust the layout and size of the post content boxes ” Wednesday, June 29, 2011
  • 4. e Solution: Play with the code on js ddle http://js ddle.net/zdSYG/41/ Wednesday, June 29, 2011
  • 5. e Solution: Build a front end drag and drop post layout interface Play with the code on js ddle http://js ddle.net/zdSYG/41/ Wednesday, June 29, 2011
  • 6. e Solution: Build a front end drag and drop post layout interface use jQuery UI Sortables to drag and drop the post boxes Play with the code on js ddle http://js ddle.net/zdSYG/41/ Wednesday, June 29, 2011
  • 7. e Solution: Build a front end drag and drop post layout interface use jQuery UI Sortables to drag and drop the post boxes query the posts by ‘menu_order’ and use ajax to save to the database Play with the code on js ddle http://js ddle.net/zdSYG/41/ Wednesday, June 29, 2011
  • 8. e Solution: Build a front end drag and drop post layout interface use jQuery UI Sortables to drag and drop the post boxes query the posts by ‘menu_order’ and use ajax to save to the database clean up the oats and ll in the gaps with jQuery Masonry Play with the code on js ddle http://js ddle.net/zdSYG/41/ Wednesday, June 29, 2011
  • 9. See the nal production site at: http://www.michaelsavage.wnd.com/ Wednesday, June 29, 2011
  • 10. We need to be able to quickly break down and organize our content ” Wednesday, June 29, 2011
  • 11. e Solution: custom metabox glass on GitHub http://bit.ly/lB0NDk Wednesday, June 29, 2011
  • 12. e Solution: Build out custom write panels using an extensible custom metabox class (available on GitHub) custom metabox glass on GitHub http://bit.ly/lB0NDk Wednesday, June 29, 2011
  • 13. e Solution: Build out custom write panels using an extensible custom metabox class (available on GitHub) custom drop down and radio select taxonomy metaboxes custom metabox glass on GitHub http://bit.ly/lB0NDk Wednesday, June 29, 2011
  • 14. e Solution: Build out custom write panels using an extensible custom metabox class (available on GitHub) custom drop down and radio select taxonomy metaboxes post box preview metabox custom metabox glass on GitHub http://bit.ly/lB0NDk Wednesday, June 29, 2011
  • 15. e Solution: Build out custom write panels using an extensible custom metabox class (available on GitHub) custom drop down and radio select taxonomy metaboxes post box preview metabox custom sortable columns custom metabox glass on GitHub http://bit.ly/lB0NDk Wednesday, June 29, 2011
  • 16. WordPress Custom Write Panels and Metaboxes Wednesday, June 29, 2011
  • 18. Technologies & Resources WordPress API http://wordpress.org/codex jQuery UI-Sortables http://jqueryui.com/demos/sortable/ jQuery isotope & masonry plugins http://isotope.meta zzy.co/index.html Custom Metaboxes and Fields for WordPress On GitHub https://github.com/c3mdigital/Custom-Metaboxes-and-Fields-for-WordPress Modernizr http://www.modernizr.com/ Wednesday, June 29, 2011