A leaderboard can be a nice visual addition to website pages. So, how can we add this to a WordPress site, and make it easy for a customer to as well? The answer is to pull in the Featured Image into our page using a little PHP recipe and a dash of CSS styling:
A modern, user-friendly website can boost your online engagement and help build your business. Contact our professional web design team today for a beautiful, custom WordPress website.
Standard Featured Image Leaderboard with Fallback
- Check functions.php in the theme directory to make sure support for Post Thumbnails on posts and pages is enabled. Look for:
add_theme_support( 'post-thumbnails' );
If that code isn’t part of functions.php, add the code to functions.php to enable post thumbnails support.
- For each page you want to add a leaderboard image to, look for the Featured Image box on the right side of the editor and assign a featured image.
- Add the code below to your WordPress page template where you want the leaderboard image to appear. Note the else statement that provides a different class if a featured image isn’t assigned; more on that in the next step:
<?php if(has_post_thumbnail()){ echo '<div class="leaderboard-image">'; the_post_thumbnail('full'); echo '</div>'; } else{ echo '<div class="leaderboard-without-image"></div>'; } ?> - In your theme’s style sheet, add your desired styling for the leaderboard image. Below is an example that includes a fall back for Pages where a featured image isn’t assigned. Adjust the styles as needed for the site you are working on:
/* Featured image as leaderboard*/ .leaderboard-image, .leaderboard-without-image { border: 5px solid #ffffff; box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); margin-bottom: 60px; margin-top: 15px; } .leaderboard-without-image { background: url(images/default-leaderboard.jpg) center top no-repeat; height:350px; }
Adding a Link to the Featured Image Leaderboard
Inspired by a request from a customer, I found some code and merged it with our standard leaderboard code to make it possible to add a link to a featured image in the leaderboard using built-in WordPress custom fields. That’s right, Advanced Custom Fields is not needed for this.
Note: The code below assumes you are adding an external link. If you are adding an internal link, modify the code and remove the “target=”_blank” portion so the link will open in the same tab/window.
Here’s the updated code to add to your WordPress page template:
<?php $name = get_post_meta($post->ID, 'ExternalUrl', true);
if( $name ) { ?>
<div class="leaderboard-image">
<a href="<?php echo $name; ?>" target="_blank"><?php the_post_thumbnail(); ?></a>
</div>
<?php } else {
echo '<div class="leaderboard-image">';
the_post_thumbnail('full');
echo '</div>';
} ?>Once that has been added:
- Create or edit the page where you are adding the leaderboard and link.
- Make sure custom fields are visible by clicking on Screen Options in the upper right corner and that the box next to Custom Fields is checked.
- Click on Screen Options again to close the panel and scroll down past the page editor until you see the Custom Fields box.
- Under the Name field, click the Enter New link and type ExternalURL into the Name field.
- Place the link you want the featured image leaderboard to link to in the value field.
- Save or Update the page.
Please note: When you copy the code from these areas, that they will properly indent and each line will have the correct format when you paste it into your code editor program.
For more tutorials and information on how to customize your website or get started with the design process, please check our Web Design Services channel!
