 Okay, while they're getting the presentation up, I can start just by introducing myself. My name is Stephen. I'm from a country at the bottom of Africa called South Africa, from a city called Cape Town. And just before coming to India, I was at WordCamp Cape Town. And so I bring greetings from Cape Town, from WordCamp Cape Town. It's wonderful to be here because I arrive in India and I can immediately meet people that are part of the same community as I belong to in Cape Town. And I think there's amazing connections like this across the world. So it's very good to be here. And thank you for having me. The second thing I want to say is that I'm aware that I'm here with a different accent. And although everyone speaks English, I know that I struggle to understand when you speak. So you're probably struggling a little bit to understand how I speak. I'm going to talk slowly. But if you can't make out what I'm saying, please get my attention. I will stop. I will repeat. I'll find different words. And we can work like that. Okay, we're up. Fantastic. So this topic of a theme-less WordPress, I think, follows on beautifully from Radhika's talk. Did I say that right, Radhika? There's sometimes a little bit of confusion. People say, I need a website and I'm looking for a website designer, website developer. And we've heard from the previous talk that there's actually a huge section that comes before building the website that's important. And even between what is a designer and what is a developer, there's a big range. Designers are creative. And developers are also creative, but they're creative with technology. It's a slightly different kind of creativity. And somewhere in the middle, there's this thing that's starting to be called an implementer. They're not necessarily the designer. They're not necessarily the developer, but they're building. They're making websites. And so my talk today is a little bit talking to that space. And my interest in this is how is it made easier for those people that do not have the technical skills, that can't go into code, that haven't learned how to do CSS and HTML and that kind of thing. And to be able to use the power of WordPress to do amazing things without being overly reliant on the technology. So to put power back into their hands. And at the same time, what happens then is that design element gets to spill over into WordPress as well. And they get more empowered. And we'll talk a bit about that just now. So what is a page builder? I'm sure most of you have heard the concept of a page builder. Just a little bit of history there. We've got a new editor now called the block editor. But prior to that, we had this editor that was very much like working in Microsoft Word or some other kind of platform for documents. Which is fantastic. A content management system. Here it is. You can build a website. You can hand it over to the client. And they've got this editor that allows them to create content. And that's amazing. Except it wasn't that amazing because I had clients coming back going, I don't know how to do this. I want to create this kind of structure and I can't do it in this editor. And I think a lot of people were experiencing that. And that really was I think the birth of page builders was how do we create an editing experience for users that gives them a little bit more power. And then we come across this thing that I don't know if it's a term that's out there. I've come across a little bit first generation versus second-generated page builders. Now the first generation answering that question, we're very much still in the back end and very much about blocks. Like we take a row. It looks like a table. And we've got this block on the left, which we're going to do something with. And we've got that block on the right. And you could build up a page like that. But again, from a user point of view, wasn't very intuitive. And the clients that I was working with were coming to me going, I want to look at my website. I want to see how it looks on the front end. And I want to be able to edit it there. I want to be able to click on that thing and be able to change it immediately. I don't want to go into a back end administrative thing, which for non-technical people can be a little bit intimidating. I want to do it in a place that feels familiar, my website, the way I see it and the way my customers, my visitors see it. And that for me is the biggest distinction between first and second generation. The second generation went and took it into the front end, made it visible using the concept of what you see is what you get, a WYSIWYG. And at the end of the day, both of them, they're really creating a visual layer on top of what is the basics of a website, which is fundamentally HTML being the structure and CSS, which is the visual design aspect. And it gives you the capability to be able to build websites without necessarily knowing HTML and CSS. So where's the state of the theme? And we had a question that I felt addressed a little bit. Themes are fantastic. Themes really allowed the non-technical person to take WordPress and create their website and feel powerful in doing so. And themes give a lot of options. And it's been, I think it's been a, certainly it was the reason why I came to WordPress was the power of the themes. And I think it's what's made WordPress what it is today in terms of its incredible usage across the web, powering so many websites. And it's a huge number these days. But there's a problem for me. And it's not strictly a problem with themes. But when a client comes to me and they say, they say, I've got an existing website, but something's not working and I need you to help me. I go, oh no. I wonder what theme they've used this time. Because every theme is so completely different. And when I look at it, I don't know how that theme's implemented something versus that theme versus that theme. And for me as a developer, that's very problematic. So what you'll see with some people who build websites is they'll stick to a theme. They'll say, I want to use that theme only because that's a theme that I know that's familiar. And all of a sudden WordPress is not so familiar anymore. It's quite different from website to website. And that's a concern for me because if you're learning WordPress and you want to be able to build websites in WordPress and make a living from it potentially, it's really nice if you can find consistency between the different websites. And unfortunately with themes there isn't that consistency. So this is what I find myself doing is I started not using themes at all. Of course you need a theme in WordPress. You've got to start with something. And I was choosing themes that did less. Sometimes you hear the concept of a bloated theme that's just got so much functionality in and it's no longer just about being the visual layer but also about the functional layer all being compressed into one thing. And from my background I was always taught keep the two things a little bit separate. Separation of concerns I think is the official term. And themes became everything and very, very bloated and very heavy and they potentially slow your website down. And this is not all themes. I'm not knocking themes. But for my purposes I started to find what is the simplest, most basic, streamlined, fastest theme there is. And there are themes out there that address that that sell themselves as being minimal themes, minimalistic, basic. I think the one example that most people will be familiar with is underscores. Which is I think from WordPress itself. As a starting point. And then you can build up from that. Because you don't want to, as the question earlier came to you, you don't want to be dictated to by the theme. You want to have the power to build what is the requirement in terms of what your clients or your visitors are needing and what you're wanting to achieve with your website. Which brings me to theme builders. So as I started working with these minimal themes and page builders which gave amazing functionality for having control over what you were doing within your content area, I started asking the question of well why can't I do that in the header? Why must I be limited to the theme or having to completely overwrite it? I want to use these fantastic tools that give me this front end visual capability to have complete control over my headers and my footers and less not limited to that. I want complete control over everything. And if I can find a way that starts to hand that over to non-technical people to the WordPress implementers and makers of websites then I think there's a lot more that's achievable and when I gave a similar presentation in Cape Town a couple of years back as a guy I know is a bit cheeky in the back of the audience he says are you trying to do developers out of a job and that's not the case whatsoever but if we can pass on a lot to the implementers then the developers get to do the more technically challenging stuff which is generally the more interesting and exciting stuff for developers. So it's not to do developers out of a job it's just empowering people so we can achieve more. Okay. These tools are available out there as plugins. I need a browser. The tools that I'm going to demonstrate here are all freely available on the WordPress plugin directory. So I'm just going to log into the back end of this here. What's happening here? Okay. So I've done a little bit already. I've got one of the minimalist themes in place and I've stripped it down as much as this particular theme will allow me to which has basically just left me with a title. By the way this is a very scary place to start for people who are not designers to start from nothing is difficult. It's a lot easier if you can start with something and go I don't like it and start to change it. The page builder that I'm using here and it's not the only one that can do this there's at least to my knowledge five page builders at the moment that are what I would term second generation in other words you can do the work in the front end seeing visually what your design is directly and that allow you to do it as a theme to take control of your headers and your footers. The one that I'm using and it's the one that I use for most websites that I do is called Elementor. It's not the only one, it's not necessarily the best it's just the one that I'm using and so it's easier for me to demonstrate with. So I've set up a few pages as well and a few posts just so that we can see this. So I'm going to go straight away into Elementor with the home page and it's nothing at the moment, completely blank. Like I said that's a little bit scary. So you don't have to start with nothing pretty much all of these page builders will come with some kind of template. It looks like we're going back to themes again but not necessarily because all of these templates whatever they look like you can change them completely within the page builder. Everything that you see the pictures, the colors, the fonts everything can be changed which gives you complete control. I'm just going to pick one so that I'm not completely starting with nothing. The first thing that I'd like to point out is while this is fantastic this is now only on the home page and the idea is that we want to be able to get the header and the footer onto all pages. So if I go up to this header space over here that's got our logo and some social icons of course we'd like to have a menu in here as well in fact let's do that quickly. No, let's not. I'll do that later. So the first thing I'm going to do is just I'm going to right click on this and I'm going to save it as a template. So this is one of the things a theme builder is going to allow you to do is to create let's call them modules or templates that can be reused again and again and again. Call it header in fact I'm going to add default here naming becomes quite important when you've got lots of templates. So let's say the first theme builder 101 would be something like this you go and create it as a template and I've said that these theme builders allow you to reuse templates in other places in your website so we could now go to the about page and start creating that in Elementor and then bring in the header because we've got it as a template. The thing is though that I don't want to just import the template and then the client comes to me and says actually we've redesigned our logo can you please change it I don't want to go to every single page and have to change the logo I want to be able to change it in one place where the template is and have that logo now change completely across the entire site so in order to do that I'm going to remove this again a little bit scary when we just take things out but I'm going to add it back in in a slightly different way okay so first problem here is that when I save this as template Elementor hasn't picked that up so I'm going to update this and refresh it so that we can see the template there and I'm just going to keep a check on the time did we refresh okay F5 doesn't work on this and that does not look good oh dear so I'm going to just pop out of here quickly and I just want to check I can't template, template okay I'm not too sure why I did that but now that I've selected the template you can see the it's not actually showing the logo yet that's a fun issue but it's brought it back in so what I want to do now is update that and we're going to go out of here into another page and save the about page okay we don't see it yet okay it's not there so this is the 101 version which is not the ideal version but I'm going to show it to you just so that you've got an idea is I'm going to add a new section and this talk is not about how to use Elementor so I'm not explaining the details here we're going to find that template widget again display template into there pick it up default header okay and there it is it's not quite in the right position and that's fine for now because we're going to do this slightly different this is the 101 version is that we're going to every page and we're bringing that template now it achieves one of my goals in that it's the same template being reused again and again and again so if I go and change something in that template it's going to reflect everywhere okay but the problem is is that I still have to go into every page and add it which is not great and this is where the theme builders start to shine a little bit so what I'm going to do is I'm going to delete it again update that and I'm going to jump out of this now there's a few plugins that provide this capability now Elementor you've got a pro version the pro version will give you all of this I'm not using the pro version here because I wanted to show something that was accessible to people to as many people as possible so not everyone has the pro version and there's a plugin that I found called htmega and it's just one of a few there's others that do this as well that have page builder capabilities so I can go here and this is just one way of doing doing theme building is that you can go into something like this and say I want to use the header template that I've saved across the whole site save changes now I really want the menu in place now so I'm going to go into my Elementor templates I'm going to edit this default header where we saw the logo and I'm going to just pop a menu in there quickly okay this was a home page which had nothing before okay the reason why we're seeing it twice is because when we first created this we actually created that header in the home page and then we brought the template back in but subsequent to that we've said no we don't want to do it that way because we don't want to have to add it into every single page so we went and we told the theme builder component to rather bring the header in there and that's why it's appearing twice the theme builder is bringing it in and we brought it in so what I need to do is actually go back into my home page and delete it there we don't need it there anymore because the theme builder is bringing it in but as you can see it's there and you can see that the menu is there and if I go into my about page where the theme builder is the only thing controlling it there we'll just see it once and now I'll slip back into the correct position it's above the heading at this point you can use Elementor whatever you like with that header or the footer it's going to work exactly the same way I'm not going to demonstrate that it's the same principle but you've now got control to style and layout your header and your footer however you want have it applied across the entire site without being reliant on your theme yeah? okay and that's pretty much it it's as basic as that so we're going to go off that and we're going to finish off pretty quickly now how do I get back into the slideshow from current slide so coming up roses theme builders page builders they're not all perfect there's a couple of issues with them or certainly potential concerns the one is we don't want page builders and theme builders to become the next theme the other bloated aspect which is certainly potential I know with Elementor there's a lot of Elementor plugins you can go absolutely mad and some of those start to tie you in again to design which is not my objective I want to be free of that I want to be able to change things however I want there's another concern as well is that because you've got so much power and freedom to be able to style things in Elementor you can start tinkering with that and changing that heading and change that list over there in the way anchors control or display and then you go into a new page you start doing the same and then suddenly you've got style inconsistency across your entire website and again when your client comes to you and says actually we've done some work on our branding and we've changed our font and the color very slightly and you now need to implement that across your whole website you don't want to have to go into every single page and find out where you've now done custom styling so ideally what you want and some of the pages will do this and some of them don't and this is a useful thing to just check when you're researching it is you want to be able to style things across the entire site in one go now this is potentially one area where the themes still play a role and I did come across just the other day another plugin just want to see if I can get the name of it for you for a minute style kits so I'm still investigating this one but it looks promising it gives you the ability to create one style that gets applied across the entire site points in the right place not working I switch to the slide and talk about Gutenberg there's just a few minutes left I just want to say one of the advantages of this theme builder concept if it's working really well is because you've got this control over everything you've got the potential to do landing pages and landing pages are becoming really critical in website strategy when you've got a marketing campaign and when you combine that ability to style something completely from scratch have it independent of your theme to apply a completely unique styling across it you can have a landing page that looks completely different to your actual website and you can have as many of those as you like which is incredibly powerful so on Gutenberg this is the new block editor I like it even though I use Elementor a lot I also use Gutenberg they're not necessarily a replacement for one or the other what I find is that I use Elementor for designing my website and then I use the block editor for my content managers the people who are actually creating content they're not necessarily going to go into Elementor and need that style control so for them the block editor is fine there's no problem there however where the block editor is going is they're all supposing this question and there are people looking at this is what about blocks everywhere block editor blocks in your footer and to have the block editor has that capability to have that control across your entire website it's coming it's definitely part of the future where the block editor is at the moment in terms of first and second generation it's certainly still sitting in second generation I mean first generation but it's very rapidly I would say moving towards second generation so I just think it's going to be interesting what's going to happen in that space are there any questions?