Code Snippet

Grid layout without media queries

CSS has math and comparison functions like min(), max(), and minmax(). You have probably seen the issue that 3 columns layout looks strange at some viewport sizes where there isn’t enough room for content. Let’s try to automate our grid layout with the magic of CSS: This CSS creates a grid layout with a dynamic …

Aspect ratio CSS for responsive videos

Years and years we have used padding hack for responsive videos and iframes. But now we can use aspect-ratio property. The aspect-ratio property allows you to set the aspect ratio of an element directly. Here’s an example code to set an aspect ratio of 16:9 for an iframe using the aspect-ratio property: In the above …

Remember passphrase in WSL2 using keychain

I’ve been developing with Windows WSL2 system several months now, and I only have had couple of issues. One of them is that I’ve been forced to enter passphrase every time when I use SSH or pull from Git for example. So annoying. Keychain for rescue I tried all the tutorials that I could find …

SSL certificate issue on WSL2

I have had weird SSL certificate issue couple of times in WSL2 when I try to fetch posts in my Eleventy & WordPress setup. First time I took me 4 hours to figure this out, this time 2 hours. Now it’s time to add a note for future me! For some reason WSL2 system time …

Detecting Javascript in WordPress

Does you full screen menu or other fancy Javascript based solution work without Javascript? They can work if you’re detecting Javascript beforehand.

Simple and Accessible SVG Menu Hamburger Animation

We could argue should we ever use so called hamburger icon as a menu toggle button. But that’s not the point of this article. Instead, I’d like to share how to create simple and accessible SVG menu hamburger with animation. By animation I mean that when you toggle to menu, hamburger icon smoothly turns into …

Adding parameters to WordPress oEmbed

I was trying to enable the JavaScript API for an embedded youtube-player. It means that I somehow needed to add `&enablejsapi=1` to all youtube oEmbed url. When searching around I found a filter called `oembed_result`. Help from this article I found a solution I wanted. ` function my_plugin_enable_js_api( $html, $url, $args ) { /* Modify …

Screen reader text css issue in iPad

Uh, this one is hard to explain. I have debug it about 5 days. When using assistive text for screen readers we usually do it like this. ` .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; } ` It works on most cases but I hard weird issue when building social navigation menu. Using …

Translating custom image sizes

Earlier I wrote about how to translate custom page template names. How about doing the same thing for custom image sizes? You see what I mean.

Translating custom page template names

Have you ever wondered how to translate custom page template names? I know I have. I want to translate everything what it comes to WordPress. You now that custom page template starts with header like this. ` /* Template Name: My Custom Page */ ` But how to translate it? Thanks to this advice it’s …

Responsive audio Embed

Now that WordPress 3.6 is coming closer and closer with new shiny post format and audio Embed support, it’s time the test things as much as we can. But I’d like to see audio embed responsive in the same way as twitter embed. The basic idea is the same. ` .entry-content .wp-audio-shortcode { max-width: 100% …

Add parent menu class

Chip Bennett gave an excellent code snippet in theme reviewers email list. It adds `menu-item-parent` class to every parent menu item. ` function my_add_menu_parent_class( $items ) { $parents = array(); foreach ( $items as $item ) { if ( $item->menu_item_parent && $item->menu_item_parent > 0 ) { $parents[] = $item->menu_item_parent; } } foreach ( $items as …