Ask your WordPress questions! Pay money and get answers fast! (more info)

How can I add JQuery Dialog to my template ? WordPress

I need jQuery UI to be present in order for dialogs to show up on the front-end.

Right now I have an issue with accordions http://demo.fssecurities.com/faqs/ .
I have fixed it in the past by adding dialogs but my template has been update and I have no idea where to look for.

Cheers

Answers (3)

2014-01-10

Balanean Corneliu answers:

Take a look here :

http://stackoverflow.com/questions/4879367/how-to-create-jquery-dialog-in-function


Balanean Corneliu comments:

You can use this plugin for the FAQ section: WP Awesome FAQ
Its a nice plugin and can be implemented with [FAQ] shortcode

Here is how is looking and working on a page created by me :http://aliensurface.ro/informatii-utile/intrebari-frecvente/

2014-01-10

Nirmal answers:

Paste this code in functions.php file of your theme so the required JS file gets loaded on front end of your site.

function add_jquery_ui_dialog() {
wp_enqueue_script( 'jquery-ui-dialog', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'add_jquery_ui_dialog' );


auray9 comments:

I don`t know where to put it


Nirmal comments:

If you have FTP access to your site's codebase, then try find the functions.php file in the current theme. [ Path: /wp-content/themes/Karma/functions.php ] Paste the above code on the extreme end of the file.


auray9 comments:

Hi.
I tried a random js file and it didn`t work.


Nirmal comments:

It was a mistake. Paste it in functions.php file. Thanks


auray9 comments:

Hi Nirmarl

I`m sorry but it does not work, however i saw the following information in this fiunctions.php :

JavaScript and CSS Enqueue /framework/script-enqueue.php

I tried to add it there and it does not work either.

Any idea ?


auray9 comments:

This is what I did in /framework/script-enqueue.php


wp_enqueue_script( 'jquery');
wp_enqueue_script( 'truethemes-custom', TRUETHEMES_JS .'/custom-main.js', array('jquery'),'4.0',$in_footer = true);
wp_enqueue_script( 'superfish', TRUETHEMES_JS .'/superfish.js', array('jquery'),'4.0',$in_footer = true);
wp_enqueue_script( 'flexslider', TRUETHEMES_JS .'/jquery.flexslider.js', array('jquery'),'4.0',$in_footer = true);
wp_enqueue_script( 'fitvids', TRUETHEMES_JS .'/jquery.fitvids.js', array('jquery'),'4.0',$in_footer = true);
wp_enqueue_script( 'isotope', TRUETHEMES_JS .'/jquery.isotope.js', array('jquery'),'4.0',$in_footer = true);
wp_enqueue_script( 'jquery-ui-core');

<strong>wp_enqueue_script( 'jquery-ui-dialog', array('jquery'));
</strong>
wp_enqueue_script( 'jquery-ui-widget');
wp_enqueue_script( 'jquery-ui-tabs');
wp_enqueue_script( 'jquery-ui-accordion');
wp_enqueue_script( 'pretty-photo', TRUETHEMES_JS .'/jquery.prettyPhoto.js', array('jquery'),'4.0',$in_footer = true);
wp_enqueue_script( 'comment-reply', site_url().'/wp-includes/js/comment-reply.js',$deps=null,'1.0',$in_footer = true);


Any idea ?

2014-01-12

Bob answers:

do you want dialog or want to fix accordions ?
or you want both accordion working properly and dialog for some other use?


Bob comments:

The trouble is with this plugin is that it do not create container div for each item.
First we have to modify plugin code and then write some css for it.

Following are instructions of modification autonav-wl.php of plugin.
If you wish I can send you modified plugin. But you have to write css in your theme by yourself (3rd point in below instructions)

( 1 )
To add item contaier, you have to modify php code in file autonav-wl.php
line no 1019 to 1021

::Old Code::

$my_html = $attr['plain'] ? '' : an_create_tag('li', array('class' => an_create_unit_class($attr, $pic, $class . '-item')));
$html .= apply_filters('autonav_create_list_item', $my_html, $class, $pic, $attr);
if (!$attr['plain']) { $html .= "</li>\n"; }


::New Code::

$my_html = $attr['plain'] ? '<div class="autonav-content">' : an_create_tag('li', array('class' => an_create_unit_class($attr, $pic, $class . '-item')));
$html .= apply_filters('autonav_create_list_item', $my_html, $class, $pic, $attr);
if (!$attr['plain']) { $html .= "</li>\n"; }else{ $html .= "</div>\n"; }

( 2 )
Then you have to change filter priority filter, so it display image first and then post title
line no 961,962

::old code::
add_filter('autonav_create_list_item', 'an_create_output_text', 10, 4);
add_filter('autonav_create_list_item', 'an_create_output_picture', 15, 4);

::New code::
add_filter('autonav_create_list_item', 'an_create_output_text', 15, 4);
add_filter('autonav_create_list_item', 'an_create_output_picture', 10, 4);


( 3 )
Now write css in your theme to display everything properly.
.autonav-content {
width: 200px;
float: left;
}
.autonav-content a {
display: block;
text-align: center;
}


Bob comments:

Oh!! sorry by mistake I post answer of another question here!!!
sorry for your trouble.


auray9 comments:

Hi

Yes I want both as one of my plugin needs it. but currently in conflict.

Thanks


Bob comments:

Hi,

Is it compulsory to add functionality in theme?
To make it easy you can try plugins like "jQuery UI Widgets"(http://wordpress.org/plugins/jquery-ui-widgets)

If you integrate it using theme then you have to modify css also. if it is possible then please try some plugin if still it not work then we can think to modify theme.

Thanks.