Polylang Snippet: Automatically get id of translated page

I’m currently working on a multi-language WordPress site project and while I’m trying to build everything without having to rely on specific page id’s, it happens from time to time.

I’m using Polylang to achieve the multi-lang capability and this plugin is great. Thanks for the recommendation goes out to Nils.

Let’s say our default language is german and you need the title of a specific page and this page has the id of 52. This is how you would normally do it:

<?php echo get_the_title(52); ?>

But this will always return the german title of this page no matter the current language. That’s because with Polylang a translation is just a new page which is internally linked to the other. This means the translation of page id 52 might actually be page id 106.

So while I need the title of page id 52 in the default language I want to output the title of page id 106 when english is active.

Luckily there’s an easy way to do that with Polylang:

<?php echo get_the_title(pll_get_post(52)); ?>

This will recognise the link between page id 52 and 106, check the current language and use the right id. Happy end!

Force repaint of an element with Javascript

Today I had a pretty nasty situation in which Safari on OSX would render an element in a place where it doesn’t belong. It was clearly a rendering bug/issue because when highlighting the element in the web inspector the place where the element should have been rendered was highlighted.

I tried adding transform: translate3d(0,0,0); to push the element on it’s own layer to increase rendering performance, but that didn’t help. I thought that if I could bring the browser to repaint the element, I’d be fine, even though it’s probably not the nicest solution. I dug around the internet and found a solution to force the repaint of an element with Javascript:

/**
 * Force Repaint of Header because of
   OSX Safari Rendering Bug
 */
var siteHeader = document.getElementById('header');

siteHeader.style.display='none';
siteHeader.offsetHeight; // no need to store this anywhere, the reference is enough
siteHeader.style.display='block';

But be careful when you execute this code. You don’t want to repaint an element more often than you absolutely have to.

Snippet: Check if website is added to the home screen or opened in mobile safari

if(navigator.standalone === undefined || !!navigator.standalone) {
    // if added to home screen do this
} else {
    // if opened in mobile safari do this
}

Show content on top of YouTube video

I just ran into the problem that I needed a YouTube video to play in the background and have some other content covering it. Worked fine in all major browsers out of the box but for IE (all versions) you need to add wmode=opaque at the end of the src attribute like that:

<iframe width="640" height="480" src="http://www.youtube.com/embed/9B7te184ZpQ&wmode=opaque" frameborder="0" allowfullscreen></iframe>

Snippet: Smooth scrolling on iOS

Let’s assume you have a container in which you need to scroll. You just set a specific height and width and set it to overflow-y: scroll; No big deal, eh? But if you try to scroll within this container on your iOS device you’ll notice that it doesn’t scroll very smoothly and it doesn’t bounce at the top and end. But you can change this very simply:

.my-container {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

Snippet: clearfix

For the longest time I just used a div with the class of clear with just clear: both; but it turns out the following is better and these days the modern way (IE8 and up) to go. You can just apply the class clearfix to any element that has floating stuff inside and needs to be cleared. Works perfect and doesn’t need any additional markup.

.clearfix {
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

In case you’re wondering what this confusing syntax is all about, have a look at SASS/SCSS.

Snippet: Styling HTML5 Placeholder

You are using the HTML5 placeholder="Your name" attribute but don’t know how to style it? Here is how you do it:

.my-input::-webkit-input-placeholder {
    color: #555;
}

.my-input:-moz-placeholder {
    color: #555;
}

.my-input:-ms-input-placeholder {
    color: #555;
}

Make sure you don’t comma separate the selectors because browsers stop interpreting the whole list if they don’t understand one selector in it.