Mailpress and news scroller plugin

[deancs]

Hi all,

If I install mailpress and use the mailpress subscribe widget on the same page as I am using the TB news scroller widget I receive the following error;

TypeError: ‘undefined’ is not a function (evaluating ‘$(‘#themeblvd_news_scroller_widget-2 .flexslider’).flexslider’)

The mailpress widget functions correctly and the news scroller doesnt display any content. I am using the latest versions of both and the cause is beyond my diagnostic abilities so any guidance would be appreciated.

Thanks, Dean

 

Topic

[deancs]

Further to my query The site is http://www.kvv.com.au if anyone wants to see whats going on…thanks

[Jason Bobich]

It seems your plugin is actually including jQuery manually right in there widget instead of enqueuing jQuery in a hooked function to wp_enqueue_scripts properly and executing their jQuery in a non-conflicting way.

Here’s a screenshot of what I’m talking about. The plugin is actually manually including entire javascript files and jQuery inline with the widget’s markup.

http://picturestack.com/231/314/ZUeScreenShotlhC.png

Honestly, with any plugin that is omitting such basic practices, you should be careful with on your site. You’re going to run into conflicts with any other plugin that uses jQuery and proceeds it. In other words, the problem doesn’t have anything to do with the news scroller widget other than the fact that it’s placing jQuery code after the other plugin has essentially broken things moving down the page. You might even be able to get away with flip-flopping the two plugins and having the news scroller come before the other one breaks the jQuery going on with the page.

[Jason Bobich]

And actually, looking at your site, you have some other odd things going on with jQuery. It appears you actually have the entire jQuery library included 3 different times throughout your site? Why do you have these scripts manually inserted at the top?

http://picturestack.com/231/912/wX4ScreenShotduH.png

Here’s some helpful info on how to load scripts in WordPress:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

[deancs]

Thanks Jason. I appreciate its not a problem with the news-scroller. Based on your comments I have read up a bit more on mailpress. It turns out there is an option where you can specify jquery is preloaded and it doesnt include it the widget code . If I select this option then things work correctly.

In relation to jquery being loaded in the head – yes thats me. I use jquery maphighlight on one of the pages and I cant workout how to enqueue jquery-maphight so it works properly – work in progress I am afraid.

[Jason Bobich]

No worries, I understand. But this is something you’ll definitely want to learn. It’s one of those things that’s specific to WordPress so can be confusing at first if you’ve never worked with scripts specifically in WordPress.

So, I noticed it looks like you’re using the default Child theme that I included with the theme. So for example, you’d take your jquery.maphilight.min.js file and place it in the /assets/js/ folder of your Child theme.

Now from the functions.php, of your Child theme you’d include it like this:

function my_scripts() {
    wp_enqueue_script( 'maphilight', get_stylesheet_directory_uri() . '/assets/js/jquery.maphilight.min.js', array('jquery') );    
}     
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Note that the 3rd parameter in the wp_enqueue_script function is the $deps parameter which stands for dependencies. This is where you can put in an array of scripts need to be loaded before the script your enque’ing. In this case you have one script you need to be loaded before, which is jQuery.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

The reason you do it all like this is because all plugins and the theme are essentially putting all of the javascript files into a queue and then WordPress is displaying them all together in a way that abides by the dependencies of each file and without having multiple instances of the same file.

[deancs]

Thankyou for the response. I have tried the enqueue script, but hadn’t used the dependency parameter for jquery. Optimistically I made the change but the result was the same. On the wineries page if you hover over a winery name on the left it highlights the winery location on the map on the right. The location on the map, along with other details are stored as a custom fields on the post for each winery. To do this I call two custom shortcodes which generate html and the JS required for the jquery-maphighlight functionality. My assumption is with enqueue script these would be loaded before any shortcodes in the body are executed, however based on the error message it seems the in page JS is being executed before the enqueue script. I would like to solve the problem as I would really prefer to work within the WP and theme conventions but its all getting complicated. This question is waaaayyy outside the realm of theme support so a ‘leave it to you’ response would be fine 🙂

In my WP page I have;

[raw]
[two_third][listWineries][/two_third]
[one_third last]
[wineryMap]
[/one_third]
[clear]
[/raw]

In my functions.php I have the following;

function listWineries_func( $atts, $content = null ) {

$wParams = shortcode_atts( array(‘category’ => ‘Wineries’),$atts );
$wCategory = $wParams[‘category’];

$outHTML = ‘

phone
web
area
Services

‘;
$outJS = ”;

$kvvURL = get_bloginfo(‘url’);
query_posts(‘category_name=’.$wCategory.’&order=ASC&orderby=title’);
while ( have_posts() ) : the_post();
$wTitle = get_the_title();
$wLink = get_permalink();
$tmp = get_post_custom_values(‘phone’,$post->ID);
$wPhone = $tmp[0];
$tmp = get_post_custom_values(‘url’,$post->ID);
$wURL = $tmp[0];
$tmp = get_post_custom_values(‘area’,$post->ID);
$wArea = $tmp[0];
$tmp = get_post_custom_values(‘mapID’,$post->ID);
$wMapID = $tmp[0];

$outHTML .= ‘‘. $wTitle . ‘‘ .$wPhone .’‘.$wURL.’‘.$wArea.”;

$outJS .=’doMap(\’#’.$wMapID.’lnk\’,\’#’.$wMapID.’1\’);’;

$posttags = get_the_tags();
if ($posttags) {
foreach($posttags as $tag) {

switch ($tag->name) {
case “accommodation”:
case “wifi”:
case “coffee”:
case “food”:
case “cellardoor”:
case “cellardoor-check”:
case “buyonline”:
$outHTML .= ‘name . ‘.png” alt=”‘ . $tag->name . ‘” title=”‘.$tag->name.'”/>’;
break;
}
}
}

$outHTML .= ”;
endwhile;
$outHTML .= ”;
$outHTML .= ”;
$outHTML .= ‘function doMap( myLink, myArea) {$(myLink).mouseover(function(e) {$(myArea).mouseover();}).mouseout(function(e) {$(myArea).mouseout();}).click(function(e) { e.preventDefault(); });}’;
$outHTML .= ‘$(function() {$(\’.mymap\’).maphilight({“stroke”:false,”fillColor”:”ff0000″,”fillOpacity”:0.7});’;
$outHTML .= $outJS;
$outHTML .= ‘});’;
wp_reset_query();

return $outHTML;
}
add_shortcode( ‘listWineries’, ‘listWineries_func’ );

function wineryMap_func () {

$kvvURL = get_bloginfo(‘url’);
$outHTML = ”;
$outHTML .= ”;

query_posts(‘category_name=Wineries&order=ASC&orderby=title’);
while ( have_posts() ) : the_post();
$wTitle = get_the_title();
$tmp = get_post_custom_values(‘mapCoords’,$post->ID);
$wMapCoord = $tmp[0];
$tmp = get_post_custom_values(‘mapID’,$post->ID);
$wMapID = $tmp[0];

$outHTML .= ”;
$outHTML .= ”;
endwhile;
$outHTML .= ”;
wp_reset_query();
return $outHTML;
}
add_shortcode( ‘wineryMap’, ‘WineryMap_func’ );

• This reply was modified 10 years, 4 months ago by deancs.

[Jason Bobich]

Ha, yes. — This is way outside the realm of theme support.

When you enqueue a script you’re simply including it to the header of your website. In this case how I showed you above would have nothing to do with if the shortcode is actually used or not, or what’s going on in the body. You’re over-thinking; you enqueue a script, and you’re including it in your site.

Just view the source of your site in the web browser and see where the scripts are being included and executed, and go from there.

[Author]

Replies