Slide 1

Slide 1 text

LESSONS LEARNED USING WORDPRESS …as a CMS.

Slide 2

Slide 2 text

Hej. My name is… Hjörtur Hilmarsson

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

WordPress site for…

Slide 5

Slide 5 text

We are @14islands

Slide 6

Slide 6 text

WordPress started as a blogging platform

Slide 7

Slide 7 text

Is it a CMS?

Slide 8

Slide 8 text

Is it a CMS? YES

Slide 9

Slide 9 text

REQUIREMENTS FOR A CMS?

Slide 10

Slide 10 text

1. CUSTOM TEMPLATES …to match designs.

Slide 11

Slide 11 text

2. CUSTOM MODELS …known as post types

Slide 12

Slide 12 text

3. CUSTOM DATA …text, images, relations.

Slide 13

Slide 13 text

4. WORKFLOW …to keep sanity.

Slide 14

Slide 14 text

Implementing designs 1. CUSTOM TEMPLATES

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Bare mininum template

Slide 17

Slide 17 text

Template files

Slide 18

Slide 18 text

Page - New

Slide 19

Slide 19 text

Appearance - Customise

Slide 20

Slide 20 text

Post Types for… 2. CUSTOM MODELS

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

WordPress Admin

Slide 26

Slide 26 text

Custom fields for… 3. CUSTOM DATA

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Native Custom Fields

Slide 30

Slide 30 text

Me wants… Text Wysiwig Editor Images / Galleries Relationships …

Slide 31

Slide 31 text

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/

Slide 32

Slide 32 text

Advanced Custom Fields

Slide 33

Slide 33 text

User Interface

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

ACF code example

Slide 36

Slide 36 text

Caveats Stored in database Extra overhead Not part of Git repository

Slide 37

Slide 37 text

Export to code

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Development… 4. WORKFLOW

Slide 41

Slide 41 text

editor.css / style.css

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

// // 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

Slide 45

Slide 45 text

Grunt

Slide 46

Slide 46 text

grunt watch Grunt task for Sass

Slide 47

Slide 47 text

grunt deploy Grunt task for Deployement

Slide 48

Slide 48 text

How to share a database?

Slide 49

Slide 49 text

Shared Database

Slide 50

Slide 50 text

Caveats Updates when not wanted Needs 100% connection

Slide 51

Slide 51 text

https://github.com/jplew/SyncDB

Slide 52

Slide 52 text

SyncDB

Slide 53

Slide 53 text

git pull syncdb pull Terminal

Slide 54

Slide 54 text

git push syncdb push Terminal

Slide 55

Slide 55 text

How to make sites SEO friendly?

Slide 56

Slide 56 text

SEO by Yoast

Slide 57

Slide 57 text

LESSONS LEARNED USING WORDPRESS …as a CMS?

Slide 58

Slide 58 text

FLEXIBLE

Slide 59

Slide 59 text

IT’S FREE

Slide 60

Slide 60 text

IT’S MATURE

Slide 61

Slide 61 text

GOOD UX

Slide 62

Slide 62 text

ACTIVE COMMUNITY

Slide 63

Slide 63 text

WE LOVE IT

Slide 64

Slide 64 text

Tack!