Article sections
Easy Social Share Buttons for WordPress has 27 automatic display positions but this sometimes is not enough. Each user or theme may have its specific needs and today we will illustrate how you can use the build in API to make deep theme integration of social share buttons using plugin menu.
Option to integrate shortcode on the location where you wish buttons to appear is also present but it has one main disadvantage – maintain of any change require each time to change shortcode that is used (to add new social network or change style). We know how much efforts can cost this for just a simple change and why we decide to simplify it – please welcome our new revolutionary and unique developer open display method API.
Using display method API each developer or theme author can create hook inside plugin menu and register own display positions which users can use along with plugin default. All position settings will be visible for your own custom hooks and plugin will take care buttons to appear at the place where you add a call to hook with a style that user select. It is just brilliant!
At the end of this tutorial you will find all code completed and ready to use if everything you need without being a code geek (it’s just copy paste).
Here is how to do it in few simple steps
Below this tutorial you will find ready to boilerplate file that you can modify for your own. Custom code can be added inside theme or you can prepare it in additional installable plugin like we do.
1. Register your custom display hooks (positions) inside plugin menu Where to display
The first we need to do is add locations you need to use in plugin settings menu. This will help users to configure all options that are accessible for other built-in display methods. Here is how you can do it.
add_filter('essb4_custom_method_list', 'essb_register_mycustom_position');
function essb_register_mycustom_position($methods) {
$methods['display-41'] = __('My custom position #1', 'essb');
$methods['display-42'] = __('My custom position #2', 'essb');
$methods['display-43'] = __('My custom position #3', 'essb');
$methods['display-44'] = __('My custom position #4', 'essb');
$methods['display-45'] = __('My custom position #5', 'essb');
return $methods;
}
Using essb4_custom_method_list filter we include all additional display methods to plugin menu. Each method that we use has its own menu index starting with display- and followed by numeric id which will define where it will appear. For custom display methods you can use numeric ids in a range of 40 to 50 (if needed we can extend this range). With this code, we add 5 custom display locations. Once it is executed in Where to display menu you will see this:
2. Make your custom positions appear into list of positions which users can choose from
The next step is to make that positions we register in settings appear into positions menu and make the possible for choose by users. This step will ensure that buttons will be visible on site only when user activate them. Technically you can bypass this step but users, in this case, will not be able to activate or deactivate appearance of selected custom locations – they will be always active.
First, we register our new custom positions with their own display key.
add_filter('essb4_custom_positions', 'essb_display_register_mycustom_position');
function essb_display_register_mycustom_position($positions) {
$positions['custompos1'] = __('Custom Position #1', 'essb');
$positions['custompos2'] = __('Custom Position #2', 'essb');
$positions['custompos3'] = __('Custom Position #3', 'essb');
$positions['custompos4'] = __('Custom Position #4', 'essb');
$positions['custompos5'] = __('Custom Position #5', 'essb');
}
As you can see from example code each position has its own unique key. This key does not follow any rules and you can use your own typing. What you assign here will be used for further settings assign and call of the display. That key will be also assigned as a custom class where buttons are displayed – it will look like essb_displayed_<your display key>.
Once we register custom display methods we need to add them to the list of positions. To do this use the following code:
add_filter('essb4_button_positions', 'essb_display_mycustom_position');
add_filter('essb4_button_positions_mobile', 'essb_display_mycustom_position');
function essb_display_mycustom_position($positions) {
$positions['custompos1'] = array ("image" => "assets/images/display-positions-09.png", "label" => __("My custom position #1", "essb") );
$positions['custompos2'] = array ("image" => "assets/images/display-positions-09.png", "label" => __("My custom position #2", "essb") );
$positions['custompos3'] = array ("image" => "assets/images/display-positions-09.png", "label" => __("My custom position #3", "essb") );
$positions['custompos4'] = array ("image" => "assets/images/display-positions-09.png", "label" => __("My custom position #4", "essb") );
$positions['custompos5'] = array ("image" => "assets/images/display-positions-09.png", "label" => __("My custom position #5", "essb") );
return $positions;
}
Please pay attention that we register positions using keys that are defined above. If your keys are different and do not match buttons will not appear on the site or they will not have the style you select. Using image parameter you can assign your own icon that will appear in the menu – to do this you need to have filled full URL to that image (it should be square with size 150x150px). In the example code, we assign default image which you can also use.
Registration of custom display positions allows this to be done for desktop and mobile, only for mobile or only for desktop depends on your needs. Calling filter essb4_button_positions will register your custom positions for desktop devices. Calling filter essb4_button_positions_mobile will make them work for mobile.
Once this code is executed in Where to Display -> Positions menu you will see this:
3. Assign display settings to appear of your custom positions
Using this step we will make final adjustments to the integration of custom display methods with adding default position settings. Default position settings will make possible users to assign custom styles from plugin menu to your locations and they will be always up to date with new things we add. Here is the code you need to add:
add_action('init', 'essb_custom_methods_register', 99);
function essb_custom_methods_register() {
if (is_admin()) {
if (class_exists('ESSBOptionsStructureHelper')) {
essb_prepare_location_advanced_customization('where', 'display-41', 'custompos1');
essb_prepare_location_advanced_customization('where', 'display-42', 'custompos2');
essb_prepare_location_advanced_customization('where', 'display-43', 'custompos3');
essb_prepare_location_advanced_customization('where', 'display-44', 'custompos4');
essb_prepare_location_advanced_customization('where', 'display-45', 'custompos5');
}
}
}
Version 7
add_action('init', 'essb_custom_methods_register', 99);
function essb_custom_methods_register() {
if (is_admin()) {
if (class_exists('ESSBOptionsStructureHelper')) {
essb_prepare_location_advanced_customization('where', 'positions|display-41', 'custompos1');
essb_prepare_location_advanced_customization('where', 'positions|display-42', 'custompos2');
essb_prepare_location_advanced_customization('where', 'positions|display-43', 'custompos3');
essb_prepare_location_advanced_customization('where', 'positions|display-44', 'custompos4');
essb_prepare_location_advanced_customization('where', 'positions|display-45', 'custompos5');
}
}
}
Function essb_prepare_location_advanced_customization is responsible for generating location-based settings where the first parameter is constant with value where representing main menu tab. Second parameter ‘display-41’ is equal to position key we assign for location in the first step of this article. Third parameter ‘custompo1’ is equal to custom position key we register on step 2 of this article. You need to call function for each custom display method you add.
Once this code is executed in plugin settings you will see this.
4. Now it is time to make share buttons appear into theme
Before proceeding with buttons display along with settings code we will add one internal function that will make sure buttons will appear only when the plugin is installed and activated and user select to use your own custom position.
if (!function_exists('essb_draw_custom_position')) {
function essb_draw_custom_position($position) {
if (function_exists('essb_core')) {
$general_options = essb_core()->get_general_options();
if (is_array($general_options)) {
if (in_array($position, $general_options['button_position'])) {
echo essb_core()->generate_share_buttons($position);
}
}
}
}
}
Once this code is present you can use anywhere inside theme where you wish buttons to appear the following code:
<?php
if (function_exists('essb_draw_custom_position')) {
essb_draw_custom_position('custompos1');
}
?>
Where custompos1 represent key for each position we register on step 2 of this tutorial.
You does not have code knowledge and this looks insane?
Do not worry for this – we thought of this too. All you need is to download the complete sample as ready to use code from the button below and install it like all other plugins in WordPress (do not forget that you need to have Easy Social Share Buttons for WordPress at least version 4.1).
Download complete sample from GitHub
Once you do this you will have 5 ready to use custom positions that you can use anywhere inside your theme. To do this in theme location where you wish buttons to appear you can use the following codes:
For custom position 1
<?php
if (function_exists('essb_draw_custom_position')) {
essb_draw_custom_position('custompos1');
}
?>
For custom position 2
<?php
if (function_exists('essb_draw_custom_position')) {
essb_draw_custom_position('custompos2');
}
?>
For custom position 3
<?php
if (function_exists('essb_draw_custom_position')) {
essb_draw_custom_position('custompos3');
}
?>
For custom position 4
<?php
if (function_exists('essb_draw_custom_position')) {
essb_draw_custom_position('custompos4');
}
?>
For custom position 5
<?php
if (function_exists('essb_draw_custom_position')) {
essb_draw_custom_position('custompos5');
}
?>
Once you add the code you are ready to display share buttons – go to Where to Display -> Positions and activate the custom location you need to show buttons on site. As you made a theme integration for those positions plugin will only check if location is active but it will not check is the post type active or not so if you do it for a custom post type do not worry.
If you need help integrating plugin using custom positions inside your theme feel free to contact us.