Page 1
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
11
Page 2
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
2
T O H O N O R T O I N S P I R E
T O H O N O R
We’re passionate about our creativity and about our work. But we’re
not the type of agency to lead with our egos. Our clients come first. We
HONOR their brands, businesses and goals. It’s our aim to not only give
our clients what they want, but also what they need.
The Charles is a boutique creative and digital agency specializing in Graphic
Design, Web Design and Development, Brand Strategy, Creative Direction,
Online Marketing, Social Media campaigns and Social Channel Management.
T O I N S P I R E
Speaks for itself - we’re here to inspire consumers and target
audiences, our peers and most importantly EACH OTHER.
W H O W E A R E
# B E Y O N D W O R D P R E S S
Page 3
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
3
B I R D W A T C H D E V E L O P E R S E R I E S
This workshop will introduce you to a flexible and intuitive CMS, with a hands on tutorial that enables you to create your own custom dynamic website with your own custom HTML/CSS. "!You will learn how to think outside the boundaries of WordPress and open your mind to unique solutions to complex HTML/CSS problems.
BEYOND WORDPRESS
Page 4
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
4
B E Y O N D W O R D P R E S S
Objectives
This workshop will help you to
understand the benefits and
misconceptions of wordpress."
!We will do a quick tutorial
designing a custom gallery module
with Wordpress.
0 1
W O R D P R E S S
Introduction to a flexible CMS"
!Understanding the benefits of
custom HTML and a flexible
CMS
0 2
F L E X I B L E C M S
Tutorial for creating interactive
gallery in a flexible CMS"
!Become familiar with the important
resources for HTML/CSS
0 3
C M S T U T O R I A L
Page 5
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
5
W O R D P R E S S
Q U I C K T U T O R I A L
The setup
H I S T O R Y
Brief background
T H E I S S U E S
The beginning of a flexible CMS
B E Y O N D W O R D P R E S S
8
7
9
# B E Y O N D W O R D P R E S S
Page 6
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
6
W O R D P R E S S
Overview
Initially released May, 2003 and was a spinoff of another projected titled “Cafelog”. Wordpress was designed for blogs. It does great for easy, simple content publishing."!It’s still designed for blogs with supporting pages and the more complex your pages become, the more difficult it becomes to maintain your website."
HISTORY
Page 7
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
7
P U B L I S H I N G S C R E E N W I T H C O N T E N T
W O R D P R E S S
Tutorial
Page 8
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
8
Web pages are no longer
simple informational
documents. They are
productions, big and small
C O M P L E X I T Y
Clients have much higher
expectations which range from
responsive design, ajax form
submissions, inline form
validating and ease of updating
C L I E N T E X P E C T A T I O N S
Clients want complete feedback
on how each segment works. It is
becoming much more difficult to
set limitations with a client
based on the boundaries of a
work flow
C L I E N T F E E D B A C K
W O R D P R E S S
Overview
THE ISSUES
Page 9
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
9
F L E X I B L E C M S
C L I E N T S
The benefits for clients
W H A T I S I T
The abilities of a flexible CMS
E E B A S I C S
Overview
B E Y O N D W O R D P R E S S
13
11 / 12
14 / 15
# B E Y O N D W O R D P R E S S
Page 10
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
10
F L E X I B L E C M S
Overview
• Ability to easily set up multiple, custom publishing forms"
!• Publishing forms can range from image uploads, simple text fields,
text areas, creating relationships, date formatting and even the
ability to input multiple records within one published entry"
!• Complex category setups which include multiple category groups
that can each have as many nested sub categories as you need
ABILITIES
Page 11
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
11
F L E X I B L E C M S
Overview
• Flexible templating engines which allow you to create static HTML
pages which will directly represent the final website"
!• The ability to break down published content on a micro level and
specify where each type of data will fit into your HTML mockup"
!• Customize your URL setup to work best for your needs
ABILITIES
Page 12
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
12
The ability to manage any
and all content on the
website in a user friendly
publishing screen tailored to
each content type"
M A N A G E M E N T
Securing the template design which
prevents the client from making
updates that can negatively affect the
layout and design"
Set complex rules of required content
in publishing screens to ensure content
is always existing on the website
C O M P L E X I T Y
Add-on new sections to the
website and seamlessly
expand without needing to
upgrade entire set-up
A D D - O N S
F L E X I B L E C M S
Overview
CLIENT BENEFITS
Page 13
13
# B E Y O N D W O R D P R E S S
O U R F L E X I B L E C M S
B E Y O N D W O R D P R E S S
E X P R E S S I O N E N G I N E
Note there are many open source and paid flexible
content management systems and programing languages
to help you build a complex website: EE, Tonic, Drupal,
Ruby on Rails, Radiant, etc.
http: / /e l l i s lab.com/expres s ionengine/user -guide/how_to/bui lding_a_s imple_news_s i te.html
Page 14
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
14
http://ellislab.com/
expressionengine/user-guide/
installation/installation.html
D O W N L O A D A N D I N S T A L L
Templates control what gets shown
to the outside world (also known as
the site’s “front end”) and are
grouped together into (you guessed
it!) Template Groups.
T E M P L A T E S
ExpressionEngine stores all of
your information inside
Channels. A Channel is simply a
container that can be as simple
or as complex as you need it to
be, depending on your content.
C H A N N E L S
F L E X I B L E C M S
Overview
EE BASICS
Page 15
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
15
An element of a publishing form to
input data "
!example: Title field, file upload
field, description field would each
be it's own channel field"
C H A N N E L F I E L D
Field Group: a collection of field
types which creates a publishing page."!Field Label: the user friendly title of
the field and what it pertains to
(example: Title, subtitle, description,
etc)"
F I E L D G R O U P / F I E L D L A B E L
This is a unique alapha/numeric ID
given to a custom channel field. "
!This is only seen by the developers
S H O R T N A M E
F L E X I B L E C M S
Overview
EE DICTIONARY
Page 16
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
16
T U T O R I A L
D Y N A M I C S L I D E S H O W
The Overview
S T A T I C S L I D E S H O W
Code a static slideshow
B E Y O N D W O R D P R E S S
20
18 / 19
T H E C O N V E R S I O N
Converting static HTML to EE
T H E S E T U P
Create channel, channel field group and channel field
25 / 26
21 / 22 / 23 / 24
T H E F R O N T E N D
Add images to slideshow
27
# B E Y O N D W O R D P R E S S
Page 17
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
17
F L E X I B L E C M S
Tutorial
STATIC SLIDESHOW
S T E P 1 !LOGIN TO EXPRESSION ENGINE
S T E P 2 !FIND TEMPLATE
S T E P 3 !CODE YOUR STATIC SLIDESHOW
S T E P 4 !PREVIEW YOUR STATIC SLIDESHOW
Page 18
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
18
F L E X I B L E C M S
Create a Static Slideshow
1. Go to birdwatch.thecharlesnyc.com/system "
2. Login: user: lastname / password: lastname7"
3. Click Login"
4. Go to Design ‣ Templates ‣ Edit ‣ lastname"
5. Add 4 image tags: <img src=“/1.jpg”>. We’ve already uploaded 1-20. So just choose 4 numbers."
6. Click Update
7. Go to birdwatch.thecharlesnyc.com/lastname
S T A T I C S L I D E S H O W
Page 19
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
19
F L E X I B L E C M S
Tutorial
DYNAMIC SLIDESHOW
S T E P 1 !CREATE CHANNEL
S T E P 2 !CREATE CHANNEL FIELD GROUP / FIELD
S T E P 3 !LINK CHANNEL TO CHANNEL FIELD
S T E P 4 !CONVERT STATIC HTML TO EE
Page 20
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
20
F L E X I B L E C M S
Create a Channel
1. Go to Admin ‣ Channel Administration ‣ Channels."
2. Click the Create a New Channel button in the upper-right."
3. For the Full Channel Name, call it “lastname”."
4. ExpressionEngine will automatically provide a sensible Short Name for you, in this case, “lastname”."
5. Click Submit."
6. You’ll see the new Channel we just created:
C H A N N E L
Page 21
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
21
F L E X I B L E C M S
Create a Channel Field Group
1. Go to Admin ‣ Channel Administration ‣ Channel Fields."
2. Click the Create a New Channel Field Group button in the upper-right."
3. Let’s be startlingly creative and name this group “Lastname Slideshow”."
4. Click Submit."
5. Our new Channel Field Group is shown, as well as the fact that it currently holds zero (0) fields:
C H A N N E L F I E L D G R O U P
Page 22
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
22
F L E X I B L E C M S
Create a Channel Field
1. Click the “Lastname” Slideshow group."
2. Click the Create a New Channel Field button in the upper-right."
3. For Type, choose Martrix. (Notice the other available types - exciting, no?)"
4. For Field Label, type “Slideshow”."
5. ExpressionEngine will automatically provide a sensible Short Name for you, in this case, “slideshow”."
6. In the cell type drop down choose file. Click the Submit button at the bottom of the page."
7. Behold, our beautiful new Channel Field:
C H A N N E L F I E L D
Page 23
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
23
F L E X I B L E C M S
Relate the Channel to Channel Field Group
1. Go to Admin ‣ Channel Administration ‣ Channels."
2. Click the Edit Group Assignments link located to the right of the Last Name Channel."
3. Leave Category Group set to “None”."
4. Set Status Group to “Statuses”."
5. Set Channel Field Group to “lastname slideshow”."
6. Click Update.
L I N K C H A N N E L T O C H A N N E L F I E L D G R O U P
Page 24
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
24
F L E X I B L E C M S
Tutorial
A D D I M A G E S T O S L I D E S H O W
1. Go to Content ‣ Publish ‣ lastname."
2. Create a Title
3. Click Add Image"
4. Choose an image 1-4 ‣ Repeat 3-4 until you have 4 images."
5. Click Submit"
6. Go to birdwatch.thecharlesnyc.com/lastname
Page 25
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
25
F L E X I B L E C M S
Convert Static HTML to EE
We need to be able to make a call to our published entry. This
is a template tag specific to EE which targets a cannel called
“master”. You will want to target the channel you created
using the short name you chose.
{exp:channel:entries channel=“master”}
This is the short name of the matrix field you created. "
Because we used a matrix field, this tag will now be instructed
to begin a loop of data that was input into the matrix field type.
{slideshow}
This is our HTML image. tag. The src of {image} is the short
name for the image in our matrix. {alt} is the alternative text
field we created.
<img src="{image}" alt="{alt}" />
This tells the matrix field type to end the loop. Whatever we
input between {slideshow} and {/slideshow} will be looped over
and over for each row of data we input into the matrix field type.
{/slideshow}
This tag simply closes out our call to a published entry
and it’s custom fields.
{/exp:channel:entries}
Page 26
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
26
F L E X I B L E C M S
Convert Static HTML to EE
1. Go to Design ‣ Templates ‣ Edit ‣ lastname"
2. Add {exp:channel:entries channel=“master”} "
3. Add {slideshow} <img src=“{image}” alt=“{alt}” /> {slideshow}
4. Add {/exp:channel:entries}
5. Click Update
C O N V E R T H T M L T O E E
Page 27
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
27
U A D N Y C . C O M S O R T E D T R A V E L . C O M
O U R W O R K
I N D E G O A F R I C A . O R G
EE Examples
Page 28
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
28
Q & A
# B E Y O N D W O R D P R E S S
Page 29
04.15.14 | BEYOND WORDPRESS WORKSHOP | CONTACT: [email protected] | © 2014 THE CHARLES NYC, INC. | ALL RIGHTS RESERVED. REPRODUCTION OF THIS DOCUMENT AND ITS CONTENTS WITHOUT THE EXPRESSED PERMISSION OF THE CHARLES GROUP. IS PROHIBITED
# B E Y O N D W O R D P R E S S
29