Title: Need help with custom coding in wordpress
Last modified: November 17, 2023

---

# Need help with custom coding in wordpress

 *  [pgdev](https://wordpress.org/support/users/pgdev/)
 * (@pgdev)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/need-help-with-custom-coding-in-wordpress/)
 * Hi All, I was working with a accordion which I created with HTML, CSS, Javascript.
   I’m full aware of where to place HTML, CSS code for specific pages or post. But
   I’m not very sure where to place this JS code snippet. 
   few things I’ve tried:-
   > I tried placing JS code in ‘code snippet’ in header, then body & then footer
   section. But I couldn’t see the accordion functioning properly. -> I tried placing
   JS in functions.php within custom named function. Nothing works for me. Please
   guide me in this. I know I’m being silly but I’m beginner to WP.Html:
 *     ```wp-block-code
       <button class="accordion-para"><img id="accor-img" src="https://latpay.com/wp-content/uploads/2023/10/Group-292.png" />Ecomm</button>
       <div class="panell">
         <p><a href="https://latpay.com/our-solutions#hosted-payment-page">Hosted Payment Pages</a><br>
   
       <a href="https://latpay.com/our-solutions#virtual-terminal">Virtual Terminals</a><br>
   
       <a href="https://latpay.com/our-solutions/#payment-links">Payment Links</a><br>
   
       <a href="https://latpay.com/innovative-technology/#mobile-payment-technology">QR Code Payments</a><br>
   
       <a href="https://latpay.com/our-solutions/#mobile-payment-solutions">Mobile Sites</a><br>
   
       <a href="https://latpay.com/integrations/">Integrations &amp; Plugins</a><br>
   
       <a href="https://latpay.com/our-solutions/#alternative-payments">One-Click Payments</a></p>
       </div>
   
       <button class="accordion-para"><img id="accor-img" src="https://latpay.com/wp-content/uploads/2023/10/Group-288.png" />In-store</button>
       <div class="panell">
         <p><a href="https://latpay.com/terminal/">Terminals</a><br>
   
       <a href="https://latpay.com/mpos/">mPOS</a><br>
   
       <a href="https://latpay.com/our-solutions#virtual-terminal">Virtual Terminals</a><br>
   
       <a href="https://latpay.com/our-solutions/#mobile-payment-solutions">Go Payments App</a></p>
       </div>
   
       <button class="accordion-para"><img id="accor-img" src="https://latpay.com/wp-content/uploads/2023/10/Group-290.png" />A winning combination of both</button>
       <div class="panell">
         <p>Ask us about an omnichannel approach for online and in-store. Send us an email at sales@latpay.com and we’ll be in contact with more information.</p>
       </div>
       ```
   
 * CSS:
 *     ```wp-block-code
       #accor-img{
         float: left;
         padding-right: 40px;
         }
   
       .accordion-para {
         background-color: #fff;
         color: #253370;
         cursor: pointer;
         padding: 18px;
         width: 100%;
         border-top: 1px solid #ccdced;
         border-bottom: 1px solid #ccdced;
         border-left: none;
         border-right: none;
         text-align: left;
         outline: none;
         font-size: 15px;
         font-weight: bolder;
         transition: 0.4s;
         line-height: 2px;
       }
   
       .active, {
         background-color: #ccc;
       }
   
       .accordion-para:after {
         content: '\002B';
         color: #777;
         font-weight: bold;
         float: right;
         margin-left: 5px;
       }
   
       .active:after {
         content: "\2212";
       }
   
       .panell {
         padding: 0 18px;
         background-color: white;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.2s ease-out;
       }
       ```
   
 * JS:
 *     ```wp-block-code
       <script>
       var acc = document.getElementsByClassName("accordion-para");
       var i;
   
       for (i = 0; i < acc.length; i++) {
         acc[i].addEventListener("click", function() {
           this.classList.toggle("active");
           var panel = this.nextElementSibling;
           if (panel.style.maxHeight) {
             panel.style.maxHeight = null;
           } else {
             panel.style.maxHeight = panel.scrollHeight + "px";
           } 
         });
       }
       </script>
       ```
   
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fneed-help-with-custom-coding-in-wordpress%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [Alexander](https://wordpress.org/support/users/alextonio22/)
 * (@alextonio22)
 * [2 years, 6 months ago](https://wordpress.org/support/topic/need-help-with-custom-coding-in-wordpress/#post-17209400)
 * Hi pgdev,
 * I understand your concern regarding the integration of your accordion, which 
   you’ve developed using HTML, CSS, and JavaScript, into your WordPress site. To
   ensure smooth functionality, let’s proceed with the following steps to properly
   enqueue the JavaScript code within the WordPress environment. I have two solutions
   for where and how you can put your JavaScript code.
 * **Enqueue the Script in Functions.php**
    1. Open your theme’s `functions.php` file.
    2. Inside the `functions.php` file, add the following code:
 * `function enqueue_accordion_script() { wp_enqueue_script('accordion-script', 
   get_template_directory_uri() . '/js/accordion-script.js', array('jquery'), null,
   true); } add_action('wp_enqueue_scripts', 'enqueue_accordion_script');`
    1. Save the `functions.php` file.
    2. Create a folder called “js” in your theme directory.
    3. Inside the “js” folder, create a new file named `accordion-script.js` and copy
       your JavaScript code into this file.
    4. Save the `accordion-script.js` file.
 * This method ensures that your script is properly enqueued and loaded in the footer
   of your WordPress site.
 * **Use a Custom HTML Block**
 * If you’re working with the WordPress block editor, you can also add the script
   directly to a specific page or post by using a Custom HTML block:
    1. Edit the page or post where you want to add the accordion.
    2. Add a new Custom HTML block.
    3. Copy and paste your JavaScript code into the Custom HTML block.
    4. Update or publish the page.
 * If this doesnt work, please send me a screenshot of any errors you might have.
 * Kind regards,
 * Alexander

Viewing 1 replies (of 1 total)

The topic ‘Need help with custom coding in wordpress’ is closed to new replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 1 reply
 * 2 participants
 * Last reply from: [Alexander](https://wordpress.org/support/users/alextonio22/)
 * Last activity: [2 years, 6 months ago](https://wordpress.org/support/topic/need-help-with-custom-coding-in-wordpress/#post-17209400)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics