MyDigitalSauce
by Justin Estrada
published on May 2, 2017
Share
This tutorial is for Beginner WordPress Theme Developers. This tutorial will show you in a few simple steps how to create widgets in WordPress that use Bootstrap’s Accordion interactive elements. These accordion widgets are excellent for enabling your users to toggle content by hiding or showing content.
Enqueue Bootstrap CSS & JS in your WordPress Theme
First we need to enqueue bootstrap assets in your WordPress Theme. Showing you how to enqueue assets is not the purpose of this simple tutorial. WP Beginner explains this in a nice article . Use fast CDN hosted Bootstrap assets for this tutorial.
Optional Enqueue Font Awesome‘s css asset for a caret icon for the Accordion Widget Title. Font Awesome CDN
Create a Widget Area in WordPress
Open your child theme’s functions.php file. Lets start off by registering a WordPress sidebar. We’ll build a custom wrapper function with parameters to pass in values to our register_sidebar() func. Then we call our custom function marinara_blog_widgets_init(). Pass the name as the first parameter, a sidebar ID for our second parameter (we’ll use this sidebar id to retrieve the sidebar in our websites’s front end) and a description parameter for the Widget area that displays in the WordPress admin area to describe our sidebar area.
- Replace the function prefix ‘marinara_blog_’ with your own prefix
- Place this code at the bottom of your functions.php file
/**
* Register widget area.
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
*/
function marinara_blog_widgets_init( $name, $id, $description) {
register_sidebar( array(
'name' => esc_html__( $name, 'marinara_blog' ),
'id' => $id,
'description' => __($description),
'before_widget' => '<div class="panel-group widget-group %2$s" id="accordion%1$s" role="tablist" aria-multiselectable="true"><div class="panel panel-default">',
'after_widget' => '</div></div></div></div>',
'before_title' => '<div class="panel-heading" role="tab" id="heading"><h4 class="panel-title"><a role="button" data-toggle="collapse" href="#collapse" aria-expanded="true" aria-controls="collapse">',
'after_title' => '<i class="fa fa-caret-down float-right"></i></a></h4></div><div id="collapse" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading"><div class="panel-body">',
) );
}
marinara_blog_widgets_init( 'Page Sidebar', 'page-sidebar-widget', 'Displays on the side of pages with a sidebar.' );
Make that Widget a Bootstrap Accordion
Visit Bootstrap for more details on interactive bootstrap elements. In the code above we used the ‘before_widget’, ‘after_widget’, ‘before_title’, ‘after_title’ array values passed into the register_sidebar function to put the Bootstrap HTML elements. I used the font library Font Awesome for my caret down icon.
Ensure that there is never a blank Widget Title
In order for our Bootstrap Accordion to work we need to always have a Widget title, so we are going to add_filter to the widget_title so that if there’s no Widget Title provided we will provide one.
- Replace the function prefix ‘marinara_blog_’ with your own prefix
- Place this code at the bottom of your child theme’s functions.php file
function marinara_blog_remove_widget_title( $widget_title ) {
if (!$widget_title):
return 'Set Widget Title';
else:
return $widget_title;
endif;
}
add_filter( 'widget_title', 'marinara_blog_remove_widget_title' );
Add Widgets to your Sidebar Area
Instructions From: https://codex.wordpress.org/WordPress_Widgets
- Go to Appearance > Customize in the WordPress Administration Screens.
- Click the Widget menu in the Theme Customizer to access to the Widget Customize Screen.
- Click the down arrow of Widget Area to list the already registered Widgets.
- Click Add a Widget button at the bottom of sidebar. It shows the list of available widgets.
- Click a widget you want to add. The widgets should be added in the sidebar.
- Preview your site and you should see the content from your new Widget.
- To arrange the Widgets within the Sidebar, drag and drop the widgets in the order you want or click Reorder link and click up arrow and down allow of each widget and click Done after the arrange operation.
- To customize the Widget features, click the down arrow in the right to expand the Widget’s interface.
- To remove the widget, click Remove from Widget’s interface in above step.
Use jQuery to Change Toggle classes
This jQuery loops through the widget panel elements and changes the headings and toggles to be unique. This ensures that the toggles are tied to the correct widget panel. Add this jQuery to your child theme’s JavaScript file.
jQuery(document).ready(function($){
var i = 0;
$('.widget-group .panel').each(function() {
$(this).find('.panel-heading').attr('id', 'heading' + i);
$(this).find('.panel-collapse').attr('id', 'toggle' + i).attr('aria-labelledby', 'heading' + i);
$(this).find('.panel-title a').attr('href', '#toggle' + i).attr('aria-controls', 'toggle' + i);
i++;
});
});
The following jQuery is optional. It adds/removes a css transform class to the fa-caret-down icon, rotating the icon on click.
/* Toggle Off Accordion Icon CLick */
jQuery('.panel-title a').click(function(){
var faIcon = jQuery(this).find('i');
if (faIcon.hasClass('rotate-up180') ){
faIcon.removeClass('rotate-up180').addClass('rotate-0');
} else {
faIcon.removeClass('rotate-0').addClass('rotate-up180');
}
});
Optional CSS
Some CSS styling for your new Bootstrap Accordion Widgets.
.float-right {
float: right;
}
.rotate-up180 {
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: 500ms;
}
.widget-group .panel {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.widget-group .panel {
border-bottom: 5px solid #d33100;
}
I hope that this quick and simple tutorial helped you create awesome Bootstrap Accordion Widget areas. If you spotted an error/typo, or you know a better more concise way to code any of this, please comment below. This is one of my first tutorials so comments and feedback are greatly encouraged! Thanks.
