Great plugin! Implemented within minutes and simple for end users to manage.
Client is particularly happy with the reporting features of the plugin.
BFowler for Ad King Pro

Latest Tweets

Ad King Pro has FINALLY has an update! A cleanup really with a few tweaks to a couple of features. More to come! https://t.co/Fekax5oh1Z
Your using Ad King Pro right? Your site is responsive, surely. Implement adverts so their mobile friendly! http://t.co/9ouYGcYRMJ
Invoice King Pro and Ad King Pro both receive some amazing new features that you will want to know about! http://t.co/FBgDllGJan
Follow KingProPlugins on Twitter

WordPress plugin basics: Site details plugin – Part 2

If you have been following, you have built the site details plugin with hardcoded option fields and will no doubt like the ability to create a new field without the need of digging into the code each time. So its time to make this dynamic!

Using the plugin built in part 1, there is only a few things we need to modify/add to get this turned into a dynamic site settings plugin.

For a start, lets start with removing the fields we registered and replace them with 2 new ones, one for the field names (will be explained further on in the post) and one for the fields values. Following part 1, as I am building this plugin to release on WordPress’ directory, my field names are ‘dkp_fields’ and ‘dkp_output_fields’.

register_setting( 'dkp-options', 'dkp_fields' );
register_setting( 'dkp-options', 'dkp_output_fields' );

add_option( 'dkp_option_settings', '' );
add_option( 'dkp_output_fields', '' );

Now that we have removed the old fields, we’ll need to update the form that populates this. Open up the settings_page.php file we created in part 1 and clear out all the labels and inputs that relate to the hardcoded fields. To replace these, we will need 2 things. A way to add new fields and a way to fill in and manage those fields. Firstly, lets create the section to add new fields to the list.

<h4>Add fields that you require</h4>
<div id="dkp_fields">

<?php
$fields = get_option('dkp_fields');
foreach ($fields as $field) :
$field_data = json_decode($field);
?>

<input type="hidden" name="dkp_fields[]" value='<?= $field ?>' id='dkp_<?= strtolower(str_replace(' ', '_', $field_data->name)) ?>' />

<?php endforeach ?>

</div>

<div id="dkp_add_field">
<label>Add Field</label>
<input type="text" id="dkp_field_to_add" />
<input type="button" class="button button-secondary" id="dkp_save_field" value="Add Field" />
</div>

<hr />

Saving and viewing this will obviously only show an empty field, enabling you to create a new field with the label you specify. However filling it out and pressing the button doesn’t actually do anything. This requires a little javascript to complete what we need to do here. Before we get into that, lets finish this page off. We now need to output any fields that have been added (at first, obviously none).

<h4>Your Fields</h4>
<table id="dkp_output_fields" style="width: 100%;">
<tr>
<th>Field Name</th>
<th>Field Key</th>
<th></th>
<th></th>
</tr>
<?php
$fields = get_option('dkp_fields');
$values = get_option('dkp_output_fields');
foreach ($fields as $field) :
$field_data = json_decode($field);
?>
<tr>
<td><?= $field_data->name ?></td>
<td><?= strtolower(str_replace(' ', '_', $field_data->name)) ?></td>
<td><input type="text" name="dkp_output_fields['<?= strtolower(str_replace(' ', '_', $field_data->name)) ?>']" value="<?= $values[strtolower(str_replace(' ', '_', $field_data->name))] ?>" /></td>
<td><a class="dkp_delete_field" data-field="dkp_<?= strtolower(str_replace(' ', '_', $field_data->name)) ?>">X</a></td>
</tr>

<?php endforeach ?>
</table>

Saving and viewing this will be blank of course. Our javascript will now bring this to live. What our javascript will do is make the first field we added add a hidden field to populate to document the field name and save it to the database so that our plugin knows what field names to expect in the values array. Secondly, we need a function to allow removal of a field if required. To do this, we’ll be using jQuery.

jQuery(document).ready(function($) {

$("#dkp_save_field").click(function() {
var name = $("#dkp_field_to_add").val();
$("#dkp_field_to_add").val('');

var json = JSON.stringify({'name':name});

$("#dkp_fields").append("<input type='hidden' name='dkp_fields[]' value='"+json+"' id='"+name.toLowerCase().replace(' ', '_')+"' />");

$("#dkp_output_fields").append("<tr><td>"+name+"</td><td>"+name.toLowerCase().replace(' ', '_')+")</td><td><input type='text' name='dkp_output_fields["+name.toLowerCase().replace(' ', '_')+"]' value='' /><a class='dkp_delete_field' data-field='dkp_"+name.toLowerCase().replace(' ', '_')+"'>X</a></td></tr>");
});

$("body").on("click", ".dkp_delete_field", function() {
if (confirm('Are you sure you want to delete this field? This is not reversible.')) {
var field = $(this).data('field');
$(this).parent().remove();
$("#"+field).remove();
}
});
});

Add the above into a js file and save it into the plugins folder. The filename can be anything really, for consistency, I have called mine ‘dkp_admin_functions.js‘. You will notice that I’m making a JSON string with just one variable in it. This is so this can be extended later without needing to modify the existing process too much. Save this and add the following code to your main plugin file to have it load into the admin:

function dkp_enqueue() {

wp_register_script('dkp_admin_js', plugins_url( '/dkp_admin_functions.js', dirname(__FILE__) ), array('jquery'), '1.0.0');
wp_enqueue_script( 'dkp_admin_js');

}

add_action('admin_enqueue_scripts', 'dkp_enqueue');

If your planning on releasing this plugin yourself, it is suggested to have the files only load on the pages you require it, to save on load time throughout the admin area as well as help prevent any conflicts with other plugins.

Save everything and run your settings page. You should now be able to fill in the “add field” box, click “add” and it should create a field below it with what you entered as its label. Fill the newly created field in and click the save button. You should now be given a saved page with your value in the box. Congrats, you’ve just created a site details plugin that you can now make new fields as you need them. Big question now is, how do you get the values out onto the frontend of the site?

In part 1 of this tutorial, we created a function called “dkp_return_fields” which returned the fields in an array for us to pull the values from that we entered. This doesn’t differ too much, but because the fields are now dynamic, this part needs to be too. It actually becomes even simpler!

function dkp_return_fields() {
$output = get_option('dkp_output_fields');

return $output;
}

Previously we were returning an array we created. Because we created an array with the form fields (dkp_output_fields[field_name]) and WordPress kindly stores this as a serialised value in the database and returns it to us as an array again, we can just return its value straight from the get function, replicating what we had. The only difference is that the prefix is no longer needed. Before we had “dkp_address” as the key for the value. All that would be required now, if you added the “address” field again, would be “address”!

One thought on “WordPress plugin basics: Site details plugin – Part 2

Leave a Reply

Your email address will not be published. Required fields are marked *