├── .gitignore
├── README.md
├── app
├── Admin.php
├── Docs.php
├── Init.php
├── Shortcodes.php
└── Utilities.php
├── assets
├── images
│ ├── placeholder-lg.png
│ └── placeholder.png
├── json
│ └── documentation.json
├── scripts
│ └── main.js
├── styles
│ ├── _buttons.scss
│ ├── _modal.scss
│ ├── _variables.scss
│ └── main.scss
└── templates
│ ├── documentation.mustache
│ └── toc.mustache
├── bootstrap-4-shortcodes.php
├── bower.json
├── composer.json
├── composer.lock
├── dist
├── css
│ └── main.css
├── docs
│ ├── documentation.php
│ └── toc.php
├── images
│ ├── placeholder-lg.png
│ └── placeholder.png
└── scripts
│ ├── bootstrap.js
│ ├── bootstrap.js.map
│ └── main.js
├── gulpfile.js
├── languages
└── .gitkeep
├── package.json
├── templates
└── modal-template.php
├── vendor
├── autoload.php
└── composer
│ ├── ClassLoader.php
│ ├── LICENSE
│ ├── autoload_classmap.php
│ ├── autoload_namespaces.php
│ ├── autoload_psr4.php
│ ├── autoload_real.php
│ ├── autoload_static.php
│ └── installed.json
├── yarn-error.log
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ** WORK IN PROGRESS**
2 | This plugin is *not ready for use in production*. Not all Bootstrap 4 shortcodes are supported yet, and depending on development some featuers may break periodically. We will update this note when we're ready to release a production-ready version of this tool.
3 |
4 | *Thank you!*
5 |
6 | Bootstrap 4 Shortcodes for WordPress
7 | ===
8 |
9 |  
10 |
11 | WordPress plugin that provides shortcodes for easier use of the Bootstrap 4 styles and components in your content.
12 |
13 | **Bootstrap 4 Shortcodes for WordPress** creates a simple, out of the way button just above the WordPress TinyMCE editor (next to the "Add Media" button) which pops up the plugin's documentation and shortcode examples for reference and handy "Insert Example" links to send the example shortcodes straight to the editor. There are no additional TinyMCE buttons to clutter up your screen, just great, easy to use shortcodes!
14 |
15 | # Requirements
16 |   
17 |
18 | This plugin won't do anything if you don't have WordPress theme built with the [Bootstrap 4](http://getbootstrap.com/) framework. **This plugin does not include the Bootstrap framework**.
19 |
20 | The plugin is tested to work with ```Bootstrap 4``` and ```WordPress 4.6``` and **requires PHP 5.3 or later**.
21 |
--------------------------------------------------------------------------------
/app/Admin.php:
--------------------------------------------------------------------------------
1 | ',
34 | $popup_id,
35 | esc_attr( $title ),
36 | esc_url( '#' ),
37 | esc_attr( 'button add_media bootstrap-shortcodes-button'),
38 | esc_attr( 'bs_bootstrap-logo wp-media-buttons-icon' )
39 | //sprintf( '', esc_url( $img ) )
40 | );
41 | }
42 |
43 |
44 | //Function to register and enqueue the documentation stylesheets
45 | function bootstrap_shortcodes_help_styles() {
46 | wp_register_style( 'bootstrap-4-shortcodes', BS4_SHORTCODES_URL . '/dist/css/main.css' );
47 | wp_enqueue_style( 'bootstrap-4-shortcodes' );
48 | //Visual Composer is nothing but problems
49 | $handle = 'vc_bootstrap_js';
50 | $list = 'enqueued';
51 | if (wp_script_is( $handle, $list )) {
52 | wp_dequeue_script( $handle );
53 | }
54 | }
55 |
56 |
57 | /**
58 | * Produce a warning if PHP is less than version 5.3
59 | * @return [type] [description]
60 | */
61 | function php_version_notice() {
62 | $class = 'notice notice-error';
63 | $message = __( 'Bootstrap 3 Shortcodes for WordPress requires PHP version 5.3 or later. You are running PHP version ' . PHP_VERSION . '. Please upgrade to a supported version of PHP.', 'sample-text-domain' );
64 | printf( '
%2$s
[' => '[', 35 | ']
' => ']', 36 | ']dropup
or dropright
flags to set these variations.",
695 | "description": "Dropup, dropright variations",
696 | "code": "[dropdown dropup]\n [button dropdown]Dropdown Button[/button]\n [dropdown-menu]\n Link 1\n Link 2\n Link 3\n [/dropdown-menu]\n[/dropdown]"
697 | }
698 | ],
699 | "shortcodes": [
700 | {
701 | "name": "dropdown",
702 | "note": "",
703 | "parameters": [
704 | {
705 | "name": "dropup",
706 | "description": "Set dropup variation.",
707 | "required": "0",
708 | "values": "🚩 (flag)",
709 | "default": ""
710 | },
711 | {
712 | "name": "dropright",
713 | "description": "Set dropright variation.",
714 | "required": "0",
715 | "values": "🚩 (flag)",
716 | "default": ""
717 | }
718 | ]
719 | },
720 | {
721 | "name": "dropdown-menu",
722 | "note": "",
723 | "parameters": [
724 | {
725 | "name": "align",
726 | "description": "Alignment of the dropdown menu.",
727 | "required": "0",
728 | "values": "right",
729 | "default": ""
730 | }
731 | ]
732 | },
733 | {
734 | "name": "dropdown-divider",
735 | "note": "",
736 | "parameters": ""
737 | }
738 | ]
739 | },
740 | {
741 | "title": "Jumbotron",
742 | "id": "jumbotron",
743 | "examples": [
744 | {
745 | "note": "",
746 | "description": "Basic example",
747 | "code": "[jumbotron]\n fluid
flag to make a fluid jumbotron.",
751 | "description": "Fluid example",
752 | "code": "[jumbotron fluid]\n [list-group]
must wrap a set of links or list items inserted via the WordPress editor.",
774 | "examples": [
775 | {
776 | "note": "",
777 | "description": "Basic example",
778 | "code": "[list-group]\n list-group-item
shortcode to give them contextual styles",
787 | "description": "Contextual styles",
788 | "code": "[list-group]\n [list-group-item type=\"success\"]Cras justo odio[/list-group-item]\n [list-group-item type=\"info\"]Dapibus ac facilisis in[/list-group-item]\n [list-group-item type=\"warning\"]Morbi leo risus[/list-group-item]\n [list-group-item type=\"danger\"]Porta ac consectetur ac[/list-group-item]\n[/list-group]"
789 | }
790 | ],
791 | "shortcodes": [
792 | {
793 | "name": "list-group",
794 | "parameters": ""
795 | },
796 | {
797 | "name": "list-group-item",
798 | "parameters": [
799 | {
800 | "name": "type",
801 | "description": "The type of the list-group-item.",
802 | "required": "0",
803 | "values": "primary, secondary, success, info, warning, danger, light, dark",
804 | "default": "primary"
805 | }
806 | ]
807 | }
808 | ]
809 | },
810 | {
811 | "title": "Modal",
812 | "id": "modal",
813 | "note": "",
814 | "examples": [
815 | {
816 | "note": "",
817 | "description": "Basic example",
818 | "code": "[modal fade id=\"example-modal\"]\n [modal-header]size=\"large\"
attribute for a larger modal",
822 | "description": "Large example",
823 | "code": "[modal size=\"lg\" fade id=\"example-modal-lg\"]\n [modal-header]size=\"small\"
attribute for a smaller modal",
827 | "description": "Small example",
828 | "code": "[modal size=\"sm\" fade id=\"example-modal-sm\"]\n [modal-header]centered
flag to vertically center the modal",
832 | "description": "Vertically centered",
833 | "code": "[modal fade centered id=\"centered-modal\"]\n [modal-header][nav]
must wrap a set of links and list items inserted via the WordPress editor.",
888 | "examples": [
889 | {
890 | "note": "",
891 | "description": "Basic example",
892 | "code": "[nav]\n vertical
flag to make a vertical nav.",
896 | "description": "Vertical example",
897 | "code": "[nav vertical]\n fill
flag to force navs to the full available width.",
901 | "description": "Fill example",
902 | "code": "[nav fill]\n justified
flag to force nav-items to have equal widths.",
906 | "description": "Fill example",
907 | "code": "[nav fill]\n tabs
flag to make an tab-styled nav.",
911 | "description": "Tabs example",
912 | "code": "[nav tabs]\n pills
flag to make an pills-styled nav.",
916 | "description": "Pills example",
917 | "code": "[nav pills]\n stacked
flag.",
921 | "description": "Stacked pills example",
922 | "code": "[nav pills stacked]\n [pagination]
must wrap a set of list items and links inserted via the WordPress editor.",
965 | "examples": [
966 | {
967 | "note": "",
968 | "description": "Basic example",
969 | "code": "[pagination]\n \n[/pagination]"
970 | },
971 | {
972 | "note": "",
973 | "description": "Large example",
974 | "code": "[pagination size=\"lg\"]\n \n[/pagination]"
975 | },
976 | {
977 | "note": "",
978 | "description": "Small example",
979 | "code": "[pagination size=\"sm\"]\n \n[/pagination]"
980 | },
981 | {
982 | "note": "",
983 | "description": "Active and disabled states",
984 | "code": "[pagination]\n \n[/pagination]"
985 | }
986 | ],
987 | "shortcodes": [
988 | {
989 | "name": "pagination",
990 | "parameters": [
991 | {
992 | "name": "size",
993 | "description": "Optional size of the pagination.",
994 | "required": "0",
995 | "values": "none, sm, lg",
996 | "default": ""
997 | }
998 | ]
999 | }
1000 | ]
1001 | },
1002 | {
1003 | "title": "Popovers",
1004 | "id": "popovers",
1005 | "note": "Wrap any element in a the [popover]
shortcode to give it a popover. This may not work well on all elements depending on styling and other factors.",
1006 | "examples": [
1007 | {
1008 | "note": "",
1009 | "description": "Basic example",
1010 | "code": "[popover title=\"Popover title\" content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" ]Cras justo odio[/popover]"
1011 | },
1012 | {
1013 | "note": "Use the focus trigger to dismiss popovers on the next click that the user makes.",
1014 | "description": "Dismiss on next click",
1015 | "code": "[popover trigger=\"focus\" title=\"Popover title\" content=\"Vivamus sagittis lacus vel augue laoreet rutrum faucibus.\" ]Cras justo odio[/popover]"
1016 | }
1017 | ],
1018 | "shortcodes": [
1019 | {
1020 | "name": "popover",
1021 | "parameters": [
1022 | {
1023 | "name": "title",
1024 | "description": "The title of the popover.",
1025 | "required": "0",
1026 | "values": "any text",
1027 | "default": ""
1028 | },
1029 | {
1030 | "name": "content",
1031 | "description": "The content of the popover.",
1032 | "required": "0",
1033 | "values": "any text",
1034 | "default": ""
1035 | },
1036 | {
1037 | "name": "placement",
1038 | "description": "Placement of the popover.",
1039 | "required": "0",
1040 | "values": "top, bottom, left, right",
1041 | "default": "top"
1042 | },
1043 | {
1044 | "name": "trigger",
1045 | "description": "The popover trigger (use focus
to dismiss popover on next click).",
1046 | "required": "0",
1047 | "values": "any text",
1048 | "default": ""
1049 | }
1050 | ]
1051 | }
1052 | ]
1053 | },
1054 | {
1055 | "title": "Progress",
1056 | "id": "progress",
1057 | "note": "",
1058 | "examples": [
1059 | {
1060 | "note": "",
1061 | "description": "Basic example",
1062 | "code": "[progress type=\"primary\" value=\"50\"]"
1063 | },
1064 | {
1065 | "note": "Use the striped
flag to produce a striped progress bar.",
1066 | "description": "Striped example",
1067 | "code": "[progress type=\"primary\" value=\"50\" striped]"
1068 | }
1069 | ],
1070 | "shortcodes": [
1071 | {
1072 | "name": "progress",
1073 | "parameters": [
1074 | {
1075 | "name": "type",
1076 | "description": "The type of the progress bar.",
1077 | "required": "0",
1078 | "values": "primary, success, info, warning, danger",
1079 | "default": "primary"
1080 | },
1081 | {
1082 | "name": "striped",
1083 | "description": "Flag whether progress bar should be striped.",
1084 | "required": "0",
1085 | "values": "🚩 (flag)",
1086 | "default": ""
1087 | },
1088 | {
1089 | "name": "animated",
1090 | "description": "Flag whether progress bar should be animated.",
1091 | "required": "0",
1092 | "values": "🚩 (flag)",
1093 | "default": ""
1094 | }
1095 | ]
1096 | }
1097 | ]
1098 | },
1099 | {
1100 | "title": "Tooltips",
1101 | "id": "tooltips",
1102 | "note": "Wrap any element in a the [tooltip]
shortcode to give it a tooltip. This may not work well on all elements depending on styling and other factors.",
1103 | "examples": [
1104 | {
1105 | "note": "",
1106 | "description": "Basic example",
1107 | "code": "[tooltip title=\"Tooltip text\"]Cras justo odio[/tooltip]"
1108 | },
1109 | {
1110 | "note": "Use the html
flag to allow HTML in the tooltip",
1111 | "description": "HTML tooltip",
1112 | "code": "[tooltip title=\"Tooltip with HTML\" tooltip]Cras justo odio[/tooltip]"
1113 | }
1114 | ],
1115 | "shortcodes": [
1116 | {
1117 | "name": "tooltip",
1118 | "parameters": [
1119 | {
1120 | "name": "title",
1121 | "description": "The content of the tooltip.",
1122 | "required": "0",
1123 | "values": "any text",
1124 | "default": ""
1125 | },
1126 | {
1127 | "name": "placement",
1128 | "description": "Placement of the tooltip.",
1129 | "required": "0",
1130 | "values": "top, bottom, left, right",
1131 | "default": "top"
1132 | },
1133 | {
1134 | "name": "html",
1135 | "description": "Flag whether content should be parsed for HTML.",
1136 | "required": "0",
1137 | "values": "🚩 (flag)",
1138 | "default": ""
1139 | }
1140 | ]
1141 | }
1142 | ]
1143 | }
1144 | ]
1145 | },
1146 | {
1147 | "title": "Utilities",
1148 | "items": [
1149 | {
1150 | "title": "Borders",
1151 | "id": "borders",
1152 | "note": "Use border utilities to quickly style the border
and border-radius
of an element. Great for images, buttons, or any other element.",
1153 | "examples": [
1154 | {
1155 | "note": "",
1156 | "description": "Basic example",
1157 | "code": "[border rounded]6 | 7 |
8 |{{{note}}}
23 |{{code}}
24 | 40 | | 41 | | 42 | | 43 | | 44 | |
---|---|---|---|---|
{{name}} | 50 |51 | | {{required}} | 52 |{{values}} | 53 |{{default}} | 54 |
class | 58 |59 | | 60 | | 61 | | 62 | |
data | 65 |66 | | 67 | | 68 | | 69 | |