Simon Meulenbeek

Author: Simon

  • Meertalige WordPress: van frustratie naar custom plugin

    Nu mijn website draait met WordPress, wilde ik de content graag in meerdere talen aanbieden. Uit principe vind ik dat mijn website beschikbaar moet zijn in het Nederlands – het is tenslotte mijn moedertaal. Maar omdat de voertaal van het internet Engels is, wilde ik de content ook in het Engels kunnen aanbieden.

    Tijd om te kijken wat er beschikbaar was qua WordPress plugins voor meertalige websites.

    Polylang

    Na wat onderzoek bleek Polylang een van de populairste plugins te zijn voor meertalige WordPress websites. De plugin heeft een goede reputatie en lijkt goed onderhouden te worden. Perfect, dacht ik.

    Maar al snel liep ik tegen een probleem aan. Hoewel Polylang goed functioneert met de klassieke WordPress editor, bleek de ondersteuning voor de moderne Gutenberg editor minder uitgebreid te zijn. Als voorbeeld miste er een Gutenberg block waarmee ik een taal selectie menu aan mijn pagina’s kan toevoegen.

    Voor een website die draait op de nieuwste WordPress versie met Gutenberg als editor, voelde dit als een gemiste kans.

    Zelf Doen

    Ik heb al eerder blokken voor Gutenberg ontwikkeld, dus de basis voor het maken van custom blocks was bekend. Het doel was simpel; een block dat de beschikbare talen van de huidige pagina ophaalt uit Polylang en deze presenteert als links waarmee bezoekers kunnen schakelen tussen talen.

    Het Resultaat

    Na wat experimenteren en documentatie doorspitten, lukte het om een werkende Gutenberg block te bouwen die integreert met Polylang’s functionaliteit. Je kunt het resultaat ergens op deze pagina vinden.

    Voorbeeld van gebruik van het component in horizontale modus, het component toont de vlagen en de namen van de talen.
    Horizontale modus met vlaggen en namen
    Voorbeeld gebruik van het component in verticale modus met alleen vlaggen zichtbaar.
    Verticale modus en alleen vlaggen worden getoond.

    Voor mensen die de block zelf willen proberen: de code en plugin is beschikbaar op https://github.com/simonmeulenbeek/smb-language-switcher. Houd er rekening mee dat de plugin niet uitvoerig getest is en dat er waarschijnlijk bugs en wijzigingen voorkomen.

    Problemen kunnen gemeld worden door een issue aan te maken in de repository. Pull requests zijn uiteraard ook welkom.

    Nu kan ik content delen in zowel het Nederlands als het Engels, zonder afhankelijk te zijn van de beperkingen van bestaande plugins.

  • Multilingual WordPress: From Frustration to Custom Plugin

    Now that my website is running on WordPress, I wanted to offer content in multiple languages. On principle, I believe my website should be available in Dutch – after all, it’s my native language. But since English is the lingua franca of the internet, I also wanted to be able to offer content in English.

    Time to look at what was available in terms of WordPress plugins for multilingual websites.

    Polylang

    After some research, Polylang turned out to be one of the most popular plugins for multilingual WordPress websites. The plugin has a good reputation and appears to be well maintained. Perfect, I thought.

    But I soon ran into a problem. While Polylang works well with the classic WordPress editor, support for the modern Gutenberg editor turned out to be less comprehensive. As an example, there was no Gutenberg block that I could use to add a language selection menu to my pages.

    For a website running on the latest WordPress version with Gutenberg as the editor, this felt like a missed opportunity.

    Doing It Myself

    I’ve developed blocks for Gutenberg before, so the basics of creating custom blocks were familiar. The goal was simple: a block that retrieves the available languages of the current page from Polylang and presents them as links that visitors can use to switch between languages.

    The Result

    After some experimenting and documentation reading, I managed to build a working Gutenberg block that integrates with Polylang’s functionality. You can find the result somewhere on this page.

    Example usage of component in horizontal mode with both flags and names showing.
    Horizontal mode with flags and names
    Example usage of component in vertical mode with only flags showing.
    Vertical mode and only displaying flags.

    For people who want to try the plugin themselves: the code and plugin is available at https://github.com/simonmeulenbeek/smb-language-switcher.

    Keep in mind that the plugin isn’t fully finished, hasn’t been extensively tested and that bugs and changes will likely occur.

    Issues can be reported by creating an issue in the repository. Pull requests are of course also welcome.

    Now I can share content in both Dutch and English, without being dependent on the limitations of existing plugins.

  • Hello World!

    If you’re known to your friends and family as a ‘tech-guy’, you’ll often be asked for help doing tech things. And as such I was asked to help with setting up a website for a new company.

    They asked my help because, when looking for themselves, they quickly lost themselves in the huge variety of options and offerings. How do you compare vendors? What do you look for? What is a good price?

    Looking at the requirements for the website, we decided that a simple WordPress instance would be a good fit. But looking at the available offerings, I thought that they were quite expensive for what is essentially nothing more than a managed server with WordPress pre-installed.

    So we’ve decided that I would setup something myself.

    As a teen I’ve played around with Apache (and later Nginx) to host some static HTML, or primitive PHP scripts. Later on I would self-host applications and websites for myself using Raspberry Pis. Ultimately ending up with Ghost CMS running on a Raspberry Pi.

    Of course self-hosting is not an option for a website that needs to be available all the time. So for hosting I picked an unmanaged virtual private server (VPS).

    For CMS I’ve decided to go with WordPress due to its much larger ecosystem of plugins and themes. Although the current design of the website is pretty much static, I think it’s likely that that will change at some point in the future.

    The setup of the VPS is pretty simple. I’ve picked Ubuntu server, and it’s running rootless-Docker with Caddy as a reverse proxy. Each application get its own git repository with compose files and documentation. Management of the server is only allowed coming from my Tailnet.

    Als a bonus this project gave me a chance to dust of my own domain too. Since my last move I hadn’t taken the time to setup my Raspberry yet, but since WordPress allows to host multiple sites, I’d thought I’d take the opportunity.

  • Hello World!

    Als techneut werd mij gevraagd om iemand te helpen met het opzetten van een website voor hun nieuwe bedrijf. Ze hadden zelf al op internet gekeken, maar er zijn online zoveel aanbieders en opties dat het al gauw een moeilijke opgave bleek te zijn. Waar zoek je naar? Wat is een goede prijs? Hoe vergelijk je aanbieders?

    Voor mezelf heb ik vroeger altijd zelf gehost. Eerst statische HTML met Apache, later Nginx, en uiteindelijk Ghost CMS op een van mijn Raspberry’s. Leuk om mee te experimenteren, maar voor een bedrijfswebsite die als visitekaartje moet fungeren, is zelf hosten natuurlijk geen optie.

    Maar toen ik keek naar de bestaande aanbieders, en vooral hun prijzen, kwam ik tot de conclusie dat ik toch beter zelf iets kon opzetten.

    .Dus heb ik gekozen voor een ‘unmanaged’ VPS. Een virtuele server in de cloud, waarop ik een CMS kan draaien, en zo de klant ongeveer dezelfde ervaring kan bieden als die online aanbieders, maar dan voor een kwart van de prijs.

    Na wat onderzoek koos ik voor WordPress als CMS. Hoewel ik zelf Ghost gebruikte, is het ecosysteem van WordPress enorm. Als de klant later iets speciaals wilt, is de kans groot dat er al een oplossing voor bestaat. Ook is de editor ervaring van WordPress veel gelikter, en veel bruikbaarder voor een klant die potentieel niets van websites weet.

    Omdat ik een ‘unmanaged’ vps gebruik, moest ik wel zelf alles instellen en configureren. Wat dat betreft heb ik gekozen voor Ubuntu-server met rootless Docker containers en Caddy als reverse proxy. Elke applicatie heeft een git repo met docker-compose file en documentatie. Voor beveiliging draait alles via Tailscale, met SSH alleen toegankelijk vanuit mijn eigen Tailscale netwerk.

    Als bonus gaf dit project me ook weer de kans om mijn eigen domein af te stoffen. Na mijn verhuizing heb ik nog geen tijd genomen om mijn eigen hosting weer op orde te krijgen, dus die lag een tijdje braak. Maar dit project gaf me een mooie kans om dat weer op te pakken.