Transcription

ANT MILLER: It’s Saturday, it’s 5.10, no it’s not Crackerjack, it’s your final session of track A! Well done you’re nearly through, that was almost an entire day of WordCamp London you have managed to get through today hasn’t it been fantastic? I think so yes. Right now to put a cherry on the cake to cap it off on a grand final, we have Jonny Allbut and his wonder panel to explain to you in intricacy, the wonders that are making custom themes. Jonny, take it away.

JONNY ALLBUT: Thank you for that amazing introduction, I hope I live up to expectations. So, welcome to the last presentation of the day, and what an awesome conference it been. I have got a huge list of R&D, and that’s without even starting tomorrow, so yeah so just as a brief introduction my name is Jonny Allbut I am director of digital at a company called Wider I have been working with WordPress since 2005 and built my first custom theme in 2006. I will be hosting this discussion today we have this wonder range of panellists, we all approach theme building in slightly different ways, that’s why we have such a wonderful panel because ultimately it’s like getting four presentations in one instead of hearing me ramble about how I think you should build themes, you will have a very balanced perspective, so its probably the best value presentation you will come to today.

So, I will pass the mic now oh they have already got their own, awesome, to let the panel introduce themselves, we’re going to kick it straight off. So the one thing I am going to say hopefully we will have questions at the end, but rather than me introduce topics and then throw it out to audience, we will probably only get through about two or three things, I am sure you would prefer to hear me and the panellists ramble about our perspectives, and hopefully at the end there will be time for questions, if there’s not of course please feel free to grab us at the end and ramble to your hearts content about if you think we’re doing things, the wrong, indifferent we’ll be happy to share our opinion. Please guys if you would like to introduce yourselves.

AFZAAL: Hi my name is Afzaal I run a WordPress theme company, we develop premium WordPress themes and distribute themes to WordPress.org as well. Personally, I help out a lot with the theme review, theme shaping the guidelines getting involved in that side of things as well. Think up themes was we initially released our first theme in 2013, prior to that I had a career in finance as an actuary not related to WordPress at all.

SUE FERNANDES: My name is Sue Fernandes I am a freelance design developer from Stockport up north near Manchester, I have been working with WordPress now since 2006, and I create custom themes for small to medium size clients.

SAMI KEIJONEN: Hi everybody my name is Sami I come from Finland I am actually a teacher but at the same time a front-end developer. I build also public themes in .org and .com but also for clients, for custom themes and let’s have a good show.

ULRICH POGSON: Hi my name is Ulrich I am from Switzerland I work for a Swiss agency called Required, working on back end different things, and I have also got a theme shop wp zoowear with a friend I am selling themes. I work on the theme review team and at the moment I am working on ought mating the process of reviewing themes, and if anyone is interested in talking to me about that afterwards, they are welcome to.

JONNY ALLBUT: Awesome thank you very much. So, obviously the first burning question here is how do you build your themes? So, obviously we all come at this from a slightly different perspective, myself and Sue are somewhat similar in our approach, but you know obviously there’s a lot of different ways to do, it from scratch, starter themes, parent themes, right up to framework’s all kinds of cool things. In my part, we have our own in house theme framework which is open source it’s completely free, I won’t ramble on about it it’s awesome though. (laughter) called Wonderflux. So, all of our themes in are agency are built bespoke as child themes for our theme framework. So if I pass you over if you would like to outline how you build yours.

AFZAAL: We initially started off with underscore, we develop a custom framework from that we continually develop that framework any new theme we release is built from that framework. The good thing about that it is pretty much have all the functionality within that framework itself that you would want in any of you themes so if whether it’s a sidebar theme, a sticky header or theme that focus on WooCommerce it’s all in that framework. It’s a case of cutting the framework down to get to theme you want. We have a designer who designs all the themes just in PSD format they have a broad remit whether it will be multipurpose focusing on a specific area or a theme for a niche like a law firm then we just develop, build with the framework to meet that PSD. That’s essentially how we do it I am sure we’ll tell you more as we go on.

SUE FERNANDES: When I first started developing themes I started working in building themes from scratch which as a freelancer when you’re doing everything, it proved to be incredibly inefficient so for about the last 8 years I have been using the Genesis Framework, and over that time I have been created my own custom child theme which is now use for the, as the starting point for the majority of my clients sites. Then I now adapt and use that to create any sort of different functionality and styling that I need for that particular site, so I can create everything to be custom and bespoke.

SAMI KEIJONEN: Yeah when I started out building themes I think I built them from scratch every time, but I think at least for four years now I have been using underscores, and I have been thinking a lot or making a fork of it like most companies do already, have their own fork and Github or somewhere. I also used for example, web dev studio’s they own Fork in the Github for example, and in Finland we also have another fork from another company, called Dude, that’s really, really good. Basically myself I use also, I always underscores as my starting point. Then I also use some portions of the hybrid core if you know Justin Dadlock and his hybrid core framework it’s not a parent theme it’s kind of different, it’s kind of library stuff you can put in your theme. When I started out I was always using everything that hybrid core had, I just put it in the theme folder and started from there. But nowadays, I just take the best parts what fits into that project. So for me it’s underscores and the best part of the hybrid core framework.

ULRICH POGSON: So at work at Required we use underscores for client site, just using that an working on just adding the stuff that we need for. For my theme shop that I have we use underscores also as the base, but what we started trying to do using Grunt to create the lite version of the theme then the pro version also so we end up having just one repo, and then when we want to generate the lite version to upload to WordPress.org we run a Grunt task which removes some of the files that are not needed which are premium code in them, and create a zip file that we can just up WordPress.org.

JONNY ALLBUT: I think you can see all of us have got quite a few years of building themes, my takeaway from everything we have said here is that although we may approach it in slightly different ways, ultimately, we are starting with a common set of functionality in some form or another. I think the deeper you move into bespoke theme development, especially client based work you are been paid for, not personal projects, personally I think it becomes more of a combination of working smartly and efficiently, and quickly to basically execute your projects in the smallest amount of time and the best way you can, but also quite an important aspect and I think you know you have picked this up from what the guys have said here that there is a level of consistency amongst your projects so, consistency is a good thing because when you revisit that project 6, 12, 18 months later have a got to do those a mends if you’re working in a team or even individually, having consistency in your code just allows you to jump on that project and then next to no time you know where you are and you know where your bits and pieces are and you can just get to work on it so that’s my take away from what’s been talked about there it’s consistency and starting off with some common functionality, rather than blank line, line one off we go Monday morning.

Ok let’s move on to talking about CSS. So my question to you guys is how do you deal with your core CSS layout? So, when I talk about that, you will obviously was of you will be familiar with things like Bootstrap, that kind of thing, which in some ways could be called a framework in itself. So, my question to you guys next is do you use a pre-existing framework do you have your own, do you code it bespoke every time, how do you guys do it? Tell us.

AFZAAL: So, we actually have a bespoke framework and we don’t use Bootstrap or anything like that for the grid layout because, well when you look at the responsive layout the theme is easier to control it that way when have a custom plugins like a page builder or custom short codes is easier to have at grid layout completely under your control. If you work on Bootstrap and they release an update it’s not necessarily going to be the case that it’s going to be compatible across your plugins, your short codes and everything else in the theme so just find it a bit easier from a management perspective to keep that complete in-house. It’s a bit more work to build up that layout initially, but it’s one of the more simpler things if you are going to run a theme company, it’s something which is easier to keep in-house.

JONNY ALLBUT: Once again consistency, really.

AFZAAL: Exactly especially as you are releasing more and more themes, that flows through all themes.

SUE FERNANDES: Working with Genesis also gives you that base framework so Genesis has a really good structure, in its core layout and also gives you it’s core CSS included with the theme framework. The beauty of Genesis is that using hooks and filters an function you can move that layout round as you wish to create your custom code then overlay that with custom CSS to make it look complete bespoke. Whereas in actual fact the underpinning of the site is the same in every case. What that gives you is a really robust site that’s built on a very strong structure, without you having to worry about rewriting the lay outs fret time you start a new project

SAMI KEIJONEN: I basically never use any CSS frameworks they are more or less in my way and give me headaches more than they help me. Kind of my rule, kind if you are starting out with the CSS you should definitely learn it first without any frameworks, then you know the CSS then you probably can use any frameworks if you want, but you really need to know what they are doing and what, where it’s going to lead you. So, I don’t actually use any frameworks, but I might have some kind of grid systems, because, you know, the layouts could be crazy or something different, but I kind of… I don’t have kind of bespoke, in that sense, because that’s more of the really easy thing to do in my project, any ways. So I kind of, kind of start from scratch in that sense.

ULRICH POGSON: I don’t really work much with CSS, I leave the answers for everyone else.

JONNY ALLBUT: No problem. So, yeah, there is obviously some different approaches here, the key theme here, again, consistency and development.

We have our own CSS layout framework called flex layout that’s built into our framework, it’s less than 3k minified, hyper efficient, any number of columns, that’s Open Source too on Github, by the way — little plug.

I think a really important point got pulled up here about learning covers with anything when you start talking about pre-existing frameworks, tools, whatever it may be, jQuery, whatever it may be, there is always a learning curve and I think the challenge to a lot of theme developers is deciding if it’s worth investing the time to save the time in the future, so you invest the time, learn the system and get the most out of it, or you just run around every time. You know, I think it’s a matter of opinion, but again, consistency is key I think in development, speed that up and ultimately if you are working in teams as well, using consistent naming in your CSS will save the sanity of you and your friends and your family. [Laughter]. Okay.

So, keeping on with CSS, a real hot topic is pre-processors, versus vanilla CSS, when I talk about pre-processes, I’m talking about Sass, that kind of stuff that basically allow you to do clever, efficient things with CSS, but I think for my five pence worth on it, it comes to the learning curve thing, Sass is awesome, it’s got a really cool name, who doesn’t want Sass, CSS for God’s sake. At the same time it can be used for a lot of different ways.

Let’s hear from the panellists, the question to be clear is, do you just go to CSS vanilla or use pre-processors.

AFZAAL: We don’t use pre-processors at all, just CSS vanilla that way, when you are doing it that way you do need to do more testing, we do a lot of the unit tests on the dot [Laughter] Organise website, I wouldn’t release a theme until I’m truly happy any way, I’m not the biggest fan of short cuts any way, that’s my personal preference, you probably save a little bit of time on development, but it’s not time that I find so valuable that I need to save it we cover it in testing any way.

JONNY ALLBUT: Sure.

SUE FERNANDES: I use SaSS and I also use [Inaudible] for the library, as a freelancer again it goes back to efficiency, I need to produce my code in the highest quality and most efficient and time-sensitive way. Sass saves me a huge amount of time on every single project, I really find it very intuitive to use, it means I can put everything I need in the same place, rather than searching I’ve and down a 5,000-line stylesheet for hours and hours on end.

SAMI KEIJONEN: In the last question already I love pure vanilla CSS, if it’s a simple project, for example, for a public theme I’m definitely going with the vanilla CSS, it’s kind of what it is and pure HTML and CSS is the first thing that you learn any ways. Of course, with custom themes or more complex themes, I use Sass also, it has maintained the project so much easily and saves time. Yep.

JONNY ALLBUT: No CSS.

ULRICH POGSON: No!!

JONNY ALLBUT: Got it check!! [Laughter].

Okay, so the take away from here is an interesting one, it kind of touches upon some of the, some of the points from last outcome, which was really about working smart and deciding if you should dedicate the time to learning the framework. But a good point was made here, twice I have to say, so it must be a particularly good point, in that a decision must be made about investment in time, but also let’s not forget that at the end of the day, regardless of whether you are using Sass, if you are new to creating CSS, please, please, please, learn CSS first. You will actually too yourself quite a disservice by learning a framework or CSS or Sass, or something, all of these kind of cool things that can give you hyper efficiency in due time, once you have got past the learning curve, ultimately if you don’t understand the core, fundamental aspect you are doing yourself a disservice, you will come across a problem, probably about half past two in the morning and suddenly you can’t fix it. So, I think, a real important point here is to make sure that you learn the underlying technologies before moving on to the fancy stuff, in a nutshell.

Okay, that’s quite interesting. Sue, just before we move on, I’m going to put you on the spot here, little bit, but I am not going to be mean, I promise, I would just be really, really interested because we ourselves just, I hate to say it we’re not sassy, we’re old school, we just like vanilla CSS the team that we work in, one or two developers want to work on Sass, I’m not exactly an expert in it, the decision was made that it would be really difficult to move our projects around our team and basically force them to learn new technologies, when in fact I would prefer them to become super ninja JavaScript experts, rather than pour weeks and weeks into learning Sass, Sue, could ask you, roughly speaking, how long did it take you to become confident with Sass.

SUE FERNANDES: About a week.

JONNY ALLBUT: The mic.

SUE FERNANDES: About a week.

JONNY ALLBUT: Quick learner!!

SUE FERNANDES: I went on-line, took some courses, watched some videos, I had a really solid understanding of CSS which is the point that you were making, that converting that CSS into Sass, wasn’t a great, great leap, if I had started with Sass it would have been a nightmare, once I got into using it and using it modularly, when you see the benefit it clicks into place.

JONNY ALLBUT: It’s a good point, for those that don’t really understand CSS pre-process, I’m going to give you an extremely simple example of how they are used: you could, for instance, have a certain colour value or measurement in your file that is common and maybe repeated ten, twenty, fifty times throughout the CSS file and using a pre-processor, would allow you to set a single variable that is then generated. So, you can change the variable once and it sort of generates itself and obviously plates it through your file if you are old school like me, you just do Search & Replace, yeah, that’s one of the cool things in a very, very simple application of why you would use a pre-processor.

Okay, so moving on, for me this is a really, really big topic. Once you get beyond basic theme building, you quickly discover the short comings of the standard editor in WordPress. If I outline a simple example, if you have got your ‘the content’, displayed and it’s inside a kind of container on your site, how then without getting the client to write lots of closing and opening dives, how would you then include something like a full width section. The next question is: how do you deploy custom layout in page sections? They essentially go beyond what the standard editor is capable of, what technology do you use?

AFZAAL: For that it’s the page builder, if you want to add full width span the whole width of the page, if you want to add a Parallax background so when you switch themes the functionality is there, it’s the easiest way the user can select specific rows, customise the text in that section, centralise the text, even change the pad in the margin all of that stuff. We looked at various different ways, short cuts for things like that, but by far the easiest was to have a pagebuilder, sometimes even having a separate template, they can have a canal template, but it won’t be the width of the whole page, page builder is by far the easiest.

JONNY ALLBUT: Just before we move on so we are clear, when you say, “Page builder”, is that something you developed in-house, is it a plugin.

AFZAAL: It was from the site origin page from 2013, there was a lot of functionality in the original version that wasn’t, just wasn’t there, eventually the functionality was added to the core version, now it’s an extension to that plugin, that has theme-specific functionality.

SUE FERNANDES: I use advance custom fields I’m a great fan of their flexible content fields, so what I normally do I’ll create a range of different layouts which are given to the — well, me mainly, because the client tends not to touch them after they have been set, but in theory the client can then move those content sections around the page to suit their own agendas and whatever they need and add and delete them on the fly, as they wish. Then I can choose what options and what variations they can include in that.

SAMI KEIJONEN: I also use custom fields but I normally use custom meta box 2, or carbon fields you probably haven’t heard that before [Inaudible] if it’s really, really simple ones then I probably create my own meta fields but if it’s more complex ones then I use the plugin, custom meta box 2.

ULRICH POGSON: So for our clients we have built plugins that have shortcodes but then adding support for short cake which allows you to have a UI so the customer if they activated a visual tab they don’t see the short code but a nice representation of the front-end, then they click the button and enter the fields, with the information, some of it can be pre-plated, you can have things they can choose or a checkbox, they can upload images, super useful, it works great.

JONNY ALLBUT: Okay, great, I’m just going to touch on what we do, love it or hate it, we use advance custom fields as well. We really like the flexible content stuff and by building out with that, in the pro version, you can then use all kinds of cool stuff, repeater fields can be used to build out things like accordions, we haven’t built one in any custom themes in 18 months now, even fancy looking home pages are perfectly modular, in fact it allows us to build out any page config, so a very fancy looking homepage, elements of that can be used on any part of the site and I think a common thing that we are hearing hear, is that we do not like to reveal the code to our clients. If we reveal code to our clients and expect them to even do what we would consider very, very simple things, personally I think it’s dangerous ground, purely for the fact that I do not feel that it provides a good end-user experience and between you me and the gate post and the panel over he you will massively reduce your support inbound inquiries if you maybe research some of the things that have been talked about here, you know there is a lot of different ways to do this, at its most base value it could be a custom page template with some custom boxes, right up to page builder, advance custom fields et cetera, it really does depend on the project and the layout the technologies you pick.

Okay, so moving on. I’m sure 95% of the themes that we all build here end up having custom post types and custom taxonomies. So, there is a couple of different ways of approaching this, there is plugins that will configure this stuff for you, that’s crazy talk, you should code it yourself, the functionality is actually pretty easy to understand.

My question to the panel next is: with that kind of functionality when you are creating your custom post type and your taxonomies, do you use a plug in I’m not going to be mean on you if you do. Do you put it straight into functions, PHP, or create your own stand-alone plugin for that site? How do you do it guys?

AFZAAL: So at the moment the customer post set functionality is in the theme, which isn’t that great if you are familiar with the WordPress theme requirements, the reason why our themes have a CPT within the theme itself, is because the CPC is across all themes, so it doesn’t make sense to release a plug-in with that, if they install a theme that doesn’t support it, then it will still be there and it won’t be styled and there is a problem. Over time, as we are developing the themes to include the CPTs, the view is we will move that to a separate plugin and the plugin itself will check if that CPT should be loaded for the theme currently active at that time, one theme is a [Inaudible] theme, that has things to do specifically for that industry which aren’t relevant to other themes, so that is easier to manage, when we need to update any of that code we just update it within the plugin directly, not needing to have to update 20 themes or whatever. So.

SUE FERNANDES: I would always put it in plugin, yeah. When I was sort of getting started developing and even now I get clients that come to me that have custom page built into a theme, then we change a theme, develop a nice new custom one built in genesis and all of that custom post data disappears and we can’t access it. As a general rule of thumb, anything that is meant to work the theme, anything that is meant to be part of the theme, stays in functions. PHP, anything that works independently goes into a custom plugin, that way if they ever decide they don’t want to use that theme anymore they won’t lose it, it might look ugly but they won’t lose the content they have got there already.

SAMI KEIJONEN: Yeah pretty much the same for me always a custom plugin for custom sites, it’s something that is going to stay thereafter the theme switches, it’s always a custom plugin.

ULRICH POGSON: Yeah same here. (laughter).

JONNY ALLBUT: Ok we’re in agreement, you can see a commonality, just finish up on that topic we also drop it into our own kind of little custom plugin that just has an array that sits all the taxonomies and post types and joins up all the relationships. The reason why we do that is sometimes when you’re in testing, it’s quite useful say if you like, hideously break your theme, you still want to actually keep the core content structure together for testing say for certain archive views and stuff like that. Our mentality is that it’s almost becomes a dependency on that specific theme that we have the plugin configures that kind of stuff, that is pretty much along the lines of what everyone is saying here. We’re going have to wind it up really soon, I have now got one minute left. There’s a certain question, we’re going to have to whip through this really quick guys otherwise we will be in trouble. But I think it’s important. I am not going to even share my opinion because there’s no time for that I think we would like to hear from the panellists, when considering accessibility, what are the key things you consider. You have got 10 seconds each.

AFZAAL: So when it comes to accessibility make sure they can get through the page just by using tabs, making sure that wherever the users highlighting at that point is clear, so maybe have a visual change in the background colour or box round, it but just making sure the tab feature is really important to get.

JONNY ALLBUT: Time is up.

SUE FERNANDES: Genesis framework comes already enabled with a huge amount of really good accessibility stuff, especially the last couple of releases, so knowing that gives me the confidence that the themes I am producing are going to be really robust in terms of accessibility. Then I just need to concentrate don’t sign side of things, in terms of colours and focus and so on.

SAMI KEIJONEN: Everything you do just keep accessibility in mind. Every step you take.

ULRICH POGSON: Underscores comes with a number of accessibility features in it, so there’s like with Genesis you just need to make sure that when you design it you choose the right colours and things like that but it’s also important to realise that the content needs to be accessible also, not sufficient just for the theme to be accessible.

JONNY ALLBUT: Absolutely. Good point made that’s is for us, we had about another 20-odd questions, which unfortunately we didn’t have time for, so unfortunately I don’t think we have got time for questions either. So, please do feel free to catch anyone of us either at the social tonight, or tomorrow indeed. We would love to share our opinions on theme building and thank you very much. (applause).

ANT MILLER: Do you want 5 minutes for questions? There’s a slight miscommunication, yeah 5 minutes. I will hold this I will do running from the floor you got the things up there ok. Oh, there’s a mic runner, we have got another one there your first question is coming in. You watch that one, here we go.

FROM THE FLOOR: Hello, first of all great panel, and I have one question to ask you. It’s about the amount of code you reuse in your composer elements, visual composer, page builder or custom, do you have some base templates that you use and then apply design elements to those, or do you most of the time build bespoke elements.

JONNY ALLBUT: Anyone feel like answer that.

AFZAAL: Each theme would have its own custom styling so if you are looking at page builder modules where there’s modules are available across all themes you would still want something in the theme that fits with the design layout of that particular theme. So that’s not always the case, there’s a lot of short codes where there is no styling needed at all like video short codes things like that, and it’s difficult to style like a tab short code and a toggle short code but you would try to have some sort level of consistency throughout the themes.

FROM THE FLOOR: Ok thank you.

ANT MILLER: Anyone else have any points?

JONNY ALLBUT: Next question then please.

ANT MILLER: We have got one over here.

FROM THE FLOOR: Hi. My microphone wasn’t as loud as his, I just shout at everybody. So I think all of you mentioned building themes based from frameworks or other themes making child themes, how do you feel about building themes from scratch, because a lot of the themes have a lot of functionality built into them that you might not necessarily need in the themes for your clients, how would you handle maybe a really elaborate theme build and the framework that you use for example, only provides a small percentage of that rather than doing most of it for you, would you build that from scratch or would you carry on with the theme work.

JONNY ALLBUT: Ok well I am just going to give you my 5p worth and pass it down. It’s a kind of tricky question to answer in some ways, because we have kind of got a couple of guys here that actually will use a starter theme to build on, which I would imagine I mean if you look at underscores is basically has no visual design in it. It just has kind of core layout, and there is really hardly any CSS in it, and I presume the same goes for Genesis as well. Certainly, our framework from base install, has a part from the responsive stuff and the grid layout it has no visual aspects. So, from our point of view the way we approach it we are able to create literally anything visually, we’re not limited in anyway shape or form. I am going to pass it on down the line to get some other opinions on this, but for us if you’re framework if you have to override 10,000 lines of CSS that’s a waste of time, highly inefficient.

AFZAAL: When you develop a custom framework even if it starts off with underscore by the time you finish your framework it will have no resemblance to underscore S anyway. In terms of building advance functionality you can do that via hooks, add custom action, filters put all your function in separate file hook it in. That’s probably the easiest way to make sure have a really simple template structure and keep all your complex stuff in separate files.

SUE FERNANDES: Exactly, anything, speaking from a business point of view you need to have something that is going to give you a head start. If you start to think about coding everything from scratch, then the amount of time is just going to eat into your profit margins and especially when you’re a small business it will take your bankrupt very, very quickly so anything you can do to get ahead, make your time work more efficiently for you which means having a structured base theme that is a vanilla, if you like, theme, which you can then build your CSS over the top and add any style and functionality that you want to and means you are always starting from halfway up the track, you’re not starting from the bottom every single time. That can be the difference between profit and loss on a project.

SAMI KEIJONEN: Just one comment I am with Jonny here what he said, but before if you are just starting out, then please do build stuff from scratch, learn from the bottom up, that’s my main point.

ANT MILLER: I think that’s your lot. Thank you very much indeed Jonny, thank you to our panel. (applause) thank you to Jo I in the corner on the desk, thank you Jonny, great works on the microphones. Thank you to our wonder stenographer, transcription crew for their awesome, awesome work. You can put your Twitter link up there again, this just the most awesome thing it’s like having a sort of little mental cache of the moment running through as we run along.

That’s it for Track A, that’s it for the session of the first day of WordCamp London, of course we have the social. 7.30 here for dinner, but the bar opens sooner downstairs. Enjoy it see you tomorrow!