I am creating a Slider plugin for educational purposes to get used with the WP PHP ecosystem. As of now i have built the file structure of the Plugin and created a nice slide show using Bootstrap. In the continuation i want to create a settings page in order to upload the slider images and the appropriate text for each one of them. I have created a settings page and the appropriate form. I need to understand how can i pass the POST variables in my template.html file and replace the src="..." images with them.
The options.php file is:
<?php
//Plugin Options Menu
/** Adds menu in the WP admin area*/
add_action('admin_menu', 'sd_cool_plugin_create_menu');
//create menu
function sd_cool_plugin_create_menu() {
//create new top-level menu
add_menu_page('My Cool Plugin Settings', 'Cool Settings', 'administrator', __FILE__, 'my_cool_plugin_settings_page' , plugins_url('/images/icon.png', __FILE__) );
//call register settings function
add_action( 'admin_init', 'register_mysettings' );
}
add_action( 'admin_menu', 'sd_slider_settings' );
add_action( 'admin_init', 'register_mysettings' );
//register settings
function register_mysettings() { // whitelist options
register_setting( 'sd-option-group', 'new_option_name' );
register_setting( 'sd-option-group', 'some_other_option' );
register_setting( 'sd-option-group', 'option_etc' );
}
//add icon
/** Step 1. */
function sd_slider_settings() {
add_options_page( 'SD Slider Settings', 'SD Slider', 'manage_options', 'my-unique-identifier', 'sd_plugin_options' );
add_menu_page('SD Slider Plugin Settings', 'Cool Settings', 'administrator', __FILE__, 'my_cool_plugin_settings_page', get_stylesheet_directory_uri('stylesheet_directory')."/images/logo.png");
}
/** Step 3. */
function sd_plugin_options() {
if ( !current_user_can( 'manage_options' ) ) {
wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
}
echo '<div class="wrap">';
echo '<h1>SD Slider Plugin Options</h1>';
echo '</div>';?>
<form method="post" action="template.php" enctype="multipart/form-data">
<?php settings_fields( 'sd-option-group' ); ?>
<!-- settings input form -->
<div class="form-group">
<!-- 1st image -->
<label for="exampleFormControlFile1">Choose the 1st image</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" name="image1">
<br>
<label for="fname">Headline:</label>
<input type="text" id="headline1" name="headline1"><br><br>
<br>
<label for="fname">Caption:</label>
<input type="text" id="headline1" name="headline1"><br><br>
<br>
<!-- 2nd image -->
<label for="exampleFormControlFile2">Choose the 2nd image</label>
<input type="file" class="form-control-file" id="exampleFormControlFile2" name="image2">
<br>
<label for="fname">Headline:</label>
<input type="text" id="headline2" name="headline2"><br><br>
<br>
<label for="fname">Caption:</label>
<input type="text" id="headline2" name="headline2"><br><br>
<!-- 3rd image -->
<br>
<label for="exampleFormControlFile3">Choose the 3rd image</label>
<input type="file" class="form-control-file" id="exampleFormControlFile3" name="image3">
<br>
<label for="fname">Headline:</label>
<input type="text" id="headline3" name="headline3"><br><br>
<br>
<label for="fname">Caption:</label>
<input type="text" id="headline3" name="headline3"><br><br>
<?php submit_button(); ?>
</div>
</form>
<?
}
//Plugin Options Menu End
?>
<?php
// create custom plugin settings menu
add_action('admin_menu', 'my_cool_plugin_create_menu');
function my_cool_plugin_create_menu() {
//create new top-level menu
add_menu_page('My Cool Plugin Settings', 'Cool Settings', 'administrator', __FILE__, 'my_cool_plugin_settings_page' , plugins_url('/images/icon.png', __FILE__) );
//call register settings function
add_action( 'admin_init', 'register_my_cool_plugin_settings' );
}
function register_my_cool_plugin_settings() {
//register our settings
register_setting( 'my-cool-plugin-settings-group', 'new_option_name' );
register_setting( 'my-cool-plugin-settings-group', 'some_other_option' );
register_setting( 'my-cool-plugin-settings-group', 'option_etc' );
}
function my_cool_plugin_settings_page() {
?>
<div class="wrap">
<h1>Your Plugin Name</h1>
<form method="post" action="options.php">
<?php settings_fields( 'my-cool-plugin-settings-group' ); ?>
<?php do_settings_sections( 'my-cool-plugin-settings-group' ); ?>
<table class="form-table">
<tr valign="top">
<th scope="row">New Option Name</th>
<td><input type="text" name="new_option_name" value="<?php echo esc_attr( get_option('new_option_name') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Some Other Option</th>
<td><input type="text" name="some_other_option" value="<?php echo esc_attr( get_option('some_other_option') ); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Options, Etc.</th>
<td><input type="text" name="option_etc" value="<?php echo esc_attr( get_option('option_etc') ); ?>" /></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php } ?>
var $ = jQuery;
$(document).ready(function(){
var myCarousel = document.querySelector('#myCarousel');
var carousel = new bootstrap.Carousel(myCarousel);
$('#page').prepend("<div id='slider-container'></div>");
$("#slider-container").load("wp-content/plugins/slider-plugin/template.html") ;
}); <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.jqueryscript.net%2Fdemo%2FResponsive-Full-Width-jQuery-Image-Slider-Plugin-skdslider%2Fslides%2F1.jpg&f=1&nofb=1" alt="">
<div class="container">
<div class="carousel-caption text-start">
<h1>Example headline.</h1>
<p>Some representative placeholder content for the first slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img width="100%" height="100%" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.jqueryscript.net%2Fdemo%2FResponsive-Full-Width-jQuery-Image-Slider-Plugin-skdslider%2Fslides%2F1.jpg&f=1&nofb=1" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Some representative placeholder content for the second slide of the carousel.</p>
<p><a class="btn btn-lg btn-primary" href="#">Learn more</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I am using the options.php code from Codex page
The Carousel comes from Bootstrap Carousel
This is the last Git Push