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.
2. Hej. My name is… Hjörtur Hilmarsson
4. WordPress site for…
5. We are @14islands
6. WordPress started as a blogging platform
7. Is it a CMS?
8. Is it a CMS? YES
9. REQUIREMENTS FOR A CMS?
10. 1. CUSTOM TEMPLATES …to match designs.
11. 2. CUSTOM MODELS …known as post types
12. 3. CUSTOM DATA …text, images, relations.
13. 4. WORKFLOW …to keep sanity.
14. Implementing designs 1. CUSTOM TEMPLATES
16. <?php /* * Template Name: Home Page Template */ ?> <?php get_header(); ?> <main> <?php if (have_posts()) : while (have_posts()) : the_post(); the_content(); endwhile; endif; ?> </main> <?php get_footer(); ?> Bare mininum template
17. Template files
18. Page - New
19. Appearance - Customise
20. Post Types for… 2. CUSTOM MODELS
21. Default Post Types Post (blog) Page (content) Attachment (media/files) Revisions (past posts & pages) Nav menus
23. Make your own… Project (Norra Djurgårdsstaden) Project Area (Stockholm)
24. register_post_type( 'projects', array( 'labels' => array( 'name' => __( 'Projects' ), 'singular_name' => __( 'Project' ) ), 'public' => true ) ); Post Types
25. WordPress Admin
26. Custom fields for… 3. CUSTOM DATA
29. Native Custom Fields
30. Me wants… Text Wysiwig Editor Images / Galleries Relationships …
31. function product_price_box_content( $post ) { wp_nonce_field( plugin_basename( __FILE__ ), 'product_price_box_content_nonce' ); echo '<label for="product_price"></label>'; echo '<input type="text" id="product_price" name="product_price" placeholder="enter a price" />'; } The WordPress code way… http://www.smashingmagazine.com/2012/11/08/complete-guide-custom-post-types/
32. Advanced Custom Fields
33. User Interface
35. <h1><?php the_field(“name”); ?><h1> ACF code example
36. Caveats Stored in database Extra overhead Not part of Git repository
37. Export to code
38. /* Specify if in development mode */ define('CUSTOM_DEVELOPMENT_MODE', true); wp-config.php in development
39. if (CUSTOM_DEVELOPMENT_MODE !== true) { include (__DIR__ . “/advanced_custom_fields.php"); } Function.php “init” action
40. Development… 4. WORKFLOW
41. editor.css / style.css
43. // // Base // @import "base/_variables"; // // UI // @import "ui/_typography"; editor.scss -> editor.css
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
45. Grunt
46. grunt watch Grunt task for Sass
47. grunt deploy Grunt task for Deployement
48. How to share a database?
49. Shared Database
50. Caveats Updates when not wanted Needs 100% connection
51. https://github.com/jplew/SyncDB
52. SyncDB
53. git pull syncdb pull Terminal
54. git push syncdb push Terminal
55. How to make sites SEO friendly?
56. SEO by Yoast
57. LESSONS LEARNED USING WORDPRESS …as a CMS?
58. FLEXIBLE
59. IT’S FREE
60. IT’S MATURE
61. GOOD UX
62. ACTIVE COMMUNITY
63. WE LOVE IT
64. Tack!