Why Use a Child Theme in WordPress (and HivePress)?
A child theme lets you customize your site’s design and functionality without modifying the original (parent) theme. This is important because updates to the parent theme can overwrite your changes. A child theme keeps your custom code safe and upgrade-friendly.
How to Create a Child Theme for HivePress (e.g., RentalHive):
- Create a folder for your child theme
Example name: rentalhive-child
- Inside that folder, create two files:
- In
style.css, add the following:
/*
Theme Name: RentalHive Child
Template: rentalhive
*/
In functions.php, enqueue the parent and child styles:
<?php
add_action('wp_enqueue_scripts', function () {
wp_enqueue_style('rentalhive-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style('rentalhive-child-style', get_stylesheet_uri(), ['rentalhive-style']);
});
- Zip the
rentalhive-child folder and upload it via WordPress → Appearance → Themes → Add New → Upload.
- Activate the child theme.
NOTE THAT YOUR THEME IS NOT CALLED RENTALHIVE, SO USE YOURS INSTEAD (E.G. LISTINGHIVE)
Step 2
How to Create a Custom Attribute for a Logo Image (Slug: logo, Type: URL)
If you want to allow users to add a separate logo image to their listing, you can create a custom attribute in HivePress like this:
- Go to WP Admin → HivePress → Attributes.
- Click “Add New”.
- Set the following:
- Name:
Logo (or anything you prefer)
- Slug:
logo (this is important — you’ll use it in code)
- Field Type:
URL
- Under Display Options, uncheck all checkboxes if you don’t want it to appear automatically on the listing page or submission form.
- Save the attribute.
Now, when editing a listing in the backend (or if you manually add the field to the submission form), you can paste the URL of the logo image.
Step 3
Replace the Listing Image with the logo Attribute
Now that you’ve created the logo attribute, you can replace the default listing image with your custom logo in the listing card.
1. Copy the Template File
-
Go to this path in your HivePress plugin:
wp-content/plugins/hivepress/templates/listing/view/block/
-
Find listing-image.php
-
Copy it into your child theme using the same folder structure:
wp-content/themes/rentalhive-child/hivepress/listing/view/block/listing-image.php
Modify the Copied File
Open the listing-image.php in your child theme and replace everything inside with the following:
<?php
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
$logo_url = $listing->get_attribute('logo'); // Custom logo URL attribute.
$image_count = count( (array) $listing->get_images__id() );
?>
<div class="hp-listing__image" data-component="carousel-slider" data-preview="false" data-url="<?php echo esc_url( hivepress()->router->get_url( 'listing_view_page', [ 'listing_id' => $listing->get_id() ] ) ); ?>">
<?php if ( $logo_url ) : ?>
<a href="<?php echo esc_url( hivepress()->router->get_url( 'listing_view_page', [ 'listing_id' => $listing->get_id() ] ) ); ?>">
<img src="<?php echo esc_url( $logo_url ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
</a>
<?php else : ?>
<?php if ( get_option( 'hp_listing_enable_image_preview' ) && $image_count > 1 ) : ?>
<?php foreach ( $listing->get_images() as $image ) : ?>
<?php if ( strpos( $image->get_mime_type(), 'video' ) === 0 ) : ?>
<video controls>
<source src="<?php echo esc_url( $image->get_url() ); ?>#t=0.001" type="<?php echo esc_attr( $image->get_mime_type() ); ?>">
</video>
<?php else : ?>
<img src="<?php echo esc_url( $image->get_url( 'hp_landscape_small' ) ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
<?php endif; ?>
<?php endforeach; ?>
<?php else : ?>
<a href="<?php echo esc_url( hivepress()->router->get_url( 'listing_view_page', [ 'listing_id' => $listing->get_id() ] ) ); ?>">
<?php if ( $image_count >= 1 ) : ?>
<img src="<?php echo esc_url( $listing->get_image__url( 'hp_landscape_small' ) ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
<?php else : ?>
<img src="<?php echo esc_url( hivepress()->get_url() . '/assets/images/placeholders/image-landscape.svg' ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
<?php endif; ?>
</a>
<?php endif; ?>
<?php endif; ?>
</div>
Result
- If a
logo URL is set, it will be shown instead of the default image carousel.
- If no logo is provided, it will show regular pictures.
- The whole block remains clickable and links to the listing page.
p.s. if the method above didn’t work, try this
<?php
// Exit if accessed directly.
defined( 'ABSPATH' ) || exit;
$logo_url = get_post_meta( $listing->get_id(), 'hp_logo', true ); // Get logo directly from meta.
$image_count = count( (array) $listing->get_images__id() );
?>
<div class="hp-listing__image" data-component="carousel-slider" data-preview="false" data-url="<?php echo esc_url( hivepress()->router->get_url( 'listing_view_page', [ 'listing_id' => $listing->get_id() ] ) ); ?>">
<?php if ( $logo_url ) : ?>
<a href="<?php echo esc_url( hivepress()->router->get_url( 'listing_view_page', [ 'listing_id' => $listing->get_id() ] ) ); ?>">
<img src="<?php echo esc_url( $logo_url ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
</a>
<?php else : ?>
<?php if ( get_option( 'hp_listing_enable_image_preview' ) && $image_count > 1 ) : ?>
<?php foreach ( $listing->get_images() as $image ) : ?>
<?php if ( strpos( $image->get_mime_type(), 'video' ) === 0 ) : ?>
<video controls>
<source src="<?php echo esc_url( $image->get_url() ); ?>#t=0.001" type="<?php echo esc_attr( $image->get_mime_type() ); ?>">
</video>
<?php else : ?>
<img src="<?php echo esc_url( $image->get_url( 'hp_landscape_small' ) ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
<?php endif; ?>
<?php endforeach; ?>
<?php else : ?>
<a href="<?php echo esc_url( hivepress()->router->get_url( 'listing_view_page', [ 'listing_id' => $listing->get_id() ] ) ); ?>">
<?php if ( $image_count >= 1 ) : ?>
<img src="<?php echo esc_url( $listing->get_image__url( 'hp_landscape_small' ) ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
<?php else : ?>
<img src="<?php echo esc_url( hivepress()->get_url() . '/assets/images/placeholders/image-landscape.svg' ); ?>" alt="<?php echo esc_attr( $listing->get_title() ); ?>" loading="lazy">
<?php endif; ?>
</a>
<?php endif; ?>
<?php endif; ?>
</div>
p.s. not always you have to proceed as planned, you can work around another way to the solution, such as reduce the image size on the listing page so that it looks neat via css with the WP Customizer
Option 2 - just reduce the image size on the listing page via CSS
.hp-listings .hp-listing__image img {
max-height: 300px;
width: auto;
height: auto;
object-fit: contain;
}
