Last week, I did one small task which is adding the floating survey button on the front page. At the backend, the client is able to add the link and enable or disable the survey button for the front page. I create the plugin for this feature. Below is the screenshot for the frontend and backend.
Front End
Back End
Here is what we are going to do in this post.
- Create a new plugin
- Add the survey setting form at the backend
- Add the survey button and style at the frontend
Create a new plugin
- First, here is the file structure for the plugin.
- survey-btn
- classes
- languages
- survey-btn.php
- survey-btn
- Create the main plugin file which is survey-btn.php. You may notice I create the classes folder. We will create the functional and add the style for the frontend in the class files and include those class files in the main plugin file. For the main plugin file, add the code below.
<?php
/*
Plugin Name: Survey button
Description: A survey button that will link to the survey page and shows the survey button on every page.
Version: 1.0
*/
// include the classes
require dirname( __FILE__ ) . '/classes/class-survey-btn.php';
require dirname( __FILE__ ) . '/classes/class-survey-btn-frontend.php';
// for plugins
// @link https://wpgeodirectory.com/loading-wordpress-language-files-correctly/
add_action( 'init', 'survey_btn_load_textdomain' );
function survey_btn_load_textdomain() {
load_plugin_textdomain( 'survey-setting', false, basename( dirname( __FILE__ ) ) . '/languages' );
}For the comment at the top of the file, you can add more information if you like. More detail can be found here.
Add the survey setting form at the backend
- Create the functional file for adding the survey setting at the backend. We will create the class-survey-btn.php in the classes folder. Add the code below in the class-survey-btn.php.
<?php
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
/**
* @link https://codex.wordpress.org/Creating_Options_Pages
* Example #2: Class style
* From the example, need to adjust to fit our need but the concept is the same as the post.
*/
class Survey_Setting
{
/**
* Start up
*/
public function __construct()
{
add_action( 'admin_menu', array( $this, 'survey_admin_menu' ) );
}
/**
* Add Survey setting menu
*/
public function survey_admin_menu()
{
add_menu_page(__('Survey Setting','survey-setting'), __('Survey Setting','survey-setting'), 'manage_options', 'survey', array( $this, 'survey_setting_display') );
}
/**
* Options page callback
*/
public function survey_setting_display()
{
// make sure the users have the permision for manage the options
if (!current_user_can('manage_options')) {
wp_die('Unauthorized user');
}
// check if the form is submitted.
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// check nouce for make sure the data comes from the same form that users submit.
check_admin_referer( 'nouce_survey_setting_page' );
// get POST value from submit form
$survey_setting_arr = $_POST['survey_setting']; // store as array
// Survey URL field
if( isset( $survey_setting_arr['survey_url'] ) ) {
update_option( 'survey_setting' , $survey_setting_arr );
}
// enable_survey field
if( isset( $survey_setting_arr['enable_survey'] ) ) {
update_option( 'survey_setting' , $survey_setting_arr );
}
}
// retrieve the option value, in this case, it is an array.
$survey_setting_get = get_option('survey_setting');
?>
<div class="wrap">
<h1><?php echo __('Survey Setting', 'survey-setting') ?></h1>
<br>
<p><?php echo __('Note that, the survey button will always stick at the bottom of the front page.','survey-setting') ?></p>
<form method="post">
<table class="form-table">
<tbody>
<tr>
<th>
<?php echo __('Survey URL','survey-setting') ?>
</th>
<td>
<input type="url" name="survey_setting[survey_url]" size="100" placeholder="https://example.com" value="<?php echo ( isset($survey_setting_get) && $survey_setting_get['survey_url'] != '' ? $survey_setting_get['survey_url'] : ''); ?>">
<p class="description"><?php echo __('any valid URL. Ex: https://example.com', 'survey-setting')?></p>
</td>
</tr>
<tr>
<th>
<?php echo __('Enable','survey-setting') ?>
</th>
<td>
<input type="checkbox" name="survey_setting[enable_survey]" value="1" <?php echo ( isset($survey_setting_get) && $survey_setting_get['enable_survey'] === '1' ? 'checked' : '' ); ?>>
<p class="description"><?php echo __('enable or disable the survey button on the frontend.','survey-setting')?></p>
</td>
</tr>
</tbody>
</table>
<p>
<?php wp_nonce_field( 'nouce_survey_setting_page' ); ?>
<input type="submit" value="<?php echo __('Save','survey-setting') ?>" class="button button-primary button-large">
</p>
</form>
</div>
<?php
}
} // end Class
if( is_admin() && (class_exists('Survey_Setting')) ) {
// initialize class
$survey_setting = new Survey_Setting();
}The code above, we create the survey setting form at the backend. We add the new admin menu calls Survey Setting. We use the WP admin class which is “wrap” and “form-table” at the div and table element so our form will style as same as the WP admin style. Then we check the user permission which must be the administrator role in order to change the setting. We add the nonce field for security reasons.
You may notice we use the wp_options table for storing the survey setting. That’s why the user must be the administrator role only. More detail about the wp_options table can be found at this link.
We use get_option() and update_option() for getting and update our survey setting from the wp_options table.
Now when we activate the plugin and the login user is the administrator role, you will see the Survey Setting menu appears. Click on the menu, you will see the survey setting form.
Add the survey button and style at the frontend
- Now we want to see the survey button on the front end. We will add the code below to the class-survey-btn-frontend.php.
<?php
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
/**
* Survey_Btn_Frontend class
*
* render the button on the frontend
*/
class Survey_Btn_Frontend {
/**
* Start up
*/
public function __construct()
{
add_action('wp_head', array( $this, 'survey_btn_css') );
add_action('wp_footer', array( $this, 'survey_btn_render') );
}
public function survey_btn_css()
{
// add the custom style
$custom_style = 'check the code below the code block';
echo $custom_style;
}
public function survey_btn_render() {
// get the survey setting from wp_options table
$setting = get_option('survey_setting'); // expect the array result if any data
$is_enable = false;
$survey_url = '';
if( !empty($setting) && is_array($setting) ) {
if ( isset($setting['enable_survey']) && $setting['enable_survey'] === '1' && strlen(trim($setting['survey_url'])) > 0 ) {
$is_enable = true;
$survey_url = $setting['survey_url'];
}
}
// show the survey button
if ($is_enable) {
// render the floading button
printf('<div id="survey_btn_wrap"><a id="survey_btn" href="%s" target="_blank">%s</a></div>', $survey_url , __('Survey', 'survey-setting'));
}
}
}
if(class_exists('Survey_Btn_Frontend'))
// initialize class
$survey_btn_frontend = new Survey_Btn_Frontend();For the custom style, here is the code. For some reason, my CSS won’t render well in the coder block above.
#survey_btn {
color: #ffffff;
cursor: pointer;
}
#survey_btn_wrap {
position:fixed;
right:64px;
bottom: -30px;
height: 80px;
width:170px;
background:#232737;
padding: 15px;
border: 1px solid rgba(19, 153, 144, 1);
border-bottom-width: 0;
border-radius: 25px;
text-align: center;
}In the code above, we add the style for the survey button. We add the survey button at the bottom of the page. The button will float when you scroll up or down. Now when you refresh the frontend, you will the survey button.
Languages folder
The last thing, I have the languages folder for the translation. If you want to know how to create the translation files for the plugin, check out my post here.
And that’s it. If you want to remove the survey setting data from the wp_options table when users delete the plugin, you can add the hook for that.
