Support » Developing with WordPress » the_content Function not Working Properly Inside Custom WordPress Widget

  • Resolved Shrinivas

    (@shrinitech)


    Hello WordPress Buddies,

    I have created a custom WordPress theme, in the functions.php I have created a custom WordPress widget, in this custom widget I have used WP_Query loop to get the post title and content. Everything is fine but the issue is the_content() function is not outputting the HTML tags on the widget, I am just getting the content without any formatting (as when we get with get_the_content function). the_content() function works well (HTML formatting) in page templates and single.php but not echoing the HTML formatted content in custom WordPress widget.

    So mates, is it not possible to get HTML formatted content in a widget using the_content() function? Or is there any way to get HTML formatted content in WordPress widget?

    [ Signature moderated ]

    • This topic was modified 2 months, 4 weeks ago by Steve Stern.
Viewing 9 replies - 1 through 9 (of 9 total)
  • If you look in wp-includes/default-filters.php, you will see

    add_filter( 'the_content', 'do_blocks', 9 );
    add_filter( 'the_content', 'wptexturize' );
    add_filter( 'the_content', 'convert_smilies', 20 );
    add_filter( 'the_content', 'wpautop' );
    add_filter( 'the_content', 'shortcode_unautop' );
    add_filter( 'the_content', 'prepend_attachment' );
    add_filter( 'the_content', 'wp_make_content_images_responsive' );

    Hi @joyously

    Thanks for your reply, checked the default-filters.php file, but not getting which filter is stripping out the HTML formating of the_content function in the widget. So can’t we use the_content function in our custom WordPress widget?

    What exactly is missing?
    Did you code a WordPress Loop as a template file does?
    The function is not limited, but you have to use it correctly.
    I wrote a theme that makes every template part a widget, so I have a widget that calls the_content(). It works fine. Your code must be messed up somewhere, but you are being vague about the actual problem.

    Hi @joyously

    Again thank you for your time 🤗.

    Here is my custom WordPress widget code, this code outputs Bootstrap tabs for “experience” post type. So when the user clicks on a particular tab, it shows the respective post content (I have used the_content() function here). But when I add this widget to home page I could only see the unformatted content but not what I built on that post using Elementor page builder, HTML tags are missing in the output.

    Here is the WordPress widget code –

    // Adds widget: Our Experiences Section
    class Ourexperiencessectio_Widget extends WP_Widget {
    
        function __construct() {
            parent::__construct(
                'ourexperiencessectio_widget',
                esc_html__( 'Our Experiences Section', 'textdomain' )
            );
        }
    
        public function widget( $args, $instance ) {
            echo $args['before_widget'];
            ?>
    
            <div class="row">
    			<div class="col-sm-12 our-experiences-wrapper padding-0">
                    <ul class="nav nav-tabs nav-fill our-experiences-tabs" id="myTab" role="tablist">
                        <?php
                        $args = array(
                            'post_type' => 'experience',
                            'order'     => 'ASC'
                        );
                        $loop = new WP_Query( $args );
    
                        $active = "active";
                        $areaselected = "true";
                        while ( $loop->have_posts() ) : $loop->the_post();
                        ?>
    
                        <li class="nav-item">
                            <a class="nav-link <?php echo $active; ?>" id="a<?php echo get_the_ID() ?>-tab" data-toggle="tab" href="#a<?php echo get_the_ID() ?>" role="tab" aria-controls="a<?php echo get_the_ID() ?>" aria-selected="<?php echo $areaselected; ?>"><?php the_title(); ?></a>
                        </li>
    
                        <?php
                        $active = "";
                        $areaselected = "false";
    
                    endwhile;
                    ?>
                </ul>
                <?php
                wp_reset_postdata();
                ?>
    
                <div class="tab-content" id="myTabContent">
                    <?php
    
                    $argss = array(
                        'post_type' => 'experience',
                        'order'     => 'ASC'
                    );
                    $loop = new WP_Query( $argss );
    
                    $activetab = " show active";
                    while ( $loop->have_posts() ) : $loop->the_post();
                    ?>
                    <div class="tab-pane fade<?php echo $activetab; ?> our-experiences-tab-content" id="a<?php echo get_the_ID(); ?>" role="tabpanel" aria-labelledby="a<?php echo get_the_ID(); ?>-tab">
    
                        <h3>OUR EXPERIENCES</h3>
                        <?php the_content();?>
    
                    </div>
                    <?php
                    $activetab = "";
                endwhile;
                wp_reset_postdata();
                ?>
            </div>
    
        </div>
    </div>
    
    <?php
    
    echo $args['after_widget'];
    }
    
    }
    
    function register_ourexperiencessectio_widget() {
        register_widget( 'Ourexperiencessectio_Widget' );
    }
    add_action( 'widgets_init', 'register_ourexperiencessectio_widget' );

    You are saying that the plugin’s shortcodes are not being expanded?
    You need to either look into the plugin’s code or ask at the Elementor support forum to find out when the shortcodes are registered or perhaps the shortcodes are deregistered for some reason.

    By the way, the default-filters file also has
    add_filter( 'the_content', 'do_shortcode', 11 ); // AFTER wpautop()
    but it is in a different place than the others, so I didn’t see it at first.

    Your loop looks like the example at https://developer.wordpress.org/reference/classes/wp_query/
    I would suggest use a number for the posts to retrieve, and I’m not quite sure why you do the same query twice.

    Hello,

    Not the plugin shortcode, my custom WordPress widget is not outputting the HTML formatted content (which I have shared above). let the page builder be any, the_content function should output the whole content of that post right?

    In the widget code above, I have used the same query twice because I want to output the tabs and the respective tab content.

    Moderator bcworkz

    (@bcworkz)

    Well, the_content() outputs all raw content from the DB in its stand alone state, but additionally numerous filters are applied that modify the content. Additionally, external optimizers might further modify output. I’m not familiar with how Elementor works, but I believe it uses filters to expand elements similar to shortcodes. If its filters are not active for any reason when your widget produces output you may get unexpected results.

    Joy said “ask at the Elementor support forum”. That would be my advice too.

    Hi @joyously

    The custom WordPress widget I have created which has the_content() function shows the post with HTML formating when I add to WordPress widget area, but when I add the same widget in Elementor page builder’s section the HTML is getting stripped off, so it’s not the issue with WordPress but the Elementor page builder is not handling the_content() function properly.

    I’ve raised the issue in Elementor plugin’s support forum. https://wordpress.org/support/topic/custom-wordpress-widget-not-working-properly-with-elementor-page-builder/

    Marking the issue as resolved

    Thank you

    Hi @bcworkz

    Thank you for your answer, ya, the Elementor plugin is modifying the the_content() function, because the same widget which has the_content() function works well in WordPress widget area (outputting exactly what I have designed on the post).

    I’ve asked the Elementor support, hope they look into this. here is my topic on this issue https://wordpress.org/support/topic/custom-wordpress-widget-not-working-properly-with-elementor-page-builder/

    Hope Elementor team fix this bug as it is a major drawback.

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.