Categories
Tutorial WordPress

Creating a custom attachment loop for images and other files in WordPress

While building an attachment.php template for a project I opted to customize the loop to properly display an image within a figure tag and the caption within figcaption to aid accessibility.

Additionally if the file is not an image it will provide a button that can be styled along with a mime type.

The following code would have to be placed within the loop.

<?php 
if ( wp_attachment_is_image() ) {

	// Set the image's ID to an array so it can be reused later
	$image_id = get_the_ID();
	$caption = wp_get_attachment_caption( $image_id );

	echo '<figure>';

		// Displays the large version of the image if available
		echo wp_get_attachment_image( $image_id, 'large' );

		// if no caption is set or the value is null do nothing and don't display the empty tags
		if (!empty($caption) ) {
			echo '<figcaption>' . $caption . '</figcaption>';
		}

	echo '</figure>';

} else {

	// If the attachment is not an image display a button and mime type.
	$attachment_id = get_the_ID();

	$attachment_url = wp_get_attachment_url( $attachment_id ); 

	echo '<button type="button"><a href="' . $attachment_url . '" target="_blank">' . get_the_title( $attachment_id ) . '</a></button> ';

	echo '<span class="mime-type">' . get_post_mime_type( $attachment_id ) . '</span>';

}
?>

Categories
Tutorial WordCamp WordPress

Overriding Gutenberg’s default editor width and font

By default Gutenberg sets the editor width to 580px on the desktop unless the browser window is narrower. Since Kubrick’s post content area is 480px we’ll need to override the width so text wrapping occurs at the same width as the final post. for that we simply set new declarations for the wp-block class tag.

Categories
Tutorial WordCamp WordPress

Upgrading Kubrick for Gutenberg

This post contains files and tutorial information related to my talk at WordCamp Santa Clarita on April 6, 2019.

Presentation Files

Upgrading Kubrick for Gutenberg

Sources and Links

Categories
Tutorial WordPress

Creating smaller buttons for Gutenberg

This week I ran into a practical problem with WordPress’ default button blocks being simply too large for certain situations. Fortunately, extending Gutenberg blocks isn’t too difficult. Following the Gutenberg Handbook I’ll be adding to my existing files. These files have been enqueued previously to my theme.

Categories
Tutorial WordPress

Upgrading a classic theme for Gutenberg

With the release of WordPress 5.0 in early December 2018 web developers were forced to make a decision, install the Classic Editor plugin and continue to enjoy the post editor we’ve used for years or jump the new block editor experience. However, I quickly found a few of my themes were not ready.