Using Grid Accordion in WordPress

1. Create a new folder in the theme's folder, call it grid-accordion and copy inside this folder all the necessary files presented in the Setup chapter.

2. Open the theme's functions.php file and add the following code:

<?php
add_action('wp_enqueue_scripts', 'load_grid_accordion_scripts');
add_action('wp_footer', 'instantiate_grid_accordion');


function load_grid_accordion_scripts() {
    wp_enqueue_style('grid-accordion-css', get_bloginfo('template_directory') . '/grid-accordion/css/grid-accordion.min.css');
	
    wp_enqueue_script('jquery');
    wp_enqueue_script('grid-accordion-js', get_bloginfo('template_directory') . '/grid-accordion/js/jquery.gridAccordion.min.js');
}


function instantiate_grid_accordion() {
?>
    <script>
        jQuery(document).ready(function($){
            $('.grid-accordion').gridAccordion({
width:960,
height:400
}); }); </script> <?php } ?>

3. Create a new post/page and add the required HTML code for the accordion:

<div id="my-accordion" class="grid-accordion">
    <div class="ga-panels">
        <div class="ga-panel">
            <img class="ga-background" src="path/to/image1.jpg"/>
        </div>
        <div class="ga-panel">
            <img class="ga-background" src="path/to/image2.jpg"/>
        </div>
        <div class="ga-panel">
            <img class="ga-background" src="path/to/image3.jpg"/>
        </div>
        <div class="ga-panel">
            <img class="ga-background" src="path/to/image4.jpg"/>
        </div>
        <div class="ga-panel">
            <img class="ga-background" src="path/to/image5.jpg"/>
        </div>
    </div>
</div>
Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk