How to Create Your Own Template for Share Buttons with Easy Social Share Buttons for WordPress Using Plugin Template API?

Easy Social Share Buttons for WordPress has extensive template API which allows usage of custom created templates integrated seamlessly inside plugin (like build in templates). With our exclusive API, you can create additional templates that can be bundled with your theme, sold additionally as custom template package and earn money or redistribute them for free to all Easy Social Share Buttons for WordPress customers.

With this tutorial, we will show how easy is to do this in just a few lines of code. We will create one new template called “My Custom Template” which will be used as an extension to the plugin (you can do the same in theme code and make it work only when your theme is used). Here is how our final modified template will look like:

And it will appear in plugin settings like all build in templates:

 

Here is what you need to do in just a few lines of code

1. Register new template that will appear in plugin settings

To register your own template or templates you need to use filter essb4_templates which will add them to the list of supported from plugin templates. This filter is used dynamically and templates will be visible for users only when your own code run. Once you remove it if a custom template was used in settings users will see default plugin template.

add_filter('essb4_templates', 'essb_mytemplate_initialze');

function essb_mytemplate_initialze($templates) {
	$templates['1001'] = 'My Custom Template';	
	return $templates;
}

You can assign multiple custom templates using one filter call or use multiple filter calls depends on your needs. The structure of supported templates is named array where the key is a numeric value representing theme unique identifier. For custom based templates you can use any value greater than 1000 (in our example this will be 1001). If two templates are using same key users will see the one that is last initialized.

 

2. Assign custom class for your template

Each template has its own class that is added to the main element where buttons are displayed. Template classes start with essb_template_<template class> which should be unique for each template. With next code block, we will assign that class to our custom template.

add_filter('essb4_templates_class', 'essb_mytemplate_class', 10, 2);

function essb_mytemplate_class($class, $template_id) {
	if ($template_id == '1001') {
		$class = 'mycustom-template';
	}
	
	return $class;
}

Once your custom template is set to be used root element containing share buttons will have template class essb_template_mycustom-template. That unique class you can use in your own styling to personalize buttons look.

 

3. Load your own custom CSS code

Last but most important part is the loading of custom CSS code that is made for your templates. The loading of code can be done using build in functions of WordPress for styles load or you can use Easy Social Share Buttons resource build which will take care when code should appear or not. Most important part of loading is that your code should be loaded on site and in WordPress administration because it is required for live preview screens.

If you have made templates that are exclusively available for your WordPress theme only then you can load along with theme CSS code just like all others. Here is how you can do this if you load them if you use add-on plugin.

Loading styles using built-in WordPress functions

add_action('plugins_loaded', 'essb_mytemplate_initialize_styles', 999);
add_action ('admin_enqueue_scripts', 'essb_mytemplate_initialize_styles', 999 );

function essb_mytemplate_initialize_styles() {
	wp_register_style ( 'essb-template-1001-mytemplate', plugins_url () . '/' . basename ( dirname ( __FILE__ ) ) . 'https://kbsocialsharingplugin.b-cdn.net/assets/essb-template.css');
	wp_enqueue_style ( 'essb-template-1001-mytemplate' );
}

 

Loading styles using Easy Social Share Buttons for WordPress resource builder (recommended)

add_action('plugins_loaded', 'essb_mytemplate_initialize_styles', 999);
add_action ('admin_enqueue_scripts', 'essb_mytemplate_initialize_styles_admin', 999 );

function essb_mytemplate_initialize_styles() {	
	if (function_exists('essb_resource_builder')) {
		essb_resource_builder()->add_static_resource(plugins_url () . '/' . basename ( dirname ( __FILE__ ) ) . 'https://kbsocialsharingplugin.b-cdn.net/assets/essb-template.css', 'essb-template-1001-mytemplate', 'css');
	}	
}

function essb_mytemplate_initialize_styles_admin() {
	wp_register_style ( 'essb-template-1001-mytemplate-admin', plugins_url () . '/' . basename ( dirname ( __FILE__ ) ) . 'https://kbsocialsharingplugin.b-cdn.net/assets/essb-template.css');
	wp_enqueue_style ( 'essb-template-1001-mytemplate-admin' );
}

 

[pb_button size=”large” title=”Download complete sample from GitHub” style=”rounded” url=”https://github.com/appscreo/essb-custom-template-boilerplate” target=”_blank” bg_color=”#2cc990″ txt_color=”#FFFFFF” nofollow=”1″]

This sample code is ready to used template that you can use on your site. To do this download package from GitHub and install it like any other WordPress plugin.

 

Did you create your own template set that you wish to share for free with all our customers?

If you made a free template package that you wish to redistribute for free to all customers that use Easy Social Share Buttons for WordPress you can contact us and provide ready to use collection as archived package and we will include it in extensions list and make it available for download for all direct customers.

 

You made a template package that is sold separately and you wish to promote it with our customers?

If you made a cool new template package that you sold we can add it to extensions library and allow it be visible for all of our customers. To make this happen to contact us and provide package name, short description, price, live demo page and address where we can address customers to purchase it.