60. <script>
// Function to slabtext the About Slider Content headings
try {
Typekit.load({
loading: function() {
// Javascript to execute when fonts start loading
},
active: function() {
jQuery("p.slabtextdone").slabText({
// Don't slabtext the headers if the viewport is under 380px
"viewportBreakpoint":380,
"fontFamily":"trajan-pro-3"
});
},
inactive: function() {
// Javascript to execute when fonts become inactive
}
})
} catch(e) {}
</script>
Slab Text
I’m assuming that everyone who’s signed up to this session has a rough idea of what WordPress is about but it’s probably useful to say a little about it’s history and clarify some terms.
WordPress started in 2003 as a fork of b2/cafelog, a PHP weblog system. It developed pretty rapidly:
Tags and categories
Better support for pages as well as diary style posts.
The WordPress MU system got merged back into core WordPress.
Over the last couple of year WordPress has developed pretty rapidly with a new point release every three to six months. They’ve continued to release some significant features and that’s what we’ve been able to use at Edge Hill.
WordPress.com: hosted version of WordPress operated by the main project sponsor of WordPress.org, Automattic. Free blogging service based on WordPress Multi Site with somewhat limited functionality - can’t install your own plugins/themes.WordPress.org: this is the open source project website. Download the software and install on your own server with PHP and MySQL
WordPress MU: originally a branch of WordPress.org designed to allow multiple blogs to run from one site/database. Since 3.0 WordPress allows you to “Create a Network” with it’s multisite feature.
WordPress MU: originally a branch of WordPress.org designed to allow multiple blogs to run from one site/database. Since 3.0 WordPress allows you to “Create a Network” with it’s multisite feature.
Manyhosting providers provide “one click” installation of WordPress and some will take responsibility for keeping it up to date (but many will not)
WordPress VIP from Automattic - $3,750 per month
Edublogs: hosted multisite blogging platform for $1000 per year
Plugins build on WordPress to provide additional functionality not part of the core WordPress software. Plugins are typically listed in the WordPress plugin directory but you can create and install your own manually. In a multisite install of WordPress the “super admin” can choose which plugins to allow site administrators to install and may choose some to be installed across all sites. WordPress will check to see if updates are available to plugins and prompt to install the latest version.
Themes allow the appearance of WordPress sites to be changed using a combination of HTML, CSS and PHP. At its most basic, a theme will provide headers, footers and the content block for pages and the CSS that styles them but can be expanded to provide custom templates and vary what shows between pages. Themes can be extended by child themes allowing you to override only those parts of the theme you need to and not have changes overridden by changes to the parent theme.
Widgets are WordPress’ way of dropping content into different parts of the site. Widget areas or sidebars are defined by the theme and the widgets themselves are defined by WordPress, plugins or themes.
We’ve been using WordPress for quite a long time at Edge Hill. Our first steps into hosting blogs were in individual WordPress blogs sometime in 2006. We started out with a handful of separate WordPress installations but quickly realised we needed something better.
We’ve been using WordPress for quite a long time at Edge Hill. Our first steps into hosting blogs were in individual WordPress blogs sometime in 2006. We started out with a handful of separate WordPress installations but quickly realised we needed something better.
In early 2007 we launched a full scale production WordPress MU service - a single copy of WordPress that’s able to host multiple blogs.
This was followed quickly by Edge Hill’s Hi applicant website which blended information for prospective students with WordPress MU blogs and bbPress forums.
We’ve also used WordPress for several standalone websites - typically organisations where Edge Hill supplies administrative support including web hosting.
During that time our main corporate website made use of a blend of technologies. Core systems were built with Symfony, a web application framework which allowed us to manage structured content without adopting a full scale content management system. Other pages made use of Dreamweaver templates but to the user the whole site looked the same. Edge Hill hasn’t faced the problem of fragmented websites that other institutions face for quite a long time.By late 2010 departments were relying on their websites more and more and the relatively centralised website management model - where the web services team actioned many of the updates - began to be seen as a barrier to getting things online. This coincided with a subtle shift in the positioning of the University to make it’s brand reflect its 125 year history over its relatively new University status.
By late 2010 departments were relying on their websites more and more and the relatively centralised website management model - where the web services team actioned many of the updates - began to be seen as a barrier to getting things online. This coincided with a subtle shift in the positioning of the University to make it’s brand reflect its 125 year history over its relatively new University status.
Several strands of work we rolled into the OMAC Project. Officially OMAC stands for Online Marketing and Communications but it’s probably a backronym to fulfill our Director of Corporate Communications lifelong ambition to name a project after a comic book series.
Several strands of work we rolled into the OMAC Project. Officially OMAC stands for Online Marketing and Communications but it’s probably a backronym to fulfill our Director of Corporate Communications lifelong ambition to name a project after a comic book series.
The basic brief was to give academic departments more control over their content. I’ve not been shy about my dislike of content management systems over the years so this provided something of a challenge to us - how to balance the control and structure of a tightly managed site with the limitations that are universally present in CMS. We needed something that fitted in with our existing site and with our skills.
The basic brief was to give academic departments more control over their content. I’ve not been shy about my dislike of content management systems over the years so this provided something of a challenge to us - how to balance the control and structure of a tightly managed site with the limitations that are universally present in CMS. We needed something that fitted in with our existing site and with our skills.
So how did we settle on WordPress?
Open Source - no vendor lock-in - WordPress started as a fork and if Automattic take their toys home the community could fork it again. Even the vast majority of plugins and themes are open source.
Active community including local SWIG user group sponsored by WordPress implementers Interconnect/IT
Content inventories: identify what content ROT and help determine what to migrate into the new sites. Focus on calls to action on each page.
WordPress training: initially group sessions which worked for some but not others. We now almost exclusively train one-to-one or in very small groups with real content.
WordPress documentation: Interconnect/IT provide a WordPress user guide which we purchased to customise. For the first couple of versions we edited out irrelevant sections but we now give out the full guide.
In some ways the OMAC project confirmed many of the things I dislike about content management systemsNo silver bulletGetting ownership is hardTraining needs to be done on the job - editing hello world pages on the Department of Magic doesn’t workDepartments have surprising priorities - almost every meeting I’ve had involved lengthy discussions about staff profiles but virtually no effort put into information about courses.There’s still a need for training in writing for the web and not just in using the system but there appears to be a limited appetite for this.
It took about nine months to migrate 90% of academic sites and another nine months to do the rest!
It took about nine months to migrate 90% of academic sites and another nine months to do the rest!
It took about nine months to migrate 90% of academic sites and another nine months to do the rest!Ultimately if the departments failed to engage we would just do the work for them - WordPress provides an easier system for us to update sites so we’re able to benefit from the move even if departments don’t always.
Ultimately if the departments failed to engage we would just do the work for them - WordPress provides an easier system for us to update sites so we’re able to benefit from the move even if departments don’t always.
Since then we’ve been able to produce sites much more quickly. When the department of Natural and Geographical Sciences split in two on results day last year we were able to turn around separate sites for Biology and Geography in four hours. When requests come in for a conference website we can fire up a WordPress site and hand over access with very little ongoing support.
WordPress had proved itself a solid performer for content based sites but it wasn’t until last year that we started to test how far it could go with more advanced systems.In January 2012 we were awarded funding as part of the JISC Course Data project to build a system to manage CPD information and publish data in a way that others could reuse. Since the data is owned by Faculties and Departments we decided to use the project as a testbed for developing more complex functionality in WordPress.
Custom Post Types were added to WordPress in version 3.0 and have become the easiest way to manage different types of information and for the Edge Hill Course Data project we implemented Course and Presentation custom post types that mapped to the XCRI-CAP schema.
Custom Post Types were added to WordPress in version 3.0 and have become the easiest way to manage different types of information and for the Edge Hill Course Data project we implemented Course and Presentation custom post types that mapped to the XCRI-CAP schema.
Custom Post Types were added to WordPress in version 3.0 and have become the easiest way to manage different types of information and for the Edge Hill Course Data project we implemented Course and Presentation custom post types that mapped to the XCRI-CAP schema.
/about was one of the first non-departmental websites to move to WordpressNeed to replicate some “advanced” functionality in WordpressIf we can create these features in Wordpress we can increase flexibility for users, and simultaneously reduce our workloadCreating graphics as web elementsWeb fontsBannersSlides
This is a page from our original /about site.Slider which uses graphics for each slideYou can see our fancy font – Trajan ProBanners with text and images, again using Trajan ProTo edit these pages, the web team had to create new graphics all the time to keep the content relevant
The first step was to look into Web Fonts which have become better supported recently and which might help offer a solutionThis is Trajan Pro 3 from TypeKitLooks lovely but doesn’t render so well at low resolutions on PCs. Looks lovely on a tablet or smartphone though!
So, we added Trajan Pro 3 from TypeKit which we pay a license forIt’s as simple as including a javascript file and then using the font in standard CSS
So, the addition of the web font is the first step in being able to create these 2 elements on the fly, we’re going to use it in the sliders and the bannersWe wanted to replace the graphics that make up our mega-menu too but at the moment the display isn’t good enough at low font sizes
We created a “Sliders” plugin with a Custom Post Type of Slider, and a Custom Post Type of SlideHere you can see there are 2 sliders in the /about site at the moment, one for homepage, one for profile page (the page we’re looking at).Notice each slider has a “slug”
So to add a new slider you simply click Add New, then give the slider a title at the top, a “slug” at the bottom, and then you drag the slides you want from the right hand side into the left hand side of the Content area, and order them by dragging them. Then click Publish/Update.
The Slides which you were dragging around in the content area are created through the same admin menu, by clicking Slides > Add New. Here you can give each slide:a titlesome content which is the large text blocka colour for the backgroundA featured image which is the image for the right hand side of the slide
Then to add the slider to the page, we simply use a shortcode on the page we want to add it to, as shown, using the “slug” which we referred to earlier
The only other bit that happens in the background, to get the effect we want, is that we use a jQuery plugin called SlabText. This gives us the headline style justified text. We need to include the slabtext JS file, and then activate the slabtext for each slide like this, after the typekit font has been loaded.
And here we have the finished article – this slider is created using our Slider pluginHas real text for User Updates and SEO purposesHas editable imageHas editable background colourAdd/Remove/Edit slidesNext slide shows original slider for comparison
This is the original slider so you can compareNow lets talk about recreating the banner images below the Slider, how can we achieve the same user functionality as for the Sliders as easily as possibly?Only want to create new plugins where necessary – so if we can use native Wordpress functionality then that’s better – so that’s what we didHave a good look at the banner, it has:A background imageA title above itSome text on two lines in Trajan Pro
Here you can see the page in the editor as before with the slider shortcode.Below you can make out the two banner images, lets look at the top one which we can see. It’s an image with a caption…
So, we start by uploading the background image – now, here you will see that the background image is the right size and the blending of the photo has already been done. So it’s not as easy as we’d like, yet(!), because someone (we) still has to prepare the background image first…Once uploaded, we give it:a Title (this appears above the banner)Some alt text for best practiceA Caption (this is the banner text)A URLAlign it right
Now in the Advanced settings, we add a CSS class of “banner”Our code then filters the page content and looks for images with a class of banner. If it finds them then it takes the various elements we’ve defined here and re-orders them to give us the look of banner that we actually want. Without the CSS class, it’s just an image with a caption.
So that’s how easily we can create the banners. The beauty is that, although the background images require creation, the text can be edited. So for example, we have these banners that say “Visit Our Next Open Day on 14th July” which can be edited by Student Recruitment, we don’t have to keep creating new banners.Next slide shows the original page
This is the original page on our symfony site with all graphics
And this is the page we created using our wordpress features which can be easily edited
Just move to next slide
WordPress as a FrameworkLooked at moving more “functional” sub-sites over to wordpress with structured data like news posts, events, hence we moved /news and /eventsWent to and fro with theme vs plugins – where to put styles and functionality???Settled on common edgehill2012 child themeof TwentyTwelveWordpress themeCustom ehu- plugins for events and news sitesOverlapping development with consistent structure, naming conventions etc.
Responsive design built on WordPress Twenty Twelve (Mike to talk about more later)Wanted to move to a “Story” model (stolen from itv.com/news)Custom Post Type (story)Link posts to Stories (if desired)Extensive use of Sidebars (Widget areas) and WidgetsTalk about when we look at /events
This is a Story pageHas a short intro at the top which gets updated as the story develops. The story also has a featured imageAs the story develops, instead of modifying the post which is what we used to do, we now add new posts with new informationThis also allows us to use another WordPress feature which is Post Formats – explain Post FormatsShow different post formats (story updates)
This is how you specify a post format when creating a postNice things is you can format different post formats differently, so we make an “Aside” quite a bold design, Quote has a quotation graphic and a background colour, Image inserts the featured image full width etc.
Custom Taxonomies (departments)
Pages for department news
Feed for department site using FeedWordpress
Administration UIUse Token Input in custom meta boxes to make joining stories and posts easy
Dashbar links
Content checklistDefault behaviour of Wordpress is good, but not good enough – ie crops images but chops heads off, auto-excerpt is longer than we want etc.
WordPress as a FrameworkLooked at moving more “functional” sub-sites over to wordpress, including /news and /eventsWent to and fro with theme vs pluginsSettled on common edgehill2012 child theme of TwentyTwelveWordpress themeCustom ehu- plugins for events and news sitesOverlapping development with consistent structure, naming conventions etc.
Sharper development practices –refactoring of /news and edgehill2012Custom Post Types (event and location [hierarchical] )
Administration UIUse Token Input in custom meta boxes to add locations to events
Location page pulling through events for that location, and also child locations
Timeline JS plugin [hacked to pieces]Data feeds (iCal, json, xml)
Extensive use of Sidebars (Widget areas) and WidgetsTo allow curation of homepageFor Corporate Homepage FeedAuto-expiring option for events
Paul Boag wrote an interesting blog post about his scepticism towards SEO but that changed. One of the tools he used to SEO his site was WordPress SEO and it allows lots of things. Twiter Cards and Facebook excerpts.
Mod Rewrite for WordPress
Clone posts and pages including their hierarchy and metadata. Used in conjunction with another plugin that includes the contents of one page into another it'
WordPress’ long history had meant it does some quite nasty things with databases. In particular it has a habit of storing serialised strings in various tables. Domain names and full URLs are frequently stored in the database meaning to move a site you can’t just dump the SQL and import into live database – you need to search and replace.
Works with your LDAP server – we’ve had it running on both our WordPress networks for several years hooking up to Novell eDirectory and we’ll soon be moving to Microsoft Active Directory.
DashboardInter-site content sharingExplore the limits of WordPress – eProspectus?Complex content – study at Edge Hill? Corporate Homepage? Charts and tabular data.Document management; secure content; personalised content
Don't use too many plugins - gets painful checking compatibility. And if you have multilingual needs it's not the best - we're mainly recommending it for sites that don't need to be bilingual (many of ours do, being Welsh...) as we use WPML, but it complicates the admin UI and has issues with other plugins sometimes. So for single language sites, knock yourselves out, full multilingual think carefully."Enable PHP to pull through staff profiles etc from your pre-existing databases.Categorisation make menu creation easier.“outsource your hosting. WordPress has frequent security updates, and you probably don't need the hassle!"Older staff usually need a fair bit of hands-on training and support with using the software. Whereas younger staff who are used to social media pick it up very quickly themselves.Give WordPress users a copy of your social media guidelines (eg http://www.ioe.ac.uk/about/documents/About_Policies/SMGuidelines_final.pdf )“Use Apache reverse proxy magic to have multiple independent developer development sites running under one hostname accessing one database.. If that kind of thing floats your boat.Have a schedule of what is going to be written and when or it just won;t happen - e.g. see the Web Team blog. Ooops!When using a 'coming soon' plugin ALWAYS include an admin login link
"How to get multiple wordpress sites working.How to use wordpress as a CMS.“"Pros and Cons of the platform and issues to be aware of when migrating to/switching to WordpressThe importance/relevance of mobile support for institutions“Integration of other media into Wordpress, e.g. social media.Really, really hard questions for the speakers."We'd like to adopt Wordpress.com as a website platform for research centres at our Institute, who need a microsite (ie a site sitting outside our CMS-delivered corporate website).We'd like advice on how best to support this venture. And to know if (and how) complex functionality can be added (eg password protected areas). “"Categorisation vs Page creation:Categories are a great way to organise the content from the blogroll but transferring older content from a previous site puts that content to the top chronologically.“Case studies of innovative wordpress use where there is audience engagement. Can't make the session (will be at one on open data) - but would like to see the slides or catch up at some point. Spoke briefly last year - now we're using WordPress a lot in anger...
