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>