gates

It is unfixable because the opening div starts in an ul and the closing div will be placed outside this unordered list and actually closes another div (.tabcontainer) that shouldn’t be closed. That’s what I remember… I’m afraid to try it again, because downgrading caused an issue in the database, so I put a backup of my database back. Here is the code:

The part in single.php

<!-- [START] Related/Random, Popular and New Posts -->
					<div id="suggestions">
						<ul id="vertical-tabs" class="idTabs">

							<?php related_posts(); ?>

							<!-- Popular Posts -->
							<?php
								// Popular Posts plugin - outputs an unordered list
								if (function_exists('wpp_get_mostpopular')) wpp_get_mostpopular("wpp_end='</ul>'&wpp_start='<ul id=\"popular-content\">'&stats_date=1&stats_date_format='d/m/Y'&range='weekly'&order_by=views&stats_comments=0&limit=4&post_type=post,quiz");
							?>
							<!-- /Popular Posts -->

					  		<!-- Latest Posts -->
							<ul id="new-content">
							<?php
								$args = array(
											'post_type' => array( 'post', 'quiz', 'book' ),
											'showposts' => 4,
											'order' => 'DESC'
											);
								$latestPosts = new WP_Query();
								$latestPosts->query( $args );
							?>
							<?php while ($latestPosts->have_posts()) : $latestPosts->the_post(); ?>
								<li><h5><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h5> <small><?php the_category(', ') ?></small></li>
							<?php endwhile; ?>
							<?php // https://codex.www.ads-software.com/Class_Reference/WP_Query#Interacting_with_WP_Query
								wp_reset_postdata(); ?>
							</ul>
							<!-- /Latest Posts -->

						</div><!-- .tabcontainer -->

					</div><!-- suggestions -->
					<!-- [END] Related/Random, Popular and New Posts -->

My custom YARPP template (with an if statement to display random posts when there are no related posts).

<?php if (have_posts()):?>
							<li><a href="#related-content">Related</a></li>
							<li><a href="#popular-content">Popular</a></li>
							<li><a href="#new-content">Latest</a></li>
						</ul><!-- #vertical-tabs.idTabs -->

						<div class="tabcontainer clearfix">
							<ul id="related-content">
	  						<?php while (have_posts()) : the_post(); ?>
	  							<li><h5><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h5> <small><?php the_category(', ') ?></small></li>
	  						<?php endwhile; ?>
							</ul>
<?php else: ?>
							<li><a href="#random-content">Random</a></li>
							<li><a href="#popular-content">Popular</a></li>
							<li><a href="#new-content">Latest</a></li>
						</ul><!-- #vertical-tabs.idTabs -->

						<div class="tabcontainer clearfix"> 

							<!-- Random Posts -->
							<ul id="random-content">
							<?php
								$args = array(
											'post_type' => array( 'post', 'quiz', 'book' ),
											'showposts' => 4,
											'orderby' => 'rand'
											);
								$randomPosts = new WP_Query();
								$randomPosts->query( $args );
							?>
							<?php while ($randomPosts->have_posts()) : $randomPosts->the_post(); ?>
								<li><h5><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h5> <small><?php the_category(', ') ?></small></li>
	  						<?php endwhile; ?>
	  						<?php // https://codex.www.ads-software.com/Class_Reference/WP_Query#Interacting_with_WP_Query
	  							wp_reset_postdata(); ?>
							</ul>
							<!-- /Random Posts -->

<?php endif; ?>

By the way, the custom template has only the related/random feature in it and the rest of the tabs (new and popular posts) are in single.php. It can’t be placed in the custom yarpp template as one complete function, because it will cause issues that I can’t debug. That’s why the div breaks my HTML… it’ll be placed in a random place of my HTML.