How to insert custom linked icon to the template

I’m trying to create a “Feature” star icon that appears next to each listing (just like when using the HivePress Paid Listings extension).

Instead of integrating with the actual paid listing flow, I simply want to display the star icon button for each listing, which links to a custom URL format like: /pricing?{listing_id}

Is there a recommended PHP snippet or filter hook that I can use to append this custom action link without modifying template files?

Thanks for your guidance! :folded_hands:

Hi,

Thanks for the details. You need to use hook hivepress/v1/templates/listing_edit_block to add any custom content without overwriting the entire template. You can view examples at this link. Also, please see the example of how this is done in Paid Listings: hivepress-paid-listings/includes/components/class-listing-package.php at master · hivepress/hivepress-paid-listings · GitHub.

I hope it helps

1 Like

Hey Andrii

Thank you for the amazing explanation :slight_smile:

This is what I managed to come up with. Is this correct?

add_filter(
    'hivepress/v1/templates/listing_edit_block',
    function( $template ) {
        return hivepress()->helper->merge_trees(
            $template,
            [
                'blocks' => [
                    'listing_actions_primary' => [
                        'blocks' => [
                            'listing_feature_link' => [
                                'type' => 'content',
								'content' => '<a href="" title="Feature" class="hp-listing__action hp-listing__action--feature hp-link"><i class="hp-icon fas fa-star"></i></a>',
								'_order'  => 10,
                            ],
                        ],
                    ],
                ],
            ]
        );
    },
    1000
);

I’m still struggling to get the desired URL (/pricing?{listing_id}) within the href tag.

Can you please help me with this :folded_hands:

Hi,

Yes, everything seems to be correct. Additionally, we recommend that you also use the get_the_ID() function, which will return the listing ID, and you can use it in the href.

Thanks for the help again, Andrii :slight_smile:

I managed to rewrite the code to get the listing id. Can you please have a look at it?

Is it the right way to do this? Or am I missing something/doing something wrong?

add_filter(
    'hivepress/v1/templates/listing_edit_block',
    function ( $template ) {
        $listing_id = get_the_ID();
        
        if ( ! $listing_id || 'hp_listing' !== get_post_type( $listing_id ) ) {
            return $template;
        }

        $feature_url = add_query_arg(
            'listingid',
            absint( $listing_id ),
            home_url( '/checkout/' )
        );

        return hivepress()->helper->merge_trees(
            $template,
            [
                'blocks' => [
                    'listing_actions_primary' => [
                        'blocks' => [
                            'listing_feature_link' => [
                                'type'    => 'content',
                                'content' => sprintf(
                                    '<a href="%s" title="%s" class="hp-listing__action hp-link"><i class="hp-icon fas fa-star"></i></a>',
                                    esc_url( $feature_url ),
                                    esc_attr__( 'Feature' )
                                ),
                                '_order'  => 10,
                            ],
                        ],
                    ],
                ],
            ]
        );
    },
    1000
);

Thanks again :slight_smile:

Hi,

Yes, this snippet should work correctly. Thank you for sharing it, it will be useful for our community.

1 Like

For anyone still interested, here’s the updated code snippet that shows the feature link button only when:

  1. Listing is published, and
  2. Listing is not already featured
add_filter(
    'hivepress/v1/templates/listing_edit_block',
    function ( $template ) {
        $listing_id = get_the_ID();
        
        if ( ! $listing_id || 'publish' !== get_post_status( $listing_id ) || 'hp_listing' !== get_post_type( $listing_id ) || get_post_meta( $listing_id, 'hp_featured', true ) ) {
            return $template;
        }

        $feature_url = add_query_arg(
            'listing_id',
            absint( $listing_id ),
            home_url( '/checkout/' )
        );

        return hivepress()->helper->merge_trees(
            $template,
            [
                'blocks' => [
                    'listing_actions_primary' => [
                        'blocks' => [
                            'listing_feature_link' => [
                                'type'    => 'content',
                                'content' => sprintf(
                                    '<a href="%s" title="%s" class="hp-listing__action hp-link"><i class="hp-icon fas fa-star"></i></a>',
                                    esc_url( $feature_url ),
                                    esc_attr__( 'Feature' )
                                ),
                                '_order'  => 10,
                            ],
                        ],
                    ],
                ],
            ]
        );
    },
    1000
);
4 Likes

Hello, and thank you for these explanations! I have a closely related question - I would like to add custom linked icons to the listing block. By default, there are “Reply to listing” and “Favorite” icons. I have added some attributes for the listings that are displayed in the screenshot attached, but through this method it is only possible to display them as static icons, or as long links with link text (which doesn’t suit me.) I would like the icons to be clickable with a custom link.

Can the same code displayed above in this discussion be used for my purpose, and if yes, where should I add it? Thanks a lot!

Hi @Dhameswar,

Use this example of how to link an icon. Enter this in the Format (Optional) section of the Display Settings under the appropriate attribute:

<a href="https://www.replace-this-part-with-your-site-address.com">%icon%</a>

I hope this helps!

Cheers,
Chris :victory_hand:

1 Like

@ChrisB Thank you, this worked!

However, I would need to add a different link for each listing (an audio file), the link would be specified in the attribute field of each listing. I wonder if it is possible to fetch that link and connect it to the respective attribute icon.

Hi @Dhameswar,

I’m afraid what you’re describing will require further custom development which I’m unable to provide.

See here to find HivePress vetted Experts who you might be interested in hiring - Customize your website | HivePress

Depending on the developers schedule, you may occasionally find an official Customisation service offered by HivePress themselves, but sadly, it’s currently unavailable at the moment.

I hope this helps!

Cheers,
Chris :victory_hand:

1 Like

Thank you @ChrisB !

Never mind, will look for someone to help!

I was just thinking that since there are “Reply to listing” and “Favorite” functions for each individual listing, perhaps, there would be a simple way to add another such function with a custom link (not through attributes, but somewhere else).

I was able to find a solution to what I wanted, by adding this in the Format (Optional) section of the Display Settings under the attribute:

<a href="%value%">%icon%</a>

In my case, the attribute Field type is Attachment, file type is .mpeg and in the respective listing field I have added audio file link. Now everything works! The icon links to the respective audio.

Hopefully, this will be useful for someone else!

3 Likes

Ah, nice one, @Dhameswar! I didn’t think of doing it that way myself. Good job! I’m sure others in the community will find this useful, too.

Cheers,
Chris :victory_hand:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.