Shortcode для добавления постов в wp-editor

Необходим shortcode для отображения постов на другой странице. Shortcode нужно будет добавлять в wp-editor.

Я создала этот код для отображения постов на другой странице:

<div class="owl-carousel-wrap jobs-carousel">
                <div id="jobsCarousel" class="owl-carousel ">
                    <?php
                    $args = array(
                        'post_type' => array('job')
                    );
                    $the_query = new WP_Query( $args );
                    ?>
                    <?php global $post; ?>
                    <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
                        <?php if ( 683 !== $post->ID ) { ?>
                            <a href="<?php the_permalink(); ?>" class="jobs">
                        <?php } ?>
                        <div class="jobs-item">
                            <h2 class="page-head_sub-title"><?php the_title(); ?></h2>
                            <p><?php the_content(); ?></p>
                        </div>
                        <?php if ( 683 !== $post->ID ) { ?>
                            </a>
                        <?php } ?>
                    <?php endwhile;  endif; ?>
                </div>
                <div class="js-control-jobs">
                    <div class="carousel-control-prev"><span class="icon-arrow"><!--icon--></span></div>
                    <div class="carousel-control-next"><span class="icon-arrow"><!--icon--></span></div>
                </div>
            </div>

Код работает как ожидается но только в шаблоне php. Как можно преобразовать этот код для добавления в wp-editor в таком виде [jobs] ?

UPD

Этот код в теории должен работать, но он почему-то не находит посты (и страница полностью ломается):

add_shortcode('jobs', 'callback_function');
function callback_function(){
$content = '';
$args = array(
    'post_type' => array('job'),
    'post_status'       => 'publish',
    'posts_per_page' => 3,
);
$the_query = new WP_Query( $args );
if ($the_query->have_posts() ) {
    while ( $the_query->have_posts() ) {
        $the_query->the_post();
        if ( 683 !== get_the_ID() ) {
            $content .= '<a href="'. get_the_permalink().'" class="jobs">';
        }
        $content .= '
            <div class="jobs-item">
                <h2 class="page-head_sub-title">'.get_the_title().'</h2>
                <p>'.apply_filters( 'the_content', get_the_content() ).'</p>
            </div>';
        if ( 683 !== get_the_ID() ) {
            $content .= '</a>';
        }
    }
}
return '
<div class="owl-carousel-wrap jobs-carousel">
    <div id="jobsCarousel" class="owl-carousel ">
        '.$content.'
    </div>
    <div class="js-control-jobs">
        <div class="carousel-control-prev"><span class="icon-arrow"><!--icon--></span></div>
        <div class="carousel-control-next"><span class="icon-arrow"><!--icon--></span></div>
    </div>
</div>';
}

Как можно изменить этот код для отображения постов?