NatalieMac

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;

NatalieMac

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;

NatalieMac

span.text-content {
  background: rgba(0,0,0,0.5);
  color: white;
  cursor: pointer;
  display: table;
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 150px;

NatalieMac

<?php
function alphaindex_register_song() {
	register_post_type('song', array(
		'label' => 'Songs',
		'menu_icon' => 'dashicons-format-audio',
		'description' => '',
		'public' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'capability_type' => 'post',

NatalieMac

<?php
function alphaindex_alpha_tax() {
	register_taxonomy( 'alpha',array (
		0 => 'song',
	),
	array( 'hierarchical' => false,
		'label' => 'Alpha',
		'show_ui' => false,
		'query_var' => true,
		'show_admin_column' => false,

NatalieMac

<?php 
function alphaindex_save_alpha( $post_id ) {
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
	return;
	//only run for songs
	$slug = 'song';
	$letter = '';
	// If this isn't a 'song' post, don't update it.
	if ( isset( $_POST['post_type'] ) && ( $slug != $_POST['post_type'] ) )
	return;

NatalieMac

<ul>
	<?php wp_list_categories( array(
		'taxonomy' => 'alpha',
		'title_li' => ''
	) ); ?>
</ul>

NatalieMac

<?php
function alphaindex_queries( $query ) {
	/* Sort songs alpha  */
	if ( ! is_admin() && ( is_post_type_archive( 'song' ) || is_tax( 'alpha' ) ) && $query->is_main_query() ) {
		$query->set('orderby', 'name');
		$query->set('order', 'ASC');
	}
}
add_action( 'pre_get_posts', 'alphaindex_queries' );

NatalieMac

<ul class="photo-grid">
	<li>
		<a href="http://www.flickr.com/photos/anirudhkoul/3536413126/">
			<figure>
				<img src="images/arcdetriomphe_sm.png" height="180" width="320" alt="Arc de Triomphe">
				<figcaption><p>Arc de Triomphe</p></figcaption>
			</figure>
		</a>
	</li>
	<li>

NatalieMac

.photo-grid {
	margin: 1em auto;
	max-width: 1106px;
	text-align: center;
}

.photo-grid li {
	border: 5px solid white;
	display: inline-block;
	margin: 1em;