Vertically to Horizontally in order?

Yes, this is possible, but you will need to edit some CSS, or the template, which is written in PHP and HTML, probably both.

The following might do the job but is untested. You will need to save this into a file in your theme’s directory called a-z-listing.php. It includes CSS, HTML and PHP changes which I hope do the job for you. If you want a different number of columns then change the 3 in the second line for the number you prefer:

<?php
$_a_z_listing_colcount = 3;
?>
<style>
	.letter-section ul {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		display: grid; // duplicate display because grid might be unsupported in a particular browser, in which case the flex will be used
		grid-template-columns: <?php for ($col = 0; $col < $_a_z_listing_colcount; $col++) { echo 'calc( 100% / ' . $_a_z_listing_colcount . ') '; } ?>;
		grid-auto-flow: row;
	}
	.letter-section li {
		box-sizing: border-box;
		float: left;
		width: calc( 100% / <?php echo esc_html( $a_z_listing_colcount ); ?> );
	}
</style>
<div id="letters">
	<div class="az-letters">
		<?php $a_z_query->the_letters(); ?><div class="clear empty"></div>
	</div>
</div>
<?php if ( $a_z_query->have_letters() ) : ?>
<div id="az-slider">
	<div id="inner-slider">
		<?php
		while ( $a_z_query->have_letters() ) :
			$a_z_query->the_letter();
		?>
			<?php if ( $a_z_query->have_items() ) : ?>
				<div class="letter-section" id="<?php $a_z_query->the_letter_id(); ?>">
					<h2>
						<span><?php $a_z_query->the_letter_title(); ?></span>
					</h2>
					<?php
					<div><ul>
					while ( $a_z_query->have_items() ) :
						$a_z_query->the_item();
					?>
						<li>
							<a href="<?php $a_z_query->the_permalink(); ?>"><?php $a_z_query->the_title(); ?></a>
						</li>
					<?php endwhile; ?>
					</ul></div>
					<div class="clear empty"></div>
				</div>
			<?php endif; ?>
		<?php endwhile; ?>
	</div>
</div>
<?php else : ?>
	<p><?php esc_html_e( 'There are no posts included in this index.', 'a-z-listing' ); ?></p>
<?php
endif;

• This reply was modified 7 years, 1 month ago by Dani Llewellyn. Reason: forgot to set flexbox
• This reply was modified 7 years, 1 month ago by Dani Llewellyn. Reason: add display:grid for really new browsers
• This reply was modified 7 years, 1 month ago by Dani Llewellyn. Reason: add automatic grid sizing

Thank you for these code however there is syntax error:

Parse error: syntax error, unexpected ‘<‘, expecting elseif (T_ELSEIF) or else (T_ELSE) or endif (T_ENDIF) in /a-z-listing.php on line 37

I notice there <div><ul> are inside of <?php which shouldn’t be?

Looking forward to hear from you soon

• This reply was modified 7 years, 1 month ago by davyt.

Yes, those two lines are back-to-front. It should have the <div><ul> before the <?php