WordPress plugin shortcode always displayed on the top

3 Views

WordPress plugin shortcode always displayed on the top .
have a look on below code 

<?php
/*
Plugin Name: MyPlugin
Description: Test
Author: Bassem
License: GPL
*/
?>
<?php 
function  form_creation()
{
    global $wpdb;
?>
<form action=" <?php get_permalink(); ?> " method="post" id="myform">
<table>

<tr>
<td><input type="text" id="txtname" name="txtname" placeholder="Your Name"/> </td>
</tr>

<tr>
<td><input type="email" id="txtemail" name="txtemail" placeholder="Your Email Address "  /> </td>
</tr>

<tr>
<td>
<!-- drop down menu  (Country )-->
<select id='select_Country' name="select_Country" >
        <option selected="selected" disabled="disabled"> -- Select Country -- </option>
        <?php
        $query='select Code,Country from _country order by Country';
        $result = $wpdb->get_results($query);
        foreach( $result as $row ) 
        {
           echo '<option value='.$row->Code.'>'.$row->Country.'</option>';
        }
        ?>
</select> 
</td>
</tr>


<tr>
<td>
<!-- drop down menu  (City )-->
<select id="select_city" name="select_city">
    <option selected="selected"> -- Select City -- </option>
</select>
</td>
</tr>

<tr>
<td> <input type="submit" id="btnsubmit" value="Submit" name='submit'/> </td>
</tr>

</table>
</form>
<?php } ?>
<?php
if($_POST['submit'])
{
    $name=strip_tags($_POST['txtname']);
    $email=strip_tags($_POST['txtemail']);
    $country=$_POST['select_Country'];
    $city=$_POST['select_city'];
    $insertQuery="insert into _customers(Name,Email,Country,City)values('$name','$email', '$country','$city')";
    $wpdb->query($insertQuery);
    if($wpdb)
    {
        echo 'Data Inserted Successfully';
    }
}
?>
<?php add_shortcode('myshortcode',form_creation); ?>
<?php function my_scripts_method()
    {
        wp_enqueue_script('jquery'); //add jQuery Library 
        wp_enqueue_script('fn',plugins_url('/js/ajaxfn.js' , __FILE__ ),array( 'jquery' )); //ajax operations
        wp_enqueue_script('jquery.validate.min',plugins_url('/js/jquery.validate.min.js' , __FILE__ ),array( 'jquery' )); //Validation

    }
    add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); //execute the function [ my_scripts_method ]
    ?>

the above code is working fine , but it has one problem ,when i place [myshortcode] in specific page or post , it always displayed on the top regardless it’s place,i search and found that i have not to echo the table but return it , but i don’t know how can i return html table using wp plugin function . so appreciate your support to help me , thanks.

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. Because you should return your form output to set it on the exact position, if you use echo the it will always display in the TOP.

    Solution for this is to store your form in a variable then return it, 

    $return = '<form>........</form>';
return $return;

    Update:

    Devide this saperately in HTML and PHP LOGIC, Take a look on this example: 

    function my_shortcode() {

    // Set HTML saperate and return it
    return include('template/shortcode_template.php');
}

    shortcode_template.php

    <?php ob_start(); ?>
    <strong>Hi there!</strong>
    <p>
        This is an include test for shortcodes...
    </p>
<?php return ob_get_clean();

    Structure: 

    - Plugin_dir
- Plugin_dir/plugin.php // Holds your shortcode logic
- Plugin_dir/template/shortcode_template.php  // Holds HTML PART

    Hope Now you get it.