Show posts group by alphabet with shortcode `prefix_alphabetic_posts`. Note: function `prefix_get_posts_group_by_alphabet()` is added in gist https://gist.github.com/d1fd806d39a02220bc3c5d372919c100

show-posts-group-by-alphabet.php

<?php
add_shortcode( 'prefix_alphabetic_posts', 'prefix_alphabetic_posts' );
function prefix_alphabetic_posts() {
	ob_start();
	?>
	<style type="text/css">
		#alphabetical-posts .letters li {
		    display: inline-block;
		    margin: 0;
		}
		#alphabetical-posts .letters a {
		    text-decoration: none;
		    font-size: 16px;
		    background: #ffffff;
		    height: 2em;
		    display: inline-block;
		    width: 2em;
		    line-height: 2em;
		    color: #2196F3;
		    margin: 0;
		}
		#alphabetical-posts .letters {
		    text-align: center;
		    display: inline-flex;
		}
		#alphabetical-posts .letters-wrap {
		    text-align: center;
		}
		#alphabetical-posts .letters a:hover {
		    background: #2196F3;
		    color: #fff;
		}
		#alphabetical-posts .posts {
		    margin-top: 4em;
		    max-width: 900px;
		    margin: 0 auto;
		}
		#alphabetical-posts .posts .item {
		    margin-bottom: 4em;
		}
		#alphabetical-posts .posts .item a {
		    text-decoration: none;
		    font-size: 14px;
		}
		#alphabetical-posts .posts .list > div {
		    background: #fff;
		    padding: 15px 15px;
		    border-bottom: 1px solid #f2f2f2;
		}
		#alphabetical-posts .list h3 {
		    margin: 0;
		}
		#alphabetical-posts .list .content {
		    margin-top: 5px;
		}
	</style>
	<?php
	$result = prefix_get_posts_group_by_alphabet();
	if( $result ) { ?>		
		<div id="alphabetical-posts">
			<?php $letters = array_keys($result); ?>
			<?php if( $letters ) { ?>
				<div class="letters-wrap">
					<ul class="letters">					
						<?php foreach( $letters as $key => $letter ) { ?>
							<li><a href="#goto-letter-<?php echo $letter; ?>"><?php echo $letter; ?></a></li>
						<?php } ?>
					</ul>
				</div>
			<?php } ?>
			<div class="posts">
				<?php foreach( $result as $letter => $posts ) { ?>
					<div id="goto-letter-<?php echo $letter; ?>" class="item">
						<h3><?php echo $letter; ?></h3>
						<div class="list">
							<?php foreach( $posts as $key => $post ) { ?>
								<div>
									<h3><a href="#"><?php echo $post['title']; ?></a></h3>
									<div class="content">
										<?php echo wp_trim_words( get_the_excerpt( $post['ID'] ), 20 ); ?>
									</div>
								</div>
							<?php } ?>
						</div>
					</div>
				<?php } ?>
			</div>
		</div>
	<?php }
	return ob_get_clean();
}