Shortcodes not outputting in correct divs

I’m trying to display shortcodes inside a raw HTML block using Visual Composer:

<form action="/form" method="get">
    <div class="form-group">
        <label class="select">
            <select name="level">
                <option>Choose a Level</option>
                [levels]
            </select>
        </label>
    </div>
    <input type="submit" value="Search" />
</form>

[levels] is the shortcode.

Here’s what I added to functions.php:

add_filter('widget_text', 'do_shortcode', 10);
add_filter('the_content', 'do_shortcode', 10);

Finally the shortcode itself:

function level_options() {
    $level_types= new WP_Query( 'post_type=level_type&posts_per_page=-1&orderby=title&order=ASC' );
    $options_text = "";
    while ( $level_types->have_posts() )
    {
        $level_types->the_post();
        $options_text .= '<option value='.the_ID().'>'.the_title().'</option>';
    }
    return $options_text;
}
add_shortcode( 'levels', 'level_options' );

The shortcode outputs on the page however it displays outside of the form element at the top of the page. Also, the option menus in each of the selects populate as blank options like this:

How do I make the shortcode output inside the select like intended?

Read more here: Shortcodes not outputting in correct divs

Leave a Reply

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