Roots Share Buttons setup

plugins
1

Hi all,

Could you please help me better understanding how to setup Roots Share Buttons (plugin).

What I did so far:

  1. Bought the Roots Share Buttons plugin and read the README file :slightly_smiling:
  2. Copied the contents to my Plugin folder
  3. In the Admin settings page, I activated all buttons and decided to show Share buttons “after the (Single Templates) content”
  4. Ran Gulp and bottons are showing up… Great!

But:

Now I would like to customize the buttons appearance (CSS) and to be able to show them exactly where I want them to be in my custom Single Template… which is obviously in the Templates directory. To be more precise: I want the Share buttons to show up between the Entry Meta and the Comments in my custom Single Template…

What I did next:

  1. Copied “shortcode-share.php” to my theme’s /Templates directory
  2. Added the following code to /lib/extras.php
    /*
    * Roots Share Buttons Customization
    * Custom [share] shortcode template
    */
    function custom_roots_share_buttons_template() {
      return get_template_directory() . '/templates/shortcode-share.php';
    }
    add_action('roots/share_template', 'custom_roots_share_buttons_template');

    /*
    * Roots Share Buttons Customization
    * Removing plugin assets
    */
    function remove_roots_share_buttons_assets() {
      wp_dequeue_style('roots-share-buttons');
      wp_dequeue_script('roots-share-buttons');
    }
    add_action('wp_enqueue_scripts', 'remove_roots_share_buttons_assets');

If I understand this correctly, I am now saying that the plugin should look for my theme’s /templates/shortcode-share.php instead of the default plugin directory. We have also removed the Share Buttons Assets.

The buttons are not showing up after adding the code to /lib/extras.php

I guess I have to enqueue the Share Buttons assests again in my theme but I’m not sure how to do this correctly. Can you please explain how to do this. Next, I will have to call the Share buttons in my custom Single Template file, but how?

Recently I have added a custom JS file by adding the following line to /lib/setup.php.
It works but I am still wondering if this is the right place? Should I enqueue the Share Button’s assets here too?

function assets() {
wp_enqueue_style(‘sage/css’, Assets\asset_path(‘styles/main.css’), false, null);

if (is_single() && comments_open() && get_option(‘thread_comments’)) {
wp_enqueue_script(‘comment-reply’);
}

wp_enqueue_script(‘sage/js’, Assets\asset_path(‘scripts/main.js’), [‘jquery’], null, true);
wp_enqueue_script(‘sage/custom_js’, Assets\asset_path(‘scripts/custom.js’), [‘sage/js’], null, true);

}
add_action(‘wp_enqueue_scripts’, _ _ NAMESPACE _ _ . ‘\assets’, 100);

Excuse me this is not very clear to me, I am a designer and trying to learn front end dev, Sage, Gulp… on my own :wink: Thank you for clarifing this!

Keep up the good work Roots theme and community! Happy new year!

2

Happy New Year! That code in the README doesn’t take Sage’s namespaces into account. Try using this instead:

add_action('roots/share_template', function () {
  return get_template_directory() . '/templates/shortcode-share.php';
});

Then in your lib/setup.php in Sage, go to the assets function that has the enqueues for the theme CSS/JS and put this within there:

wp_dequeue_style('roots-share-buttons');
wp_dequeue_script('roots-share-buttons');

To place the buttons where you want them in the template you’ll want to disable the output of the buttons within the admin. Then you’ll need to add the following wherever you want in the template file:

<?= do_shortcode('[share]'); ?>
4 Likes
3

That works for me @ben! Thanks a million