Today is the launch of WPZOO. WPZOO is a swiss based WordPress theme and plugin shop. I have always wanted to set up a site to sell my own products and now is has become a reality.
I have really enjoyed developing the website. It is multilingual so it is in English and German built using Polylang. We used Easy Digital Downloads as the ecommerce plugin and Stripe as the payment gateway. I am planning on writing a few posts on the different customisations that I made. So sign up to the newsletter so that you find out once they are posted and hear about new products that we are launching. You can expect some Easy Digital Download add-ons for language packs and perhaps even composer support.
The first 10 customers will get 25% discount on purchasing PENGU!N Gold by using the special link.
I agree with Rarst that there is no difference between bundling plugin, libraries or frameworks as they are both are just code. Eric wrote a few thoughts on “Dependency Management in WordPress“. WordPress is still not at the stage where dependency management can be implemented that the average user can use.
A number of themes use setting frameworks. There was once a discussion on the WordPress.org Theme Review mailing list and it was decided that theme developers should ship the themes with the integrated setting frameworks instead of installing the plugin version of the framework using something like TGM. By including the frameworks in the theme the developer is making the decision for the user and not giving him/her further options. Users find it confusing to see plugins that they do not remember installing. The settings frameworks are not the only frameworks. There are others like the metabox frameworks or theme frameworks.
One of my plugins is FluidVids for WordPress. The plugin makes it easier for people to use FluidVids from Todd. I regularly track updates and include them in the plugin. It the developers responsibility to track the updates of the libraries, frameworks or even plugins that they have bundled in their theme and update them as soon as there is an update.
The title is a bit cheesy but it says it all. I do mostly development work and I love it but I sometimes there are some tasks where some design skills are needed which I lack. I have no designer friends I can fall back on and ask for a favour.
I am looking for someone who would be able to help me out in these sticky design moments. I am willing to return the favour by helping with WordPress development issues.
Ping me if you are interested in such an arrangement.
One of the first big problems that I faced when I started with WordPress was how to generate a POT file. In the meantime have been able to look at all of the different tools and see their shortcoming with challenges that I faced when generating a POT file.
Challenges with POT generation
Recently I have been working on projects where the POT file generation needed to be different. Here are three examples:
I was working on Responsive and Responsive Pro. Responsive is currently translated in about 45 languages. A large majority of the strings in Responsive Pro were already translated in Responsive. So to reduce the workload for the translators I created a separate POT for the pro folder which is only in the pro version.
Another example from CyberChimps where we use a framework for all of our themes except for Responsive. The framework is the core folder and it is in every theme. If we created the POT files the standard way then we would have all of the same strings across all of our themes which would create extra work for the translators. We could use a constant and define that in the functions.php but it is not allowed in the current WordPress.org theme review guidelines. The core has it’s own text domain, pot file and translations.
A third example that I came across is when using TGM Plugin Activation. TGM Plugin Activation has it’s own strings with it’s own text domain tgmpa. With the current POT generation solutions the strings will be added to the POT but the translations will not load as the text domain is never loaded. A solution could be to just to load your own version of the strings with your own strings. I know a number of plugins and themes use this library. TGM Plugin Activation should load it’s text domain and have it’s own language folder. We as a community can contribute to it and then themes and plugin are able to profit from the standard strings being fully translated.
Shortcomings of current generators
I also find makepot.php is too narrow minded to use as it expects that the folder name is the same as text domain. There are multiple times where it is not so in developement. I develop the Flowplayer HTML5 WordPress plugin and the GitHub repo is named wordpress-flowplayer as it make sense to separate it from the Flowplayer player GitHub repo which is part of the same GitHub organisation. So when I use makepot it thinks the text domain is wordpress-flowplayer instead of flowplayer5 which is the WordPress.org plugin slug. Another case would be if when developing a plugin in the same WordPress.org svn structure. The main plugin is most times in the trunk folder and makepot.php would then think that the theme slug should be trunk.
Poedit Pro handles text domains great. It check for the header info Text Domain and uses that to define the text domain. It currently supports the WordPress translators comments but the not the plugin or theme meta data yet. This is still a very manual process of creating the POT. It also uses the folder structure to choose the files where the strings are pulled from.
Both makepot.php and Poedit use the location of the files when choosing which strings to add to the POT but neither solution can yet exclude folders.
In November 2013 Stephen Harris released a new solution grunt-pot. I was really pleased with this solution as it includes an option to define the files that you want and do not want to scan. The thing that is missing is that it does not support fetching WordPress meta data and translator comments.
Future POT generator
The perfect POT generator for me would be one that used the text domain to choose which strings get added to POT file. The solution would need to able to define the location of the files, text domain, and the location of the language folder. For WordPress it would be very important that the translator comments and plugin/theme meta data are also included in the POT. The solution should be built using grunt as it works with every OS can be easily integrated in a build workflow.
GNU gettext is not a PHP parser. It can’t read variables or constants. It only reads strings.
True but it does not matter as you can still can create a POT without knowing the text domain. I have made a POT with Poedit and makepot.php while having a variable for a text domain.
Mark mentions at the bottom of the post:
Well, it won’t break your plugin, but it could make it harder to be used with automated translation tools.
From the comments:
…this will work when doing once-off manual generation. But if you want to, say, automate the generation across, say, the entire WordPress.org plugin repository, you’re going to need to know the text domain programmatically.
I don’t agree. Makepot.php from WordPress tools uses the folder structure to build the pot. It does not care what text domain that is being used or if even a text domain is being used. WordPress has been creating new POT files for every version using makepot.php and WordPress core does not have any text domain. If I had to create a pot file for every plugin on WordPress.org plugin repository I would simply create a script that would run makepot.php on every plugin folder.
Otto has mentioned that a text domain should not use variable or constant because it would not work with the new language packs. When I asked him what code WordPress.org would use to generate the POT files, he said through the makepot.php code.
I do not see a reason why using the text domain to generate the POT files is better when doing mass generation. A couple issues I see arising when doing this is when a plugin/theme has multiple text domains or has an incorrect text domain. So not to cause cross contamination of strings the system would still need to search only the folder of the specific plugin which would also work with the current makepot.pot and text domains that are variables or constants
Conclusion
Even though I do not agree with Mark and Otto on their reasoning I would not recommend using variables and constants for the text domain. I do see that at times that constants and variables do make sense but all of the pros and cons do need to be well thought through. The reasons why I would recommend using a string for the text domain are:
The text domain should constant and not changing.
It takes the same amount of time to write a constant or variable for the text domain as for a string.
Having strings across multiple classes can add extra code.
You see straight away which plugin the text domain belongs to and reduces the risk of bugs.
You can also use tools like grunt-checktextdomain to check if the text domains are all valid.
The text domain should be used for future POT generation because a plugin might need multiple text domains. More on this in my next post.
Update 1: It is a must to use a string for the text domain if you want to support language packs when hosting your plugin/theme on the WordPress.org responsitory.
Copy the user number from the IAM User Sign-In URL to a safe place. Then go to the users section. Create a new user. Copy the Security credentials to a safe place.
Then open `wp-config.php`. Copy the following code to your wp-config.php and replace the stars with the keys that you placed in a safe place.
Attach a user policy. I used the Power User Access policy.
Then go to your bucket or create a bucket.
You need to create a bucket access policy. You can use the Policy Generator.
Change the type of policy to “S3 Bucket Policy”.
The Principal field is the username field. You need to create a string in this format `arn:aws:iam::account-number-without-hyphens:user/username`. My Principal field would look like this `arn:aws:iam::080543065666:user/test`
For the Actions you only need two: DeleteObject and PutObject.
As for the Amazon Resource Name (ARN) you just add `arn:aws:s3:::bucket-name/*`. Mine is `arn:aws:s3:::grapplerulrich-standard/*`
You then click Add statement and this give you access to add and delete items from the bucket.
You only need to give everyone access to view the files. Set the fields as such and change to your bucket.
Principal: *
Actions: GetObject
Amazon Resource Name (ARN): arn:aws:s3:::grapplerulrich-standard/*
Add the statement again and then Generate Policy. You get some text like in the gist.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
I have been asked a few times about adding responsive videos. At the time I was unable to give a good answer. Now I have taken time to do a bit of research and I able to give a number of responsive video solutions. The solutions are divided in third party services or self hosted solutions. Some of the solutions have WordPress plugins, these are marked with “WP Plugin”. Here are the solutions and resources I am going to cover.
Update on 8th December 2013
I wrote this post on ThemeID which has now been bought by CyberChimps. I have now updated the post with info to some WordPress plugin and small improvements and now have it on my blog.
The easiest solution is to use YouTube. It works on multiple devices. In some countries YouTube plays an advertisement before the video. If you upload your own video this should not be the case. At the end of the video you get a grid with other videos. If you don’t want those then when embedding YouTube make sure you uncheck the “Show suggested videos when the video finishes”.
Has additional features e.g. social sharing, call to action, require email to play and a few more which you can find here.
Wistia Embed & Share
Solution 1
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
There is a solution where Wistia supports responsive videos with their own code so a JavaScript plugin is not needed. There are three ways of doing this.
The first two are documented on the Wistia DemoBin. There is the Video Foam Lab page where you can paste the embed code to make it responsive.
If you have an iframe, load the iframe API script in the footer and add `&videoFoam=true` at the end of the url in the iframe. e.g.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
If you have an API or SEO embed, just pass `videoFoam: true` in with your embed parameters, e.g.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
To make all Wistia videos responsive on your site add this code to the header.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The Wistia WordPress plugin enables oEmbed. This allows you to just insert the special url and then the plugin does the rest so that you see a video on the front end. So that the video is responsive, add &videoFoam=true at the end of the url. e.g. http://grappler-login.wistia.com/medias/3bfl0abrog?embedType=iframe&videoWidth=640&videoFoam=true
These solutions are for those people who want to host their own videos be it on their own server, uploading it through WordPress or hosting it in the cloud like with Amazon S3.
Simple HTML5 Video
Need to create markup
Simple setup
Videos hosted on own site
Different players on every browser
IE 8 and lower are not supported
The video tag is a new standard to display videos. I have added more information then you might need. To understand it best I have split this section into two parts.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
So that the videos will work on multiple browser we will need multiple formats.
Here is a simple code example. I have also added a possibility to load a lower resolution video for smaller devices.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
So to have a responsive HTML5 video you need to have this CSS.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The same points as for HTML video except with IE8 and lower support
This is how the code would look like with Flowplayer being used as the backup.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
To save time you could use the Video for Everybody generator by Jonathan Neal to generate the code snippet according to your options. (FlashFox player seems to only resize if the browser is refreshed but does not change size dynamically,)
A complete explanation can be found at Kroc Camen’s site, the originator of this technique.
Sublime offers a solution for your own hosted videos and YouTube videos. Chose your option and then add the link to your media or for the YouTube videos add the video id.
Sublime Video Source
In the video setting the “Fit” option is very important.
Video Settings
At the end you can click on the “Get the Code” button at the bottom. You will then get a code like this.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The next step is to add the loader code. This add the Java Script. Every site has its own file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
It is really simple to use. You upload the video files and then you add the different file formats and choose a skin and define settings. For every video you get a shortcode that you can paste in a post or page.
Open the zip file and then extract the build folder
Move that build folder to your child theme. You can rename the folder if you want
Load mediaelement-and-player.min.js and mediaelementplayer.min.css
Load this javascript to activate the MediaElements player
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This is very simple. Install the plugin and then add this shortcode to the post or page. Just change the links to your video.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The plugin does make it a bit easier to host the files. Install and activate the plugin. On a page you will find a button to open a form to create the shortcode.
Add Video Button
Video.js Shortcode Form
This is the code that this form will generate.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
For JW Player 5 you will need to use some hacks. Below are a few of options.
Standard embed with responsive CSS Solution
I have found another way of making JWPlayer responsive. This should be a bit easier.
Add this code to the page or post
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Change the div id so that is different for every video. Make sure it matches the code in the JavaScript.
Add this css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
So that the video keeps its proportion you will need to change the padding-bottom percentage. This is calculated video height / width x 100. E.g. 540 / 960 x 100 = 56.25%.
Copy jwplayer folder to your child theme using a ftp client
Create a html file in the child theme
Paste this code in
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Change four links – Change the location of jwplayer.js, jwplayer.flash.swf, the video link and either update the image link or remove it.
Then add an iframe with the link pointing to the newly created html file.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The WordPress plugin supports both JW Player 5 and 6. You can switch between the two. You need JW Player 6 for responsive support. You define the ratio per player.
The easiest way to get your video in the different formats on your computer is to use Miro converter. It is very simple to use but if you need help you can follow this guide.
Heads up! I had some problems playing the webm format in Firefox that was converted by Miro.
Take the ffmpeg.exe file from the updated build – and dropped it into C:Program FilesParticipatory Culture FoundationMiro Video Converterffmpeg – replacing the existing ffmpeg.exe file and then convert without issue using MVC.
We will have to make a new release to update ffmpeg – but in the meantime you can use the workaround and you should be all set.
WordPress does not support webm at the moment and for that reason you will need to add the following code to your themes functions.php. If you are running a multisite you will need to check the list of allowed files.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This solution is useful if you only have one or a few videos on your site and you are able to make the iframe responsive.
embedresponsively.com
This then outputs html code like this.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
So that the video doesn’t distort and has the correct aspect ratio the JavaScript calculates the aspect ration. This is calculated by dividing the height by the width in the html code. That is why it is important the width and height is correct.
FluidVids.js is a standalone JavaScript for fluid YouTube/Vimeo iframe embeds. You can easily add more custom/responsive players easily with the options script.
FitVids.js is a lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids.js makes iframe embed responsive on the fly. There is a WordPress plugin FitVids for WordPress.
Here are a couple of important things to know about FitVids.js.
The current version of FitVids.js conflicts with Video.js and MediaElement.js. That is why I would recommend using my version. It can be found on GitHub.
When adding iframes from other sources then it is necessary to add selectors. So that I can add an iframe from this site I would use this JavaScript. It is also important to check if www is used or not.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Note! Please let me know if you would like me add another player. It might take some time. Please let me know if I should include any points that are important(Pro, Cons, Info) to the different players.
You may ask yourself what is so special about this post. Does not the codex cover load_plugin_textdomain() and load_theme_textdomain() but this posts will show what else you can do with it.
With this code for the theme and plugin you can add the translations in different places. The two reasons for this are:
This allows for the translation to be placed in multiple places when the theme/plugin author does not add the translations to the theme/plugin and not have them deleted in every update.
This also allows for the translations to be edited without needing to maintain the whole translation. For example there might be only one string that needs to be different for a site and so can be added to language directory before the theme/plugin language directory.
How do .mo files work?
So with the translation in the mo files if two of the same translations are loaded only the first translation will be displayed. So that is why in these code examples the plugin/theme language folders are loaded last. With if you only need to change a single string you would only need to add a single translation string in the directory that is loaded before.
For the theme there are three different places; the WordPress language directory, the child theme language directory and the parent theme language directory.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
For the plugin there are two different places; the WordPress language directory and the plugin language directory.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The WordPress language directory can be found in wp-content. The code that we used would mean we would need a plugin or theme directory in the language directory for the translations.
wp-content
– languages
– – plugin-name
– – – plugin-name-de_DE.po
– – – plugin-name-de_DE.mo
– – theme-name
– – – theme-name-de_DE.po
– – – theme-name-de_DE.mo
WordPress 3.7
With the changes in WordPress 3.7 it will add support for automatically installing the right language files and keeping them up to date. These translations will be stored in the WordPress language directory under one directory for themes and another for plugins. The standard directory structure will look like this.
wp-content
– languages
– – plugins
– – – plugin-name-de_DE.po
– – – plugin-name-de_DE.mo
– – themes
– – – theme-name-de_DE.po
– – – theme-name-de_DE.mo
You might ask yourself how this code will work with WordPress 3.7. What ever you are doing in now to load the text domain will work fine in WordPress 3.7. As the code uses the WordPress language directory but not the themes or plugins directory in the WordPress language directory all will be fine.
WordPress checks if there are translation is in plugin/theme and if not then it will load the translation from WordPress language directory. If the translation are in the custom location in the WordPress language directory then the translations will be merged but the translations from the custom location will used unless not defined.
In the future plugin and themes on WordPress.org repository will be able to update translations separately to the plugin or theme updates(This will launched separately to WordPress 3.7).
Otto has a great post on this that must be checked out.
Here is how you could conditionally load only one translation file and all of them one after each other.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
