taylor.mitchellstjoseph

The ‘Code Area’ field allows you to add custom CSS, Javascript, HTML and PHP to an advanced custom field, whcih can be use anywhere in your wordpress template files.
The code area uses <a href="http://codemirror.net" rel="nofollow ugc">Code Mirror</a> and has various themes to suit.
CSS 
Type your css, no tags needed
Javascript 
Type your Javascript, no tags needed
PHP 
Type your PHP, no tags needed (Note, you can not open and close php tags anywhere in your code)
Output all types of code in the usual fashion the_field(‘code_area_field’);
Compatible with both ACF V3 & V4

Advanced Custom Fields – Code Area Field

Adds a 'Code Area' textarea editor field type for the Advanced Custom Fields WordPress plugin.

Florian Eickhorst

This plugin requires the plugin “Advanced Custom Fields” (ACF) to work.
Use this plugin to show ACF fields in the “All Posts”, Taxonomy or User table view in the WordPress admin backend.
Simply enable the new option “Admin Column” in your ACF field settings for any regular field (see exceptions below), and optionally set the columns position and width. Now there will be an extra column for your field shown in any overview of built-in or custom posts, pages, taxonomies (e.g. “All Pages”), and users.
You can use filters (see below) to control the plugins behaviour even more precisely.
Works on any regular ACF field (see exceptions below).
Compatible with Advanced Custom Fields 5.x and 6.x.
Github: https://github.com/fleiflei/acf-admin-columns
If you like this plugin please kindly leave your review and feedback here: https://wordpress.org/plugins/admin-columns-for-acf-fields/#reviews
<h3>Usage:</h3>
<ol>
<li>Install ACF and this plugin (see below)</li>
<li>In ACF open/create a “field group” and open any field for editing (see exceptions below).</li>
<li>Enable the “Admin Column” option in the field settings.</li>
<li>Specify the desired column position (optional).</li>
<li>Specify the desired column width (optional).</li>
<li>Save the field group and go to the “All posts” view of the post type or taxonomy (e.g. “Posts > All Posts”, or “Pages > All Pages”) and notice the newly added column for your field.</li>
</ol>
<h3>Excluded ACF Fields</h3>
Due to their nature the option “Admin Column” is not shown in ACF for these fields:
<ul>
<li>Accordion</li>
<li>Clone</li>
<li>Flexible Content</li>
<li>Google Map</li>
<li>Group</li>
<li>Message</li>
<li>Repeater</li>
<li>Tab</li>
</ul>
<h3>Filters</h3>
<h4>“acf/admin_columns/admin_columns”</h4>
Allows you to change which columns are displayed on the current admin screen.
Parameters
<pre><code>$acf_columns - Array of all ACF fields to be shown in current screen. Note that the column key is always prefixed with 'acf_'.
$field_groups - Array of all ACF field groups to be shown in current screen.
</code></pre>
Example:
Remove ‘my_field’ from the columns of the post type ‘my_custom_post_type’, even if it is set to be shown in the field settings. Note that the column key is always prefixed with ‘acf_’.
<pre><code>function my_admin_columns($acf_columns, $field_groups) {

 $screen = get_current_screen();
 if (!empty($screen) && $screen->post_type == 'my_custom_post_type' && isset($acf_columns['acf_my_field'])) {
 unset($acf_columns['acf_my_field']); // the key is always prefixed with 'acf_'
 }
 return $acf_columns;
}
add_filter('acf/admin_columns/admin_columns','my_admin_columns', 10, 2);
</code></pre>
<h4>“acf/admin_columns/sortable_columns”</h4>
Change which columns should be sortable. By default, every column is sortable.
Parameters
<pre><code>$columns - Array of all ACF fields to be shown in current screen.
</code></pre>
<h4>“acf/admin_columns/sort_order_type”</h4>
Change the sort order type for a certain field. By default, most fields are sorted by string comparison. Number fields are ordered by numeric comparison.
Parameters
<pre><code>$sort_order_type - The sort order type (either 'meta_value' or 'meta_value_num')
$field_properties - the ACF field properties
</code></pre>
Example:
Change the sort order type for the field ‘my_field’ to ‘meta_value_num’ (see https://developer.wordpress.org/reference/classes/wp_query/#order-orderby-parameters).
<pre><code>function my_sort_order_type($sort_order_type, $field_properties) {
 if ($field_properties['name'] == 'my_field') {
 return 'meta_value_num';
 }
 return $sort_order_type;
}
add_filter('acf/admin_columns/sort_order_type','my_sort_order_type', 10, 2);
</code></pre>
<h4>“acf/admin_columns/render_output”</h4>
Allows you to modify the output of a certain $field in every row of a posts table.
Parameters
<pre><code>$render_output - The field value after it was prepared for output
$field_properties - the ACF field properties
$field_value - the original raw field value
$post_id - the post id
</code></pre>
Example:
Output then length of text field ‘my_text_field’ instead of its contents.
<pre><code>function my_column_value($rendered_output, $field_properties, $field_value, $post_id) {
 if ($field_properties['name'] == 'my_text_field') {
 return strlen($field_value);
 }
 return $rendered_output;
}
add_filter('acf/admin_columns/render_output','my_column_value', 10, 4);
</code></pre>
<h4>“acf/admin_columns/render_raw”</h4>
Output a field value without any formatting. This is useful e.g. for image fields, where you might want to output the raw image url instead of a rendered image tag.
Parameters
<pre><code>$render_raw - boolean, set to true to render raw field value
$field_properties - the ACF field properties
$field_value - the original raw field value
$post_id - the post id
</code></pre>
Example:
Output the raw image url for image field ‘my_image_field’ for post ID 123.
<pre><code>function my_render_raw($render_raw, $field_properties, $field_value, $post_id) {
 if ($field_properties['name'] == 'my_image_field' && $post_id == 123) {
 return true;
 }
 return $render_raw;
}
add_filter('acf/admin_columns/render_raw','my_render_raw', 10, 4);
</code></pre>
<h4>“acf/admin_columns/default_value”</h4>
Allows you to override the default value for a certain field if it is empty. This only applies, if the field has a default value set in the field settings.
Parameters
<pre><code>$default_value - The default value
$field_properties - the ACF field properties
$field_value - the original raw field value
$post_id - the post id
</code></pre>
Example:
Change the default value for field ‘my_field’ to ‘my default value’ if it is empty.
<pre><code>function my_default_value($default_value, $field_properties, $field_value, $post_id) {
 if ($field_properties['name'] == 'my_field' && empty($field_value)) {
 return 'my default value';
 }
 return $default_value;
}
add_filter('acf/admin_columns/default_value','my_default_value', 10, 4);
</code></pre>
<h4>“acf/admin_columns/before_render_output”</h4>
Allows you to modify the field value of a certain $field before it is prepared for rendering. This filter is applied before ‘acf/admin_columns/render_output’.
Parameters
<pre><code>$field_value - the original raw field value
$field_properties - the ACF field properties
$post_id - the post id
</code></pre>
<h4>“acf/admin_columns/preview_image_size”</h4>
Change the preview image size for image or gallery fields. Default value is “thumbnail”.
Parameters
<pre><code>$preview_image_size - string with image size name
$field_properties - the ACF field properties
$post_id - the post id
</code></pre>
Example
Change preview image size to “medium”
<pre><code>function my_preview_image_size($preview_image_size, $field_properties, $post_id) {
 return 'medium';
}
add_filter('acf/admin_columns/preview_image_size','my_preview_image_size', 10, 3);
</code></pre>
<h4>“acf/admin_columns/preview_image_url”</h4>
Allows for manipulation of the url of the preview image for image or gallery fields.
Parameters
<pre><code>$preview_image_url - string with image url
$field_properties - the ACF field properties
$post_id - the post id
</code></pre>
Example
Replace preview image of field ‘my_image_field’ for post ID 123 to a random 100x100px image from https://picsum.photos.
<pre><code>function my_preview_image_url($preview_image_url, $field_properties, $post_id) {
 if ($field_properties['name'] == 'my_image_field' && $post_id == 123) {
 return 'https://picsum.photos/100/100';
 }
 return $preview_image_url;
}
add_filter('acf/admin_columns/preview_image_url','my_preview_image_url', 10, 3);
</code></pre>
<h4>“acf/admin_columns/link_wrap_url”</h4>
Automatically wrap url in link to that url. This is useful e.g. for text fields that contain a url, where you might want to output a link to the url instead of the url itself.
Parameters
<pre><code>$link_wrap_url - boolean, set to true to wrap url in link
$field_properties - the ACF field properties
$field_value - the original raw field value
$post_id - the post id
</code></pre>
Example:
Wrap url in link for text field ‘my_link_text_field’.
<pre><code>function my_link_wrap_url($link_wrap_url, $field_properties, $field_value, $post_id) {
 if ($field_properties['name'] == 'my_link_text_field') {
 return true;
 }
 return $link_wrap_url;
}
add_filter('acf/admin_columns/link_wrap_url','my_link_wrap_url', 10, 4);
</code></pre>
<h4>“acf/admin_columns/array_render_separator”</h4>
Allows you to change the separator for array fields (e.g. repeater, flexible content, gallery). Default value is “, “.
Parameters
<pre><code>$array_render_separator - string with separator, default = ", "
$field_properties - the ACF field properties
$field_value - the original raw field value
$post_id - the post id
</code></pre>
Example:
Output every array item on a new line, using the <code> </code> tag.
<pre><code>function my_array_render_separator($array_render_separator, $field_properties, $field_value, $post_id) {
 return " ";
}
add_filter('acf/admin_columns/array_render_separator','my_array_render_separator', 10, 4);
</code></pre>
<h4>“acf/admin_columns/no_value_placeholder”</h4>
Change the placeholder for empty values. Default value is “-“.
Parameters
<pre><code>$no_value_placeholder - string with placeholder, default = "-"
$field_properties - the ACF field properties
$field_value - the original raw field value
$post_id - the post id
</code></pre>
Example:
Output “n/a” for empty values.
<pre><code>function my_no_value_placeholder($no_value_placeholder, $field_properties, $field_value, $post_id) {
 return "n/a";
}
add_filter('acf/admin_columns/no_value_placeholder','my_no_value_placeholder', 10, 4);
</code></pre>
<h4>“acf/admin_columns/highlight_search_term_preg_replace_pattern”</h4>
Change the preg_replace pattern for highlighting the search term in the column output.
Parameters
<pre><code>$highlight_search_term_preg_replace_pattern - string with preg_replace pattern, default is '\\0' (yellow background, black font color)
$field_properties - the ACF field properties
$field_value - the original raw field value
$post_id - the post id
</code></pre>
Example:
Highlight search terms with red background and white font color.
<pre><code>function my_highlight_search_term_preg_replace_pattern($highlight_search_term_preg_replace_pattern, $field_properties, $field_value, $post_id) {
 return '\\0';
}
add_filter('acf/admin_columns/highlight_search_term_preg_replace_pattern','my_highlight_search_term_preg_replace_pattern', 10, 4);
</code></pre>
<h4>“acf/admin_columns/exclude_field_types”</h4>
Change which field types should not have the admin column option in the field settings.
Parameters
<pre><code>$excluded_field_types - array of excluded_field_types
</code></pre>
Example: disallow the admin column option for TEXT fields
<pre><code>function my_exclude_field_types($excluded_field_types) {
 $excluded_field_types[] = 'text';
 return $excluded_field_types;
}
add_filter('acf/admin_columns/exclude_field_types','my_exclude_field_types');
</code></pre>
<h4>“acf/admin_columns/column_position”</h4>
Change the column position for a certain field.
Parameters
<pre><code>$column_position - integer with column position
$field_name - the ACF field name
$field_properties - the ACF field properties
</code></pre>
Example:
Change the column position for field ‘my_field’ to 2.
<pre><code>function my_column_position($column_position, $field_name, $field_properties) {
 if ($field_name == 'my_field') {
 return 2;
 }
 return $column_position;
}
add_filter('acf/admin_columns/column_position','my_column_position', 10, 3);
</code></pre>
<h4>“acf/admin_columns/column_styles”</h4>
Change the column styles for a column.
Parameters
<pre><code>$column_styles - string with column styles
$field_name - the ACF field name
$field_properties - the ACF field properties
</code></pre>
Example:
Change the column width for field ‘my_field’ to 20% of the screen width and set the max-width of the column to 200px.
<pre><code>function my_column_styles($column_styles, $field_name, $field_properties) {
 if ($field_name == 'my_field') {
 return 'width: 20%; max-width: 200px;';
 }
 return $column_styles;
}
add_filter('acf/admin_columns/column_styles','my_column_styles', 10, 3);
</code></pre>

Admin Columns for ACF Fields

Great Plugin

Works well  - using it for WooCommerce Products with an ACF field.

NIce!

Allows you to enable columns for your ACF fields in post and taxonomy overviews (e.g. "All Posts") in the Wordpress admin backend.

Advanced Custom Fields – Code Area Field vs Admin Columns for ACF Fields