How to Add Share Listing Feature in HivePress Without Plugins?

[shibfox]

I don’t like installing plugins for adding a share feature to HivePress listing page. Is there any custom code can use that looks clean and matches the theme design?

[shibfox]

Yes, We can add a Share Listing feature to our HivePress listing page with simple custom code. This solution doesn’t require any plugins that might bloat or spoil our HivePress theme. The button integrates seamlessly with the theme and looks similar to the “Add to Favourite” feature.

Here’s the clean and lightweight code to achieve this:

Add the following code to your child theme’s functions.php file:

add_filter(
    'hivepress/v1/templates/listing_view_page',
    function( $template ) {
        return hivepress()->helper->merge_trees(
            $template,
            [
                'blocks' => [
                    'listing_actions_secondary' => [
                        'blocks' => [
                            'custom_share_button' => [
                                'type'    => 'content',
                                'content' => '<a class="hp-listing__action hp-listing__action--favorite hp-link" href="javascript:void(0)" id="share-listing-button"><i class="hp-icon fas fa-share-alt"></i> Share Listing</a>
                                <script>
                                    document.addEventListener("DOMContentLoaded", function () {
                                        const shareButton = document.getElementById("share-listing-button");
                                        if (shareButton) {
                                            shareButton.addEventListener("click", function () {
                                                const shareData = {
                                                    title: document.title,
                                                    text: "Found something special for you! 👇 \n \n",
                                                    url: window.location.href
                                                };

                                                if (navigator.share) {
                                                    navigator.share(shareData)
                                                        .then(() => console.log("Sharing successful"))
                                                        .catch((error) => console.error("Error sharing:", error));
                                                } else {
                                                    navigator.clipboard.writeText(shareData.url)
                                                        .then(() => alert("Listing URL copied to clipboard!"))
                                                        .catch((error) => console.error("Error copying URL:", error));
                                                }
                                            });
                                        }
                                    });
                                </script>',
                                '_order'  => 10,
                            ],
                        ],
                    ],
                ],
            ]
        );
    }
);

How It Works

1. Share Button Placement: This code adds a “Share Listing” button in the listing actions section, similar to the “Favourite” button.
2. Mobile-Friendly Share: If the device supports the navigator.share API (like most mobile browsers), clicking the button will open the native sharing options.
3. Clipboard Copy: If the navigator.share API isn’t supported (on older browsers or desktops), the listing URL will be copied to the clipboard, and a small alert will confirm it.
4. Customizable Text: You can edit the text in shareData.text to add your own sharing message.

Why Use This Code?

• Plugin-Free: No extra plugins needed — clean and lightweight.
• Matches HivePress Theme: The button looks like a built-in feature.
• Responsive and Modern: Works on both mobile and desktop.
• User-Friendly: Easy sharing experience with fallback support for older devices.

Try it, and let your users share listings effortlessly!

[riz]

Hello, thank you so much for sharing this code. I have a few questions,

1. What is the whole point of a child theme as it is a totally new theme that needs to be activated separately. I used the plugin called “Child theme generator” as recommended by the hivepress kb. It generated a child theme.
2. Suppose if I add this code to the child theme will it change the layout of parent theme as well which is currently activated.
3. Is the child theme just for testing the codes whether they are working or not? and if that is working then that code can be used to the parent theme functions.php

Please help me clear the doubts, as the idea of child theme is really getting me confused.

[shibfox]

Let me clear up the confusion about child themes for you.

A child theme is basically a way to customize your theme without touching the parent theme’s files. This is important because when the parent theme gets updated (which happens often), any direct changes you make to it will be lost. Using a child theme prevents this issue.

When you activate a child theme, it works together with the parent theme. It inherits everything from the parent theme (like layouts, styles, and functionality), but any changes you make in the child theme (like adding code to functions.php or custom CSS) will take priority. It doesn’t change anything in the parent theme itself.

So no, the child theme isn’t just for testing. It’s the best place to put all your customizations. You don’t need to move anything back to the parent theme—just leave your custom code in the child theme, and it will work fine.

I hope this clears things up! Let me know if you have any other questions.

[riz]

Okay, so when the parent theme will get an update, the child theme will automatically be updated? Plus, whatever modifications I have done to, let’s say functions.php will stay intact after the update. Is that correct?

[shibfox]

No, the child theme doesn’t get updated when the parent theme does. That’s the main reason for using a child theme-it keeps your changes safe.

If you’ve made changes to the child theme’s functions.php or any other file, those changes will stay, even if the parent theme is updated. The child theme works by inheriting everything from the parent theme, so your customizations remain untouched.

For example, let’s say you added a custom color code for the copyright text in the child theme. It will only change the color and won’t mess with anything else, like alignment. Now, if HivePress releases an update that changes the alignment in the parent theme, the alignment will update, but your custom color code in the child theme will still work. It stays in place unless you remove it yourself.

But if you made changes directly to the parent theme files, like adding custom code, and then updated the theme, all your changes would be wiped out. That’s exactly why a child theme is so useful-it protects your customizations from being overwritten during updates.

Hope that clears it up! Let me know if you’re still unsure about anything.

[riz]

Thank you so much for the detailed explanation. All my doubts about the child theme are cleared now. Also, thumbs up for your contribution to the community, your mods are quite useful.

[condorito.fr]

Just to be thorough, you don’t need to create a child theme, if you use a “code snippets” plugin, it works just as well.

@shibfox : Did not know about this new javascript share feature.
It’s great !