Variations on a Theme

1
Variations on a Theme

• Using CSS to Balance Design Continuity and
  Flexibility in WordPress Multi-User
• http//wordpress.blogs.wesleyan.edu/?p121 

Kevin Wiliarty Academic Computing
Manager Wesleyan University kwiliarty_at_wesleyan.edu
Pat Leone World Wide Web Administrator Wesleyan
University pleone_at_wesleyan.edu
2
WordPress µ at Wesleyan

• At Wesleyan we are using WordPress Multi-User to
  manage a wide variety of sites. The screen shots
  on the following slides will give you a visual
  impression of the range we are covering.
•  

3
http//cogdev.research.wesleyan.edu
4
http//itsinfo.blogs.wesleyan.edu
5
http//dataanalysis.site.wesleyan.edu (in
development as of 1/24/2009)
6
http//jewishhistory.research.wesleyan.edu (in
development as of 1/24/2009)
7
http//wordpress.blogs.wesleyan.edu
8
http//jwillis.faculty.wesleyan.edu
9
http//googleapps.blogs.wesleyan.edu
10
http//nerc2008.blogs.wesleyan.edu
11
Many sites, one theme
The interesting part of the story, however, is
not the variation per se, but the fact that all
of the sites we've just shown you use a single
WordPress theme. Most of the rest of this
presentation will be devoted to explaining why
and how we do that.
12
Great things about WordPress MU

• ITS Staff
• easy to create
• relatively easy to administer
• standards compliance
• price is right
• cross-platform 
• owners can take charge of content

• Communications
• design continuity
• more content

• Content Creators
• easy to edit
• professional design
• automatic site navigation
• built-in search
• collaboration
• feedback
• multimedia

13
The catch

• Out of the box, WordPress MU does not offer the
  design flexibility we need.
•  
• In particular, when several MU sites share a
  theme, per-blog customizations tend to be
  limited, if not impossible. 
•  
• All of the sites share the same code base and the
  same style sheet.

14
Many sites, many themes?

• You could allow each MU site to have its own
  theme, but...
• not easy or desirable to maintain multiple
  themes, especially when most of the code would be
  redundant
• adding or copying themes requires access to
  back-end, at least out of the box

15
One theme, many variables?

• You could build style options into the php as
  variables that users set through the blog's admin
  interface. Many themes include some variables of
  this sort, but...
• Lots of coding
• Hard to predict all required variables in advance
• Don't want to be touching the core code all the
  time

16
One theme, one variable

• Our WesBase theme allows users to set one
  important variable for style and layout the blog
  "type"
• The blogtype variable determines a couple
  matters in our php.
• Most importantly, the blogtype calls one of five
  external style sheets that modify the base styles
  for the theme.
• Every site then calls yet a third individual
  style sheet that is automatically named according
  to a unique identifier.

17
One site, three style sheets
18
Sheet Map
1
2
3
19
style.css
20
wesblog.css
21
googleapps.css
22
Choosing Series of Stylesheets

• Blog admins can choose the blog type
•     - under Design choose WesBase Options
• Admins choose the type of blog from the dropdown

23
blogType WesBlog
24
blogType Departmental
25
blogType Scholar
26
blogType Conference
27
blogType Newsletter
28
Series of Stylesheets

• Here's the php code that allows all this
  variation. We added the second two.  The
  stylesheets are external so we can control access
  independently of access to our WordPress backend.
• style.css
• ltlink rel"stylesheet" href"lt?php
  bloginfo('stylesheet_url') ?gt"
  type"text/css"         media"screen" /gt
• blogtype.css
•  ltlink rel"stylesheet" href"http//www.wesleyan.
  edu/wordpress/stylesheets/lt?php echo    blogtype
  ?gt.css" type"text/css" /gt
• perBlog.css
• ltlink rel"stylesheet" type"text/css"
  href"http//www.wesleyan.edu/wordpress/perBlog/lt?
  php thisDomain explode('//',
  get_bloginfo('url')) localsheet explode('.',
  thisDomain1) echo localsheet0.'/'.localshe
  et0 ?gt.css" /gt

29
blog using scholar.css emcalister.faculty.wesleya
n.edu
header

•  

content-main
sidebar
30
blog using conference.cssnerc2008.blogs.wesleyan.
edu
header
sidebar
content-main
31
blog using wesblog.css googleapps.blogs.wesleyan.e
du

•  

header
sidebar
content-main
32
blog using newsletter.cssnewsletter.blogs.wesleya
n.edu

•  

header
sidebar
content-main
33
Caveats

• We would like users to style their own blogs, but
  the users do not know CSS -   so, while it is
  easy for us to do, we have to do it for everyone
  - which can become time consuming.
• There are real problems with safari 2 working
  with CSS 
• Copying and pasting from word still wreaks havoc
   - we cannot solve that problem!
• You need a plugin to allow style attributes
  within posts 
• Previews don't show up correctly

34
Success Stories

• Although this presentation has focused on
  technology and design, our WordPress project
  overall is really about content and
  communication.
•  
• We adopted WordPress Mu in order to put content
  under the control of its owners
• To revitalize sites that were out of date
• To create space for new kinds of content
• To draw Wesleyan content hosted externally back
  to our own domain
• All three of these constituencies are represented
  among the sites we've show you today
•  

35
Last Word

• The design flexibility that we introduced through
  the use of tiered style sheets has played a
  crucial role in making the WordPress MU
  environment attractive to the various
  content-owners we are serving.