One Theme, One Multisite, 30+ Unique Websites – Now With Full Transcript

Simon Dickson and Simon WheatleyCode for the People, presented “One Theme, One Multisite, 30+ Unique Websites” at the recent Big Media & Enterprise Meetup in New York City. We’ve shared this post previously, but we’re publishing it again now with full transcript below.

 

Okay, so I’m Simon Wheatley, my partner Simon Dickson is just over there and we’re from a company called Code For The People.

We’re one of the VIP partners and I want to talk to you today about a client who came to us, similar I guess to the Oomph guys,the Interactive One guys, just been talking about one thing, but dealing with many websites initially 30.

This is for a magazine publisher in the UK, so they wanted to move 30 of their titles initially on to this platform but they wanted one standardized theme, one standardized set of functionalities that they could use.

So our solution for them is based in a couple things that I’m going to talk about tonight one is the WordPress theme customizer and one is the way we’re handling layouts using widgets and widget areas so these solutions are things you can apply in other organization. You can have your WordPress themed cake made by my partner’s wife and you can eat it at the same time.

So you get in this way, using this customization but based on the standardized theme, you get to reduce maintenance and at the same time keep the editorial teams happy.

So I’m going to talk through three of the areas where we allow editorial control so obviously there’s colours, I’m going to talk about typography and I’m going to talk about layout.

So the first element, colour, we started off with the idea that we would have the user pick half a dozen colours and we would then do colour calculations based around on let’s find some complimentary colours let’s find some lights and dark equivalents and then we’ll be able to work out how of those six colours, we can deal with the header and the footer and the body post but that actually gradually became unwieldy.

So you get in this way, using this customization but based on the standardized theme, you get to reduce maintenance and at the same time keep the editorial teams happy.

We found ourselves adding more and more colour options to avoid a clash of dark colours appearing on dark colours or red appearing on green, that kind of thing and the solution that we arrived at eventually was that we split it into two colour palettes, so there are two colour palettes which we call palette A and palette B and then we split the page into three areas. We’ve got the header area which can have one palette assigned the body of the page which can have another palette separately applied to it and then obviously the footer which can have a completely different palette.

So there are three palettes there, with about 12 different areas and we’re just using the standard WordPress theme customizer to allow you to pick the colour for that we’re still doing a little bit of colour calculation, lightening and darkening and so on but essentially it’s the two palettes applied to different areas of the page. We don’t take the standard approach that some themes take of just injecting a whole bunch of CSS into the head. Instead, we’re using LESS with CSS Preprocessor.

Probably now looking at the fact that core have adopted SASS, we could be using SASS but at the end of the day it’s all CSS Preprocessing. It all really does the same thing, it’s taking variables from the customizer and injecting them into CSS and using that to build the final styles for the website.

It’s simpler and cleaner than shoving a load of overrides in your head. So that’s colours, let’s talk about typography. Obviously there’s a number of font services out there and we’re going to want to give 30 editorial teams a good choice of fonts for their websites.

So we’re using the Google Fonts API, there’s a wide wide variety of fonts there and we’ve built a custom control for the customizer so can pick say the open sans fonts and because we’re dealing with the API. We know that there are these variants and weights associated with that and then we can be applying a text transform so that you’ve got fully uppercased for the navigation, but you’re just capitalizing for the headers or whatever.

That’s the one customizer control, which has got three sub-controls within it we looked around and found a couple of those on the internet in the .org repository but they all seemed to be making a bit of a meal of it and we ended up making something that turned out simpler but works quite nicely.

It’s simpler and cleaner than shoving a load of overrides in your head.

What you’ll see we haven’t got there is a font size for each individual element. We’re not setting a font size for the heading and then font-size for the subheading. Instead, we’re setting a base font size and then we’re using multipliers up from that. So maybe 16 pixels or something and then the heading is 1.5x that and the meta is 1x that or whatever.

So let’s talk about layout. We started out with layout with some very grandiose ideas that you might recognize from other themes and options that you’ve got out there. We were going to allow the user to draw areas on the screen and we we’re going to then use those as widget areas and drop stuff into those and then we we’re going to magically work out how we calculated the break points so that you could you know have tablet portrait, tablet landscape.

Eventually we took a step back from that and realized we could accomplish pretty much the same thing but in a much much simpler way.

Eventually we took a step back from that and realized we could accomplish pretty much the same thing but in a much much simpler way. So if we look at the primary content area on the left there, we’ve got a grid of widget areas so we’ve got a widget area at the top spanning then we’ve got the two-column side by side and then we repeat the same again. But of course with the widget area in WordPress you don’t need to put widgets in it.

So if you wanted to have just a single column of news in the primary content area then you just put widgets in the double span that comes second in there. Or, if you want a two-column layout, then you can just use the top two. Every so often in the year, when you’ve got a promotional item, you can be putting that in your double span above those to columns, so it gives it a lot of flexibility.

Because it’s a known quantity, it means that we can scale down to the various breakpoints and we know exactly what we’re doing and we’ve got a really nice responsive website and that comes out really really well when you start actually putting content in it this website, the fields, they started building that yesterday at 11 o’clock in the morning and by 3 o’clock in the afternoon, they had a site, fully migrated, fully customized with all the old content in it from the old custom content management system and up and running, so it comes up through the breakpoints.

Nice shotgun advert there for the shooting season coming up.

And then the desktop, full desktop width…so let’s, just taking a look at this page, we’ve got one widget that’s controlling a lot of this stuff. So if you look at the news sequence of posts and the food and drink sequence of posts, they’re using the same widget, and that’s something that we call the post query widget which is essentially a wp query builder for those you who know what I mean by that.

It’s putting together a series of parameters by which you’re going to reach into the database, grab the post that you want and get to display them on the page so you can choose the post type that you want to display in the particular widget that you’re editing at the moment. You can filter it down by the taxonomies and then you can go to actually start displaying that.

We do that by breaking the sequence of posts up into sections, so section one here has just got one post in it, it’s a list with a large image. Section two, you’ve got two posts, smaller images, and we’ll show the author and we’ll show the date there. Then section three is just a text bulleted list without any additional detail in there.

What that comes up as is something like that so it gives you really quite a flexible display of how you’re going to pull the posts in and then how you’re going to actually show them on the screen and you could have all large images or all bullet points, pretty much anything you want

We don’t limit the number of sections there so another thing I wanted to mention was category archives so again, we’ve got a customizer control in there so select your category and then choose similar again to the way that we’re dealing with the query widget so similar, we look at the style that you want that in, maybe this category you’ve got some really nice images, maybe the review images you’ve got are great and you want to highlight that

So you’ve got the ability to customize the display on the category there, so I’ve whistle stopped through this we talked a little bit about colours, so we’re using the colour API a little bit of calculation, we’re using LESS in CSS Preprocessing there talked about typography, so we’ve used the Google Fonts API to allow you to choose a font we know from the Google Fonts API, what the variants are, so we can pick that and we can give you a transform, we’ve got the base font size we talked about layout, we talked about the post query widget and about the custom layouts for categories so has anybody got any questions?

Q: Are you guys supporting live previewing in addition to the standard customizer stuff?

A: Yeah, absolutely, so all of this stuff, I mean if you’re not familiar with the customizer, one of the great things about it is nothing is live until you click the save and publish so all of this customization is happening just for you personally so even with the LESS Preprocessing, that’s being piped off into a separate stylesheet which is only being served to the editor that’s actually doing the customization at the moment

Q: ( […] )

A: Yeah, we’re working with posts, obviously the built in post type which they’re using for articles, we’ve got a custom post type for events and for reviews as well so the post query widget that I showed you, you can say I want to see just reviews here or just events here and it will allow you to display those

Q: ([…])

A: Some of the titles that we’re dealing with are relatively low staffed So I don’t think that kind of title would be necessarily looking at clicks we have got an evolution of the post query widget which looks at Google Analytics and uses the Google Analytics API to evaluate what’s popular in a particular category so you can use that as the sort mechanism, but that’s not something that’s live on the site at the moment

Q: ([…])

A: Yeah, so the widget areas that are there for the, where are we, let’s skip back through yeah the widget areas that are here are exactly the same widget areas, they’re just, they cascade through with the different break points and we move them around so this is the full desktop width but if you can quickly scan you can see that the same widget areas are just linearizing basically as you move down through the sizes so it’s exactly the same stuff ([…]) absolutely yeah responsive break points any more for any more

Q: ([…])

A: At the moment, pre-3.9 the disadvantage is anything you do to a widget is live on the site immediately, post 3.9 widgets move into the customizer so we’re able then to choose the widget layout and mess around in the same way exactly the same was as I said for the rest of the customizer, you can change your colours, change your fonts it’s not live until you click save and publish so 3.9 is going to herald a grand new dawn in terms of that being able to get right before it’s live

Q: ([…])

A: The brief for the widgets was that it wasn’t so much of a manual curation process, so if we needed to manually curate this particular post into position in this particular area of the homepage

I guess you could get around that by hacking with tags, but it wasn’t a core part of the brief that we were able to do that, so using something like zoninator where you can precisely choose which post to go and in which order they appear in wasn’t a requirement we could develop a different widget that did something like that I think we would probably still stick with widgets we’re also looking at doing some work to customize

so you can take the homepage layout and then for a particular purpose maybe for a sponsorship section have all of the sidebars completely custom for that but hidden from normal view so It’s only when you’re editing that page that you go in and those side bars are only live when you’re editing that page, that set of sidebars so you don’t end up with this situation wherein the WordPress admin area, the widget section you’re looking at all the sidebars and there’s like 300 sidebars which one am I adding the widgets in and which one am I not we’re able to actually filter which sidebars are being shown for a particular purpose

Q: ([…])

A: Yeah exactly that principle yeah.

Q: ([…])

A: Yeah, so like I say, some of these are fairly low staffed publications so the key for them is probably that they’ll set something up and then they won’t touch it for a little while we’re using a plugin which is available on the .org repository called the customizer settings revisions which allows you to save what you’ve created so you might go like “okay, this is the Christmas layout” with all the pretty snowflakes and the lovely snowy red design and then you can pop back to that when Christmas comes around again or when Easter comes around or whatever you want to do thematically so we’re using that plugin for that purpose

Q: ([…])

A: So the ads are outside of the widget areas, they’re placed at various points in the page that we know how to deal with for again, for the responsive break points are we concerned about the responsive kind of nature of it and so on, yeah so we have, we haven’t got the ability to do the thing that really you only do to show your boss that the site’s responsive which is you know, move the site edges in and out and change the width of the page, the adverts won’t change at that point because they only change on page load, it will look at the width and then ascertain what ads you need and then load them at that point does that answer the question?

Cool. Thank you.

 

See the presentations from previous Big Media & Enterprise WordPress Meetups. For Big Media & Enterprise WordPress Meetup groups in other cities, see the full list on VIP Events and join your local group. 

Want more information about WordPress services for media or enterprise sites? Get in touch.

2 thoughts on “One Theme, One Multisite, 30+ Unique Websites – Now With Full Transcript

    1. @Leo – I don’t believe the theme is being released to the public, the intention of this talk is to illustrate / explain how & why to use a single theme to power multiple websites.

Comments are closed.

Ready to get started?

Tell us about your needs

Let us lead the way. We’ll help you select a top tier development partner. We’ll train your developers, operations, infrastructure, and editorial teams. We’ll coarchitect your deployment processes. We will provide live support for peak events. We’ll help your people avoid dark alleys and blind corners, and reduce wasted cycles.

%d bloggers like this: