Author Archive for Sridhar Katakam – Page 2

How To Use Classic Accordion In WordPress

Classic Accordion is a jQuery plugin that allows you to easily create accordion panels. It costs $6 and can be bought from codecanyon.

One of the members of unofficial Skype chat group shared it with me so I can show him how to get it working in WordPress.

Live Demo:

Here’s how I set it up:

1) Extracted the downloaded file and uploaded its contents under /assets/grid-accordion in my site’s root.

Screen Shot 2013-02-15 at 8.48.39 PM

jquery-1.6.1.min.js need not be uploaded as WordPress includes jQuery.

2) Added the following in child theme’s functions.php:

// load javascript in footer
add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {
	wp_enqueue_script( 'classicAccordion', get_bloginfo('wpurl') . '/assets/grid-accordion/js/jquery.classicAccordion.fluid.js', array('jquery'), '1.0', true );

    wp_enqueue_style( 'classic-accordion', get_bloginfo('wpurl') . '/assets/grid-accordion/css/classic-accordion.css' );
    wp_enqueue_style( 'accordion_fluid', get_bloginfo('wpurl') . '/assets/grid-accordion/css/style.css' );

    add_action( 'print_footer_scripts', 'my_footer_script' );

// Add jQuery to footer

function my_footer_script() { ?>
    <script type="text/javascript">

    	var accordion;

        jQuery(function($) {

            $('.grid-accordion').classicAccordion({width:'100%', height:'100%', slideshow:true});            

<?php }

3) Added the following at the end of child theme’s style.css:

.grid-accordion-container {
	height: 354px;
	margin-bottom: 1em;

ul.grid-accordion {
	margin-left: 0;

In the above, 354px is the height of smallest (height-wise) image amongst the ones that are going to be shown in the accordion.

4) Added this HTML code in this Post:

<div class="grid-accordion-container">
<ul class="grid-accordion">
        <img src="" />
        <img src="" />
        <img src="" />
        <img src="" />
        <img src="" />
        <img src="" />
        <img src="" />  
        <img src="" />
        <img src="" />

That's it!

Getting Easy FancyBox To Work Properly When WP Supersized Is Active


FancyBox is enabled for ‘Images & Inline content’ at Settings -> Media.

A Page or a Post shows WordPress gallery using this sample shortcode:

[gallery ids="729,728,727,676" link="file"]

WP Supersized is active.

As long as Supersized is not used on this above Page/Post having the gallery of linked thumbnails, clicking on any thumb will bring up the bigger image in FancyBox just fine.

But if Supersized is used on the galleried Page/Post, the following problem comes up:


RavanH, author of Easy FancyBox wrote:

the conflict seems related to the jquery.animate-enhanced from wp supersized and the jquery.easing used in my plugin.

Searching for jquery.animate-enhanced in wp-content/plugins/wp-supersized/includes/WPSupersized.php shows:

wp_register_script('jquery_animate_enhanced', content_url().'/plugins/wp-supersized/js/jquery.animate-enhanced.min.js',array('jquery'),self::supersized_jquery_animate_enhanced_version);

In order to disable jquery.animate-enhanced, we can use wp_deregister_script() like so:

Add the following at the end of child theme’s functions.php (before closing PHP tag, ?> if any):

add_action('wp_enqueue_scripts', 'add_my_code');

function add_my_code() {

Now clicking on linked thumbs will work fine as expected.


Full Screen Background Slideshow In WordPress

WP Supersized allows you to display a resizable full screen background slideshow on pages/posts of your choice.

There are at least 3 plugins that claim to do what WP Supersized does, but none can match its features, versatility and price (it’s free).

I am going to use WP Supersized only on this particular post and not on other pages of this site.

Here is what I have done:

  1. Installed and activated WP Supersized plugin
  2. Went to plugin’s settings page and changed ‘Slide interval’ from the default 3000 to 5000. 3000 feels a little fast.
  3. Display -> Entered the ID of this post in ‘Post ID where Supersized will be used’
  4. Created a directory named ‘supersized-slides’ under wp-content directory and uploaded images.

That’s it. All other settings are at their defaults.

Below are screenshots from the plugin’s settings page:

Styling a Select Box In WordPress Using jQuery

In a recent project that I did, one of the tasks was to display a select box (combo box) that shows items from a WordPress custom menu and styled to match the website’s overall look and that it looks the same in all major browsers.

Screenshots of output:

closed state:

open state:

Populating list box with custom menu items

I used Dropdown Menus plugin for this. This plugin adds a widget from which custom menu can be selected.

Styling the select box

From my research I realized that select boxes will be drawn by a combo of OS and browser and it is not possible to style them to have a consistent look in all browsers with just CSS alone. We have to therefore rely on jQuery (JavaScript). There seems to be at least 4 jQuery solutions for this. I have selected SelectBoxIt. The others are JavaScript image combobox, Chosen and Uniform.

I followed the instructions on SelectBoxIt’s homepage and put together a HTML file having the styled select box. If you are interested, it can be downloaded from here: Styled Select Box using jQuery static HTML page (923)

The next thing was to get this running in WordPress.

Here is the code I added to child theme’s functions.php:

// Let's hook in our function with the javascript files with the wp_enqueue_scripts hook
add_action( 'wp_enqueue_scripts', 'load_my_files' );
// Register javascript file(s) and enqueue where needed
function load_my_files() {
wp_register_style( 'prefix-style', '' );
wp_enqueue_style( 'prefix-style' );
// wp_deregister_script('jquery');
// wp_register_script('jquery', (''), false);
// wp_enqueue_script('jquery');
// Uncomment the above 3 lines only if needed.
wp_register_script( 'my-jui', '', array('jquery'), '1.0', false );
wp_register_script( 'my-jsbi', '', array('my-jui'), '1.0', false );
add_action( 'print_head_scripts', 'my_header_script' );
// Add jQuery to head
function my_header_script() { ?>
<script type="text/javascript">
//Executes your code when the DOM is ready.  Acts the same as $(document).ready().
$(function() {
//Calls the selectBoxIt method on your HTML select box
var selectBox = $("select#menu-locations").selectBoxIt({
showEffect: "fadeIn",
showEffectSpeed: 600,
hideEffect: "fadeOut",
hideEffectSpeed: 600
<?php }

I had to make a few changes (as compared the one in static HTML page) in jquery.selectBoxIt.css.

These are some of the things to note in jquery.selectBoxIt.css:

  • .selectboxit – Set the height to that of list box’s (in closed state) height. Set the background to your desired image of the list box in closed state.
  • .selectboxit, .selectboxit-options – Set the width to that of the list box’s closed state background image.
  • ul.selectboxit-options – Set the background of the dropdown here. Set “list-style-image” to “none” to get rid of bullet images (if coming from child theme’s style.css) for the list items in IE 7.
  • .selectboxit-options li a – This selector and a few others won’t be present by default. I have added them. This particular one is needed because we want the hover to work for the full width of list item and not just the hyperlinked list item text.
  • .selectboxit-options li a:hover – Set background and text color of list items on hover.

Hope this has been helpful and will save some time and research for anyone that is looking to do the same. Let me know if you have any questions.

Bolding Search Strings And Showing Number Of Search Results In iThemes Builder



Bolding search strings

In a search results page excerpts of blog posts that match search criterion are shown by default. If you would like to instead display portions of text that has the search strings with the strings bolded, it can be done by using Search Exceprt plugin. After activating that plugin, copy search.php from parent Builder theme into your active child theme and edit it.


<?php the_title(); ?>


<?php echo $title; ?>

and add the following above it

$title = get_the_title();
$keys= explode(" ",$s);
$title = preg_replace('/('.implode('|', $keys) .')/iu',
'<strong class="search-excerpt">\0</strong>',


Displaying number of search results

<h4 class="loop-title">
 $title = sprintf( __( 'Search Results for "<em>%s</em>"', 'it-l10n-Builder' ), get_search_query() );

 if ( is_paged() )
 printf( '%s &ndash; Page %d', $title, get_query_var( 'paged' ) );
 echo $title;


 <?php global $wp_query;
 $total_results = $wp_query->found_posts;
 echo 'The number of search results is/are: ' . $total_results; ?>


iThemes Builder Magazine Extension Modification To Show Wide Posts Above Posts Columns

There have been several requests for an enhanced iThemes Builder Magazine extension wherein a user-defined number of wide posts appear at the top and the remaining in columns at the bottom.

Before we (iThemes) release one officially, you can use my modified Magazine extension for this purpose.



  • This should be treated as unofficial with no promised support.
  • The code might not be well optimized and might have unneeded lines.
  • Wide posts will appear only on the 1st page.

Overview Video


iThemes Builder Magazine Extension Modified (919)