Home/ Questions/Q 7909655
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T12:31:48+00:00

Im trying to make a custom wordpresss theme. I want to install a Jquery

  • 0

Im trying to make a custom wordpresss theme. I want to install a Jquery plugin (slideshow). I so far have a theme installed that I created but don’t know how to make the plugin interface with my theme. Do I need to declare a space in a div or place some php code in the theme so that the plugin knows where to go?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can directly write the jquery code for the sliders. For example, applying accordion slider in my template page:

    header.php file, save it in your custom theme folder

    <!DOCTYPE html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
global $page, $paged;

wp_title( '|', true, 'right' );

// Add the blog name.
bloginfo( 'name' );

// Add the blog description for the home/front page.
$site_description = get_bloginfo( 'description', 'display' );
if ( $site_description && ( is_home() || is_front_page() ) )
    echo " | $site_description";

// Add a page number if necessary:
if ( $paged >= 2 || $page >= 2 )
    echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

?></title> 
 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-
 1.7.1.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style/main.css"  
 type="text/css" />
<script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.1.3.js" 
 type="text/javascript"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.kwicks-
1.5.1.pack.js"></script>
<!--Accordion -->
<script type="text/javascript">
        $(document).ready(function() {
            $('.kwicks').kwicks({
                max : 800,
                spacing : 5
            });
        });
</script>
   <!--end Accordion-->
   </head>
    <body>
    <div id="wrapper">
  <div class="w1">
    <div class="w2">
        <!-- header -->
        <header id="header">
            <div class="line"></div>
            <!-- logo -->
                <h1 class="logo"><a href="#">xcvdfgdf - Career Development  
                 Centre</a></h1>

                <!-- main nav -->
                <nav id="nav">
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
            </nav>
            </header>

       <?php wp_head(); ?>

    Then, create slider.php, where you want your slider to appear

    <?php
/**
 * Template Name: accordion
 *
 * Selectable from a dropdown menu on the edit page screen.
 */
?>
<?php get_header(); ?>
<body>
            <!-- main -->
<div id="main">
                <!-- gallery -->
                <section class="intro gallery">
                    <div class="gallery-holder">
                        <div class="slider_list_accordion">  
                            <ul class="kwicks horizontal" >  
                                     <li id="kwick_1"><img src="<?php 
bloginfo('template_url'); ?>/images/slider-1.png" alt="" 
/></li>  
                                     <li id="kwick_2"><img src="<?php 
bloginfo('template_url'); ?>/images/slider-2.png" alt="" 
/></li>   
                                     <li id="kwick_3"><img src="<?php 
bloginfo('template_url'); ?>/images/slider-3.png" alt=""  
/></li>  
                             </ul> 
                        </div> 
                    </div>
                 </section>
<?php get_footer(); ?>

    Then, footer.php

    <footer id="footer">
            <div class="footer-holder">
                <div class="container">
                    <div class="case">
                        <!-- contact -->
                        <div class="contact">
                            <section class="contact-holder">
                                <h4>Get in Touch</h4>
                                <dl>
                                    <dt>Telephone:</dt>
                                    <dd>+1 800 603 6035</dd>
                                    <dt>Fax:</dt>
                                    <dd>+1 800 889 9898</dd>
                                    <dt>E-mail:</dt>
                                    <dd><a 
href="mailto:contact@vycdc.com">contact@vycdc.com</a></dd>
                                </dl>
                                <address>9870St Vincent Place, <br >Glasgow, DC 45 Fr 
45.</address>
                            </section>
<div class="add">
                    <div class="case">
                        <strong class="copyright">&copy;  
Copyright 2012 sdfr Development Centre. All rights reserved.</strong>
                        <nav class="add-nav">
                            <ul>
                                <li><a href="#">Sitemap</a></li>
                                <li><a href="#">Terms of use</a></li>
                                <li><a href="#">Privacy policy</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>  
</body>
</html>

    Then, in WordPress, go to Pages->Add new. In title enter Home and in the right side you will see Templates. Click the dropdown and select accordion and click the publish button.

    Now, click on the top left corner on the website or blog name to check for the slides.

    • 0