Plugins and Interactivity

1Features without programming them

The cooperative's buyers keep asking the same three things: how to order, how much ten bags would cost, and how to send a message without opening their email. WordPress itself does not include an order calculator or a contact form. Rather than make the core software larger for everyone, WordPress lets each site add the features it needs as plugins. The official directory at wordpress.org/plugins lists tens of thousands of free plugins.

2Common kinds of plugin

Naming a plugin here is not a recommendation over its rivals. The test that follows is how you choose.

3Step by step: add a contact form

1. Go to Plugins → Add New Plugin and search for Contact Form 7.
2. Before installing, read its details: last updated, active installations, rating, and "Compatible with your version of WordPress".
3. Click Install Now, then Activate. A new Contact menu appears in the dashboard.
4. Open Contact → Contact Forms. The default form has name, email, subject and message. Copy its shortcode, which looks like [contact-form-7 id="…" title="Contact form 1"].
5. Edit the Contact page, add a Shortcode block and paste it. Update the page and send yourself a test message.

A form only sends email if the server can send it. Local installations usually cannot, so test mail on the real host, often with an SMTP plugin.

4Inside a plugin

A plugin is ordinary PHP. The comment block at the top tells WordPress its name; the rest attaches functions to hooks. While WordPress builds a page it passes a series of hooks, and calls every function hooked onto each one.

This complete plugin adds the shortcode [harvest_notice]. Save it as wp-content/plugins/kivu-harvest-notice/kivu-harvest-notice.php; it then appears in the Plugins list, ready to activate.

<?php
/**
 * Plugin Name: Kivu Hills Harvest Notice
 * Description: Adds a [harvest_notice] shortcode that shows the current harvest message.
 * Version: 1.0
 * Author: S6 ICT class
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // stop if someone opens this file directly
}

function khc_harvest_notice( $atts ) {
    $atts   = shortcode_atts( array( 'season' => 'main' ), $atts, 'harvest_notice' );
    $season = esc_html( $atts['season'] );   // never print user input unescaped
    return '<p class="khc-notice">The ' . $season
         . ' harvest is open. Deliveries 7:00 to 15:00, Monday to Saturday.</p>';
}
add_shortcode( 'harvest_notice', 'khc_harvest_notice' );

Typing [harvest_notice season="second"] in a post produces: The second harvest is open. Deliveries 7:00 to 15:00, Monday to Saturday. The code was checked with php -l and run with stand-in versions of the three WordPress functions. When someone typed season="<script>x</script>", esc_html turned the angle brackets into harmless text, which is why it is there.

5Interactivity in the browser

Some interactivity needs no plugin at all. A Custom HTML block can hold HTML and JavaScript that run in the visitor's browser. This price calculator updates as the buyer types. Its total function was tested with node: 4 bags give 14,000 Frw, 10 bags give 31,500 Frw after the discount, and 0 or 2.5 bags are rejected.

<div class="khc-calc">
  <label for="khc-qty">Bags of 250 g</label>
  <input id="khc-qty" type="number" min="1" value="1">
  <p id="khc-total" aria-live="polite"></p>
</div>
<script>
  const PRICE = 3500;                       // Frw per bag (illustrative)
  function total(qty) {
    if (!Number.isInteger(qty) || qty < 1) return null;   // reject bad input
    const sum = qty * PRICE;
    return qty >= 10 ? sum * 0.9 : sum;     // 10% off for 10 bags or more
  }
  const box = document.getElementById("khc-qty");
  const out = document.getElementById("khc-total");
  function show() {
    const t = total(Number(box.value));
    out.textContent = t === null ? "Enter a whole number of bags."
                                 : "Total: " + t.toLocaleString("en-US") + " Frw";
  }
  box.addEventListener("input", show);
  show();
</script>

Only users with the right to post unfiltered HTML (on a single site, Administrators and Editors) can save <script> in a Custom HTML block; for other roles WordPress strips it out. That is a deliberate security rule, because a script on a page can do anything the page can do.

6Hands-on: three features for the buyers

1. Install a contact-form plugin and put the form on the Contact page. Add a required phone-number field.
2. Add the price calculator to the Coffee page in a Custom HTML block and test it with 1, 10, 0 and 2.5 bags.
3. (Extension) Create the folder wp-content/plugins/kivu-harvest-notice, save the plugin file in it, activate it, and use [harvest_notice] on the home page.
4. Open Plugins and write down, for each active plugin, why the site needs it. Delete any you cannot justify.

Check: the form delivers a test message on a host that can send mail (or shows "Thank you" locally), the calculator gives 37,800 Frw for 12 bags, and every active plugin has a written reason.