Quick WordPress Tip – Upload to a Post Without Switching Tabs

Here is a quick tip for WordPress users out there. When you are adding, say, a Featured Image to a post, you are brought to the Media Library window that includes an “Upload Files” tab. This might lead you to believe that you need to switch to that tab in order to upload a new image file. Actually, though, you can save yourself some clicks by simply dragging a photo onto the Media Library. No need to switch tabs.

Drop to Upload

Changing Posts per Page in WordPress admin

Here’s a quick WordPress tip. One thing that always bugged me about the admin interface is that WordPress shows just 20 posts per page in the admin list leading to a lot of clicking the paging navigation. Well, WordPress allows you to change the number of posts shown per page. Go to the Screen Options dropdown at the top of the page. One of the options is the number of posts. Change it to a larger number and deal less with clicking through pages. I never knew about this handy feature until a coworker of mine pointed it out.

Post per post WordPress

Display the caption of a featured image in WordPress

Have you ever wanted to display the caption of a Featured Image in WordPress? I recently had need to do this and figured out a way to accomplish this.

When you set the Featured Image for a post in WordPress, you can add additional information for the image: Title, Caption, Alt Text and Description.

Set caption for featured image

It makes sense to me that you might want to display the caption for a Featured Image, if entered. My solution to this was to add a function to my functions file to use to display the caption. My function looks like this:

 function my_display_featured_image( ) {
global $post;

$thumbnail_id = get_post_thumbnail_id($post->ID);
$thumbnail_details = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));
$thumbnail_src = wp_get_attachment_image_src( $thumbnail_id, 'full' );
$thumbnail_width = $thumbnail_src[1];

if ($thumbnail_src && isset($thumbnail_src[0])) {
echo '<div class="featured-image';
if ( !empty( $thumbnail_details[0]->post_excerpt ) ) echo ' wp-caption';
echo '" style="max-width: ' . $thumbnail_width . 'px;">';
if ( !empty( $thumbnail_details[0]->post_excerpt ) ) {
echo '<p class="featured-image-caption">';
echo $thumbnail_details[0]->post_excerpt;
echo '</p>';
the_post_thumbnail( $post->ID );
echo '</div>';

First, we get the information for the post we’re on. We do this by making the $post global. This will give us access to the id of the post we’re on. From there, we can call get_post_thumbnail_id to get the id of the Featured Image. Once we have the id of the Featured Image, or attachment, that we want, we can then use WordPress’s get_posts to grab the record of the Featured Image. The details of the Featured Image are stored in the variable $thumbnail_details using the call:

$thumbnail_details = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment'));

get_posts accepts the arguments of WP_Query so, in our example, ‘p’ is the post id (the id of the Featured Image) which we were able to get using get_post_thumbnail_id. This query returns an object which includes the Featured Image’s caption in the ‘post_excerpt’ value and the description is available in the ‘post_content.’

I am also grabbing the source of the attachment image and using the width of the image to set some inline CSS (in my particular case I wanted to float the image so I wanted to set the width). wp_get_attachment_image_src gets the url and image dimensions and returns the values in an array.

So, now I have the image’s URL, dimensions and caption. With this information, we can display the image. To check if there is a caption present, I just need to check the value of the post_excerpt returned by my get_posts call.

if ( !empty( $thumbnail_details[0]->post_excerpt ) ) {
echo '<p class="featured-image-caption">';

Finally, I use the_post_thumbnail to display the featured image. In my template file, if the post has a Featured Image, I call my function to display the Featured Image.

<?php if ( has_post_thumbnail() ) :
endif; ?>

That is how I display a Featured Image’s caption.

Custom headers and footers in WordPress

Today I wanted to put a custom post inside of a fancyBox popup. So, I wanted to have access to WordPress’s functions, but I didn’t want the usual header and footer from my main template… I just wanted a very basic page that would fit easily inside of fancyBox. I didn’t realize it, but WordPress allows you to load custom headers and footers by name using get_header and get_footer.

The naming structure is pretty simple. I copied header.php and renamed it “header-google_map.php.” Then, I stripped it pretty much bare keeping the wp_head(); function call in place so that I would have access to any scripts and styles used by installed plugins. Then, I called my bare-bones header file in a new template file using:

get_header( 'google_map' );

I did the same thing with the footer and this allowed me to have a simple, no-frills page perfect for displaying within a fancyBox. I could use shortcodes within the page and access all my installed plugins.