Ninja Slider / Posts /

How can I get the Ninja Image Slider work with Wordpress?

As the title describes it. I can't get the image slider working with wordpress, but I got it working on my HTML Mockup Website.
Shuya  2 years ago   viewed: 5726    

1 Answer

1. Create the wp-content/plugins/ninja-slider folder, and add related source code there as shown below:

2. Create file ninja-slider.php as below and add it into the folder that has been created in the previous step.
<?php /* Plugin Name: Ninja Slider Plugin URI: Description: Slider Component for WordPress Version: v2014.1.11 Author: Author URI: License: Required */ //add JSs and CSS add_action('wp_enqueue_scripts', 'nslider_scripts'); function nslider_scripts() { wp_register_style('nslider_css', plugins_url('ninja-slider.css', __FILE__)); wp_enqueue_style('nslider_css'); $option_video = get_option('mcns_video'); if($option_video == 'on'){ wp_register_script('ninjaVideoPlugin', plugins_url('ninjaVideoPlugin.js', __FILE__)); wp_enqueue_script('ninjaVideoPlugin'); } wp_register_script('nsliderjs_core', plugins_url('ninja-slider.js', __FILE__));//, array("ninjaVideoPlugin") wp_enqueue_script('nsliderjs_core'); } //add HTML: The shorcode will be replaced by the callback return value add_shortcode("NinjaSlider", "ninja_display_slider"); function ninja_display_slider() {//$attr, $content //extract(shortcode_atts(array('sliderId' => 'ninja-slider2'), $attr)); $html = '<div id="ninja-slider"> <ul> <li><div data-image="img/md/1.jpg"></div></li> <li><div data-image="img/md/2.jpg"></div></li> <li><div data-image="img/md/3.jpg"></div></li> <li><div data-image="img/md/4.jpg"></div></li> <li><div data-image="img/md/5.jpg"></div></li> </ul> </div>'; //transform "img/md/x.jpg" to "/wp-content/plugins/ninja-slider/img/md/x.jpg" $html = preg_replace('/(data-image\s*=\s*[\'"])(.+?)([\'"])/', "$1".plugins_url("$2", __FILE__)."$3", $html); return $html; } register_uninstall_hook( __FILE__, 'mcns_uninstall_hook' ); function mcns_uninstall_hook() { delete_option('mcns_video'); delete_option('mcns_thumb'); } //create a menu link on the admin panel for the plugin option settings page add_action('admin_menu', 'mcns_add_menu'); function mcns_add_menu(){ //create new top-level menu //add_menu_page( page_title, menu_title, capability, menu_slug, function, icon_url, position ); add_menu_page('Ninja Slider Settings Page', 'Ninja Slider Settings', 'manage_options', 'McNS', 'mcns_settings_page', plugins_url( 'wordpress.png', __FILE__ )); } //create option settings page add_action('admin_init', 'mcns_register_settings'); function mcns_register_settings(){ //3 params: options group name; actual option name; callback function to sanitize the option values register_setting( 'mcns-settings-group', 'mcns_video'); //, 'mcns_sanitize_settings' register_setting( 'mcns-settings-group', 'mcns_thumb'); } function mcns_settings_page(){ ?> <div class="wrap"> <h2>Ninja Slider Plugin Options</h2> <form method="post" action="options.php"> <?php settings_fields( 'mcns-settings-group' ); $option_video = (get_option('mcns_video')=='on')?'checked':''; $option_thumb = (get_option('mcns_thumb')=='on')?'checked':''; ?> <label for="video" style="width:120px;display:inline-block;">Video:</label> <input type="checkbox" id="video" name="mcns_video" <?php echo $option_video ?> /> <hr/> <label for="thumb" style="width:120px;display:inline-block;">Thumbnail:</label> <input type="checkbox" id="thumb" name="mcns_thumb" <?php echo $option_thumb ?> /> <p class="submit"><input type="submit" value="Save Changes" /></p> </form> </div> <?php } ?>

3. In the page(or post) where you want to embed the Ninja Slider, just add the short code shown below:

[NinjaSlider sliderId="ninlider2"]

That's it! I just tested it locally with NetBeans IDE and found it is working good.

I am a newbie in PHP. I wrote above plugin php page a few months ago when trying to learn it. I didn't touch PHP since then, and now I feel I forgot everything: I am a complete PHP novice again. If you have better Plugin code, please post it here and it will be much appreciated.

Milo   2 years ago


Your name*
(Optional. Used to modify this post afterwords)
+ =  

Ask your Own Question

  • If your question is related to the topic of this post, you can post your question to this page by clicking the "Post a reply" button at left;

  • When you want to start a new page for your question: