Advanced Custom Fields: Bootstrap Button

by teakor

Overview


This plugin adds a field for creating a Bootstrap 3 or 4 button for the popular plugin Advanced Custom Fields. In addition to supporting all Bootstrap 3 or 4 options, you can insert an internal or external link with the link picker.

General Configuration Options:

1.  Text button.
2.  HTML tags (a, button, input, submit).
3.  Block Level Buttons
4.  Active or disabled button status.
5.  Additional CSS class (For any customizations).
6.  Internal or external link with link picker.
7.  Rel attribute for links (Alternate, Author, Bookmark, External, Help, License, Next, Nofollow, Noreferrer, Noopener, Prev, Search, Tag)

Bootstrap 3 Configuration Options:

1.  Button Style (Default, Primary, Success, Information, Warning, Danger, Link).
2.  Button Size (Default, Large, Small, Extra Small).

Bootstrap 4 Configuration Options:

1.  Button Style (Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, Link).
2.  Button without background color
3.  Button Size (Default, Large, Small).

Points from 1 to 6 in General Configuration Options and Points from 1 to 3 in Bootstrap 3 or 4 Configuration Options can be configured with default values and you can choose whether or not to display these options on the page or post, where this custom field was added.

For more information on points from 2 to 4 in General Configuration Options and for Bootstrap 3 or 4 Configuration Options refer to the Bootstrap documentation 3.3.7[https://getbootstrap.com/docs/3.3/css/#buttons] or Bootstrap 4.1[https://getbootstrap.com/docs/4.1/components/buttons/].

How to use it

The plugin does not include the Bootstrap 3 css in the theme in order to be able to display it correctly, it is necessary to insert the Bootstrap 3 css in the theme, following the guidelines of WordPress: Including CSS & JavaScript.

To view the button in the front end, a function has been implemented, which will facilitate the operation. This function will only read the values of the button and return the correct HTML.

//With echo
 acf_bbutton_render(get_field('my-bbutton'));

 //Without echo. Returns only the button's string
 acf_bbutton_render(get_field('my-bbutton'), false);

Compatibility

This ACF field type is compatible with:
* ACF 4
* ACF 5
* Bootstrap 3.3.7
* Bootstrap 4.+

Discuss


Summary
Version:
1.1.0
Last updated:
Active installations:
WordPress Version:
4.5.0 or higher
Tested up to:
4.9.15
Ratings