Below, you’ll find a detailed guide on how to add the Bootstrap Modals Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Bootstrap Modals Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Bootstrap Modals Plugin and the shortcodes it provides:
"Bootstrap Modals is a handy WordPress plugin that effortlessly integrates Bootstrap's modal functionality into your website, allowing for easy creation and customization of pop-up dialog boxes."
- [bs_modal]
- [bs_trigger]
Bootstrap Modals [bs_modal] Shortcode
The ‘bs_modal’ shortcode is a part of the Bootstrap-Modals plugin. It generates a modal pop-up box on your webpage. The shortcode accepts parameters like ‘id’, ‘class’, ‘header’, ‘footer’, and ‘arialabel’ to customize the modal. It uses these parameters to generate a unique modal structure with a header, body, and footer. The content within the modal is dynamically populated using the $content variable.
Shortcode: [bs_modal]
Parameters
Here is a list of all possible bs_modal shortcode parameters and attributes:
id– Unique identifier for the modal sectionclass– Adds custom CSS classes to the modal dialogheader– Specifies the heading text of the modalfooter– Specifies the footer text of the modalarialabel– Provides accessibility by defining a label for screen readers
Examples and Usage
Basic example – A simple bootstrap modal with a unique ID and content.
[bs_modal id="myModal" header="Modal Title"]This is the modal content[/bs_modal]Advanced examples
Creating a bootstrap modal with additional class, footer, and aria-label attributes. The modal will have a specific CSS class for styling, a footer text, and an aria-label for accessibility.
[bs_modal id="myModal" class="my-modal" header="Modal Title" footer="This is the footer" arialabel="myAriaLabel"]This is the modal content[/bs_modal]Creating a bootstrap modal without a header. The modal will only display the content and the footer, without any title in the header.
[bs_modal id="myModal" footer="This is the footer"]This is the modal content[/bs_modal]Creating a bootstrap modal without a footer. The modal will only display the content and the header, without any text in the footer.
[bs_modal id="myModal" header="Modal Title"]This is the modal content[/bs_modal]PHP Function Code
In case you have difficulties debugging what causing issues with [bs_modal] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'bs_modal', __NAMESPACE__ . '\\bm_shortcode' );Shortcode PHP function:
function bm_shortcode( $atts, $content = null ) {
$atts = shortcode_atts(
array(
'id' => '',
'class' => '',
'header' => '',
'footer' => '',
'arialabel' => '',
),
$atts,
'bs_modal'
);
?>
<div id="<?php esc_attr_e( $atts['id']); ?>" class="modal fade" tabindex="-1" role="dialog" <?php if( $atts['arialabel'] ) : ?>aria-labelledby="<?php esc_attr_e($atts['arialabel']); ?>"<?php endif; ?>>
<div class="modal-dialog <?php esc_attr_e($atts['class']); ?>" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">×</button>
<?php if( $atts['header'] ) : ?>
<h4 class="modal-title" <?php if( $atts['arialabel'] ) : ?>aria-labelledby="<?php esc_attr_e($atts['arialabel']); ?>"<?php endif; ?>><?php echo $atts['header']; ?></h4>
<?php endif; ?>
</div>
<div class="modal-body"><?php echo $content; ?></div>
<?php if( $atts['footer'] ) : ?>
<div class="modal-footer"><?php echo $atts['footer']; ?></div>
<?php endif; ?>
</div>
</div>
</div>
<?php
}
Code file location:
bootstrap-modals/bootstrap-modals/modal.phpBootstrap Modals [bs_trigger] Shortcode
The ‘bs_trigger’ shortcode from the Bootstrap-Modals plugin is designed to create a trigger button for a modal window. This shortcode takes three parameters: ‘id’, ‘class’, and ‘arialabel’. ‘id’ is used to uniquely identify the modal window that will be triggered. ‘class’ allows you to add custom CSS classes, while ‘arialabel’ is for accessibility purposes. The output is a button that, when clicked, opens the specified modal window. The button text is determined by the content enclosed within the shortcode.
Shortcode: [bs_trigger]
Parameters
Here is a list of all possible bs_trigger shortcode parameters and attributes:
id– The unique identifier for the modal to be triggeredclass– Optional CSS classes to style the trigger buttonarialabel– Accessibility label for screen readers
Examples and Usage
Basic example – A simple usage of the bootstrap-modals plugin shortcode to trigger a modal with an ID.
[bs_trigger id="myModal" /]In this example, the shortcode triggers a modal with the ID “myModal”. The ID should match the ID of the modal you want to trigger.
Advanced examples
Example of using the shortcode to trigger a modal with an ID and additional class.
[bs_trigger id="myModal" class="myClass" /]In this advanced example, the shortcode not only triggers a modal with the ID “myModal”, but also assigns an additional class to the trigger button. The class “myClass” can be used to apply additional styling to the button.
Example of using the shortcode with all available attributes.
[bs_trigger id="myModal" class="myClass" arialabel="Open Modal" /]This example demonstrates the usage of all the available attributes. Along with the ID and class, it also defines an aria-label for the trigger button. The aria-label attribute is used to define a string that labels the current element for the purpose of accessibility.
PHP Function Code
In case you have difficulties debugging what causing issues with [bs_trigger] shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'bs_trigger', __NAMESPACE__ . '\\bm__trigger_shortcode' );Shortcode PHP function:
function bm__trigger_shortcode( $atts, $content = null ) {
$atts = shortcode_atts(
array(
'id' => '',
'class' => '',
'arialabel' => '',
),
$atts,
'bs_trigger'
);
?>
<a class="btn btn-primary btn-lg <?php esc_attr_e($atts['class']); ?>" href="#<?php esc_attr_e($atts['id']); ?>" data-toggle="modal"><?php echo $content; ?></a>
<?php
}
Code file location:
bootstrap-modals/bootstrap-modals/modal.phpConclusion
Now that you’ve learned how to embed the Bootstrap Modals Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply