Haxo!

WordPress: check if is the first page of pagination

A quick function to determine if the very first page of pagination is displayed.

HTML5 Validation Polyfill

Because Safari and Chrome on Android don’t by default display tooltip error messages, we use the ubiquitous, standard, HTML5 “Constraint Validation” API and pseudo-classes.

http://www.html5rocks.com/en/tutorials/forms/constraintvalidation

How to load an element for a whole “branch” of content in WordPress

It seems that there isn’t currently a WordPress core function that allows to test if a page belongs to a specific tree of pages.
For example, you might want to load a special element for a whole “branch” of content. Like a “services” page and all its children single pages. It is a pretty common need, actually.

Add this code to functions.php:

and call it into templates with this

Target safari, not chrome via css

I was experiencing a css issue regarding a different css visual rendering in Chrome and Safari.
I was in need to target only Safari and not Chrome via css. Well, i found this interesting article that gave me the answer.

So, if you want to override a style in Safari:

Clearing Bootstrap 3 columns

I often experience an annoying issue when prototyping with Bootstrap : when a multi column grid layout collapses/expands into another view it could happen that the elements don’t clear correctly.

The guys at Bootstrap seem to be aware of the problem and suggest to add a new div in between the columns to help it understand where the columns should clear. Not a very straightforward solution, especially with complex layouts. This is their suggestion:

WordPress: add horizontal navigation through siblings

I recently used this snippet to create an horizontal navigation through siblings, children of a parent page defined as a custom post type.

How to display a custom taxonomy dropdown in WP admin

I found this powerful snippet that easily allows to display a custom taxonomy dropdown in WordPress admin. Very useful to find stuff!

How to check if a post belongs to custom taxonomy – WordPress

I was trying to figure this issue out, when I realized that there isn’t currently a core function to check whether a post belongs to a taxonomy term.
This can be easily done using this function (copy and pasteinto your functions.php file)

Then call the function like this

How to Shrink Navigation Bar on Scroll

With the following code you can turn on page scroll event a fixed top navigation bar into a shrinking element. We are using Bootstrap 3 and JQuery.

Supposing your top navigation bar has a .navbar class here’s the javascript:

Bootstrap 3 Media Query Breakpoints

Just a reminder of Bootstrap 3 Media Query Breakpoints:

How to remove gutter between Bootstrap3 columns

Another quick tip for Bootstrap3.
I had to remove padding between columns and I could’t find a dedicated css class in Bootstrap. I fixed creating this one:

How to add open/closed icon to Twitter Bootstrap accordions

If using Bootsrap 3, there is a very fast and unobtrusive way to add open/closed icon to accordions.
Pure CSS, no extra js needed:

SnazzyMaps

The Google Maps API allows to apply custom styles to maps, and Snazzy Maps is a community built around creating great looking styles for Google Maps.

A nice place for developer and designers to pick a style that matches the theme of their website.

If you are somewhat familiar with the Google Maps API, the implementation is pretty straightforward.

https://snazzymaps.com/

How to Retrieve the Post Thumbnail URL in WordPress

I think you usually use the the_post_thumbnail( $size, $attr ); function to retrieve the post thumbnail image inside your WordPress template. If you’re creating a custom feature for your theme it could happen you simply need to get the plain url of the post thumbnail. Just paste this code inside the loop code that you are writing and you’re done.

Highlight current category in wp_list_categories (custom taxonomy)

If you’re using wp_list_categories to display all terms of your custom taxonomy it could happen that the generated list highlights current category name when you browse the category page and NOT when you browse single posts. Here’s how I fixed this issue, adding a ‘current-cat’ class to the current category item even in single posts pages. Add this code to your functions.php file.

WordPress Custom Post Type: how to display related content

I always prefer to avoid the use of a third-party plugin, if it’s possible to acheive the same result with a few lines of code.
Let’s see how to display a loop of related posts inside the single page template of a custom post type.

We are using the wp_get_object_terms function to retrieve posts from the same custom taxonomy.

How to Add a Custom Class to a Featured Image in WordPress

A quick and ready-to-use snippet to add a class to post thumbnails in your WordPress theme. It simply uses a parameter of the_post_thumbnail to set the class.

How to detect mobile devices via PHP

Mobile Detect (http://mobiledetect.net/) is a very lightweight PHP class for detecting mobile devices. It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment and it’s very straightforward to implement.

First you need to download, include and instantiate the class.

How to generate a different HTML/PHP output for the first WordPress post

In case you need to generate a different output for the first post of your loop, you can easily acheive that using this very straightforward solution (count posts function).

How to shorten the title of posts in WordPress

A very quick function to shorten the title of your WordPress posts. Open functions.php and add these lines:

Now we need to display the short version of the title inside our theme.

We are applyng this function to the native WP get_the_title() function in order to display the shorter version of the title.

It is possible to use this tecnique to shorten almost everything you want.