Tutorial

WordPress and Eleventy

This is overview article how WordPress and Eleventy works together. I’m writing this article in WordPress block editor as usual but front-end is now served by Eleventy. In other words back-end is still WordPress. front-end is static using Eleventy. site (foxland.fi) is hosted in Netlify. Code can be found in Github: Foxland Eleventy site. Foxland …

Maintainable CSS architecture in the Gutenberg era

I had fun time talking about maintainable CSS architecture in the Gutenberg era in WordCamp London and in WordCamp EU. Especially in #WCEU I had a change to talk about CSS with lot’s of people. Thank you all for your questions and challenging the thinking behind my talk ideas. In this post I’ll go through …

WordPress speaks with wp.a11y.speak

I know I’m really late in the game but WordPress can speak! And has been speaking since version 4.2. Lately I’ve been learning more Javascript and needed this feature in one project. In this article I’ll try to explain simplified version how WordPress speaks with wp.a11y.speak() JavaScript method. Usually we have spinner or animation to indicate …

Testing Foundation Accordion

I’m not the biggest fun of large front-end frameworks for couple of reasons. There are lot’s of extra code I don’t need. I don’t understand what’s going on. I feel like I lose control. But there are times when frameworks like Foundation can be really helpful. They do have lot’s of great front-end components and …

SVG Social Menu in WordPress

Justin Tadlock have invented social nav menu system. Pretty much everybody is using it on public themes because users can create social links using WordPress menu system. And social links can be drag ‘n dropped in any order you want. It is great! Here is a screenshot how it might look like. But lately (several months) …

Accessible Full Screen Menu

You might argue is full screen menu good idea in the first place. But it can be attractive and useful in the same way as modal dialog when done right. First step is to make it fit in your site design. Not all sites have a natural place for full screen menu or modal dialog. Then work …

User meta in WordPress multisite

Have you ever needed to save user specific data in WordPress? Have you ever wondered how user specific settings work in multisite? Do you want settings to be global and shared across all sub sites? Or do you need to retrieve the user meta setting for the current site where the user meta setting can …

Accessible multi-level dropdown navigation

There are several ways to make complex navigation responsive. You might have heard terms like Off-canvas menu, Skip to footer menu or Multi-level dropdown menu. In every navigation patterns there are pros and cons. Probably the best navigation is without any sub menus and Hamburger icons on smaller screens. We’d just show the navigation links …

Accessible and Responsive navigation patterns

I have been wanted to learn about accessibility more and more. I feel like I know the basics already but there is always something new to learn. One thing that keeps puzzling me over and over again is how to create different types of responsive but more accessible navigation patterns. What kind of navigation patterns …

Sort users by numeric value in Users Screen

By default you can sort users in Users Screen by username, name, email and role. What if we wanted to sort users based on numeric value? Value can be for example age or expire date. First we’d need to save numeric info in *_usermeta table. There are handy functions like add_user_meta and update_user_meta for doing …

Learning accessibility in WordPress themes

I was honoured to write guest post in Post Status about accessibility in WordPress themes. Accessibility is an important part of modern web development. It is our responsibility as creators of WordPress themes to make them accessible to all users, on any device. In this article, I’ll offer some simple tips to create better, more accessible …

How to add Soliloquy Slider Plugin support in your theme

If you are building a public theme you might want to integrate Soliloquy Slider Plugin in your theme. Plugin already have a nice way how to add sliders in the content area when you edit your post or page. But what if you wanted to have slider outside to loop in header area perhaps. Or …

Creating .pot file for your theme or plugin

I’ve been re-thinking my thoughts about internationalizing WordPress themes or plugins. For now I have always used Poedit for generating my .po/.mo file and not even included .pot file in a theme or plugin. It has worked pretty well and I know that my finnish translations are working just fine. But with latest theme project …