Back to top

Affiliate Link: Looking to Monetize With Ads?? We Personally Use:

Ezoic

Adding Image Banners To Each Tag and Category

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

When you start to build out your Acabado blog you typically are very limited on the look and feel of the entirety of your site. There was a request on how you could implement adding in a image for categories instead of just the category name.

The ability to add a little image to those category views can add a lot to your blog for very little overhead and very little setup. There is two ways to maintain this style of work, you can either do code which will allow each category to have its own image or use normal CSS to pick a single image to have behind all categories.

Custom Image Per Category

  1. Requires the install and activation of these two plugins:
  2. Edit your categories and select/upload your desired images.

Configure Each Category (or Tag) With An Image

  1. Click on [ Posts ]
  2. Click on [ Categories ]
  3. Scroll to Bottom Area Look For [ Image ]
  4. Upload and choose your image

Add New Code Snippet With Following Code

  1. Click On [ New Snippet ]
  2. Name: [ Pull WP Term Image ]
  3. Add Code Below: [ Copy and Paste Below Code ]
    • Everything within {style} can be changed to better fit your site.
  4. Set To [ Run Everywhere ]
function acabado_wp_term_image_url() {
  // image id is stored as term meta.
  $image_id = get_term_meta( get_queried_object_id(), 'image', true );

  // image data stored in array, second argument is which image size to retrieve.
  $image_data = wp_get_attachment_image_src( $image_id, 'full' );

  // image url is the first item in the array (aka 0).
  $image = $image_data[0];

  if ( ! empty( $image ) ) {
      return esc_url( $image );
  }
}

add_action( 'wp_head', function () { ?>
	<style>
		header.page-header {
    		background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(<?php echo acabado_wp_term_image_url() ?>);
    		background-size: cover !important;
    		padding: 70px 25px 70px 25px;
    		margin: 15px 0px 25px 0px;
		}
		
		h1.page-title {
 	   		color: #ffffff;
			margin-bottom: 0px;
		}
		
	</style>
<?php } );

Once these steps are in place you are now able to start going through and taking a look as you fine tune everything, hopefully this helps you out and allows you to add a new customization to your site!

CSS (Single Use Image On All Categories Only)

header.page-header {
    background-color: aliceblue;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(//cdn-5e1e2cc6f911c8096c0b2d4d.closte.com/wp-content/uploads/2020/04/f6c098f….jpg) !important;
    background-size: cover !important;
    padding: 50px 20px 20px 50px;
    margin: 15px 0px 25px 0px;
}

h1.page-title {
    color: #ffffff;
}

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals!

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content