This snippet for wp_get_attachment_image_src frequently appears in my theme development to select an image by its unique ID in the WordPress media library.
Handy for instances where logos, banners, or any other image frequently recurs on a website and you’d rather store that image in the media library where it can be replaced or modified dynamically.
// replace 7 with unique ID number of image
$image_attributes = wp_get_attachment_image_src( $attachment_id = 7, 'full' );
// retrieves alternative text from image information
$alt = get_post_meta( $attachment_id , '_wp_attachment_image_alt', true );
if ( $image_attributes ) {
echo '<img src="'. $image_attributes[0] .'" width="' . $image_attributes[1] . '" height="' . $image_attributes[2] . '" alt="' . $alt . '" />';
}
Over the that weekend I had been using WordPress to take notes at WordCamp Orange County and realized that WordPress’ block editor is useful as a note taking environment. But what If I don’t want these notes to be public?
<?php
/**
* Single post and page template for restricting the title and content unless the user is logged in
* Sources:
* https://www.wpbeginner.com/wp-themes/create-custom-single-post-templates-for-specific-posts-or-sections-in-wordpress/
* https://codex.wordpress.org/Conditional_Tags
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
*
* @package WordPress
* @subpackage Twenty_Nineteen
* @since 1.0.0
*
* License: GPL 2 or later
*
* Template Name: Log in Required
* Template Post Type: post, page
*
*/
get_header();
?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<?php
if ( is_user_logged_in() ) { // check if user is logged in
/* *
* Start the Loop
* This example uses TwentyNineteen for the loop, if using a different theme subsitute that loop here.
* */
while ( have_posts() ) :
the_post();
get_template_part( 'template-parts/content/content', 'single' );
if ( is_singular( 'attachment' ) ) {
// Parent post navigation.
the_post_navigation(
array(
/* translators: %s: parent post link */
'prev_text' => sprintf( __( '<span class="meta-nav">Published in</span><span class="post-title">%s</span>', 'twentynineteen' ), '%title' ),
)
);
} elseif ( is_singular( 'post' ) ) {
// Previous/next post navigation.
the_post_navigation(
array(
'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next Post', 'twentynineteen' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Next post:', 'twentynineteen' ) . '</span> <br/>' .
'<span class="post-title">%title</span>',
'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous Post', 'twentynineteen' ) . '</span> ' .
'<span class="screen-reader-text">' . __( 'Previous post:', 'twentynineteen' ) . '</span> <br/>' .
'<span class="post-title">%title</span>',
)
);
}
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile; // End of the TwentyNineteen loop.
} else { // If not logged in present a link to log into the site
echo '<p style="text-align: center;"><a href="' . wp_login_url( get_permalink() ) . '" title="Login">Log in to view this post</a></p>';
}
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_footer();
Simply put, is_user_logged in() will check if the user is logged before it displays the post. If not they’re presented with a link to log in.
Left, the user is logged in. Right, post content and title will not display.
What it doesn’t do?
Using this post and page template will only restrict the post page. The excerpt or content will still display on archive pages unless those loops run a similar conditional check.
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>';
}
?>
Manually setting Gutenberg's post editor width and default 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.
