Aight folks!

So I'm trying to do some custom coding within Wordpress and my plan is to create custom post types which I want to display within custom widgets. I thought that would be fun for a learning experience.... ahum... and I wanted a widget/plugin that outputs some proper semantic mark-up. Anyway I got pretty far, but now I ran into the biggest hurdle so far .

One of the widgets I'm trying to make is a slider (from unslider) which I use for testimonials and I have the following HTML which I'm trying to create dynamically with PHP.

<div class="slider">

    <ul>

        <li>

            <div class="description">

                <h2>Name of the workshop</h2>

            </div>

            <blockquote>

                <p>Mus a lectus phasellus leo ullamcorper vestibulum id egestas nulla pharetra a purus parturient platea posuere natoque magna etiam aptent libero fames.</p>

                <footer>

                    <cite><a href="http://www.example.com/renee">Renee - Example Company</a></cite>

                </footer>

            </blockquote>

        </li>
        <li>

            <div class="description">

                <h2>Name of the workshop</h2>

            </div>

            <blockquote>

                <p>Nunc a orci quam a duis tincidunt quis vestibulum venenatis eu vestibulum scelerisque quis porttitor a vel fringilla at duis.</p>

                <footer>

                    <cite><a href="http://www.example.com/amy">Amy - Example Company</a></cite>

                </footer>

            </blockquote>

        </li>

    </ul>

</div>

I have these 2 sample testimonials in the database (via custom post type; testimonials) and with the following script It outputs only the first testimonial (unfortuantely) and the HTML mark-up is way off :( Okay I admit I scraped this script together from some tutorials and tried to bend it to my needs, but it kindof works :)

The widget class in my functions.php:

    /*-----------------------------------------------------------------------------------*/
    /* Custom Widget: Testimonials
    /*-----------------------------------------------------------------------------------*/

    class tca_testimonials extends WP_Widget {

        function __construct() {

            parent::__construct(
                'tca_testimonials',
                'TCA Testimonials',
                array('description' => __( 'A custom testimonial widget for TCA'))
           );

        }

        function update($new_instance, $old_instance) {

            $instance = $old_instance;
            $instance['title'] = strip_tags($new_instance['title']);
            $instance['numberOfTestimonials'] = strip_tags($new_instance['numberOfTestimonials']);
            return $instance;

        }

        function form($instance) {

            if( $instance) {
                $title = esc_attr($instance['title']);
                $numberOfTestimonials = esc_attr($instance['numberOfTestimonials']);
            } else {
                $title = '';
                $numberOfTestimonials = '';
            }
            ?>

            <p>
                <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title', 'tca_testimonials'); ?></label>
                <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('numberOfTestimonials'); ?>"><?php _e('Number of Testimonials:', 'realty_widget'); ?></label>
                <select id="<?php echo $this->get_field_id('numberOfTestimonials'); ?>"  name="<?php echo $this->get_field_name('numberOfTestimonials'); ?>">
                    <?php for($x=1;$x<=10;$x++): ?>
                    <option <?php echo $x == $numberOfTestimonials ? 'selected="selected"' : '';?> value="<?php echo $x;?>"><?php echo $x; ?></option>
                    <?php endfor;?>
                </select>
            </p>
            <?php

        }

        function widget($args, $instance) {

            extract( $args );
            $title = apply_filters('widget_title', $instance['title']);
            $numberOfTestimonials = $instance['numberOfTestimonials'];
            echo $before_widget;
            if ( $title ) {
                echo $before_title . $title . $after_title;
            }
            $this->getTestimonials($numberOfTestimonials);
            echo $after_widget;

        }

        function getTestimonials($numberOfTestimonials) {

            global $post;
            $testimonials = new WP_Query();
            $testimonials->query('post_type=testimonials&posts_per_page=' . $numberOfTestimonials );

            if ($testimonials->found_posts > 0) {
                echo '<div class="slider">';
                    echo '<ul>';
                        while ($testimonials->have_posts()) {
                            $testimonials->the_post();
                            $listTestimonial = '<li>';
                            $listTestimonial .= '<div class="description">';
                            $listTestimonial .= '<h2>' . the_field('workshop') . '</h2>';
                            $listTestimonial .= '</div>';
                            $listTestimonial .= '<blockquote>';
                            $listTestimonial .= '<p>' . the_field('testimonial') . '</p>';
                            $listTestimonial .= '<footer>';
                            $listTestimonial .= '<cite>';
                            $listTestimonial .= '<a href="' . the_field('url') . '">' . the_field('name') . ' - ' . the_field("company-agency") . '</a>';
                            $listTestimonial .= '</cite>';
                            $listTestimonial .= '</footer>';
                            $listTestimonial .= '</blockquote>';
                            $listTestimonial .= '</li>';
                            echo $listTestimonial;
                        }
                    echo '</ul>';
                echo '</div>';
                wp_reset_postdata();

            } else {
                echo '<p>No testimonial found</p>';
            }

        }

    }

    function tca_testimonials_init() {
        register_widget( 'tca_testimonials' );
    }

    add_action( 'widgets_init', 'tca_testimonials_init' );

Besides that I only get one testimonial in my page and not two, the other problem is that I get this HTML .The text is not within the intended HTML tags and I don't understand why i get it like this.

<div class="slider">

    <ul>

        Name of the workshopMus a lectus phasellus leo ullamcorper vestibulum id egestas nulla pharetra a purus parturient platea posuere natoque magna etiam aptent libero fames..https://example.com/amy/AmyCompany Example

    <li><div class="description"><h2></h2></div><blockquote><p></p><footer><cite><a href=""> - </a></cite></footer></blockquote></li></ul></div>

Ah... my mistake...that it displayed only one testimonials and not the two was just because I forgot to select the amount to display. It was still on '1'. It was a long day yesterday :)

Now it's only figuring out how to construct the HTML of the testimonial with PHP.

By the way, I've checked if I had any errors in my functions.php with http://phpcodechecker.com/, but that tool said I'm all good.... no issues found.

Member Avatar for diafol

Can.t give detailed help right now but I would suggest you have any html output as a template. You can run a while or foreach loop to get multiple records.

Member Avatar for diafol

Line 78:

$listTestimonial = '<li>';

You need to set an empty string before the loop:

$listTestimonial = '';

And then change line 78 to:

$listTestimonial .= '<li>';

Otherwise you overwrite the previous record on every iteration. I've come across this sort of stuff with the html tags and separate data before, but can't remember what caused it. I think it was due to priority of functions running. But guessing.

Member Avatar for diafol
<?php 
    while(...){
?>
<li>
        <div class="description">
            <h2><?php echo the_field('workshop');?></h2>
        </div>
        <blockquote>
            <p><?php echo the_field('testimonial');?></p>
            <footer>
                <cite><a href="<?php echo the_field('url');?>"><?php echo the_field('name') . ' - ' . the_field("company-agency");?></a></cite>
            </footer>
        </blockquote>
    </li>
    <?php
    }
    ?>

Have a look at the wordpress codex for php code guide - has strict rules for developers (plugins mainly), but good practice if you're going to extend the theme's functionality. Ensure that you create a child theme if this is not your own, or you may lose functionality if you update the theme - always keep a clean backup version of your current functions.php - just in case :).

Thanks, diafol! The reason I took the route of custom widgets is becaiuse i chose to build ontop of a naked wordpress theme and to use a wp page builder plugin for my grid.
PHP or any programming language is not really my thing.... I'm too much a designer for that :) Secondly I want my client to easily change settings via those widgets.

BUT.... while I was playing with this for the last days I came to the conclusion that creating your own WP template pages is actually not really a big deal, so I will definately start next time with creating my own.
.
For now the only things is how to display those widgets at the front. I've changed my while loop in that widget class by starting with an empty string, but unfortunately that didn't do the trick, so if you have any other suggestions... please :)

Member Avatar for diafol

So are you still getting this:

<div class="slider">
    <ul>
        Name of the workshopMus a lectus phasellus leo ullamcorper vestibulum id egestas nulla pharetra a purus parturient platea posuere natoque magna etiam aptent libero fames..https://example.com/amy/AmyCompany Example
    <li><div class="description"><h2></h2></div><blockquote><p></p><footer><cite><a href=""> - </a></cite></footer></blockquote></li></ul></div>

Or are you saying you're only getting one record?

No, I'm getting two records, but still the text not inside the appropriate HTML tags like you showed me now and how I got it in the first place..

Member Avatar for diafol

AH bugger. I think I know. You need get_field() instead of the_field(). The prior places the data into a var, the latter echoes it out immediately. So my code was totally wrong. Try:

            $listTestimonial = "";
            while ($testimonials->have_posts()) {
                        $testimonials->the_post();
                        $listTestimonial .= '<li>';
                        $listTestimonial .= '<div class="description">';
                        $listTestimonial .= '<h2>' . get_field('workshop') . '</h2>';
                        $listTestimonial .= '</div>';
                        $listTestimonial .= '<blockquote>';
                        $listTestimonial .= '<p>' . get_field('testimonial') . '</p>';
                        $listTestimonial .= '<footer>';
                        $listTestimonial .= '<cite>';
                        $listTestimonial .= '<a href="' . get_field('url') . '">' . get_field('name') . ' - ' . get_field("company-agency") . '</a>';
                        $listTestimonial .= '</cite>';
                        $listTestimonial .= '</footer>';
                        $listTestimonial .= '</blockquote>';
                        $listTestimonial .= '</li>';
                    }
                    echo $listTestimonial;
commented: YAY!!! +6

You're right! I was messing up between the two. I've used a plugin for creating custom fields in my custom post types, but choosed the wrong one to retrieve them at the front. They're indeed variables so I should've used get_field()
https://www.advancedcustomfields.com/resources/code-examples/

Thanks a bunch, diafol!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.