Today's post is about how to filter your WordPress admin view based on ACF repater field value by building a plugin which extends Admin Columns Pro. Too much names? Let's head into the topic!

Update 8th of Nov 2017 to handle WP Core update to 4.8.3
Thanks Kokers for making me aware of changes in recent update ([Polish lang]dzięki :) [/Polish lang]).
I went for the most straightforward fix but for anyone interested in solving it in more sophisticated way here is the info on make.wordpress.org and here you can find a bit more advanced solution.
You can also use remove_placeholder_escape method but its only available from WP 4.8.3 - as this blog post is addressed to everyone (also poeple on older WP versions) I did not want to place this function here.
We should wait for this ticket to be merged into the core though. As soon as its incorporated into the core we could ditch all the hacky solutions alltogether.

All of the code can be found on github.

Big thank you to Stefan van den Dungen Gronovius, one of Admin Columns Pro developers, who performed technical review of this article.

Intro

Recently I was building a project in which I use WordPress as an CMS/API to feed small React application. The concept behind it is very simple and bases on REST API, built into the WordPress Core since few major versions.

The application data is stored in custom posts, Advanced Custom Fields Pro is used for handling all post metadata. Administration of the entries is handled through regular WordPress views.

As soon as the number of entries grew the need for better filtering and searching admin views started to arise. This problem could be easily solved with the help of Admin Columns Pro which plays very nicely with ACF. The plugin gives you a possibility to add custom columns to your views. You can pick various types of columns: starting from simple fields like taxonomy, date, author to custom fields assigned to your CPT. What is even better - you can define filtering, sorting or inline-editing of the data in the column.

Filtering repeater fields

As ACF repeater fields are complex and each repeater implementation is different there is no way to filter or sort those fields out of the box.

I was digging around ACF documentation and support forums with no success. Unfortunately Admin Columns docs were also silent about this. There was a starter template showing how to build your custom column handling but without filter examples.

I had few ideas in my mind but all seemed hacky and I was thinking if there is a way to do it proper way.

While I was wondering if filtering of such fields is doable I have contacted Stefan van den Dungen Gronovius, one of AC developers, who ensured me that this is possible and gave some very important tips.

Assumptions

Before we start coding lets assume few things:

• We use most recent WordPress (4.8.2), Advanced Custom Fields (5.6.3) and Admin Columns Pro (4.0.10).
• We have a Custom Post Types called order and product.
• The order CPT contains a repeater field called kg_order_items which contains two fields: (1) relationship field (to product CPT) called kg_order_item and (2) a number field called kg_order_quantity.
• What we are trying to achieve is to be able to filter the admin view of orders which contain particular product assigned to it.

The code

We will be basing our solution on the aforementioned starter template so let's build a plugin first by creating a directory in wp-content/plugins/custom-columns

Big thanks you for the Admin Columns development team for releasing the template!

index.php

/*
Plugin Name:    Admin Columns - Filtering repeater fields
Plugin URI:     https://kamilgrzegorczyk.com
Description:    Handling filtering for custom repeater fields
Version:        1.0
Author:         Kamil Grzegorczyk
Author URI:     https://kamilgrzegorczyk.com
*/

//Registering the column for free version of the plugin. You won't be able to use filtering though!
add_action( 'ac/column_types', function ( AC_ListScreen $list_screen ) {

    // Use the type: 'post', 'user', 'comment' or 'media'.
    if ( 'post' === $list_screen->get_meta_type() ) {
        require_once plugin_dir_path( __FILE__ ) . 'ac-column-assigned_products.php';
        $list_screen->register_column_type( new AC_Column_Assigned_Products() );
    }
});

//Registering the column for PRO version of the plugin
add_action( 'acp/column_types', function ( AC_ListScreen $list_screen ) {

    // Use the type: 'post', 'user', 'comment' or 'media'.
    if ( 'post' === $list_screen->get_meta_type() ) {
        require_once plugin_dir_path( __FILE__ ) . 'ac-column-assigned_products.php';
        require_once plugin_dir_path( __FILE__ ) . 'acp-column-assigned_products.php';
        $list_screen->register_column_type( new ACP_Column_Assigned_Products );
    }
});

As our story goal is to make the column filterable therefore we can rely only on acp/column_types action. This is due to the face that filtering is available only in PRO version.
I am adding ac/column_types action though (from the free version) just for the sake of promoting proper code structure (as each use case may be different and you may need it).

ac-column-assigned_products.php

In this file we are going to define basic information about our column. Additonally, we are going to define how the data should be fetched and displayed.

Class overview

class AC_Column_Assigned_Products extends AC_Column {

    public function __construct() {

        // Identifier, pick an unique name. Single word, no spaces. Underscores allowed.
        $this->set_type( 'column-assigned-products' );

        // Default column label.
        $this->set_label( __( 'Assigned products', 'ac-assigned-products' ) );
    }

    public function get_value( $post_id ) {}

    public function get_raw_value( $post_id ) {}
}

Data fetching
Now let's implement data fetching function which will read the products stored in our repeater field:

public function get_raw_value( $post_id ) {
    $products = get_field( 'kg_order_items', $post_id );
    $data       = [];

    if ( ! empty( $products ) ) {
        foreach ( $products as $product ) {
            $data[] = [
                'id'    => $product[ 'kg_order_item' ]->ID,
                'title' => $product[ 'kg_order_item' ]->post_title,
            ];
        }
    }

    return $data;
}

Data display
Last part would be to handle the display of the values in the admin view. As mentioned before - each use case is different - for example in my personal projects I display the title of assigned item which links to the edit page.

public function get_value( $post_id ) {
    // get raw value
    $products = $this->get_raw_value( $post_id );

    $data = [];

    if ( ! empty( $products ) ) {
        foreach ( $products as $product ) {
            $data[] = '<a href="' . esc_url( get_edit_post_link( $product[ 'id' ] ) ) . '">' . $product[ 'title' ] . '</a>';
        }
    }

    return implode( ',<br>', $data );
}

acp-column-assigned_products.php

The last file which is going to contain the "meat" of our functionality.

The file is going to contain two classes which is contrary to best practice of having one class per file but it is a conscious decission for the sake of simplicity.

Column Class
As we need only filtering therefore we implement only ACP_Column_FilteringInterface. If you need also sorting and editing you need to implement two additional interfaces (ACP_Column_EditingInterface, ACP_Column_SortingInterface). Starter template contains an example of such scenario.

class ACP_Column_Assigned_Products extends AC_Column_Assigned_Products
    implements ACP_Column_FilteringInterface {

    public function filtering() {
        return new ACP_Filtering_Model_Assigned_Products( $this );
    }
}

Model Class Overview
Model class tells the plugin how the filtering should be handled. There are many methods you may implement here but two of them are mandatory:

class ACP_Filtering_Model_Assigned_Products extends ACP_Filtering_Model {

    public function get_filtering_vars( $vars ) {}

    public function get_filtering_data() {}
}

Fetching filter options
Now we need to supply the array of options which are going to be used to populate our filter. There are many ways to do it which depend on particular scenario.

Please have in mind that in many cases populating such filter may be very expensive process which may influence performance of admin pages.

public function get_filtering_data() {
    return [
        'order'        => 'label',
        'empty_option' => false,
        'options'      => $this->get_products_for_dropdown(),
    ];
}

private function get_products_for_dropdown() {
    $args = [
        'posts_per_page' => -1,
        'post_type'      => 'product',
    ];
    $products_query = new \WP_Query( $args );
    $data             = [];

    if ( $products_query->have_posts() ) {
        while ( $products_query->have_posts() ) {
            $products_query->the_post();
            $data[ $products_query->post->ID ] = $products_query->post->post_title;
        }
        wp_reset_postdata();
    }

    return $data;
}

Handling the filter values
Let's finish our functionality and tell WordPress how it should handle filter values. For this purpose we are going to use function get_filtering_vars which exposes all query vars used to generate current admin screen.

Fetching repeater fields is a bit tricky but the whole process can be found in ACF documentation about "sub custom field values".

More information on how to modify query vars can be found in WordPress Documentation page about WP Query Class

public function get_filtering_vars( $vars ) {

    add_filter( 'posts_where', function ( $where ) {
        $where = str_replace( "meta_key = 'kg_order_items_", "meta_key LIKE 'kg_order_items_", $where );

        return $where;
    } );

    $product_id = $this->get_filter_value();

    $vars[ 'meta_query' ][] = [
        'key'     => 'kg_order_items_%_kg_order_item',
        'compare' => '=',
        'value'   => $product_id,
    ];

    return $vars;
}

Last steps and summary

After you finish your plugin you need to activate. Afterwards you need to configure columns set up at Admin Columns Pro settings page and add new column to order CPT listing view.

All of the code can be found on github
If you have any questions please do not hesitate to contact me.

Recently I stumbled upon the small issue regarding the object returned by Facebook Graph API. Our app was relatively simple allowing us to get user age and location in order to determine whether user was allowed to see the site content or not.

We used PHP SDK for that purpose and fetched the data using get method. We wanted to get the information in one query for obvious performance reasons.

Our get URL looked like

/me?fields=age_range,location{location}

And response provided was something like (example simplified):

"age_range": { 
  "min": "21"
},
"location": {
  "location": {
    "city": "some city",
    "country": "some location",
    "latitude": 35.000,
    "longitude": 15.123
  }
}

So everything nice and perfect? Not really.

Unfortunately we could not match country names with our internal system and location object from Facebook was not containing country ISO code. We were unable to modify our internal system records as it was used across many other systems.

Official Graph API documentation was not providing any examples regarding how to fetch more information. Of course there was a way to make == 2 API calls == and then merge the information together but this wasn't something we were seeking for (performance, stupid).

As always in those kind of situations I have tried looking on Stack Overflow in case someone already had this issue before. Unfortunately answers were not helpful (this, that or that one) and still there was no solution to our issue.

With no more options on hand I started fooling around with the URL parameters. After short trial and error it worked! (you love that moment too, don't you? :) )

As it looks like the answer is pretty straightforward -> You can nest your get parameters in order to fetch more properties of the objects.

By modifying URL to look like

/me?fields=age_range,location{location{country_code}}

you can get the response which contains all needed information.

I hope that this helps someone!

Warning: This post covers scenarios when non-printable characters are entered by you during development process. Sanitization of user or 3rd party API input is a completely different topic.

Welcome to the world of non-printable UTF-8 characters. They are easy to miss in the editor and can cause various issues in the code. Especially when using the same text string in different languages which treat them in their own way.

Examples

Most common non-printable Unicode characters which you may encounter are:

• \u200b: zero width space
• \u200c: zero width non-joiner
• \u200d: zero width joiner
• \ufeff: zero width no-break space
• \u2028: line separator
• \u2029: paragraph separator

What are the dangers?

There are multiple issues which occur, their severity level depends on the context in which those characters exist in the code.

JavaScript

Due to some design inconsistencies line and paragraph separators are perfectly valid characters in JSON world but will cause a SyntaxError: Unexpected token ILLEGAL when used in JavaScript.

Modern browsers and JSON parsing libraries have methods to overcome that issue but you can still introduce it easily by passing variables from PHP (or other backend language) to JS by using common var x = '<?= $php_var;?>'; method.

If you are interested to read more please visit this great article about JavaScript and JSON

Example above is just a tip of an iceberg as errors may vary depending on the context in which those characters exist. Try to search for "non-printable characters" at StackOverflow and you can get more than 2,000 results.

HTML/CSS

Alternatively if those characters end up in template you may see various styling issues - those characters are most of the time properly rendered by browser so do not be surprised from having weird gaps when there is "nothing" in CSS and there is no visible markup. Simply browser can interpret your invisible \u2028\ character as regular line break and apply spacing in there.

How they landed in my code?

It is difficult to enter them on purpose but it is very easy to introduce those characters via simple copy-paste. Most of the common sources might be a PDF, MSWord document or simple output of Google Chrome Developer Tools edit HTML mode.

How to spot them outside editor?

If you are very lucky and the error exists only in HTML then you might spot red dots in Chrome Dev Tools (edit HTML mode) which are representing non-printable characters.

There is also chance that the browser will output some weird characters to the screen indicating that there is an issue. That may depend on browser encoding settings, used fonts or placement of such character.

If you are less lucky though then you may get weird, uncommon SyntaxError: Unexpected token ILLEGAL JavaScript errors. If there is no clear and visible syntax issue in the code then it may be caused by aforementioned non-printable characters.

How to solve it?

Some of the editors have possibility to highlight non-printable characters by adjusting its settings.

If you use the one and only PHPStorm (as me) then Victor Rosenberg wrote a plugin called Zero width character locator which scans your code in order to detect various "sneaky little bastards". The plugin can be downloaded from the link below or installed directly from PHPStorm settings.
http://plugins.jetbrains.com/plugin/7448

Activate it and voilà - you have the inspection results directly in your code editor window. If that is not enough then you have also a possibility to scan complete project directory and find all problematic occurrences.

After fixing the issue you may notice the difference in git diff output:

I hope that this helps someone. Let me know if you have any questions!

If you would need to flush DNS cache in newest OSX from Cuppertino you can use same command as before:

sudo killall -HUP mDNSResponder

But what if your DNS is resolving properly but in you browser you see wrong results? As it occurs browser may keep its own DNS cache which may sometimes go against your efforts.

To clean DNS cache in Chrome you need to navigate to:

chrome://net-internals/#dns

and press "Clear host cache" button.

Well... this is not how I have envisioned it before but...

You know that ideas are nothing because execution is the king?

And yes - unfortunately having perfectionist character and plenty of ideas ended up in me setting up my blog for 18 months. Without any visible progress.

Same thing also happened to many other ideas of mine. Those died simply because they were too time consuming, too complicated to make them in a way which would please me (read => never).

That is why I decided to stop all of this bullshit about choosing pixel perfect theme template, setting up crazy WordPress install with gazillion of options and all of this fanciness.

I have chosen Ghost, NodeJS based CMS which I have backed up as Kickstarter project many years ago.

Why?

Because I wanted to try something new. On everyday basis I manage few WordPress sites, I work in WordPress, I read about WordPress, I write extensions and themes for it. Ghost seems to be something which will take me away from it and let me concentrate on producing content. Something which should be actually most important.

So lets start and try to figure out thing on the way!