GithubHelp home page GithubHelp logo

puntonero / acf-input-counter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from hube2/acf-input-counter

4.0 2.0 1.0 45 KB

Adds a counter to all text and textarea fields with character limits

CSS 0.53% JavaScript 57.78% PHP 41.69%

acf-input-counter's Introduction

ACF Input Counter

Supports ACF 5

Adds a counter to all text and textarea fields with character limits.

This is a simple plugin that will add a counter below all ACF text and text area fields to show how many characters have been added and what the limit is. The display will look something like this:

chars: 25 of 55

This plugin will not work in ACF 4 for 2 reasons:

  • The acf/render_field hook is not supported by ACF 4
  • The JavaScript used in this plugin is specific to ACF 5

This plugin also serves as a simple example of how to extend the functionality of fields in ACF 5.

Add Counter Filter

By defaults, the counter is added to all text and textarea fields that have a max length. If you would like to only add the counter on specific fields you can filter them by either the ACF Wrapper Class or the ACF Wrapper ID of the field. You can allow multiple classes or ids. If classes or ID values are present then only fields that have one of the classes or ids will include a counter.

Filter by Class

add_filter('acf-input-counter/classes', 'my_input_counter_filter');
function my_input_counter_filter($classes=array()) {
  // add 1 or more classes to the array
	$classes[] = 'this-is-a-class';
	return $classes;
}

Fields that have one of the classes or ids will include a counter.

Filter by ID

add_filter('acf-input-counter/ids', 'my_input_counter_filter');
function my_input_counter_filter($ids=array()) {
  // add 1 or more classes to the array
	$ids[] = 'this-is-an-ID';
	return $ids;
}

Filter the Display

To filter the display add a filter wherever you would add a filter.

add_filter('acf-input-counter/display', 'my_acf_counter_filter');
function my_acf_counter_filter($display) {
    $display = sprintf(
        __('Characters = %1$s of %2$s', 'acf-counter'),
        '%%len%%',
        '%%max%%'
    );
	return $display;
}

In the example string above %%len%% represents where you want the current character count shown and %%max%% represents where you want the fields maximum length displayed. You can generate this string any way you want. For example, you can translate it or use sprintf(), as long as it contains the two markers where the values should be shown. If you do not include these markers then they simply will not be shown. It's up to you to make sure they are present.

I've puzzled with how to allow this to be altered and this is the best I've been able to come up with. If you have a better idea, let me know in the issues.

Automatic Updates

Install GitHub Updater on your site if you want to recieve automatic updates for this plugin.

Remove Nag

You may notice that I've started adding a little nag to my plugins. It's just a box on some pages that lists my plugins that you're using with a request do consider making a donation for using them. If you want to disable them add the following filter to your functions.php file.

add_filter('remove_hube2_nag', '__return_true');

i18n

The plugin is now also internationalized and it has a .pot file. Also included is a Dutch translation by Beee.

acf-input-counter's People

Contributors

hube2 avatar beee4life avatar

Stargazers

 avatar Amy avatar  avatar  avatar

Watchers

James Cloos avatar Matteo Tagliatti avatar

Forkers

squarecandy

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.