CODEWITHSUNDEEP
wordpressshortcode
aunrea
aunrea

Reputation: 11

Wordpress Shortcode Function is displaying before content

I have been working on trying to get this shortcode to show correctly but everything I have tried does not work. Below is my function:

    function monster_shortcode( $atts ) {

    $monster = $atts['name'];

    $query = new WP_Query( array(
        'post_type' => 'monsters',
        'name' => $monster,
    ));

    if ( $query->have_posts() ) { 
    while ( $query->have_posts() ) : $query->the_post();
    $monster_title = the_title();
    $monster_size = the_field('size');
    $monster_type = 'type';
    $monster_alignment = the_field( 'alignment' );
    $monster_ac = the_field( 'armor_class' );
    $monster_ac_type = the_field( 'ac_type' );
    $monster_hp = the_field( 'hit_points' );
    $monster_hd = the_field( 'hit_die' );
    $monster_speed = the_field( 'speed' );
    $monster_str = the_field( 'str' );
    $monster_strb = monster_stats( get_field( 'str' ) );
    $monster_dex = the_field( 'dex' );
    $monster_dexb = monster_stats( get_field( 'dex' ) );
    $monster_con = the_field( 'con' );
    $monster_conb = monster_stats( get_field( 'con' ) );
    $monster_int = the_field( 'int' );
    $monster_intb = monster_stats( get_field( 'int' ) );
    $monster_wis = the_field( 'wis' );
    $monster_wisb = monster_stats( get_field( 'wis' ) );
    $monster_cha = the_field( 'cha' );
    $monster_chab = monster_stats( get_field( 'cha' ) );
    $monster_saves = the_field( 'saving_throws' );
    $monster_skills = the_field( 'skills' );
    $monster_dmg = the_field( 'damage_adjustments' );
    $monster_senses = the_field( 'senses' );
    $monster_lang = the_field( 'languages' );
    $monster_cr = the_field( 'cr' );
    $monster_actions = the_field( 'actions' );
    $monster_reactions = the_field( 'reactions' );
    $monster_char = the_field( 'characteristics' );
    $monster_content = the_content();
    $monster_enviro = the_field( 'enviroments' );

    $return = '<h1 class="entry-title">' . $monster_title . '</h1>';
    $return .= '<div class="monster-meta">' . $monster_size . ' ' . $monster_type . ', ' . $monster_alignment . '</div>';
    $return .= '<ul class="monster-stat">';
        $return .= '<li><label>Armor Class</label> ' . $monster_ac . ' (' . $monster_ac_type . ')</li>';
        $return .= '<li><label>Hit Points</label> ' . $monster_hp . ' (' . $monster_hd . ')</li>';
        $return .= '<li><label>Speed</label> ' . $monster_speed . '</li>';
    $return .= '</ul>';
    $return .= '<ul class="monster-stat abilities">';
        $return .= '<li><label>STR</label>' . $monster_str . ' (' . $monster_strb . ')</li>';
        $return .= '<li><label>DEX</label>' . $monster_dex . ' (' . $monster_dexb . ')</li>';
        $return .= '<li><label>CON</label>' . $monster_con . ' (' . $monster_conb . ')</li>';
        $return .= '<li><label>INT</label>' . $monster_int . ' (' . $monster_intb . ')</li>';
        $return .= '<li><label>WIS</label>' . $monster_wis . ' (' . $monster_wisb . ')</li>';
        $return .= '<li><label>CHA</label>' . $monster_cha . ' (' . $monster_chab . ')</li>';
    $return .= ' </ul>';
    $return .= '<ul class="monster-stat">';
        $return .= '<li><label>Saving Throws</label> ' . $monster_saves . '</li>';
        $return .= '<li><label>Skills</label> ' . $monster_skills . '</li>';
        $return .= '<li><label>Damage Adjustments</label> ' . $monster_dmg . '</li>';
        $return .= '<li><label>Senses</label> ' . $monster_senses . '</li>';
        $return .= '<li><label>Langauage</label> ' . $monster_lang . '</li>';
        $return .= '<li><label>Challenge Rating</label> ' . $monster_cr . '</li>';
    $return .= '</ul>';
    $return .= '<p>' . $monster_traits . '</p>';
    $return .= '<h4 class="monster-label">Actions</h2><p>' . $monster_actions . '</p>';
    $return .= '<h4 class="monster-label">Reactions</h2><p>' . $monster_reactions . '</p>';
    $return .= '<h4 class="monster-label">Characteristics</h2><p>' . $monster_char . '</p>';
    $return .= '<h4 class="monster-label">Details</h2><p>' . $monster_content . '</p>';               
    $return .= '<p><label>Enviroments:</label> ' . $monster_enviro . '</p>';

    endwhile;
    }
    return $return;
    wp_reset_postdata();

}
add_shortcode( 'monster', 'monster_shortcode' );

I then put the shortcode [monster name="men-at-arms"] on a page. All the function $variables show up before the post content and all the function html shows where it should be. You can see the output here https://www.dropbox.com/s/xvuqofya1jylsfl/Screenshot%20%283%29.png?dl=0

Upvotes: 1

Views: 605

Answers (1)

Xhynk
Xhynk

Reputation: 13860

You're using the display functions instead of the return functions.

the_title() will literally echo the title. If you want it as a variable, you need to use get_the_title() (or you can set the third argument to false in the_title() - but that's generally not desirable)

This applies to all the functions you're using that are outputting a value.

the_title() => get_the_title()
the_field() => get_field()
the_content() => get_the_content()

Since it's now pulling in the hosting post's content, you need to pass the ID from the shortcode to the functions. Either like so:

$monster    = $atts['name'];
$monster_id = $atts['id'];
   ...
$monster_title = get_the_title( $monster_id );
$monster_size  = get_field( 'size', $monster_id );

Or like so:

$monster    = $atts['name'];
   ...
$monster_title = get_the_title( $post->ID );
$monster_size  = get_field( 'size', $post->ID );

Alternatively, you can remove ALL the variable definitions and just modify the HTML returning portion.

while ( $query->have_posts() ) : $query->the_post(); ?>
    <h1 class="entry-title"><?php the_title(); ?></h1>
    <div class="monster-meta"><?php the_field('size'); ?> <?php the_field('type'); ?> <?php the_field('alignment'); ?>
        <ul class="monster-stat">
         ...
    </div>
<?php endwhile; ?>

Upvotes: 3

Related Questions