Lessons learned using WordPress as a CMS

WordPress was initially designed as a blogging platform, but is now being used to drive content for full-blown websites. This talk will explore ways to make WordPress work as an CMS and lessons learned while building unique themes for clients.

Recording from the event is available here (this talk starts at min 1:34): http://bloggar.aftonbladet.se/utvecklingsbloggen/2015/03/10/schedule-live-stream-wordpress-stockholm-meetup-wpsthlm/

Transcript

1. LESSONS LEARNED USING
   WORDPRESS
   …as a CMS.
   

   View Slide

2. Hej. My name is…
   Hjörtur Hilmarsson
   

   View Slide

3. View Slide

4. WordPress site for…
   

   View Slide

5. We are @14islands
   

   View Slide

6. WordPress started as
   a blogging platform
   

   View Slide

7. Is it a CMS?
   

   View Slide

8. Is it a CMS?
   YES
   

   View Slide

9. REQUIREMENTS
   FOR A CMS?
   

   View Slide

10. 1. CUSTOM TEMPLATES
    …to match designs.
    

    View Slide

11. 2. CUSTOM MODELS
    …known as post types
    

    View Slide

12. 3. CUSTOM DATA
    …text, images, relations.
    

    View Slide

13. 4. WORKFLOW
    …to keep sanity.
    

    View Slide

14. Implementing designs
    1. CUSTOM TEMPLATES
    

    View Slide

15. View Slide

16. /*
    * Template Name: Home Page Template
    */
    ?>
    
    
    while (have_posts()) :
    the_post();
    the_content();
    endwhile;
    endif; ?>
    
    
    Bare mininum template
    

    View Slide

17. Template files
    

    View Slide

18. Page - New
    

    View Slide

19. Appearance - Customise
    

    View Slide

20. Post Types for…
    2. CUSTOM MODELS
    

    View Slide

21. Default Post Types
    Post (blog)
    Page (content)
    Attachment (media/files)
    Revisions (past posts & pages)
    Nav menus
    

    View Slide

22. View Slide

23. Make your own…
    Project (Norra Djurgårdsstaden)
    Project Area (Stockholm)
    

    View Slide

24. register_post_type( 'projects',
    array(
    'labels' => array(
    'name' => __( 'Projects' ),
    'singular_name' => __( 'Project' )
    ),
    'public' => true
    )
    );
    Post Types
    

    View Slide

25. WordPress Admin
    

    View Slide

26. Custom fields for…
    3. CUSTOM DATA
    

    View Slide

27. View Slide

28. View Slide

29. Native Custom Fields
    

    View Slide

30. Me wants…
    Text
    Wysiwig Editor
    Images / Galleries
    Relationships
    …
    

    View Slide

31. function product_price_box_content( $post ) {
    wp_nonce_field( plugin_basename( __FILE__ ), 'product_price_box_content_nonce' );
    echo '';
    echo '';
    }
    The WordPress code way…
    http://www.smashingmagazine.com/2012/11/08/complete-guide-custom-post-types/
    

    View Slide

32. Advanced Custom Fields
    

    View Slide

33. User Interface
    

    View Slide

34. View Slide

35. 
    ACF code example
    

    View Slide

36. Caveats
    Stored in database
    Extra overhead
    Not part of Git repository
    

    View Slide

37. Export to code
    

    View Slide

38. /* Specify if in development mode */
    define('CUSTOM_DEVELOPMENT_MODE', true);
    wp-config.php in development
    

    View Slide

39. if (CUSTOM_DEVELOPMENT_MODE !== true) {
    include (__DIR__ . “/advanced_custom_fields.php");
    }
    Function.php “init” action
    

    View Slide

40. Development…
    4. WORKFLOW
    

    View Slide

41. editor.css / style.css
    

    View Slide

42. View Slide

43. //
    // Base
    //
    @import "base/_variables";
    //
    // UI
    //
    @import "ui/_typography";
    editor.scss -> editor.css
    

    View Slide

44. //
    // Base
    //
    @import "base/_variables";
    //
    // UI
    //
    @import “ui/_typography";
    @import "ui/_layout";
    @import "ui/_buttons";
    @import "ui/_links";
    @import "ui/_menu";
    @import "ui/_header";
    @import "ui/_footer";
    style.scss -> style.css
    

    View Slide

45. Grunt
    

    View Slide

46. grunt watch
    Grunt task for Sass
    

    View Slide

47. grunt deploy
    Grunt task for Deployement
    

    View Slide

48. How to share a database?
    

    View Slide

49. Shared Database
    

    View Slide

50. Caveats
    Updates when not wanted
    Needs 100% connection
    

    View Slide

51. https://github.com/jplew/SyncDB
    

    View Slide

52. SyncDB
    

    View Slide

53. git pull
    syncdb pull
    Terminal
    

    View Slide

54. git push
    syncdb push
    Terminal
    

    View Slide

55. How to make sites SEO friendly?
    

    View Slide

56. SEO by Yoast
    

    View Slide

57. LESSONS LEARNED USING
    WORDPRESS
    …as a CMS?
    

    View Slide

58. FLEXIBLE
    

    View Slide

59. IT’S FREE
    

    View Slide

60. IT’S MATURE
    

    View Slide

61. GOOD UX
    

    View Slide

62. ACTIVE COMMUNITY
    

    View Slide

63. WE LOVE IT
    

    View Slide

64. Tack!
    

    View Slide