Creating a toggle shortcode for the WordPress FAQ page

After briefly launching my first theme on Themeforest, the "Elegant WordPress Business Theme", I decided to share some tutorials and code on how I created some of the awesome features of the theme.

I will not walk you through each and every step explaining each piece of code because it is so easy to understand, but will provide you with everything you need to cut / paste the shortcodes into your own theme (even! better!)

The toggle short code

Crear el shortcode de Toggle es muy simple. Todo lo que tenemos que hacer es agregar una función de código corto a nuestro archivo functions.php que tiene 2 opciones: título y color. De esta manera, cuando agrega el código corto, puede elegir el título en el que puede hacer un clic para el efecto de alternancia y el color para que pueda agregar varias opciones de color a su alternancia, como puede ver en mi link de demostración anterior, donde he agregado un blanco y estilo gris para que la gente pueda crear este efecto de color alterno.

Just copy and paste the shortcode 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 '<h3 class="toggle-trigger"><a href="#">' . esc_html( $title  ) . '</a></h3><div class="toggle_container">' . do_shortcode( wp_kses_post( $content ) ) . '</div>';

}
add_shortcode( 'toggle', 'toggle_shortcode' );

Alternate JavaScript, CSS e imágenes

A continuación se muestra todo el código que utilicé para crear los conmutadores en mi tema premium de WordPress si desea alcanzar el mismo aspecto.

Javascript

Here is the Javascript. You can put this in your custom.js file or in your theme header.

Important: asegúrese de que ya está incluyendo la biblioteca jQuery, ya que es necesaria para que el resto de js funcione 😉

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. Just put it in your style.css file

/ * toggle * / .toggle-trigger {margin: 0px! important; font-size: 18px; padding: 10px; padding-left: 30px; background-color: #F5F5F5; background-image: url address ('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 to: hover {color: #0489B7; text-decoration: underline; } .toggle-trigger.active {background-image: url address ('images / shortcodes / toggle-minus.png')! important; background-position: 10px center; background-repeat: no-repeat; } .toggle_container {overflow: hidden; padding: 20px 10px; }

Images

Below are the two images of the short code. Just right click and hit "save image as" to save the images to your theme's image folder.

Using the short code

Now that you have added all the required code for the short code, you can easily embed your switches on your site like this:

Your Toggle Title
Toggle Content

Too lazy? Get the theme!

Click the image below to see my premium theme and buy it. 🙂