Creating shortcode

  • El Pablo

    (@el-pablo)


    3 years, 11 months ago

    I have made a custom post type called ‘modules’. Now I want to make a shortcode containing this modules output, but for some reason this is not working.

    I know I have to return something, so what’s wrong with my code? When I enter it like this, the page get’s stuck loading (https://prnt.sc/s5q4xq).

    /**
 * Module slider
 */
add_shortcode('module_slider', 'wbgoe_module_slider');

function wbgoe_module_slider() {
    $output = function() {
        $args = array(
            'post_type' => 'modules',
            'posts_per_page' => 7,
            'orderby' => 'date',
            'order' => 'ASC'
        );
    
        $query = new WP_Query($args);
    
        while($query->have_posts()): $query->the_post();
    
        ?>
    
        <embed src="<?php the_field('url'); ?>" width="100%" height="600px"></embed>
    
        <?php
    
        endwhile;
    };
 
    return $output;
}
    • This topic was modified 3 years, 11 months ago by El Pablo.
    • This topic was modified 3 years, 11 months ago by El Pablo.
    • This topic was modified 3 years, 11 months ago by El Pablo.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Joy

    (@joyously)

    3 years, 11 months ago

    You are returning a function instead of the output to render. Remove the inner function() { }.

    Thread Starter El Pablo

    (@el-pablo)

    3 years, 11 months ago

    Hi Joy,

    indeed, this is what I had originally, but this is also not working. What is wrong then with this code?

    add_shortcode('module_slider', 'wbgoe_module_slider');

function wbgoe_module_slider() {
    $args = array(
        'post_type' => 'modules',
        'posts_per_page' => 7,
        'orderby' => 'date',
        'order' => 'ASC'
    );

    $query = new WP_Query($args);

    while($query->have_posts()): $query->the_post(); 

    ?>

    <embed src="<?php the_field('url'); ?>" width="100%" height="600px"></embed>

    <?php

    endwhile;
 
    return;
}
    Joy

    (@joyously)

    3 years, 11 months ago

    Now you are not returning the output. It is simply output.
    Do you have the shortcode like [module_slider] in your post? Is so, do you see the <embed> tag before your <head> section? If not, the code is not called.

    Thread Starter El Pablo

    (@el-pablo)

    3 years, 11 months ago

    Hi Joy,

    yes, the shortcode is in my post, but nothing is rendered. The parent container is just empty (https://prnt.sc/s6buar). What should the code be like then? Because I don’t follow. How do I return the output?

    • This reply was modified 3 years, 11 months ago by El Pablo.
    Joy

    (@joyously)

    3 years, 11 months ago

    That image shows some non-HTML after the </div> — it has == $0 which seems more like code than HTML.

    Your function could be more like this:

    function wbgoe_module_slider() {
    $args = array(
        'post_type' => 'modules',
        'posts_per_page' => 7,
        'orderby' => 'date',
        'order' => 'ASC'
    );
    $query = new WP_Query($args);
    $output = '';
    while($query->have_posts()): $query->the_post(); ?>
        $output .= '
        <embed src="' . get_the_field('url') . '" width="100%" height="600px">';
    endwhile;
    wp_reset_postdata();
    return $output;
}

    Note that I removed the </embed> since it isn’t valid. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed
    Note also that you need a type on the embed.
    Note also that I changed the_field to get_the_field, but as this is not a WP function, I don’t know if that exists. Be aware that your shortcode looks like it is dependent on a plugin.
    Note that I also added wp_reset_postdata(); so that your query data doesn’t corrupt the global variables.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Creating shortcode’ is closed to new replies.