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  5 years ago   viewed: 9287    

4 Answers

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   5 years ago

how and where should i add images or video ? 

  2 years ago

WordPress Slider is of the best way to attract possible visitor for a website.  I’m bookmarking you site for future use.

If you want a challenging arcade  game then  bottle flip game is one for you. It has 3D graphics effect that you will surely enjoy.

  one month ago

Maybe you should use Soliloquy.

Soliloquy is a WordPress slider plugin that's both easy and powerful, with 900,000+ downloads used by website owners, marketers, and developers. Soliloquy was built to adapt to the workflow of WordPress users to combat the bloated and confusing sliders out there.

I've been going through this game clash royale pc and find that some levels can be very challenging. It took me a few days to get out of one specific level.

  one month 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: