Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Lessons learned using WordPress as a CMS

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/

D34efae5a5bdbb00ce3b300c78cf359a?s=128

14islands

March 11, 2015
Tweet

Transcript

  1. LESSONS LEARNED USING WORDPRESS …as a CMS.

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

  3. None
  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

  15. None
  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
  22. None
  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

  27. None
  28. None
  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

  34. None
  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

  42. None
  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!