Single Purpose Plugins – Matt Radford
Have you seen onethingwell.org? It’s a weblog of simple, useful software. I’m going to show you a selection of similar software for WordPress – simple, useful plugins that you may not have heard of. There won’t be any bulky plugins with a hundred options and vast ecosystems, just small, focussed plugins that perform one thing well.
Slides: https://mattrad.uk/slides-single-purpose-plugins-wcldn-2017-talk/
Recent I18N Improvements in WordPress Core – Pascal Birchler
Caching, timezones and internationalisation are just a few things that make developers cringe. In this short talk I will highlight some recent enhancement in the field of i18n in WordPress to show how we’ve got you covered. I will also give a glimpse at what’s coming in the future.
Slides:
SVG icon system in WordPress – Sami Keijonen
I this talk we cover:
- Why use SVG icons instead of icon fonts.
- How to create SVG icons.
- How to use SVG icons.
- Practical example of Twenty Seventeen SVG icon system. (Some of it is covered in article https://poststatus.com/contributing-to-twenty-seventeen-theme/)
Slides: https://foxland.fi/wp-content/uploads/2017/03/svg-icon-system.pdf
Video
Transcription
DAN MABY: Hello everyone, welcome back to the afternoon session, I want to start by saying a huge thank you to our sponsors these guys have done a phenomenal amount to support this event and give us the ability to be able to attend with a ticket that just costs £30, it’s incredible, I want to say a big thank you to Timpani, WooCommerce, JETPACK for their boxes, thank you to HeartInternet, SiteGround, 34sh, GoDaddy, also thank you to the dress circle and grand circle sponsors who are all downstairs and a big thank you to the balcony and patron sponsors.
On to this afternoon we have three lightning talks to start with, our first speaker has been working with WordPress for the last ten years, as a developer, specialist WordPress agency ten degrees, focusing on optimisation and site performance, giving his talk this afternoon on single purpose plugins, if you would like to give a big round of applause to Matt Radford. Please. [Applause].
MATT RADFORD: Right, sorry about that technical interlude, I know everyone has just come back from launch you don’t want to hear me droning on and on and on, I’m going to give you a quick blast of single purpose plugins.
So, what might you ask are single purpose plugins, I was inspired by blog I read ‘One Thing Well’ which gives you a regularly up-dated list of simple, focused, small, bits of software that do, as the site suggests, one thing very well. Also, inspired by Kim’s wow plugin talk of WordCamps of yesteryear, where he ran through three or four plugins, what they did and how they were useful and when to use them.
In my job, I’m always looking for the best solution, but sometimes what you need is just a quick solution, you need a solution for right now. It doesn’t have to require code. One of the, one of WordPress’ massive strengths is that it’s so extendible, anyone can install a plug-in that just makes their website do more. There are round about, I was told last night, 60,000 plugs into choose from at the moment, that’s probably too many to trawl through. This is just about a few plugins I consider well-written, well-targeted and had functionality, which I know clients have asked me for in the past and will help developers do better work.
So, this first plugin is from an experience from a recent project, we took over a site from another agency, naming no names, but they are here.
There are a ton of page templates that were used, I needed a quick way of examining which pages were using which templates, I knew that I could do that by adding some code to an admin column, but I half remembered I had come across a plug-in that would do that pretty quickly. A quick trawl through my history, I came across this one from Tim McFarlin, it was quick to install, it did what I needed perfectly, I was able to exam all the pages quickly and move on with the project, what I like to do, go through some other plugins that I found and described why they’re useful, why you might want to use them and why they might save you a bit of time.
The first one is subtitles, it’s functionality, that I’ve been asked for by clients before, they see a title, they want to add a subtitle, that’s pretty much it. Usually you have to build a custom field but it does it very nicely with a built-in UI where it sits where you would expect it to. There is your post, you edit it and the subtitle field is where you would expect it to be.
So, you save your post and refresh it and bingo, that’s a five-minute job, you have got a subtitle field, it works very well.
Another one that I recommend for clients is one of delicious brains less pricey, you can change the exert, it’s the small bit of generated text that WordPress outputs from the main body of the text, usually if you want to change that you have to go in and you know filter that, change the exert, change what comes after it, with this it’s got a very simple option screen you can change the amount of text you output, change the read more, changes the e lips, change which pages it changes it on, it’s very simple to do, it and it gives clients control which they like a lot, I’ve used it on projects before.
One thing we have come up with recently, this plugin called instant images, this will give you content-specific images, created licence so you can use it and it will download to your media library, if I wanted to do a search for London, to add some post, to add some images to WordCamp London posts, I’ll do a search and set the size that the images will be resized, to, when they are downloaded I can download as many as I need I’ll click the ones I want, download them, unfortunately you can’t do 50 at a time, you have to pick the ones you want, download them quickly and resize to the dimensions you specified, as you can see it will just add them into your media library, ready for use in your content.
If your, if you are a user or site owner, one of the things, when I was freelancing before that, I was asked for on an awful lot of occasions, was to just stick an image in the sidebar, this isn’t built into core, I’m not sure why not, it seems very useful, there might be a move to do that, this simple image widget has made lots of my freelance clients happy when I was using that and it did exactly what they needed. If you are developer and you have used, say instant images to add a bunch of images, there is a wp-cli plugin, assign featured images it does what it says on the tin, will take all the images you downloaded via instant images and will assign them as feature images, there you go a load of contents’ specific images assigned to post and ready to keep developing that theme with content specific stuff on there.
Now, if like me at work you manage sites for quite a number of clients, you might have had the call that says, “You have broken my set it doesn’t work anymore, what are you going to do about it?” I say actually, we have installed simple history on all sites, gives us all the actions, plugin installations, plugin deletions, it’s WordPress’, I see what you did there! [Laughter] You can get a client say, “Actually, I’m sorry we can see in the dashboard that you changed all of that and unfortunately we will have to charge you to fix it”, or not if you are feeling generous, it does give you a good idea of what they have been up to.
If you have clients who like to go a little deeper and you haven’t disallowed file editing, you may find they hack the theme files directly, that’s clearly not a good idea, it breaks the update process and could lead to the whole site coming down, instead if you want to keep their changes in… keep them out of the parent theme you can get them to add a child theme, this is a quick plugin that clients can add, it will take the current plant theme, create the child theme from it and they can do all the damage they want in the child theme without touching that parent theme, it’s update friendly, so find that very useful.
If you also have clients, for example, or you are a site owner, I guess most people here have heard of the REST API vulnerability recently, for sites not updated it’s still on-going with hacks and defacements, you can suggest they install easy update manager, it will keep core, plugins, themes and you can also exclude any of those from being updated as well if you have specific one you don’t want updated, easy updates manager will just keep everything up-to-date, you will just get a notification afterwards and you know your site is kept self and secure.
Now for developers, if you have ever spent time developing on an aeroplane, you know that WordPress is still trying, even when it hasn’t got a network, to make external calls to CSS and JavaScript and Gravatar, core updates, blah, blah, blah, for me when I was on a plane to Colorado last year I was trying to do some work and it was just really slow and it didn’t really work very well.
Andrew Norcross, has come up with this plugin on Github, that’s called Airplane — with one click you can just stable all those external calls and WordPress is magically faster it’s not trying to deal with all those things without a network.
Also for development, we have started using this plugin recently, which is really useful. If you find that you have got a live set and you need to do some work on it and you don’t want to have to download all those images, you can use coral remote images, one simple option screen where you put in the live sets URL and it will rewrite all the image paths to the site, it’s a really time saver.
In terms of time saving we also use, what I do specifically but I don’t know about the other devs at 10 degrees, bulk press, you can paste in pages, child pages, other posts, custom post types, terms, menu items, all sorts of stuff, if you have got specific lists of pages, you can use this, it’s paste, one click, update done, you can add random posts terms through wp-cli generate command but this one does, that generates random pages or posts whereas this one does specific ones, so specific sites it’s quite useful.
What have we got next… if you are developing WooCommerce sites and you want to populate with a bunch of data, then meteoric, wc cyclone on Github is useful as well, you can add products, customers, orders, as much as you need it will again rate all of those, it doesn’t yet do coupons, refunds or more complex products, to quickly populate a WooCommerce site for development, this is a great wp-cli plugin, it will also grab a bunch of featured images, from unsplash so you can have all those products nicely populated — times up — ready for your development. I have one though, great.
This is the last one, DB post types, you have probably come across things out there that will take custom tables and again rate custom post types from them it will duplicate it into wp posts, DB post types calls itself an interpreter, it will leave the data in the custom tables but again rate custom posts from that, again rate admin screens, you can use wp query, wp meta query, so imagine you can take, grab the entries, instead of creating custom post types use the entries from the database directly to use them as post’s you can take custom tables or subsite tables from multi-sites and create posts out of them, do whatever you need to do with wp query, I’ve not tried this one yet but I thought I would talk about it, it looks quite interesting and I thought it would be something you would like to see. That’s me, thank you very much for listening.
DAN MABY: We’ll have a round of Q&A at the end of the three lightning talks, just while we transfer over, I’ll let you know there are a number of T-shirts still leftover, if you have partners, children, please feel free to grab an extra T-shirt on the way out.
The next speaking began blogging at the age of just 12, now web developer at required — internationalisation, improvements in WordPress Core, give a big round of applause for Pascal.
PASCAL BIRCHLER: All right. So, last year when I was here, I talked about Swiss chocolate bribery, and I don’t have any chocolate here today so I am going to talk about recent internationalisation improvements in WordPress core instead.
A few years ago, some of you might remember this, translation management in WordPress was cumbersome, you only got new translations when you updated WordPress, so then they introduced language packs which allowed you to install and updates translations in the panel independently from the code, this also allowed WordPress to update translation automatically.
So there is was a really good and it’s really like proven and when you just, felt like you wanted to change the language it just go through the channel settings, change the language to whatever you want, and just works.
But we felt like we could do more, and do better so in WordPress 4.6 we did some improvements under the hood and let’s have a look. So first up we have the jQuery UI date picker, which some of you might know it’s not used in WordPress core actually only plugins and themes use it. When you use it in your code it’s now fully localised powered by the data WordPress already has, it’s much easier for developers to use it. Also you might know load plugin text domain or load theme text domain it’s the function you use in your plugin to load the hey please load the translation for my plugin. Because of language packs, when your plugin is on WordPress.org those translations are already in your wp content/languages folder, we felt like we already know the translations are in that folder so why do you still have to tell WordPress to load the translations from there. So we figured let’s just remove the requirements to call this function.
What we did is built a so called just-in-time loading for translations. So whenever you call a translation function like the underscore underscore function in your code, WordPress will look if there’s a translation file in WordPress content language folder, and load the translation for you. And super fast because it like everything is cached and also backwards compatible, so you don’t have to worry about anything. Yeah, just works.
Now next up we have WordPress 4.7 where we focus more on the user facing side of things. One of them is really cool, is user admin language. So as you have seen before, you can go to the channel settings page and change the low Karl for you local for your website it change the language for the whole website. We wanted to let users decide which language they want to use WordPress in.
So with WordPress 4.7, every user can go to the profile and select their preferred language. It’s worth noting that this only changes the language for the back end. So this means one user can use the back end in let’s say English, the other in Spanish, and one perhaps in German and the front-end will be in the site language so here it English.
It’s super cool for like, huge international sites like for example WordPress.org. For this to work we needed a way to switch the language on the fly so for example when sending e-mails, you want to send an email in the language of the user and not in the site’s language. So we essentially needed a way to switch these translations on the fly, and what we came up with us a function called Switch Local you just tell the function whatever local you want to switch to, send your email to all the stuff you want, and restore to previous state afterwards. This also allows you or maybe for WordPress in future to do cool things like display the toolbar in the user language, and the rest of the site in the site’s language. It’s not yet in core, there are a of bugs we need to fix, but confident we can put this into like WordPress 4.8 maybe.
So, what’s next? WordPress 4.7 already shipped in December, and we’re still thinking of all the cool ways we can improve internationalisation in WordPress core. One thing that is like related to user admin language is really improve so there’s a user you can select multiple preferred language. You might know this from Firefox or like your browser operating system where it can tell the system which local you understand best you set that in order of preference the system will figure out which translations to load based on what is available and what is your preference. So, we might see that in WordPress in the future. We also as I told you before, we improved the translation loading in php, and now we want to do the same thing with JavaScript. So as you might know if you are developer, using translated themes in JavaScript is quite hacky you have to use the wp localised script function and parse the translated strings to a global variable you can use in JavaScript it works but it has some drawbacks, for example doesn’t really support plural forms and stuff like that. So we thought why not make this more similar to how it works in php. So right now, like there’s proof of concept already, you could just use like a wp I18N underscore underscore right function right in your JavaScript.’ another thing that I particularly important to me is user times on setting. So, figure that when you are kind of already select your preferred language why not select your preferred time zone as well. I saw that all the time on WordPress.org for example, I see all the blog posts with their published date I never knew that it was my time, was it in the morning or the afternoon, so if it can have a user time zone setting and user profile it would be super cool to display all the dates according to your time zone.
Well, that’s it already. Thank you very much.
DAN MABY: Excellent thank you, the next speaker this afternoon is a teacher a front-end dev who likes to work about the web accessibility and WordPress, he’s also the CEO of fox land a theme plugin shop. He will be giving his talk about the SVG icon system in WordPress, Sami Keijonen, a big round of applause.
SAMI KEIJONEN: So I am going to talk to you about SVG icon system in WordPress. SVG stands for scaleable vector graphics. Like the introduction it Sami Keijonen. I hail from Finland I am a front end developer who tries to keep accessibility in mind everything I do I try to build it in a way that is accessible to everyone. This is going to be like a short introduction in the technical overview what we have done in 2017 theme, using the SVG icon system. So we’re going to talk you through why we use those SVG icons, where you could get those icons, how you use those icons.
If you have some time, we going to take code examples from the 2017 theme.
What kind of icons are we talking about? We could talk about for example, icons that look like that. They could be icons for example from Twitter or Instagram or Github. Or, SVG icons could be a logo, or it could be other graphics that have multiple colours in it, for example so it could be one colour icons, or multicolour icons.
How many of you are using icon fonts? Instead of SVGs, for example font is pretty common icon font library, how many of you are using icon fonts. That’s ok. (laughter).
I am trying to tell you about why you should make a switch to SVG icons system. So why? Because they are better. (laughter) in short. For example, Github switched away from font icons to SVG system, because it’s, you can serve your icons more easily, more quickly, it’s faster, and you can take account of accessibility stuff more easily and they do look better in any environment.
And you can have multicolour icons, you can animate the icons, you can control all with your icon with CSS and JavaScript. Just to name a few other good things about SVGs. So the next step is that where are you going to get SVG icons? Your first source is probably if you are pilling a custom site and you need going to need some custom icons in your site, or custom icons in your client sites, of course go to your designer. He is going to make them for you. Or if you need for example, the Twitter icons or Github icons, just go to a service called Icomoon, I personally use that one and you can keep track what kind of icons do you want to have in your project. Don’t load for example, all the font apps and icons in your customer site if you are only going to use 10 of them. Just pick the ones you want, and it’s going to export in SVG format, to you instead of using the font icons.
There is also a service called Font-Blast but I have not used that personally.
So in mark up how can you use the SVG icons, the first step you scan just use it like any other image. The SVGs are not exactly the images, they are XML format you can use it in same way, or you can use it as a background image in your CSS, in the same way as any image.
Both have the same kind of bad thing that you can’t control the CSS anymore, about the icon and this is probably something we want to do. in our CSS. Or you can drop the SVG code right into your HTML mark up, it could be hard to maintain those icons if you have like 100 of them, or little bit cleaner way is to use the php function called file get contents, and just it just take the same XML code format from there and put it in your mark up. That could be a little bit cleaner way to do it. But for the next 5 minutes I think I am going to talk about more about the stuff we build in 2017 theme. We use this inline SVG sprite technique in there. Which contains all of your icons it’s kind of easier to maintain.
So, what is SVG sprite, for example, I’m going to show you in the next slide what it can look like. First step is okay, you have one icon SVG file, that you can put in your folder, you can probably put it in your header also, but it could be a little bit faster if you put it in the folder. In 2017 we use the hook, the footer hook, you can probably just copy and paste in there if you want. The sprite file looks like this, it starts with the switch tag inside it, there is the symbol tags, you can lots of markers in it, you can use that ID, for example ID Twitter anywhere in your marker after that, for example I can, icon Twitter in my header check, just use this kind of HTML and it automatically imports the icon in that section, where you want it to be., so I noticed that icon Twitter in the red one here and the icon Twitter in here, so it gets the same ID. You can use the absolute path without injecting the sprite file in there, the only issue is it doesn’t work in the explorer, you have to use SVGXUZE, it could be a good way to use it, the cache works automatically, there is just one file in there, it works better in that sense. If you are wondering, is it easy or not to generate the icons, if you are already using Grant or Gulp, you have a task and it generates everything for you on the fly. So in 2017 look at the folder inc, in there there’s a php file icons function.php, I forgot the php part there look at that function, pretty much everything you need to know about twentyseventeen stuff is inside that function. For example, one of the most important functions in there is twentyseventeen get SVG function which is kind of a wrapper function that powers everything that is involved how to mark up is going to look like. It looks like this. If you check the template files there is lots of calls for twentyseventeen get SVG function, for example you want to have a Twitter icon some where you just call the function us then icon Twitter, it exhibits out the HTML pat for you. As you have notice in the red there is area hidden true but by default, but all the icons in the 2017 themes are security one they don’t need to be read by screenreaders for example, but that can be over written in the settings when they are read inside the function.
Another example social links menu it’s the same kind of a menu system that you used for your primary a menu but this for the social links but I just automatically works, it was originally written by Justin Tadlock. There is also a base CSS in style CSS which kind of resets everything back to normal and after that you can pretty much do anything you want with the CSS.
So, check the code, from the 2017ink folder icon function php file. Thanks. (applause).
DAN MABY: Thank you very much just ask you to stay here if I can ask the speakers to come back on the stage, if have we got any questions at all, we have got a few minutes available.
FROM THE FLOOR: Hello, I just had a note about SVGs so, I am here. I agree the ways.
I agree with what you mentioned about loading them, one thing I would notice, SVG, can have triangles, squares, flashing beds, script tags when you are looking for SVGs, it’s important to open them do a quick search and make sure nothing was snuck in there that might be a little untowards, I don’t know, do you have any recommendations on how to check that an SVG might be safe, is it more of a case for reportable source or are there tools that can automate that process, or functions that might do it you can take SVG from any source and no that the output is safe
SAMI KEIJONEN: I can’t remember the site name at the moment, that kind of strips everything off from the. XML files, I think you asked about it, that there could be some extra stuff in her, so there are sites that can kind of clean it up for you, I think also that Gulp or Grunt tools also have to clean it up for you, so you don’t have to do it manually, I’m not sure if that’s what you asked.
FROM THE FLOOR: I didn’t know the Gulp tools could do that, that’s good to know.
THE CHAIR: Anymore questions?
FROM THE FLOOR: Hi, I just have a question about the fall-back with the languages, if you have a German — informal, you don’t have a pack for that, if it’s not the German informal it’s the English, do you have something for that by default, it’s preferences, or a new feature that every admin has to buy for the website.
PASCAL BIRCHLER: So for the formal and informal languages, yeah, it’s kind of like a German problem, so as a user you can set the multiple languages, but the formal version would be like just one setting you could add to that and, yeah if it’s not available it would just load like the informal variant, and I think it makes sense, we are still in the exploring phase of looking at all the different sites and how they do that and I think for example on Facebook you can even say like how you want to be greeted, for example. So, there is even more to that, not just formal and informal.
FROM THE FLOOR: Hi. Yeah, my question is for the gentlemen on the far left, how easy is it to animate SVG icons, wouldn’t you see that as being a bit of a distraction on the website, where the users’ attention will be taken away from the main content?
SAMI KEIJONEN: Sorry I’m not sure I understand the question; do you mean that would it be easy to have SVGs in the content.
FROM THE FLOOR: I imagine having an SVG icon on say, like in the header of a page, whether it be a Twitter icon or something like that, you said you can animate them, did you not say that.
SAMI KEIJONEN: You can animate them, you can use the class that SVG can have, every icon will have the same class, called, “Icon”, then individual class called, “Icon Twitter”, for example, so you can animate by the class you have in there, or the animation could also mean that you have a custom icon that have, inside the SVG are different kinds of sections in there, and you can animate any part inside the SVG icon, for example, you have to, you have hamburger icon, you can animate that one, you just animate the SVG file, that’s like one example of how you can do it.
FROM THE FLOOR: Thank you.
THE CHAIR: Have we got anymore. Yeah.
FROM THE FLOOR: So a question to Pascal, thank you for your work on the language stuff. I was just wondering are there any plans or discussions for multilingual, yeah, put you on the spot?
PASCAL BIRCHLER: It’s a tough question, I think at last, like — 2015, they kind of asked a working group to explore how we can make it easier for plugins to enable sites to be multilingual, I think, kind of, like it’s nothing happening there anymore, so maybe we could maybe bring it back to life, it would be super cool. I don’t think there will be multilingual feature built into WordPress any time soon, but we can definitely make it easier.
THE CHAIR: Thank you, time for one more question.
FROM THE FLOOR: One question for Matt, first off, thank you for curating that list of plugins, it was really great when it comes to maximisation, is there a maximum number of plugins you would recommend installing at the same time.
MATT RADFORD: This is a perennial question, there was one plugin that I didn’t add in, that strips emojis, 538 bites that’s plug in then JETPACK, that’s a plug in it’s really not a question, I think, of how many plugins, because that’s, it an arbitrary amount of PHP code that you are adding to your site, so I think it’s a question of, if you notice things are slowing down or a particular plugin is doing a high number of queries or making the site unresponsive or under-performing, then you should target that one just like you would target any other bit of PHP code to make sure it runs properly. I would say there is no limit to — I mean there is 60,000 plugins out there, go nuts!! [Laughter] If your site stops, then maybe cut back a little! [Laughter]
THE CHAIR: Excellent, thank you very much, a big round of applause for the speakers, please. [Applause]. Okay, time for the next session, please don’t forget that there are additional T-shirts, please feel free to grab them as we go past.