WordPress Flex Slider Plugin

Word Count: 550
  • Post category:Codings
  • Post last modified:2024-07-13

Introduction

This plugin uses the Slick Slider library to build one or more image sliders on WordPress pages or posts. The development is based on the plugin template described here.

This plugin makes use of the WP REST API to add/change a record in the wp_options table in the database.

To avoid the ownerships and permissions complexity in Linux, the development is on the local PC using Laragon setup on the SSD drive named “KingstonSSD“.

Design Parameters

  • Plugin slug – ivr-flex-slider
  • Admin page title – Ivr Flex Slider
  • Left menu text – Ivr Flex Slider
  • Vue mount point – vue-ifs-app
  • Rest API namespace – ivrfs/v1 (i.e., /wp-json/ivrfs/v1)
  • Rest API base – settings
  • Option name in database table – ivr-flexslider
  • Option ivr-flexslider structure is to align with JS object:
    • { IdCounter: 1011, s1011:{option1:value, option2:value...}}
    • IdCounter is for controlling the slider id. This counter will increase by 1 for each new slider created. The slider ID will prefix with the letter “s”. For example: s1011.

Slick slider settings on Admin page

The WP admin page supports these slick slider settings:

  1. autoplaySpeed – integer (3000) / input
    • Autoplay Speed in milliseconds.
  2. dots – boolean (false) / dropdown
    • Show dot indicators.
  3. rows – integer (1) / input
    • Setting this to more than 1 initializes grid mode. Use slidesPerRow to set how many slides should be in each row.
  4. slidesPerRow – integer (1) / input
    • With grid mode intialized via the rows option, this sets how many slides are in each grid row.
  5. slidesToShow – integer (1) / input
    • number of slides to show.
  6. slidesToScroll – integer (1) / input
    • number of slides to scroll.
  7. centerMode – boolean (false) / dropdown
    • Enables centered view with partial prev/next slides. Use with odd numbered slidesToShow counts.
  8. centerPadding – string (‘ 50px’ ) / input
    • Side padding when in center mode (px or %).
  9. cssEase – string (‘ease’) / input
    • CSS3 Animation Easing.
  10. fade – boolean (false) / dropdown
    • Enable fade.
  11. speed – integer (300) ms / input
    • Slide/Fade animation speed.
  12. adaptiveHeight – boolean (false) / dropdown
    • Enables adaptive height for single slide horizontal carousels.
  13. mobilefirst – boolean (false) / dropdown
    • Responsive settings use mobile first calculation.

Slick slider setup

  • set up the HTML markup.
  • move the /slick folder into the project folder.
  • add slick.css in the <head>
  • add slick.js before closing <body> tag, after jQuery (requires jQuery 1.7+).

ToDo

The following changes are to be applied to vue-plugin-1 with new version number.

  • In the main plugin file, the Constants defined are applied globally thus could cause conflicts among plugins. The solution is to add a unique prefix to each constant name. The plugin vue-plugin-1 has to be modified.
    • Solution – prefix the constants with IFS.
  • In CreateMenuPages.php, the 'page_slug'=>$_GET['page'] could cause a php warning: Undefined array key “page”.
    • Solution: use isset() to check its existence.
  • In main plugin file, the get_plugin_data() could cause undefined / cannot be called fetal error.
    • Solution – WP functions may not be accessible from class. Moved this function to the constructor “plugins_loaded” hook.
  • In ApiEndPoints.php, the (current_user_can('edit_posts')) should be changed to (current_user_can(IFS_CAPABILITY))
  • in ApiRndPoints.php, change to $response = get_option(IFS_OPTION_NAME);

Reference

Tags: , , , ,