Adding jQuery plugins in Suffusion

Oct 202013

Posted by Ciprian on 20/10/2013 How-To's Tagged with: javascript, jQuery, plugins, Suffusion, widget Add comments

In this article I will try to present the basic directions for inserting jQuery codes in Suffusion. The principles are the same for any javascript plugin, but bear in mind that it is not a straight way for getting these plugins to works. Those plugins wasn’t created specifically for WordPress, sometimes they are conflicting with WordPress or theme or other plugins javascript’s. Sometimes they are based on deprecated functions – was written years ago, now some functions don’t exist anymore in jQuery library.

So, adding jQuery codes in WordPress is not a job for beginners – need to have idea about javascript for making codes to work or need time for testing more plugins until will find one which works.

The principles:

A jQuery plugin consist from 3 parts:

the javascript code – usually a jQuery plugin contain 2 javascripts. A main file which contain all needed functions for intended transformations and a little code which call the function where is needed.;
the CSS – usually will have a file containing all styles which will be triggered by js for the elements transformed by the plugin.
the HTML – the final markup where the transformations are applied. If the HTML code from the plugin instructions contain , and tags, you need to avoid them and including only the relevant div’s in your page (on an HTML page and tags can appear only once, and they are already present on your page).

These parts are usually presented separated on the plugin documentation and the download will contain them separated – a .js file, a .css stylesheet and an .html example – these files can be separated in folders or you may have to make links to them directly on CDN’s which contain the files.

INSTALATION

For installing the plugin the main JS file and the main CSS file need to be included in the section of your site.

<link href="plugin-stylesheet.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.plugin-javascript.js"></script>

1 2	href="plugin-stylesheet.css" rel="stylesheet" />

Note that on all jQuery plugins will see also a link to jQuery (jquery.js) library. Forget about it – on your WordPress site jQuery is already loaded and active, another link will breaks the site as you cannot have a library loaded twice.

This step is the most important as now we install all needed functions. After download the plugin, unpack it and upload the folders/files on a location from your server. Usually I make a subfolder under wp-content, as this directory aren’t overwritten at WordPress upgrades.

For linking the CSS file add the path to it at Suffusion Options -> Back-end -> Custom Includes -> First (or second, or third) Additional Stylesheet link. So, there you need to have: https://yoursite.tld/wp-content/…css-plugin-path/stylesheet.css

In the same way add the path to the main js file at Suffusion Options -> Back-end -> Custom Includes -> First (second, third) External Javascript file. (https://yoursite.tld/wp-content/…js-plugin-path/plugin.js).

To finishing the installation add the trigger function at Suffusion Options -> Back-end -> Custom Includes -> Custom Header (or Footer) Javascript. (better for page speed is to have js in footer, but not all functions will work from there). For this last step you will have to make some changes.

All those plugins use $ variable. You will have to put this variable in noConflict() mode. This is simple as defining a new variable $j=jQuery.noConflict(); then change every occurrence of $ sign with $j. As an example the buttons from our homepage or from post tiles are in fact only more links […]. For changing them to buttons I added at Custom Header Javascript:

$j=jQuery.noConflict();
$j('.excerpt-more-append').addClass('button');

1 2	$j=jQuery.noConflict(); $j('.excerpt-more-append').addClass('button');

That’s it – we have installed all the functions for doing magic on our pages. We need only the content, in the right html markup, for which will be applied our functions.

This content can be added directly in pages/posts – by inserting needed classes/selectors in TEXT mode of Edit Page/Post, or can be inserted in text widgets in desired widgets area. You always can start to make your page for working with the plugin from the example html provided with the plugin.

EXAMPLE:

To easily understand how the things works see the example below:

Animated captions for images

Very easier to implement. We not need separated functions/files, we will use directly jQuery functions. The HTML is already generated by WordPress for images with captions, so, all we have to do is to apply some CSS styles and a little bit of jQuery for animating the existing captions.

So, at Suffusion Options -> Back-end -> Custom Includes -> Custom Header Javascript add:

$j=jQuery.noConflict();
$j(document).ready(function() {
  $j(".wp-caption").hover(function(){
    $j(this).find("p.wp-caption-text").fadeIn(400);
  }, function(){
    $j(this).find("p.wp-caption-text").fadeOut(400);
  });
});

$j=jQuery.noConflict();

$j(document).ready(function() {

$j(".wp-caption").hover(function(){

$j(this).find("p.wp-caption-text").fadeIn(400);

}, function(){

$j(this).find("p.wp-caption-text").fadeOut(400);

});

For formatting the captions I added at Suffusion Options -> Back-end -> Custom Includes -> Custom Styles:

.wp-caption { 
  position: relative;
  display: inline-block;
    border: 3px solid #999;
    border-radius: 2px;
}
.wp-caption img { 
  display: block;
}
p.wp-caption-text { 
  background-color: #000; 
  background-color: rgba(0,0,0,0.8); 
  color: white; 
  display: none; 
  padding: 5px 10px; 
  text-align: center; 
  position: absolute;
  bottom: 0; 
  left: 0; 
  right: 0;
}

.wp-caption {

position: relative;

display: inline-block;

border: 3px solid #999;

border-radius: 2px;

}

.wp-caption img {

display: block;

}

p.wp-caption-text {

background-color: #000;

background-color: rgba(0,0,0,0.8);

color: white;

display: none;

padding: 5px 10px;

text-align: center;

position: absolute;

bottom: 0;

left: 0;

right: 0;

}

These formatted captions are used on this site, like in this post: https://drafie-design.nl/order-of-slides-in-suffusion-featured-content/

For more advanced examples can see:

jQuery UI Widgets Horizontal Dropline Menu Spice your site with jQuery plugins

https://drafie-design.nl/adding-jquery-plugins-in-suffusion/trackback/Trackback URI:

Ciprian

Experienced web developer and graphic designer. Former consultant for Suffusion theme and former moderator on Suffusion Support forum. I teach others while learning myself.

Google+ Profile

Google+ Page

This site uses Akismet to reduce spam. Learn how your comment data is processed.

9 Responses to “Adding jQuery plugins in Suffusion”

Comments (4) Pingbacks (5)

[…] existing select dropdowns. Now, even if is not so hard to add Selectik in Suffusion like any other jQuery Plugin as I wrote often on this site, this time I tried another approach. Because I don’t have […]

Suffusion Selectik Menu Plugin | Drafie's Design

30/05/2014 at 05:45
[…] nothing more than to add a jQuery plugin as I presented often on this site. The original code was written by Simone Gianni on jsfiddle. I […]

A nice presentation of your Youtube channel | Drafie's Design

06/02/2014 at 15:47
[…] Another usage of jQuery plugins in Suffusion. The general principles are presented in article about Adding jQuery plugins. […]

Inserting a jQuery Slider in Suffusion | Drafie's Design

03/11/2013 at 05:21
[…] An example of usage of jQuery plugins with Suffusion as it was presented in the post about Adding jQuery. […]

Inserting jQuery UI widgets in Suffusion | Drafie's Design

03/11/2013 at 05:05
[…] The steps are those described in my other post Adding jQuery plugins in Suffusion: […]

How To add an Horizontal Dropline Menu in Suffusion | Drafie's Design

01/11/2013 at 02:41