0

I couldn't find this issue on here even that I looked hard. If it is than I do apologize.

I've made a shortcode for my WP. When I put the shortcode an a page than the code is also visible on top of the page editor in the dashboard.

How can I prevent this? Did I do something wrong in my code? See below for code. enter image description here

if ( ! function_exists( 'sollicitatie_formulier' ) ) {
        function sollicitatie_formulier(){
            global $wpdb;
            if(isset($_POST['btn-upload']))
            { 
            $table = tbl_uploads;
            $file = rand(1000,100000)."-".$_FILES['afile']['name'];
            $file_size = $_FILES['afile']['size'];
            $file_type = $_FILES['afile']['type'];
            $file_loc = $_FILES['afile']['tmp_name'];
            $folder="wp-content/themes/jobify-extended/uploads/";
            $data = array(
                'voornaam' => $_POST['avoornaam'],
                'familienaam' => $_POST['afamilienaam'],
                'comment' => $_POST['amsg'],
                'afile' => rand(1000,100000)."-".$_FILES['afile']['name'],
                'size' => $_FILES['afile']['size'],
                'type' => $_FILES['afile']['type'],



            );

            // new file size in KB
            $new_size = $file_size/1024;  
            // new file size in KB

            // make file name in lower case
            $new_file_name = strtolower($file);
            // make file name in lower case

            $final_file=str_replace(' ','-',$new_file_name);

            $format = array(
                '%s',
                '%s'
            );

            if(move_uploaded_file($file_loc,$folder.$final_file)) 
            {
                $success=$wpdb->insert( $table, $data, $format,$folder);
                if($success){
                ?>
                    <script>
                    alert('successfully uploaded');
                    window.location.href='sollicitatie-formulier?success';
                    </script>
    <?php

}
}
}


else   {
    ?>

        <form action="" method="post" enctype="multipart/form-data">
        <label for="voornaam">Voornaam: </label><input type="text" name="avoornaam" required="">
        <label for="familienaam">Familienaam: </label><input type="text" name="afamilienaam" required="">
        <label for="comment">bericht: </label><textarea type="text" name="amsg"></textarea>
        <input type="file" name="afile" accept=".pdf, .doc, .docx" />
        <input type="submit" name="btn-upload" value="upload"</input>
        </form>

    <?php
        if(isset($_GET['success']))
        {
    ?>
        <label>Kandidaat succesvol toegevoegd...  <a href="/bekijk/">click hier om kandidaten te bekijken.</a></label>
        <?php
    }
    else if(isset($_GET['fail']))
    {
        ?>
        <label>Oeps...een probleem! Probeer opnieuw</label>
        <?php
    }
    else
    {
        ?>
        <label>Try to upload any files(PDF, DOC, DOCX)</label>

 <?php } }

        }
    }

    add_shortcode( 'sollicitatie_formulier', 'sollicitatie_formulier' );
3

Shortcodes should not echo any output. They should always return the text that is to be used to replace the shortcode.

You either write the html code on a variable:

function my_shortcode() {
    $output = '<div>something</div>';
    return $output;
}

Or you can use php output buffering:

function my_shortcode() {
    ob_start(); ?> 
    <div>something</div> 
    <?php 
    return ob_get_clean();
}

In your case, you could put ob_start at the beginning of the function and in the end just return ob_get_clean:

if ( ! function_exists( 'sollicitatie_formulier' ) ) {
        function sollicitatie_formulier(){
            global $wpdb;

            ob_start();

            if(isset($_POST['btn-upload']))
            { 
            $table = tbl_uploads;
            $file = rand(1000,100000)."-".$_FILES['afile']['name'];
            $file_size = $_FILES['afile']['size'];
            $file_type = $_FILES['afile']['type'];
            $file_loc = $_FILES['afile']['tmp_name'];
            $folder="wp-content/themes/jobify-extended/uploads/";
            $data = array(
                'voornaam' => $_POST['avoornaam'],
                'familienaam' => $_POST['afamilienaam'],
                'comment' => $_POST['amsg'],
                'afile' => rand(1000,100000)."-".$_FILES['afile']['name'],
                'size' => $_FILES['afile']['size'],
                'type' => $_FILES['afile']['type'],



            );

            // new file size in KB
            $new_size = $file_size/1024;  
            // new file size in KB

            // make file name in lower case
            $new_file_name = strtolower($file);
            // make file name in lower case

            $final_file=str_replace(' ','-',$new_file_name);

            $format = array(
                '%s',
                '%s'
            );

            if(move_uploaded_file($file_loc,$folder.$final_file)) 
            {
                $success=$wpdb->insert( $table, $data, $format,$folder);
                if($success){
                ?>
                    <script>
                    alert('successfully uploaded');
                    window.location.href='sollicitatie-formulier?success';
                    </script>
    <?php

}
}
}


else   {
    ?>

        <form action="" method="post" enctype="multipart/form-data">
        <label for="voornaam">Voornaam: </label><input type="text" name="avoornaam" required="">
        <label for="familienaam">Familienaam: </label><input type="text" name="afamilienaam" required="">
        <label for="comment">bericht: </label><textarea type="text" name="amsg"></textarea>
        <input type="file" name="afile" accept=".pdf, .doc, .docx" />
        <input type="submit" name="btn-upload" value="upload"</input>
        </form>

    <?php
        if(isset($_GET['success']))
        {
    ?>
        <label>Kandidaat succesvol toegevoegd...  <a href="/bekijk/">click hier om kandidaten te bekijken.</a></label>
        <?php
    }
    else if(isset($_GET['fail']))
    {
        ?>
        <label>Oeps...een probleem! Probeer opnieuw</label>
        <?php
    }
    else
    {
        ?>
        <label>Try to upload any files(PDF, DOC, DOCX)</label>

 <?php } }

        return ob_get_clean();

        }
    }

    add_shortcode( 'sollicitatie_formulier', 'sollicitatie_formulier' );
| improve this answer | |
  • I really want to understand this. So where in my code do I put your code as I don't use <div>. I don't understand. sorry I'm new to WordPress. – WouterS Jun 20 '17 at 13:44
  • I edited my answer with your code. – dbeja Jun 20 '17 at 13:50
  • Nice! It's gone. So I need to do this everytime when I write a similar function? – WouterS Jun 20 '17 at 13:52
  • Yes, the main thing is that you need to return the html. If you echo directly the html you'll have those kind of problems. – dbeja Jun 20 '17 at 13:54
  • And if you want to have a more organised function you can put the shortcode on another file, and then just include the file inside the shortcode function, like this: function myshortcode() { ob-start(); include 'file.php'; return ob_get_clean(); } – dbeja Jun 20 '17 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.