jQuery

jQuery Same Height Columns

This requires the CSS flag below to release the min-heights – assuming the divs stack.

jQuery(document).ready(function($) {
    $window = $(window);
    var jma_same_height = function() {
        $('.same-height-wrap').each(function() {
            $this = $(this);
            // counter for successive same-height classes
            counter = 1;
            while ($this.find('.same-height-' + counter).length) {
                var highestBox = 0;
                $inner = $this.find('.same-height-' + counter);
                counter++;
                $inner.each(function() { //give us a fresh start on resize for going between
                    //stacked and not stacked
                    $(this).removeClass('tallest');
                    $(this).removeClass('not-tallest');
                });
                if ($this.css('min-height') === '23px') { //match flag in css -
                    //identifies this as a not stacked window
                    $inner.each(function() {
                        $(this).css('min-height', '');
                        // If this box is higher than the cached highest then store it
                        //remove tallest class from all others and give them not-tallest
                        //and give this one tallext class
                        if ($(this).outerHeight() > highestBox) {
                            highestBox = $(this).outerHeight();
                            $inner.each(function() {
                                if ($(this).hasClass('tallest')) {
                                    $(this).removeClass('tallest');
                                    $(this).addClass('not-tallest');
                                }
                                $(this).addClass('tallest');
                            });
                        } else {
                            $(this).addClass('not-tallest');
                        }
                    });
                    // Set the height of all those children to whichever was highest
                    $inner.css('min-height', highestBox + 'px');
                } else {
                    $this.find('*[class*="same-height-"]').css('min-height', '');
                }
            }
        });
    }
    $window.resize(jma_same_height);
    $window.load(jma_same_height);
});

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

$window = $(window);

var jma_same_height = function() {

$('.same-height-wrap').each(function() {

$this = $(this);

// counter for successive same-height classes

counter = 1;

while ($this.find('.same-height-' + counter).length) {

var highestBox = 0;

$inner = $this.find('.same-height-' + counter);

counter++;

$inner.each(function() { //give us a fresh start on resize for going between

//stacked and not stacked

$(this).removeClass('tallest');

$(this).removeClass('not-tallest');

});

if ($this.css('min-height') === '23px') { //match flag in css -

//identifies this as a not stacked window

$inner.each(function() {

$(this).css('min-height', '');

// If this box is higher than the cached highest then store it

//remove tallest class from all others and give them not-tallest

//and give this one tallext class

if ($(this).outerHeight() > highestBox) {

highestBox = $(this).outerHeight();

$inner.each(function() {

if ($(this).hasClass('tallest')) {

$(this).removeClass('tallest');

$(this).addClass('not-tallest');

}

$(this).addClass('tallest');

});

} else {

$(this).addClass('not-tallest');

}

});

// Set the height of all those children to whichever was highest

$inner.css('min-height', highestBox + 'px');

} else {

$this.find('*[class*="same-height-"]').css('min-height', '');

}

});

}

$window.resize(jma_same_height);

$window.load(jma_same_height);

});

Add this flag. Any Css property is fine and any @media is ok (just match CSS property in jQuery – line 20 above).

/* "flag for jquery cols same height */
@media(min-width: 768px){
    .same-height-wrap {
        min-height: 23px;
    }
}
/* vertically align content */
.not-tallest>div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    -moz-transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    width: 95%;
}

/* "flag for jquery cols same height */

@media(min-width: 768px){

.same-height-wrap {

min-height: 23px;

}

/* vertically align content */

.not-tallest>div {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) !important;

-moz-transform: translate(-50%, -50%) !important;

-webkit-transform: translate(-50%, -50%) !important;

width: 95%;

}

Javascript Detect Mobile

var iOS = /(iPad|iPhone|iPod|Android)/g.test(navigator.userAgent);

var iOS = /(iPad|iPhone|iPod|Android)/g.test(navigator.userAgent);

Options Page for Plugin

Original code: https://gist.github.com/hlashbrooke/9267467 First the Files (2) The Class:

<?php
if ( ! defined( 'ABSPATH' ) ) exit;
class JMAYtSettings {
    private $dir;
    private $file;
    private $assets_url;
    private $settings_base;
    private $settings;
    private $db_option;
    private $page_title;
    private $text_domain;
    public function __construct($base = 'jma_plugin', $title = 'Cool Plugin', $settings = array(), $text_domain = '') {
        $this->file =  __FILE__ ;
        $this->dir = dirname( $this->file );
        $this->assets_url = esc_url( trailingslashit( plugins_url( '/', $this->file ) ) );
        $this->settings_base = $base . '_';
        $this->db_option = $this->settings_base . 'options_array';
        $this->page_title = $title;
        $this->settings = $settings;
        $this->text_domain = $text_domain? $text_domain: $this->settings_base . 'textdomain';
        // Initialise settings
        add_action( 'admin_init', array( $this, 'init' ) );
        // Register plugin settings
        add_action( 'admin_init' , array( $this, 'register_settings' ) );
        // Add settings page to menu
        add_action( 'admin_menu' , array( $this, 'add_menu_item' ) );
        // Add settings link to plugins page
        add_filter( 'plugin_action_links_' . plugin_basename( $this->file ) , array( $this, 'add_settings_link' ) );
    }
    /**
     * Initialise settings
     * @return void
     */
    public function init() {
        $this->settings = $this->settings_fields();
    }
    /**
     * Add settings page to admin menu
     * @return void
     */
    public function add_menu_item() {
        $page = add_options_page( __( $this->page_title, $this->text_domain ) , __( $this->page_title, $this->text_domain ) , 'manage_options' , $this->settings_base . 'settings' ,  array( $this, 'settings_page' ) );
        add_action( 'admin_print_styles-' . $page, array( $this, 'settings_assets' ) );
    }
    /**
     * Load settings JS & CSS
     * @return void
     */
    public function settings_assets() {
        // We're including the farbtastic script & styles here because they're needed for the colour picker
        // If you're not including a colour picker field then you can leave these calls out as well as the farbtastic dependency for the wpt-admin-js script below
        wp_enqueue_style( 'farbtastic' );
        wp_enqueue_script( 'farbtastic' );
        // We're including the WP media scripts here because they're needed for the image upload field
        // If you're not including an image upload then you can leave this function call out
        wp_enqueue_media();
        wp_register_script( $this->settings_base . 'admin-js', $this->assets_url . 'settings.js', array( 'farbtastic', 'jquery' ), '1.0.0' );
        wp_enqueue_script( $this->settings_base . 'admin-js' );
    }
    /**
     * Add settings link to plugin list table
     * @param  array $links Existing links
     * @return array 		Modified links
     */
    public function add_settings_link( $links ) {
        $settings_link = '<a href="options-general.php?page=' . $this->settings_base . 'settings">' . __( 'Settings', $this->text_domain ) . '</a>';
        array_push( $links, $settings_link );
        return $links;
    }
    /**
     * Build settings fields
     * @return array Fields to be displayed on settings page
     */
    private function settings_fields() {
        $this->settings = apply_filters( $this->settings_base . 'settings_fields', $this->settings );
        return $this->settings;
    }
    /**
     * Register plugin settings
     * @return void
     */
    public function register_settings() {
        if( is_array( $this->settings ) ) {
            $option_name = $this->db_option;
            foreach( $this->settings as $section => $data ) {
                // Add section to page
                add_settings_section( $section, $data['title'], array( $this, 'settings_section' ), $this->settings_base . 'settings' );
                foreach( $data['fields'] as $field ) {
                    // Validation callback for field
                    $validation = '';
                    if( isset( $field['callback'] ) ) {
                        $validation = $field['callback'];
                    }
                    // Register field
                    register_setting( $this->settings_base . 'settings', $option_name, $validation );
                    // Add field to page
                    add_settings_field( $field['id'], $field['label'], array( $this, 'display_field' ), $this->settings_base . 'settings', $section, array( 'field' => $field ) );
                }
            }
        }
    }
    public function settings_section( $section ) {
        $html = '<p> ' . $this->settings[ $section['id'] ]['description'] . '</p>' . "\n";
        echo $html;
    }
    /**
     * Generate HTML for displaying fields
     * @param  array $args Field data
     * @return void
     */
    public function display_field( $args ) {
        $field = $args['field'];
        $html = '';
        $option = null;
        $option_array_name = $field['id'];
        $option_name = $this->db_option . '[' . $field['id'] . ']';
        $option_array = get_option( $this->db_option );
        if(is_array($option_array) )
            $option = $option_array[$option_array_name];
        $data = '';
        if( isset( $field['default'] ) ) {
            $data = $field['default'];
            if( $option !== null ) {
                $data = $option;
            }
        }
        switch( $field['type'] ) {
            case 'text':
            case 'password':
            case 'number':
                $html .= '<input id="' . esc_attr( $field['id'] ) . '" type="' . $field['type'] . '" name="' . esc_attr( $option_name ) . '" placeholder="' . esc_attr( $field['placeholder'] ) . '" value="' . $data . '"/>' . "\n";
                break;
            case 'text_secret':
                $html .= '<input id="' . esc_attr( $field['id'] ) . '" type="text" name="' . esc_attr( $option_name ) . '" placeholder="' . esc_attr( $field['placeholder'] ) . '" value=""/>' . "\n";
                break;
            case 'textarea':
                $html .= '<textarea id="' . esc_attr( $field['id'] ) . '" rows="5" cols="50" name="' . esc_attr( $option_name ) . '" placeholder="' . esc_attr( $field['placeholder'] ) . '">' . $data . '</textarea><br/>'. "\n";
                break;
            case 'checkbox':
                $checked = '';
                if( $option && 'on' == $option ){
                    $checked = 'checked="checked"';
                }
                $html .= '<input id="' . esc_attr( $field['id'] ) . '" type="' . $field['type'] . '" name="' . esc_attr( $option_name ) . '" ' . $checked . '/>' . "\n";
                break;
            case 'checkbox_multi':
                foreach( $field['options'] as $k => $v ) {
                    $checked = false;
                    if( in_array( $k, $data ) ) {
                        $checked = true;
                    }
                    $html .= '<label for="' . esc_attr( $field['id'] . '_' . $k ) . '"><input type="checkbox" ' . checked( $checked, true, false ) . ' name="' . esc_attr( $option_name ) . '[]" value="' . esc_attr( $k ) . '" id="' . esc_attr( $field['id'] . '_' . $k ) . '" /> ' . $v . '</label> ';
                }
                break;
            case 'radio':
                foreach( $field['options'] as $k => $v ) {
                    $checked = false;
                    if( $k == $data ) {
                        $checked = true;
                    }
                    $html .= '<label for="' . esc_attr( $field['id'] . '_' . $k ) . '"><input type="radio" ' . checked( $checked, true, false ) . ' name="' . esc_attr( $option_name ) . '" value="' . esc_attr( $k ) . '" id="' . esc_attr( $field['id'] . '_' . $k ) . '" /> ' . $v . '</label> ';
                }
                break;
            case 'select':
                $html .= '<select name="' . esc_attr( $option_name ) . '" id="' . esc_attr( $field['id'] ) . '">';
                foreach( $field['options'] as $k => $v ) {
                    $selected = false;
                    if( $k == $data ) {
                        $selected = true;
                    }
                    $html .= '<option ' . selected( $selected, true, false ) . ' value="' . esc_attr( $k ) . '">' . $v . '</option>';
                }
                $html .= '</select> ';
                break;
            case 'select_multi':
                $html .= '<select name="' . esc_attr( $option_name ) . '[]" id="' . esc_attr( $field['id'] ) . '" multiple="multiple">';
                foreach( $field['options'] as $k => $v ) {
                    $selected = false;
                    if( in_array( $k, $data ) ) {
                        $selected = true;
                    }
                    $html .= '<option ' . selected( $selected, true, false ) . ' value="' . esc_attr( $k ) . '" />' . $v . '</label> ';
                }
                $html .= '</select> ';
                break;
            case 'image':
                $image_thumb = '';
                if( $data ) {
                    $image_thumb = wp_get_attachment_thumb_url( $data );
                }
                $html .= '<img id="' . $option_array_name . '_preview" class="image_preview" src="' . $image_thumb . '" /><br/>' . "\n";
                $html .= '<input id="' . $option_array_name . '_button" type="button" data-uploader_title="' . __( 'Upload an image' , $this->text_domain ) . '" data-uploader_button_text="' . __( 'Use image' , $this->text_domain ) . '" class="image_upload_button button" value="'. __( 'Upload new image' , $this->text_domain ) . '" />' . "\n";
                $html .= '<input id="' . $option_array_name . '_delete" type="button" class="image_delete_button button" value="'. __( 'Remove image' , $this->text_domain ) . '" />' . "\n";
                $html .= '<input id="' . $option_array_name . '" class="image_data_field" type="hidden" name="' . $option_name . '" value="' . $data . '"/><br/>' . "\n";
                break;
            case 'color':
                $color_value = esc_html( $data )?esc_html( $data ):0;//John's big addition to prevent empty box issue
                ?><div class="color-picker" style="position:relative;">
                <input type="text" name="<?php esc_attr_e( $option_name ); ?>" class="color" value="<?php echo
                $color_value ?>" />
                <div style="position:absolute;background:#FFF;z-index:99;border-radius:100%;" class="colorpicker"></div>
                </div>
                <?php
                break;
        }
        switch( $field['type'] ) {
            case 'checkbox_multi':
            case 'radio':
            case 'select_multi':
                $html .= '<br/><span class="description">' . $field['description'] . '</span>';
                break;
            default:
                $html .= '<label for="' . esc_attr( $field['id'] ) . '"><span class="description">' . $field['description'] . '</span></label>' . "\n";
                break;
        }
        echo $html;
    }
    /**
     * Validate individual settings field
     * @param  string $data Inputted value
     * @return string       Validated value
     */
    public function validate_field( $data ) {
        if( $data && strlen( $data ) > 0 && $data != '' ) {
            $data = urlencode( strtolower( str_replace( ' ' , '-' , $data ) ) );
        }
        return $data;
    }
    /**
     * Load settings page content
     * @return void
     */
    public function settings_page() {
        // Build page HTML
        $html = '<div class="wrap" id="' . $this->settings_base . 'settings">' . "\n";
        $html .= '<h2>' . __( $this->page_title . ' Settings' , $this->text_domain ) . '</h2>' . "\n";
        $html .= '<form method="post" action="options.php" enctype="multipart/form-data">' . "\n";
        $html .= '<div class="clear"></div>' . "\n";
        // Get settings fields
        ob_start();
        settings_fields( $this->settings_base . 'settings' );
        do_settings_sections( $this->settings_base . 'settings' );
        $html .= ob_get_clean();
        $html .= '<p class="submit">' . "\n";
        $html .= '<input name="Submit" type="submit" class="button-primary" value="' . esc_attr( __( 'Save Settings' , $this->text_domain ) ) . '" />' . "\n";
        $html .= '</p>' . "\n";
        $html .= '</form>' . "\n";
        $html .= '</div>' . "\n";
        echo $html;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

<?php

if ( ! defined( 'ABSPATH' ) ) exit;

class JMAYtSettings {

private $dir;

private $file;

private $assets_url;

private $settings_base;

private $settings;

private $db_option;

private $page_title;

private $text_domain;

public function __construct($base = 'jma_plugin', $title = 'Cool Plugin', $settings = array(), $text_domain = '') {

$this->file = __FILE__ ;

$this->dir = dirname( $this->file );

$this->assets_url = esc_url( trailingslashit( plugins_url( '/', $this->file ) ) );

$this->settings_base = $base . '_';

$this->db_option = $this->settings_base . 'options_array';

$this->page_title = $title;

$this->settings = $settings;

$this->text_domain = $text_domain? $text_domain: $this->settings_base . 'textdomain';

// Initialise settings

add_action( 'admin_init', array( $this, 'init' ) );

// Register plugin settings

add_action( 'admin_init' , array( $this, 'register_settings' ) );

// Add settings page to menu

add_action( 'admin_menu' , array( $this, 'add_menu_item' ) );

// Add settings link to plugins page

add_filter( 'plugin_action_links_' . plugin_basename( $this->file ) , array( $this, 'add_settings_link' ) );

}

/**

* Initialise settings

* @return void

public function init() {

$this->settings = $this->settings_fields();

}

/**

* Add settings page to admin menu

* @return void

public function add_menu_item() {

$page = add_options_page( __( $this->page_title, $this->text_domain ) , __( $this->page_title, $this->text_domain ) , 'manage_options' , $this->settings_base . 'settings' , array( $this, 'settings_page' ) );

add_action( 'admin_print_styles-' . $page, array( $this, 'settings_assets' ) );

}

/**

* Load settings JS & CSS

* @return void

public function settings_assets() {

// We're including the farbtastic script & styles here because they're needed for the colour picker

// If you're not including a colour picker field then you can leave these calls out as well as the farbtastic dependency for the wpt-admin-js script below

wp_enqueue_style( 'farbtastic' );

wp_enqueue_script( 'farbtastic' );

// We're including the WP media scripts here because they're needed for the image upload field

// If you're not including an image upload then you can leave this function call out

wp_enqueue_media();

wp_register_script( $this->settings_base . 'admin-js', $this->assets_url . 'settings.js', array( 'farbtastic', 'jquery' ), '1.0.0' );

wp_enqueue_script( $this->settings_base . 'admin-js' );

}

/**

* Add settings link to plugin list table

* @param array $links Existing links

* @return array Modified links

public function add_settings_link( $links ) {

$settings_link = '<a href="options-general.php?page=' . $this->settings_base . 'settings">' . __( 'Settings', $this->text_domain ) . '</a>';

array_push( $links, $settings_link );

return $links;

}

/**

* Build settings fields

* @return array Fields to be displayed on settings page

private function settings_fields() {

$this->settings = apply_filters( $this->settings_base . 'settings_fields', $this->settings );

return $this->settings;

}

/**

* Register plugin settings

* @return void

public function register_settings() {

if( is_array( $this->settings ) ) {

$option_name = $this->db_option;

foreach( $this->settings as $section => $data ) {

// Add section to page

add_settings_section( $section, $data['title'], array( $this, 'settings_section' ), $this->settings_base . 'settings' );

foreach( $data['fields'] as $field ) {

// Validation callback for field

$validation = '';

if( isset( $field['callback'] ) ) {

$validation = $field['callback'];

}

// Register field

register_setting( $this->settings_base . 'settings', $option_name, $validation );

// Add field to page

add_settings_field( $field['id'], $field['label'], array( $this, 'display_field' ), $this->settings_base . 'settings', $section, array( 'field' => $field ) );

}

public function settings_section( $section ) {

$html = '<p> ' . $this->settings[ $section['id'] ]['description'] . '</p>' . "\n";

echo $html;

}

/**

* Generate HTML for displaying fields

* @param array $args Field data

* @return void

public function display_field( $args ) {

$field = $args['field'];

$html = '';

$option = null;

$option_array_name = $field['id'];

$option_name = $this->db_option . '[' . $field['id'] . ']';

$option_array = get_option( $this->db_option );

if(is_array($option_array) )

$option = $option_array[$option_array_name];

$data = '';

if( isset( $field['default'] ) ) {

$data = $field['default'];

if( $option !== null ) {

$data = $option;

}

switch( $field['type'] ) {

case 'text':

case 'password':

case 'number':

$html .= '<input id="' . esc_attr( $field['id'] ) . '" type="' . $field['type'] . '" name="' . esc_attr( $option_name ) . '" placeholder="' . esc_attr( $field['placeholder'] ) . '" value="' . $data . '"/>' . "\n";

break;

case 'text_secret':

$html .= '<input id="' . esc_attr( $field['id'] ) . '" type="text" name="' . esc_attr( $option_name ) . '" placeholder="' . esc_attr( $field['placeholder'] ) . '" value=""/>' . "\n";

break;

case 'textarea':

$html .= '<textarea id="' . esc_attr( $field['id'] ) . '" rows="5" cols="50" name="' . esc_attr( $option_name ) . '" placeholder="' . esc_attr( $field['placeholder'] ) . '">' . $data . '</textarea><br/>'. "\n";

break;

case 'checkbox':

$checked = '';

if( $option && 'on' == $option ){

$checked = 'checked="checked"';

}

$html .= '<input id="' . esc_attr( $field['id'] ) . '" type="' . $field['type'] . '" name="' . esc_attr( $option_name ) . '" ' . $checked . '/>' . "\n";

break;

case 'checkbox_multi':

foreach( $field['options'] as $k => $v ) {

$checked = false;

if( in_array( $k, $data ) ) {

$checked = true;

}

$html .= '<label for="' . esc_attr( $field['id'] . '_' . $k ) . '"><input type="checkbox" ' . checked( $checked, true, false ) . ' name="' . esc_attr( $option_name ) . '[]" value="' . esc_attr( $k ) . '" id="' . esc_attr( $field['id'] . '_' . $k ) . '" /> ' . $v . '</label> ';

}

break;

case 'radio':

foreach( $field['options'] as $k => $v ) {

$checked = false;

if( $k == $data ) {

$checked = true;

}

$html .= '<label for="' . esc_attr( $field['id'] . '_' . $k ) . '"><input type="radio" ' . checked( $checked, true, false ) . ' name="' . esc_attr( $option_name ) . '" value="' . esc_attr( $k ) . '" id="' . esc_attr( $field['id'] . '_' . $k ) . '" /> ' . $v . '</label> ';

}

break;

case 'select':

$html .= '<select name="' . esc_attr( $option_name ) . '" id="' . esc_attr( $field['id'] ) . '">';

foreach( $field['options'] as $k => $v ) {

$selected = false;

if( $k == $data ) {

$selected = true;

}

$html .= '<option ' . selected( $selected, true, false ) . ' value="' . esc_attr( $k ) . '">' . $v . '</option>';

}

$html .= '</select> ';

break;

case 'select_multi':

$html .= '<select name="' . esc_attr( $option_name ) . '[]" id="' . esc_attr( $field['id'] ) . '" multiple="multiple">';

foreach( $field['options'] as $k => $v ) {

$selected = false;

if( in_array( $k, $data ) ) {

$selected = true;

}

$html .= '<option ' . selected( $selected, true, false ) . ' value="' . esc_attr( $k ) . '" />' . $v . '</label> ';

}

$html .= '</select> ';

break;

case 'image':

$image_thumb = '';

if( $data ) {

$image_thumb = wp_get_attachment_thumb_url( $data );

}

$html .= '<img id="' . $option_array_name . '_preview" class="image_preview" src="' . $image_thumb . '" /><br/>' . "\n";

$html .= '<input id="' . $option_array_name . '_button" type="button" data-uploader_title="' . __( 'Upload an image' , $this->text_domain ) . '" data-uploader_button_text="' . __( 'Use image' , $this->text_domain ) . '" class="image_upload_button button" value="'. __( 'Upload new image' , $this->text_domain ) . '" />' . "\n";

$html .= '<input id="' . $option_array_name . '_delete" type="button" class="image_delete_button button" value="'. __( 'Remove image' , $this->text_domain ) . '" />' . "\n";

$html .= '<input id="' . $option_array_name . '" class="image_data_field" type="hidden" name="' . $option_name . '" value="' . $data . '"/><br/>' . "\n";

break;

case 'color':

$color_value = esc_html( $data )?esc_html( $data ):0;//John's big addition to prevent empty box issue

?><div class="color-picker" style="position:relative;">

<input type="text" name="<?php esc_attr_e( $option_name ); ?>" class="color" value="<?php echo

$color_value ?>" />

</div>

<?php

break;

}

switch( $field['type'] ) {

case 'checkbox_multi':

case 'radio':

case 'select_multi':

$html .= '<br/><span class="description">' . $field['description'] . '</span>';

break;

default:

$html .= '<label for="' . esc_attr( $field['id'] ) . '"><span class="description">' . $field['description'] . '</span></label>' . "\n";

break;

}

echo $html;

}

/**

* Validate individual settings field

* @param string $data Inputted value

* @return string Validated value

public function validate_field( $data ) {

if( $data && strlen( $data ) > 0 && $data != '' ) {

$data = urlencode( strtolower( str_replace( ' ' , '-' , $data ) ) );

}

return $data;

}

/**

* Load settings page content

* @return void

public function settings_page() {

// Build page HTML

$html = '<div class="wrap" id="' . $this->settings_base . 'settings">' . "\n";

$html .= '<h2>' . __( $this->page_title . ' Settings' , $this->text_domain ) . '</h2>' . "\n";

$html .= '<form method="post" action="options.php" enctype="multipart/form-data">' . "\n";

$html .= '<div class="clear"></div>' . "\n";

// Get settings fields

ob_start();

settings_fields( $this->settings_base . 'settings' );

do_settings_sections( $this->settings_base . 'settings' );

$html .= ob_get_clean();

$html .= '<p class="submit">' . "\n";

$html .= '<input name="Submit" type="submit" class="button-primary" value="' . esc_attr( __( 'Save Settings' , $this->text_domain ) ) . '" />' . "\n";

$html .= '</p>' . "\n";

$html .= '</form>' . "\n";

$html .= '</div>' . "\n";

echo $html;

}

Then the jquery (settings.js):

jQuery(document).ready(function($) {
    /***** Colour picker *****/
    $('.colorpicker').hide();
    $('.colorpicker').each( function() {
        $(this).farbtastic( $(this).closest('.color-picker').find('.color') );
    });
    $('.color').click(function() {
        $(this).closest('.color-picker').find('.colorpicker').fadeIn();
    });
    $(document).mousedown(function() {
        $('.colorpicker').each(function() {
            var display = $(this).css('display');
            if ( display == 'block' )
                $(this).fadeOut();
        });
    });

    /***** Uploading images *****/
    var file_frame;
    jQuery.fn.uploadMediaFile = function( button, preview_media ) {
        var button_id = button.attr('id');
        var field_id = button_id.replace( '_button', '' );
        var preview_id = button_id.replace( '_button', '_preview' );
        // If the media frame already exists, reopen it.
        if ( file_frame ) {
            file_frame.open();
            return;
        }
        // Create the media frame.
        file_frame = wp.media.frames.file_frame = wp.media({
            title: jQuery( this ).data( 'uploader_title' ),
            button: {
                text: jQuery( this ).data( 'uploader_button_text' ),
            },
            multiple: false
        });
        // When an image is selected, run a callback.
        file_frame.on( 'select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery("#"+field_id).val(attachment.id);
            if( preview_media ) {
                jQuery("#"+preview_id).attr('src',attachment.sizes.thumbnail.url);
            }
        });
        // Finally, open the modal
        file_frame.open();
    }
    jQuery('.image_upload_button').click(function() {
        jQuery.fn.uploadMediaFile( jQuery(this), true );
    });
    jQuery('.image_delete_button').click(function() {
        jQuery(this).closest('td').find( '.image_data_field' ).val( '' );
        jQuery( '.image_preview' ).remove();
        return false;
    });
});

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

/***** Colour picker *****/

$('.colorpicker').hide();

$('.colorpicker').each( function() {

$(this).farbtastic( $(this).closest('.color-picker').find('.color') );

});

$('.color').click(function() {

$(this).closest('.color-picker').find('.colorpicker').fadeIn();

});

$(document).mousedown(function() {

$('.colorpicker').each(function() {

var display = $(this).css('display');

if ( display == 'block' )

$(this).fadeOut();

});

/***** Uploading images *****/

var file_frame;

jQuery.fn.uploadMediaFile = function( button, preview_media ) {

var button_id = button.attr('id');

var field_id = button_id.replace( '_button', '' );

var preview_id = button_id.replace( '_button', '_preview' );

// If the media frame already exists, reopen it.

if ( file_frame ) {

file_frame.open();

return;

}

// Create the media frame.

file_frame = wp.media.frames.file_frame = wp.media({

title: jQuery( this ).data( 'uploader_title' ),

button: {

text: jQuery( this ).data( 'uploader_button_text' ),

multiple: false

});

// When an image is selected, run a callback.

file_frame.on( 'select', function() {

attachment = file_frame.state().get('selection').first().toJSON();

jQuery("#"+field_id).val(attachment.id);

if( preview_media ) {

jQuery("#"+preview_id).attr('src',attachment.sizes.thumbnail.url);

}

});

// Finally, open the modal

file_frame.open();

}

jQuery('.image_upload_button').click(function() {

jQuery.fn.uploadMediaFile( jQuery(this), true );

});

jQuery('.image_delete_button').click(function() {

jQuery(this).closest('td').find( '.image_data_field' ).val( '' );

jQuery( '.image_preview' ).remove();

return false;

});

In the plugin root Setup Class autoload

spl_autoload_register( 'jma_yt_autoloader' );
function jma_yt_autoloader( $class_name ) {
    if ( false !== strpos( $class_name, 'JMAYt' ) ) {
        $classes_dir = realpath(plugin_dir_path(__FILE__));
        $class_file = $class_name . '.php';
        require_once $classes_dir . DIRECTORY_SEPARATOR . $class_file;
    }
}

spl_autoload_register( 'jma_yt_autoloader' );

function jma_yt_autoloader( $class_name ) {

if ( false !== strpos( $class_name, 'JMAYt' ) ) {

$classes_dir = realpath(plugin_dir_path(__FILE__));

$class_file = $class_name . '.php';

require_once $classes_dir . DIRECTORY_SEPARATOR . $class_file;

}

Setting array example:

/**
 * Build settings fields
 * @return array Fields to be displayed on settings page
 */
$settings = array(
    /*
     * start of a new section
     * */
    'standard' => array(
        'title'					=> __( 'Standard', 'jmayt_textdomain' ),
        'description'			=> __( 'These are fairly standard form input fields.', 'jmayt_textdomain' ),
        /*
         * fields for this section section
         * */
        'fields'				=> array(
            array(
                'id' 			=> 'text_field',
                'label'			=> __( 'Some Text' , 'jmayt_textdomain' ),
                'description'	=> __( 'This is a standard text field.', 'jmayt_textdomain' ),
                'type'			=> 'text',
                'default'		=> '',
                'placeholder'	=> __( 'Placeholder text', 'jmayt_textdomain' )
            ),
            array(
                'id' 			=> 'password_field',
                'label'			=> __( 'A Password' , 'jmayt_textdomain' ),
                'description'	=> __( 'This is a standard password field.', 'jmayt_textdomain' ),
                'type'			=> 'password',
                'default'		=> '',
                'placeholder'	=> __( 'Placeholder text', 'jmayt_textdomain' )
            ),
            array(
                'id' 			=> 'secret_text_field',
                'label'			=> __( 'Some Secret Text' , 'jmayt_textdomain' ),
                'description'	=> __( 'This is a secret text field - any data saved here will not be displayed after the page has reloaded, but it will be saved.', 'jmayt_textdomain' ),
                'type'			=> 'text_secret',
                'default'		=> '',
                'placeholder'	=> __( 'Placeholder text', 'jmayt_textdomain' )
            ),
            array(
                'id' 			=> 'text_block',
                'label'			=> __( 'A Text Block' , 'jmayt_textdomain' ),
                'description'	=> __( 'This is a standard text area.', 'jmayt_textdomain' ),
                'type'			=> 'textarea',
                'default'		=> '',
                'placeholder'	=> __( 'Placeholder text for this textarea', 'jmayt_textdomain' )
            ),
            array(
                'id' 			=> 'single_checkbox',
                'label'			=> __( 'An Option', 'jmayt_textdomain' ),
                'description'	=> __( 'A standard checkbox - if you save this option as checked then it will store the option as \'on\', otherwise it will be an empty string.', 'jmayt_textdomain' ),
                'type'			=> 'checkbox'
                /* dont use default here */
            ),
            array(
                'id' 			=> 'select_box',
                'label'			=> __( 'A Select Box', 'jmayt_textdomain' ),
                'description'	=> __( 'A standard select box.', 'jmayt_textdomain' ),
                'type'			=> 'select',
                'options'		=> array( 'drupal' => 'Drupal', 'joomla' => 'Joomla', 'wordpress' => 'WordPress' ),
                'default'		=> 'wordpress'
            ),
            array(
                'id' 			=> 'radio_buttons',
                'label'			=> __( 'Some Options', 'jmayt_textdomain' ),
                'description'	=> __( 'A standard set of radio buttons.', 'jmayt_textdomain' ),
                'type'			=> 'radio',
                'options'		=> array( 'superman' => 'Superman', 'batman' => 'Batman', 'ironman' => 'Iron Man' ),
                'default'		=> 'batman'
            ),
            array(
                'id' 			=> 'multiple_checkboxes',
                'label'			=> __( 'Some Items', 'jmayt_textdomain' ),
                'description'	=> __( 'You can select multiple items and they will be stored as an array.', 'jmayt_textdomain' ),
                'type'			=> 'checkbox_multi',
                'options'		=> array( 'square' => 'Square', 'circle' => 'Circle', 'rectangle' => 'Rectangle', 'triangle' => 'Triangle' )
                /* dont use default here */
            )
        )
    ),
    /*
     * start of a new section
     * */
    'extra' => array(
        'title'					=> __( 'Extra', 'jmayt_textdomain' ),
        'description'			=> __( 'These are some extra input fields that maybe aren\'t as common as the others.', 'jmayt_textdomain' ),
        /*
         * fields for this section section
         * */
        'fields'				=> array(
            array(
                'id' 			=> 'number_field',
                'label'			=> __( 'A Number' , 'jmayt_textdomain' ),
                'description'	=> __( 'This is a standard number field - if this field contains anything other than numbers then the form will not be submitted.', 'jmayt_textdomain' ),
                'type'			=> 'number',
                'default'		=> '',
                'placeholder'	=> __( '42', 'jmayt_textdomain' )
            ),
            array(
                'id' 			=> 'colour_picker',
                'label'			=> __( 'Pick a colour', 'jmayt_textdomain' ),
                'description'	=> __( 'This uses WordPress\' built-in colour picker - the option is stored as the colour\'s hex code.', 'jmayt_textdomain' ),
                'type'			=> 'color',
                'default'		=> '#21759B'
            ),
            array(
                'id' 			=> 'an_image',
                'label'			=> __( 'An Image' , 'jmayt_textdomain' ),
                'description'	=> __( 'This will upload an image to your media library and store the attachment ID in the option field. Once you have uploaded an imge the thumbnail will display above these buttons.', 'jmayt_textdomain' ),
                'type'			=> 'image',
                'default'		=> '',
                'placeholder'	=> ''
            ),
            array(
                'id' 			=> 'multi_select_box',
                'label'			=> __( 'A Multi-Select Box', 'jmayt_textdomain' ),
                'description'	=> __( 'A standard multi-select box - the saved data is stored as an array.', 'jmayt_textdomain' ),
                'type'			=> 'select_multi',
                'options'		=> array( 'linux' => 'Linux', 'mac' => 'Mac', 'windows' => 'Windows' ),
                'default'		=> array( 'linux' )
            )
        )
    )
);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

/**

* Build settings fields

* @return array Fields to be displayed on settings page

$settings = array(

* start of a new section

* */

'standard' => array(

'title' => __( 'Standard', 'jmayt_textdomain' ),

'description' => __( 'These are fairly standard form input fields.', 'jmayt_textdomain' ),

* fields for this section section

* */

'fields' => array(

array(

'id' => 'text_field',

'label' => __( 'Some Text' , 'jmayt_textdomain' ),

'description' => __( 'This is a standard text field.', 'jmayt_textdomain' ),

'type' => 'text',

'default' => '',

'placeholder' => __( 'Placeholder text', 'jmayt_textdomain' )

array(

'id' => 'password_field',

'label' => __( 'A Password' , 'jmayt_textdomain' ),

'description' => __( 'This is a standard password field.', 'jmayt_textdomain' ),

'type' => 'password',

'default' => '',

'placeholder' => __( 'Placeholder text', 'jmayt_textdomain' )

array(

'id' => 'secret_text_field',

'label' => __( 'Some Secret Text' , 'jmayt_textdomain' ),

'description' => __( 'This is a secret text field - any data saved here will not be displayed after the page has reloaded, but it will be saved.', 'jmayt_textdomain' ),

'type' => 'text_secret',

'default' => '',

'placeholder' => __( 'Placeholder text', 'jmayt_textdomain' )

array(

'id' => 'text_block',

'label' => __( 'A Text Block' , 'jmayt_textdomain' ),

'description' => __( 'This is a standard text area.', 'jmayt_textdomain' ),

'type' => 'textarea',

'default' => '',

'placeholder' => __( 'Placeholder text for this textarea', 'jmayt_textdomain' )

array(

'id' => 'single_checkbox',

'label' => __( 'An Option', 'jmayt_textdomain' ),

'description' => __( 'A standard checkbox - if you save this option as checked then it will store the option as \'on\', otherwise it will be an empty string.', 'jmayt_textdomain' ),

'type' => 'checkbox'

/* dont use default here */

array(

'id' => 'select_box',

'label' => __( 'A Select Box', 'jmayt_textdomain' ),

'description' => __( 'A standard select box.', 'jmayt_textdomain' ),

'type' => 'select',

'options' => array( 'drupal' => 'Drupal', 'joomla' => 'Joomla', 'wordpress' => 'WordPress' ),

'default' => 'wordpress'

array(

'id' => 'radio_buttons',

'label' => __( 'Some Options', 'jmayt_textdomain' ),

'description' => __( 'A standard set of radio buttons.', 'jmayt_textdomain' ),

'type' => 'radio',

'options' => array( 'superman' => 'Superman', 'batman' => 'Batman', 'ironman' => 'Iron Man' ),

'default' => 'batman'

array(

'id' => 'multiple_checkboxes',

'label' => __( 'Some Items', 'jmayt_textdomain' ),

'description' => __( 'You can select multiple items and they will be stored as an array.', 'jmayt_textdomain' ),

'type' => 'checkbox_multi',

'options' => array( 'square' => 'Square', 'circle' => 'Circle', 'rectangle' => 'Rectangle', 'triangle' => 'Triangle' )

/* dont use default here */

)

* start of a new section

* */

'extra' => array(

'title' => __( 'Extra', 'jmayt_textdomain' ),

'description' => __( 'These are some extra input fields that maybe aren\'t as common as the others.', 'jmayt_textdomain' ),

* fields for this section section

* */

'fields' => array(

array(

'id' => 'number_field',

'label' => __( 'A Number' , 'jmayt_textdomain' ),

'description' => __( 'This is a standard number field - if this field contains anything other than numbers then the form will not be submitted.', 'jmayt_textdomain' ),

'type' => 'number',

'default' => '',

'placeholder' => __( '42', 'jmayt_textdomain' )

array(

'id' => 'colour_picker',

'label' => __( 'Pick a colour', 'jmayt_textdomain' ),

'description' => __( 'This uses WordPress\' built-in colour picker - the option is stored as the colour\'s hex code.', 'jmayt_textdomain' ),

'type' => 'color',

'default' => '#21759B'

array(

'id' => 'an_image',

'label' => __( 'An Image' , 'jmayt_textdomain' ),

'description' => __( 'This will upload an image to your media library and store the attachment ID in the option field. Once you have uploaded an imge the thumbnail will display above these buttons.', 'jmayt_textdomain' ),

'type' => 'image',

'default' => '',

'placeholder' => ''

array(

'id' => 'multi_select_box',

'label' => __( 'A Multi-Select Box', 'jmayt_textdomain' ),

'description' => __( 'A standard multi-select box - the saved data is stored as an array.', 'jmayt_textdomain' ),

'type' => 'select_multi',

'options' => array( 'linux' => 'Linux', 'mac' => 'Mac', 'windows' => 'Windows' ),

'default' => array( 'linux' )

)

);

Instantiate the Class (with prefix, title and settings from above as arguments):

if( is_admin() )
    $jma_settings_page = new JMAYtSettings('jmayt', 'YouTube w/ Meta', $settings);

if( is_admin() )

$jma_settings_page = new JMAYtSettings('jmayt', 'YouTube w/ Meta', $settings);

Modular Columns Same Height

jQuery(document).ready(function($){
/* Put any theme-specific JS here... */
    var $components =  $('#content > .inner, .fixed-sidebar .fixed-sidebar-inner');
    function equalizeHeights($selector) {
        var heights = new Array();
        // Loop to get all element heights
        $selector.each(function() {
            var $this = $(this);
            // Need to let sizes be whatever they want so no overflow on resize
            $this.css('min-height', '0');
            $this.css('max-height', 'none');
            $this.css('height', 'auto');
            // Then add size (no units) to array
            heights.push($this.innerHeight());
        });
        // Find max height of all elements
        var max = Math.max.apply( Math, heights );
        // Set all heights to max height
        $selector.each(function() {
        if($(window).width() > 768)  {
            $(this).css('min-height', max + 'px');
        }
        });	
    }
    $(window).load(function() {
        // Fix heights on page load
        equalizeHeights($components);
        // Fix heights on window resize
        var iv = null;
        $(window).resize(function() {
            if(iv !== null) {
                window.clearTimeout(iv);
            }
            // Needs to be a timeout function so it doesn't fire every ms of resize
            iv = setTimeout(function() {
                equalizeHeights($components);
            }, 120);
        });
    });
});

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

/* Put any theme-specific JS here... */

var $components = $('#content > .inner, .fixed-sidebar .fixed-sidebar-inner');

function equalizeHeights($selector) {

var heights = new Array();

// Loop to get all element heights

$selector.each(function() {

var $this = $(this);

// Need to let sizes be whatever they want so no overflow on resize

$this.css('min-height', '0');

$this.css('max-height', 'none');

$this.css('height', 'auto');

// Then add size (no units) to array

heights.push($this.innerHeight());

});

// Find max height of all elements

var max = Math.max.apply( Math, heights );

// Set all heights to max height

$selector.each(function() {

if($(window).width() > 768) {

$(this).css('min-height', max + 'px');

}

});

}

$(window).load(function() {

// Fix heights on page load

equalizeHeights($components);

// Fix heights on window resize

var iv = null;

$(window).resize(function() {

if(iv !== null) {

window.clearTimeout(iv);

}

// Needs to be a timeout function so it doesn't fire every ms of resize

iv = setTimeout(function() {

equalizeHeights($components);

}, 120);

});

Nivo Slider From ACF Gallery

Use this to create the html for the slider:

function jma_nivo($input = array() ){
	$defaults = array(
		'class' => '',
		'acf_field' => 'gallery',
		'image_size' => 'tb_grid',
		'thumb_size' => 'tb_thumb',
		'post_id' => '',
		'image_ids' => '',
	);
	foreach($defaults as $var => $default){
		$args[$var] = isset($input[$var]) && $input[$var]? $input[$var]: $default;
	}
	extract($args);
	if(!$post_id){
		global $post;
		$post_id = $post->ID;
	}
	$return = '';
	if($image_ids || $acf_field){
		$return = '<div class="jma-port-slider">';
		$return .= '<div class="jma_nivo ' . $class . ' metaslider metaslider-nivo ml-slider" style="overflow: hidden">';
		if($image_ids)
			$image_ids = explode(',', $image_ids);
		else
			$image_ids = get_field($acf_field, $post_id, false);
		if($image_ids){
			foreach($image_ids as $image_id){
				$image_attributes = wp_get_attachment_image_src( $image_id, $image_size );
				$thumb_attributes = wp_get_attachment_image_src( $image_id, $thumb_size );
				if($image_attributes)
					$return .= '<img src="' . $image_attributes[0] . '" data-thumb="' . $thumb_attributes[0] . '" />';
			}
		}
		$return .= '</div><!--jma-nivo--></div>';	
	
	}
	return $return;
}

function jma_nivo($input = array() ){

$defaults = array(

'class' => '',

'acf_field' => 'gallery',

'image_size' => 'tb_grid',

'thumb_size' => 'tb_thumb',

'post_id' => '',

'image_ids' => '',

);

foreach($defaults as $var => $default){

$args[$var] = isset($input[$var]) && $input[$var]? $input[$var]: $default;

}

extract($args);

if(!$post_id){

global $post;

$post_id = $post->ID;

}

$return = '';

if($image_ids || $acf_field){

$return = '<div class="jma-port-slider">';

$return .= '<div class="jma_nivo ' . $class . ' metaslider metaslider-nivo ml-slider" style="overflow: hidden">';

if($image_ids)

$image_ids = explode(',', $image_ids);

else

$image_ids = get_field($acf_field, $post_id, false);

if($image_ids){

foreach($image_ids as $image_id){

$image_attributes = wp_get_attachment_image_src( $image_id, $image_size );

$thumb_attributes = wp_get_attachment_image_src( $image_id, $thumb_size );

if($image_attributes)

$return .= '<img src="' . $image_attributes[0] . '" data-thumb="' . $thumb_attributes[0] . '" />';

}

$return .= '</div></div>';

}

return $return;

}

then this for shortcode (notice you can add the params to the shortcode directly). image ids will over-write gallery id and show the images directly:

function nivo_slider($atts){
	ob_start();    
	$x = '';
	extract( shortcode_atts( array(
		'class' => '',
		'acf_field' => 'gallery',
		'image_size' => 'tb_grid',
		'thumb_size' => 'tb_thumb',
		'post_id' => '',
		'image_ids' => '',
		), $atts ) );
	echo jma_nivo(array(
		'class'=> $class,
		'acf_field'=> $acf_field,
		'image_size'=> $image_size,
		'thumb_size' => $thumb_size,
		'post_id'=> $post_id,
		'image_ids' => $image_ids,
		));
	$x = ob_get_contents();
	ob_end_clean();
	return str_replace("\r\n", '', $x);
}
add_shortcode('nivo_slider','nivo_slider');

function nivo_slider($atts){

ob_start();

$x = '';

extract( shortcode_atts( array(

'class' => '',

'acf_field' => 'gallery',

'image_size' => 'tb_grid',

'thumb_size' => 'tb_thumb',

'post_id' => '',

'image_ids' => '',

), $atts ) );

echo jma_nivo(array(

'class'=> $class,

'acf_field'=> $acf_field,

'image_size'=> $image_size,

'thumb_size' => $thumb_size,

'post_id'=> $post_id,

'image_ids' => $image_ids,

));

$x = ob_get_contents();

ob_end_clean();

return str_replace("\r\n", '', $x);

}

add_shortcode('nivo_slider','nivo_slider');

or this to add to content:

function jma_nivo_slider_content($content){
	$new = jma_nivo(array('class'=> 'new'));
	return  $content  . $new;
}
function jma_site_filters_hooks(){
	if(is_singular('portfolio_item') ){
		add_filter('the_content', 'jma_nivo_slider_content');
	}
}
add_action('template_redirect', 'jma_site_filters_hooks');

function jma_nivo_slider_content($content){

$new = jma_nivo(array('class'=> 'new'));

return $content . $new;

}

function jma_site_filters_hooks(){

if(is_singular('portfolio_item') ){

add_filter('the_content', 'jma_nivo_slider_content');

}

add_action('template_redirect', 'jma_site_filters_hooks');

and this to add the files for nivo slider (http://www.jqueryscript.net/slider/nivo-slider.html)

function jma_nivo_files() {
	    wp_enqueue_style( 'include_nivo_css', plugins_url('/nivo-slider.css', __FILE__) );
	    wp_enqueue_script( 'include_nivo_js', plugins_url('/jquery.nivo.slider.js', __FILE__), array( 'jquery' ) );
	    wp_enqueue_script( 'jma_nivo_js', plugins_url('/jma_meta_js.js', __FILE__), array( 'jquery', 'include_nivo_js' ) );
}
add_action( 'wp_enqueue_scripts', 'jma_nivo_files' );

function jma_nivo_files() {

wp_enqueue_style( 'include_nivo_css', plugins_url('/nivo-slider.css', __FILE__) );

wp_enqueue_script( 'include_nivo_js', plugins_url('/jquery.nivo.slider.js', __FILE__), array( 'jquery' ) );

wp_enqueue_script( 'jma_nivo_js', plugins_url('/jma_meta_js.js', __FILE__), array( 'jquery', 'include_nivo_js' ) );

}

add_action( 'wp_enqueue_scripts', 'jma_nivo_files' );

and […]

Placeholder Text with jQuery

This is for the constant contact widget:

jQuery(document).ready(function($){
	
	/* Put any theme-specific JS here... */
	$ccwidget = $( '.widget_sf_widget_constantcontact' );
	$ccwidget.find('label' ).css('display', 'none');
	$ccwidget.find('input[name="fnm"]' ).attr('placeholder', 'First Name');
	$ccwidget.find('input[name="lnm"]' ).attr('placeholder', 'Last Name');
	$ccwidget.find('input[name="eml"]' ).attr('placeholder', 'Email');
});

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

/* Put any theme-specific JS here... */

$ccwidget = $( '.widget_sf_widget_constantcontact' );

$ccwidget.find('label' ).css('display', 'none');

$ccwidget.find('input[name="fnm"]' ).attr('placeholder', 'First Name');

$ccwidget.find('input[name="lnm"]' ).attr('placeholder', 'Last Name');

$ccwidget.find('input[name="eml"]' ).attr('placeholder', 'Email');

});

Accordion Sidebar Menu

Shows all the children under the current root item and all other root items.

function jma_sidebar_addon() {
	global $post;
	$ancestors = get_ancestors( $post->ID, 'page' );
	$ancestor_id = array_pop($ancestors);
	$ancestor_id = $ancestor_id? $ancestor_id: $post->ID;
	$root_pages = get_pages(array('parent' => 0));
	echo '<ul>';
	foreach ($root_pages as $root_page) {
		$jma_classes = '';
		$show_kids = false;
		$has_kids = false;
		if( $root_page->ID == $ancestor_id || $root_page->ID == $post->ID ){
			$jma_classes .= ' show-children';
			$show_kids = true;
		}
		$children = get_pages('child_of='.$root_page->ID);
		if( count( $children ) != 0 ){
			$jma_classes .= ' has-cildren';
			$has_kids = true;
		}
		echo '<li class="page_item page-item-' . $root_page->ID . $jma_classes . '"><a href="' . get_page_link( $root_page->ID ) .'">' .  $root_page->post_title . '</a>';
		if( $show_kids && $has_kids ){
			echo '<ul>';
				wp_list_pages(array("child_of" => $ancestor_id,  "link_before" => "", "title_li" => "", "sort_column" => "title"));
			echo '</ul>';	      	
		}
		echo '</li>';	   
	}
	echo '<ul>';
}
add_action('themeblvd_sidebar_sidebar_left_before', 'jma_sidebar_addon');

function jma_sidebar_addon() {

global $post;

$ancestors = get_ancestors( $post->ID, 'page' );

$ancestor_id = array_pop($ancestors);

$ancestor_id = $ancestor_id? $ancestor_id: $post->ID;

$root_pages = get_pages(array('parent' => 0));

echo '<ul>';

foreach ($root_pages as $root_page) {

$jma_classes = '';

$show_kids = false;

$has_kids = false;

if( $root_page->ID == $ancestor_id || $root_page->ID == $post->ID ){

$jma_classes .= ' show-children';

$show_kids = true;

}

$children = get_pages('child_of='.$root_page->ID);

if( count( $children ) != 0 ){

$jma_classes .= ' has-cildren';

$has_kids = true;

}

echo '<li class="page_item page-item-' . $root_page->ID . $jma_classes . '"><a href="' . get_page_link( $root_page->ID ) .'">' . $root_page->post_title . '</a>';

if( $show_kids && $has_kids ){

echo '<ul>';

wp_list_pages(array("child_of" => $ancestor_id, "link_before" => "", "title_li" => "", "sort_column" => "title"));

echo '</ul>';

}

echo '</li>';

}

echo '<ul>';

}

add_action('themeblvd_sidebar_sidebar_left_before', 'jma_sidebar_addon');

This is the code for an accordion based on the portfolio_item post type (php):

function sidebar_portfolio_tax(){
	global $post; 
	$terms= get_the_terms($post->id, 'portfolio');
	if(is_array($terms))
		foreach($terms as $term){
			$this_term_ids[] = $term->term_id;
		}
	ob_start();
	$services = get_terms( 'portfolio', array('hierarchical' => false) );//stops empty parents from being included
	echo '<div class="panel-group event-accordion" id="accordion">';
	foreach ($services as $service) {
		$args = array(
			'post_type' => 'portfolio_item',
			'tax_query' => array(
				array(
					'taxonomy' => 'portfolio',
					'field' => 'id',
					'terms' => $service->term_id
				)
			), 
			'orderby' => 'title',
			'order' => 'ASC',
			'posts_per_page' => -1
			
		);
		$x = new WP_Query($args);
		if($x->have_posts()){
			$in = in_array($service->term_id, $this_term_ids)? ' in': '';//opens accordian to current category
			echo '<div class="panel">';// panel-default
			echo '<div class="">';//panel-heading
			echo '<a style="background-image: url(' . get_stylesheet_directory_uri() . '/grandchild-5-0/images/' . $service->slug . '.png)" class="service-cat ' . $service->slug . '" data-toggle="collapse" data-parent="#accordion" href="#collapse' . $service->term_id . '">';
			echo $service->name;
			echo '</a>';
			echo '</div><!--panel-heading-->';
			echo '<ul id="collapse' . $service->term_id . '" class="panel-collapse collapse' . $in . '">';
			while ( $x->have_posts() ) : $x->the_post();
					echo '<li>'; 
					echo '<a href="';
					the_permalink();
					echo '">';
					the_title();
					echo '</a>';
					echo '</li>';
			endwhile;
			wp_reset_postdata();
			echo '</ul></div><!--panel-default-->';
		}
	}
	echo '</div><!--panel-group-->';
	$x = ob_get_contents();
	ob_end_clean();
	return $x;
}

function sidebar_portfolio_tax(){

global $post;

$terms= get_the_terms($post->id, 'portfolio');

if(is_array($terms))

foreach($terms as $term){

$this_term_ids[] = $term->term_id;

}

ob_start();

$services = get_terms( 'portfolio', array('hierarchical' => false) );//stops empty parents from being included

echo '<div class="panel-group event-accordion" id="accordion">';

foreach ($services as $service) {

$args = array(

'post_type' => 'portfolio_item',

'tax_query' => array(

array(

'taxonomy' => 'portfolio',

'field' => 'id',

'terms' => $service->term_id

)

'orderby' => 'title',

'order' => 'ASC',

'posts_per_page' => -1

);

$x = new WP_Query($args);

if($x->have_posts()){

$in = in_array($service->term_id, $this_term_ids)? ' in': '';//opens accordian to current category

echo '<div class="panel">';// panel-default

echo '<div class="">';//panel-heading

echo '<a style="background-image: url(' . get_stylesheet_directory_uri() . '/grandchild-5-0/images/' . $service->slug . '.png)" class="service-cat ' . $service->slug . '" data-toggle="collapse" data-parent="#accordion" href="#collapse' . $service->term_id . '">';

echo $service->name;

echo '</a>';

echo '</div>';

echo '<ul id="collapse' . $service->term_id . '" class="panel-collapse collapse' . $in . '">';

while ( $x->have_posts() ) : $x->the_post();

echo '<li>';

echo '<a href="';

the_permalink();

echo '">';

the_title();

echo '</a>';

echo '</li>';

endwhile;

wp_reset_postdata();

echo '</ul></div>';

}

echo '</div>';

$x = ob_get_contents();

ob_end_clean();

return $x;

}

and the css:

.event-accordion ul {
	padding-left: 0;
	margin-bottom: 0;
}
.event-accordion ul li {
	list-style: none;
	border-bottom: solid 1px #eeeeee;
	background-color: #999999;
	text-align: right;
}
.event-accordion ul li:hover {
	background-color: #eeeeee;
}
/* optional chevron
.event-accordion ul li:after {
	font-family:'FontAwesome';
	content: "\f054";
	float: right;
	color: #97c1da;
}*/
.event-accordion .panel {
	margin: 0!important;
	border-width: 0!important;
}
.event-accordion .panel > div {
	text-align: right;
}
.event-accordion a {
	padding: 10px 20px 10px 5px;
	display: block;	
}
.event-accordion .service-cat  {
	min-height: 45px;
	background-color: #a3a3a2;
	color: #ffffff;
	background-repeat: no-repeat;
	/*border-top: solid 1px #ffffff;*/
}
.event-accordion .service-cat:hover {
	background-color: #666666;
}

.event-accordion ul {

padding-left: 0;

margin-bottom: 0;

}

.event-accordion ul li {

list-style: none;

border-bottom: solid 1px #eeeeee;

background-color: #999999;

text-align: right;

}

.event-accordion ul li:hover {

background-color: #eeeeee;

}

/* optional chevron

.event-accordion ul li:after {

font-family:'FontAwesome';

content: "\f054";

float: right;

color: #97c1da;

}*/

.event-accordion .panel {

margin: 0!important;

border-width: 0!important;

}

.event-accordion .panel > div {

text-align: right;

}

.event-accordion a {

padding: 10px 20px 10px 5px;

display: block;

}

.event-accordion .service-cat {

min-height: 45px;

background-color: #a3a3a2;

color: #ffffff;

background-repeat: no-repeat;

/*border-top: solid 1px #ffffff;*/

}

.event-accordion .service-cat:hover {

background-color: #666666;

}

If we want to create an horizontal menu instead:

function aux_menu(){
	global $post; 
	$terms= get_the_terms($post->id, 'portfolio');
	if(is_array($terms))
		foreach($terms as $term){
			$this_term_ids[] = $term->term_id;
		}
	ob_start();
	$services = get_terms( 'portfolio', array('hierarchical' => false, 'orderby' => 'slug') );//echo '<pre>';print_r($services);echo '</pre>';
	echo '<div class="aux-menu clearfix "><div>';
	echo '<ul class="sf-menu sf-menu-with-fontawesome">';
	foreach ($services as $service) {
		$args = array(
			'post_type' => 'portfolio_item',
			'tax_query' => array(
				array(
					'taxonomy' => 'portfolio',
					'field' => 'id',
					'terms' => $service->term_id
				)
			), 
			'orderby' => 'title',
			'order' => 'ASC',
			'posts_per_page' => -1
			
		);
		$x = new WP_Query($args);
		if($x->have_posts()){
			$active = in_array($service->term_id, $this_term_ids)? ' current': '';
			echo '<li class="menu-item level-1 ' . $service->slug . $active . '">';
			echo '<button class="menu-btn sf-with-ul" >';
			echo $service->name;
			echo '</button>';
			echo '<ul class="sub-menu non-mega-sub-menu">';
			while ( $x->have_posts() ) : $x->the_post();
					echo '<li class="menu-item level-2">'; 
					echo '<a class="menu-btn" href="';
					the_permalink();
					echo '">';
					the_title();
					echo '</a>';
					echo '</li>';
			endwhile;
			wp_reset_postdata();
			echo '</ul><!--sub-menu-->';
			echo '</li><!--menu-item level-1-->';
		}
	}
	echo '</ul></div></div><!--aux-menu-->';
	$x = ob_get_contents();
	ob_end_clean();
	echo $x;
}

function aux_menu(){

global $post;

$terms= get_the_terms($post->id, 'portfolio');

if(is_array($terms))

foreach($terms as $term){

$this_term_ids[] = $term->term_id;

}

ob_start();

$services = get_terms( 'portfolio', array('hierarchical' => false, 'orderby' => 'slug') );//echo '<pre>';print_r($services);echo '</pre>';

echo '<div class="aux-menu clearfix "><div>';

echo '<ul class="sf-menu sf-menu-with-fontawesome">';

foreach ($services as $service) {

$args = array(

'post_type' => 'portfolio_item',

'tax_query' => array(

array(

'taxonomy' => 'portfolio',

'field' => 'id',

'terms' => $service->term_id

)

'orderby' => 'title',

'order' => 'ASC',

'posts_per_page' => -1

);

$x = new WP_Query($args);

if($x->have_posts()){

$active = in_array($service->term_id, $this_term_ids)? ' current': '';

echo '<li class="menu-item level-1 ' . $service->slug . $active . '">';

echo '<button class="menu-btn sf-with-ul" >';

echo $service->name;

echo '</button>';

echo '<ul class="sub-menu non-mega-sub-menu">';

while ( $x->have_posts() ) : $x->the_post();

echo '<li class="menu-item level-2">';

echo '<a class="menu-btn" href="';

the_permalink();

echo '">';

the_title();

echo '</a>';

echo '</li>';

endwhile;

wp_reset_postdata();

echo '</ul>';

echo '</li>';

}

echo '</ul></div></div>';

$x = ob_get_contents();

ob_end_clean();

echo $x;

}

Then style it including current distinctions and going to vertical accordion […]