Sharing Tutorials and Code for Creating Toggle Shortcodes in WordPress Themes
If you have just released your first WordPress theme on Themeforest, you might be interested in adding some awesome features to it. One of the most popular features is the toggle shortcode, which allows users to click on a title to open or close a section of content. In this article, we will provide you with a tutorial and code for creating toggle shortcodes in your WordPress theme.
Creating the Toggle Shortcode
The first step in creating a toggle shortcode is to add a shortcode function to your functions.php file. This function should have two options: title and color. By adding these options, users can choose the title that they want to click on for the toggle effect and the color that they want to use for the toggle.
Here is the code that you can copy and paste into your functions.php file:
// Register the toggle shortcode
function toggle_shortcode( $atts, $content = null ) {
extract( shortcode_atts( array(
‘title’ => ‘Click To Open’,
‘color’ => ”
), $atts ) );
return ‘
‘ . esc_html( $title ) . ‘
‘;
}
add_shortcode( ‘toggle’, ‘toggle_shortcode’ );
The Toggle Javascript, CSS & Images
Once you have added the shortcode function to your functions.php file, you need to add the Javascript, CSS, and images that will create the toggle effect.
Javascript
Here is the Javascript that you can add to your custom.js file or in the head of your theme. Make sure that you are already including the jQuery library as it is needed for the rest of the Javascript to work.
jQuery( function( $ ) {
$( document ).ready(function() {
$( “.toggle_container” ).hide();
$( “.toggle-trigger” ).click( function() {
$(this).toggleClass( “active” ).next().slideToggle( “normal” );
return false;
} );
} );
} );
CSS
Here is the CSS that you can add to your style.css file:
/*toggle*/
.toggle-trigger {
margin: 0px !important;
font-size: 18px;
padding: 10px;
padding-left: 30px;
background-color: #F5F5F5;
background-image: url(‘images/shortcodes/toggle-plus.png’);
background-position: 10px center;
background-repeat: no-repeat;
}
.toggle-trigger a {
color: #333;
text-decoration: none;
display: block;
}
.toggle-trigger a:hover {
color: #0489B7;
text-decoration: underline;
}
.toggle-trigger.active{
background-image: url(‘images/shortcodes/toggle-minus.png’) !important;
background-position: 10px center;
background-repeat: no-repeat;
}
.toggle_container {
overflow: hidden;
padding: 20px 10px;
}
Images
Finally, you need to add the two images for the shortcode. Simply right-click on the images below and hit “save image as” to save them to your theme’s images folder.
Using the Shortcode
Now that you have added all the code required for the shortcode, you can easily insert your toggles to your site just like this:
[toggle title=”Your Toggle Title” color=”white”]Toggle Content[/toggle]
If you are too lazy to create your own toggle shortcode, you can always check out our premium WordPress theme, “Classy WordPress Business Theme”, which already includes this feature. Click on the picture below to check it out and buy it.
