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>
    <input type="submit" value="Search" />

[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() )
        $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?


the_ID outputs (echoes) the ID.

Use get_the_id ()

Same for the_title..

Use get_the_title

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.