WordPress Shortcodes – Return $Variable


I have created a custom postcode checker plugin, and a shortcode to add it to the site.
The plugin functionality works, but it outputs my code at the top of the page.

How do I get it to output my code in the location I place the shortcode? I was told that I can use ‘ob_start();’ and return ‘ob_get_clean();’ but when I used that nothing happened. Or maybe I was doing it wrong. I would appreciate any advice.

The main plugin file contains the shortcode

function vw_postcode_check (){
    include_once ('check-postcode.php');
add_shortcode('postcode_checker', 'vw_postcode_check');

Then I have a separate PHP file check-postcode.php

/*-------------Check Postcode -----------------*/
#postcode-checker-container {background:white; padding:40px; max-width:300px; border-radius:10px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); position:absolute; z-index: 100; top:200px;}
#postcode_checker input, #postcode_checker button {
  font: inherit;
  border: 0;
.check-postcode-link {cursor: pointer;color: #ffffff !important;
    font-size: 19px;
    line-height: 21px;
    text-transform: uppercase;
    font-family: "Trade Gothic W01 Cn_18";
#postcode_checker input:focus, #postcode_checker button:focus {
  outline: none;
form#postcode_checker {
  display: -webkit-box;
  display: flex;
  grid-column: 2;

#postcode_checker input {
  -webkit-box-flex: 1;
          flex-grow: 1;
  padding: 0.5em 0.75em;
  border:1px solid #8DC63F;

#postcode_checker button {
  padding: 0.5em 0.75em;
  background: #8DC63F;
p.delivery_confirmed {font-size:16px; line-height:18px; font-weight:normal;}
p.delivery_notconfirmed {font-size:16px; line-height:18px; font-weight:normal;}
p.invalid {font-size:16px; line-height:18px; font-weight:normal; color:red;}
#checkDelivery {background:#fff; border-radius:10px; -webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30);
-moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30);
box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.30); padding:40px; width:500px;}
// When the user clicks on div, open the popup

jQuery(document).on('click', '.check-postcode-link', function(event) {
    if ( !jQuery(event.target).hasClass('postcode-checker-container')) {


<div id="postcode-checker-container" class="postcode-checker-container">
  <h3>Please enter your postcode to check if we deliver to your area.</h3>
<form method="post" id="postcode_checker">
  <input type="postcode" name="postcode">
 <button type="submit" name="submit">Submit</button>

global $wpdb;
$table_name = $wpdb->prefix.'vw_postcode_checker';

if (!empty($_POST['postcode']))
    $postcode = $_POST['postcode'];
    if (Postcode::isValidFormat($postcode))
      $district = Postcode::getDistrict($postcode);
    else {

      echo '<p class="invalid">Please enter a valid postcode.</p></div>';
    $entry = $wpdb->get_row( "SELECT * FROM ".$table_name." WHERE postcode = '" . $district . "'");
    if (isset($entry))
        $town = $entry->town;
        $county = $entry->county;
        $your_area = $town . ", " . $county;
        $confirmed = "<p class='delivery_confirmed'>Congratulations, we are delivering to " . $your_area . "</p>";
         echo $confirmed;
      $notconfirmed = "<p class='delivery_notconfirmed'>Sorry, we are not delivering to your area at this time.</p>";
      echo $notconfirmed;

Thank you

, Victoria Whitehead 3 years 2020-06-02T11:11:27-05:00 0 Answers 93 views 0

Leave an answer