Buttons X

Powerful Button Builder Plugin for WordPress


Introduction


Preface #back to top

This knowledge base is wiki powered informational site where you can find latest documentation available for our Buttons X button builder plugin for WordPress. We consider this resource as a starting point for users to get familiar with Buttons X usage, getting answers to the most common questions or getting into more advanced features and options.

Introduction #back to top

Thank you for purchasing Buttons X WordPress plugin. You are amazing!

Buttons X is powerful and an amazing plugin, it will help you manage buttons right from your WordPress dashboard. Create stunning buttons in few minutes without any coding.

Support & Resources #back to top

In this section you will find list of useful resources related to Buttons X WordPress plugin, including link to official support, CodeCanyon sales page and official website.

Resources

Official Support

To get your support related question answered in the fastest timing, please head over to our support page and create a ticket.

Before applying for support please make sure you understand the rules of support and go through all steps described and listed on support policy in order to get your issues solved as soon as possible.

Support Policy #back to top

General

The purpose of support is to provide you with the right answers at the right time. Our support is provided only for direct product buyers.

Ticket support is the only official support handling mechanism. Questions sent using other channels may be ignored without notice.

We provide support because of goodwill and want to offer our customers best service possible. We keep rights not to provide support due to abuse or any other reasons that are against this policy.

Pre-Support Actions

Before asking your question, please make sure you have read the documentation provided and searched the answer within our knowledge base at https://gautamthapar.ticksy.com/, as some of the questions may be already covered within this resource.

Opening Support Ticket

In order to get response in reasonable time we are kindly asking you to provide following information while sending email:

  • Your website URL.
  • Login credentials (Admin access preferable).
  • Version of Buttons X used.
  • Detailed description of actions taken before issue.
  • Screenshot of the problem.
  • Any other information that you find useful.

All information provided is confidential and will not be provided to any third party.

What You Can Expect From Our Support?

There are certain things that you can expect from our support:

  • We always have bug-related and technical support in priority.
  • We are happy to receive proposals and ideas.
  • Tiny custom requests can be served (low priority, depending on workload and goodwill).

What You Can Not Expect From Our Support?

There are certain things that are out of scope and will not be handled by me:

  • Generic WordPress questions.
  • Issues related to 3rd party plugins.
  • Customization requests.
  • Any tickets that contain abuse or violence.
  • Requests from indirect purchases (Buttons X came as part of some other product).

E-mail Policy

With leaving your e-mail you agree to receive promotional e-mails and newsletters from Gautam Thapar.


Thank you for finding time to read this policy and remember that I am here to help you out.

Release Notes #back to top

I am constantly working on a new features and improvements for Buttons X in order to keep your site and your business at the top. In this section you can find information on each and every update we created during lifetime of Buttons X.

Date Version Features Files Changed
30th August 2015 1.0
  1. Initial release
-

Licensing #back to top

This section will explain all you have to know about licensing for Buttons X and point you to necessary resources. The most important thing you need to know about licensing of Buttons X is that we totally rely on licensing and copyrights developed by Envato who has an amazing licensing standards. At the moment Envato, so as Gautam Thapar, offers several types of licenses.

Available Licenses

Extended License #back to top

Extended License allows use of the item in one single end product, which you or one client may sell to end users (charge end users to access or use the end product), but user do not have access to the source files in any case.

Important: Distribution of source files is not permitted.

Extended license allows you, with the permission from Gautam Thapar (Author), to integrate Buttons X into your WordPress theme to sell on ThemeForest.

In order to read more about Extended license please visit CodeCanyon.

Regular License #back to top

Regular License is the most common type of licensing for Buttons X. Regular license allows you to use item in one single end product which end user is not charged to access or use. You can acquire regular license for your own website, or if you are a developer - for one client by transferring the license to your client when the project is finished.

Important: Distribution of source files is not permitted.

Extended license allows you, with the permission from Gautam Thapar (Author), to integrate Buttons X into your WordPress theme to sell on ThemeForest.

In order to read more about Regular license please visit CodeCanyon.

Getting Started #back to top

Thank you for purchasing Buttons X and congratulations with the huge win which you are going to experience once you start using our amazing button builder which will bring you new experience in building your WordPress buttons and also will save you tons of time.

This section will guide you through initial setup and activation processes in order to get your copy of Buttons X up and running. Please follow sections step by step to get familiar with installation, activation and update processes.

Contents

Plugin Installation #back to top

Buttons X installation doesn't differ from any other plugin installation process, so you might be familiar with this process already. If not, please follow instructions below.

  1. Login to your website.
  2. Go to 'Plugins' > 'Add New'.
  3. Click 'Upload Plugin'.
  4. Browse to the plugin's zip file (it is located in the archive you've downloaded from CodeCanyon) and choose that file.
  5. Click 'Install Now' button.
  6. Wait while plugin is uploaded to your server.
  7. Click 'Activate Plugin' button.

Congratulations, you are all set! To start creating buttons visit 'Buttons' > 'Add New'. Also make sure to check 'Buttons' > 'Settings' for available settings.

Plugin Update #back to top

Please follow these steps -

  1. First, login to CodeCanyon and under your profile click Downloads link.
  2. Re-download Buttons X and extract it.
  3. Click 'Upload Plugin'.
  4. Now navigate to the Plugins menu in your WordPress admin area.
  5. Deactivate Buttons X, delete it.
  6. Upload new version that was downloaded few seconds earlier. Activate Buttons X.

Plugin Settings #back to top

Buttons X comes with a customised settings panel. The first thing to do after installing the plugin is to set the plugin settings. Navigate to 'Buttons' > 'Settings' and click the 'General' settings tab.

I try not to bother you with much settings so the settings panel is very minimal.

Available Settings -

  1. General
    1. CSS - Here you can choose to load button CSS through an external file or inline.
  2. Social
    1. Social - Select the post types on which you would want to enable social buttons meta box.

Once you have made your choices, click 'Save'. If everything goes fine, you should see 'Settings saved' notification.

One Click Import #back to top

Buttons X includes demo buttons to get you started. Importing demo buttons is very easy, all you have to do is follow the below steps:

  1. Navigate to 'Buttons' > 'Import'.
  2. Then under 'Demo Buttons' click import.
  3. That's it! You will be notified about the buttons being imported. Play around with the demo buttons. You can edit, delete or do whatever you want with these buttons. And you can import them again whenever you want.

Detailed information is available on Export & Import page.

Buttons #back to top

In this section you will learn in detail on how to create buttons and the various options available under buttons.

Creating a Simple Button #back to top

In this section you will learn about creating beautiful buttons using Buttons X button builder plugin for WordPress.

Let's get started.

  1. Navigate to 'Buttons' > 'Add New'. You will notice that there is already a simple button made for you. This button is just to get you started.
  2. Under 'General' tab do the following:
    1. Click 'Link' and choose 'URL' as type of link.
    2. Once you have selected 'URL' option you will see 'URL' field becomes visible. Add a custom URL like https://www.button.sx.
    3. Next, click 'Padding' and adjust the top, bottom, left and right padding values. You can see the button adjusting according to padding values in the live preview.

  3. Under 'Primary Text' tab do the following:
    1. Click 'Text' and change the 'Text' field.
    2. Click 'Font' and change the font color.
    3. Click 'Color' and change normal and hover colors.

  4. Next, under 'Background' tab do the following:
    1. Click 'Color' tab and change normal and hover background color values. Check live preview for live background color changes.

(Optional) Add a pack and tags to easily find your button when you have lots and lots of buttons.

Once you have finished all these steps, give button a title and save the button.

Now, navigate to 'Buttons' > 'Buttons' and you can find the button short code in the 'ShortCode' column. Put this short code wherever you would like to display the button (on a post, page, etc.).

Available Options #back to top

In this section you will learn in detail the various options available under the options panel.

Contents:

  1. Animations
  2. Background
  3. Border
  4. CSS
  5. General
  6. Gradient
  7. Icon
  8. Layout
  9. Link
  10. Margin
  11. Padding
  12. Preview
  13. Primary Text
  14. Secondary Text
  15. Shadow
  16. Additional

Animations #back to top

Button animations related options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Hover
Animation select animation_hover - hvr-bob, hvr-bounce-in, hvr-bounce-out, hvr-buzz, hvr-buzz-out, hvr-float, hvr-grow-rotate, hvr-hang, hvr-pop, hvr-pulse, hvr-pulse-grow ,hvr-pulse-shrink ,hvr-push, hvr-rotate, hvr-shrink, hvr-sink, hvr-skew, hvr-skew-backward, hvr-skew-forward, hvr-wobble-bottom, hvr-wobble-horizontal, hvr-wobble-skew, hvr-wobble-to-bottom-right, hvr-wobble-to-top-right, hvr-wobble-top, hvr-wobble-vertical, hvr-grow, hvr-back-pulse, hvr-bounce-to-bottom, hvr-bounce-to-left, hvr-bounce-to-right, hvr-bounce-to-top, hvr-radial-in, hvr-radial-out, hvr-rectangle-in, hvr-rectangle-out, hvr-shutter-in-horizontal, hvr-shutter-in-vertical, hvr-shutter-out-horizontal, hvr-shutter-out-vertical, hvr-sweep-to-bottom, hvr-sweep-to-left, hvr-sweep-to-right, hvr-sweep-to-top, hvr-overline-from-center, hvr-overline-from-left, hvr-overline-from-right, hvr-overline-reveal, hvr-trim, hvr-underline-from-center, hvr-underline-from-left, hvr-underline-from-right, hvr-underline-reveal, hvr-curl-top-left, hvr-curl-top-right, hvr-curl-bottom-right, hvr-curl-bottom-left. Select button hover animation type.

Background #back to top

Button background related options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Color
Normal colorpicker background_color_normal #f4f4f4 - Set button background color.
Hover colorpicker background_color_hover #e8e8e8 - Set button background color for when the button will be hovered.
Image
Normal file background_image_normal - - Select or upload button background image.
Hover file background_image_hover - - Select or upload button background image for when the button will be hovered.

Border #back to top

Button border related options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Normal
Size range border_size_normal 0 - Set border size in pixels.
Style select border_style_normal none none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit Set border style.
Color colorpicker border_color_normal - - Set border color.
Hover
Size range border_size_hover 0 - Set border size in pixels for when the button is hovered.
Style select border_style_hover none none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit Set border style for when the button is hovered.
Color colorpicker border_color_hover - - Set border color for when the button is hovered.
Radius (Normal)
Top Left range border_radius_top_left_normal 0 - Set top left border radius in pixels.
Top Right range border_radius_top_right_normal 0 - Set top right border radius in pixels.
Bottom Left range border_radius_bottom_left_normal 0 - Set bottom left border radius in pixels.
Bottom Right range border_radius_bottom_right_normal 0 - Set bottom right border radius in pixels.
Radius (Hover)
Top Left range border_radius_top_left_hover 0 - Set top left border radius in pixels for when button is hovered.
Top Right range border_radius_top_right_hover 0 - Set top right border radius in pixels for when button is hovered.
Bottom Left range border_radius_bottom_left_hover 0 - Set bottom left border radius in pixels for when button is hovered.
Bottom Right range border_radius_bottom_right_hover 0 - Set bottom right border radius in pixels for when button is hovered.

CSS options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Custom Class text class - - Add a custom class to button. This will help in adding custom styles using this class.
Custom CSS css editor css - - Add custom css like below -
                                                #btnsx-123 {
                                                    padding: 40px;
                                                }
                                            
where, '123' is the ID of button. Do change it according to your button ID.

Gradient #back to top

Button gradient related options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Type
Normal select gradient_type_normal vertical vertical, horizontal, diagonal_top, diagonal_bottom, radial Select gradient type.
Hover select gradient_type_hover vertical vertical, horizontal, diagonal_top, diagonal_bottom, radial Select gradient type for when button will be hovered.
Stop (Normal) [Repeatable]
Location range gradient_stop_location_normal - - Set gradient stop location. Must be between 0 and 100.
Color color gradient_stop_color_normal - - Set gradient stop color.
Stop (Hover) [Repeatable]
Location range gradient_stop_location_hover - - Set gradient stop location for when button is hovered. Must be between 0 and 100.
Color color gradient_stop_color_hover - - Set gradient stop color for when button is hovered.
CSS
Normal css editor gradient_css_normal - - Add custom gradient CSS.
Hover css editor gradient_css_hover - - Add custom gradient CSS for when button will be hovered.

Button icon related options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Main
Icon select icon - Font Awesome Icon Select the desired icon. Icon will be placed to the left of primary text if it is not already aligned.
Size range icon_size - - Add font size in pixels. This will make the icon bigger or smaller depending up on the value. Best is to keep the icon size similar to primary text size.
Alignment select icon_alignment - none, left, right Position the icon vertically. More the value more the icon will move vertically downwards. You can also specify negative values to move icon upwards.
Color
Normal colorpicker icon_color_normal - - Select icon color.
Hover colorpicker icon_color_hover - - Select icon color for when button is hovered.
Image
Normal media icon_image_normal - - Select or upload icon image.
Hover media icon_image_hover - - Select or upload icon image for when the button is hovered.
Position Freely checkbox icon_image_position 0 0, 1 where 0 = no, 1 = yes Select or upload icon image for when the button is hovered.
Image Position
Top number icon_image_position_top 0 - Add value in pixels. This will position the icon from top of button based on the value provided. More the value more the icon image will move to the bottom of button.
Bottom number icon_image_position_bottom 0 - Add value in pixels. This will position the icon from bottom of button based on the value provided. More the value more the icon image will move to the top of button.
Left number icon_image_position_left 0 - Add value in pixels. This will position the icon from left of button based on the value provided. More the value more the icon image will move to the right of button.
Right number icon_image_position_right 0 - Add value in pixels. This will position the icon from right of button based on the value provided. More the value more the icon image will move to the left of button.
Shadow
Horizontal range icon_shadow_horizontal - - Add position of the horizontal shadow in pixels. Adds horizontal shadow to icon.
Vertical range icon_shadow_vertical - - Add position of the vertical shadow in pixels. Adds vertical shadow to icon.
Blur range icon_shadow_blur - - Add blur radius in pixels. Makes icon shadow blurry.
Color colorpicker icon_shadow_color - - Pick icon shadow color.
Divider
Position select icon_divider_position - none, left, right Select divider position. Position the divider to left or right of icon.
Size range icon_divider_size - - Add divider size in pixels. This will make the divider bigger or smaller depending up on the value. Best is to keep the divider size little smaller or equal to icon size.
Color colorpicker icon_divider_color - - Select divider color.
Animation
Animation select icon_animation - none, click, hover Select when to animate the icon, on button click or when button is hovered.
Animation Type select icon_animation_type - All animate.css options Select type of animation. Choose from many different types.
Padding
Top range icon_padding_top 0 - Set top padding for icon.
Bottom range icon_padding_bottom 0 - Set bottom padding for icon.
Left range icon_padding_left 0 - Set left padding for icon.
Right range icon_padding_right 0 - Set right padding for icon.

Layout #back to top

Layout options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
ID hidden id (Auto Generated) - The button ID.
Width range width - - Add button width in pixels. This gives the button a fixed width. Clearing the field removes fixed width.
Height range height - - Add button height in pixels. This gives the button a fixed height. Clearing the field removes fixed height.
Size select size - huge, large, wide, small, mini These are some preset button sizes. Changing the size value automatically adjusts the font size and padding values of primary text.
Disabled checkbox disabled 0 0, 1 Make the button disabled by checking this field. Clicking the button won't be possible once disabled.
Embossed checkbox embossed 0 0, 1 Checking this field gives an embossed effect to button.
Full Width checkbox full_width 0 0, 1 Make the button cover the entire width of the container.
Container checkbox container 0 0, 1 Add a container div to button.
Wrap Center checkbox wrap_center 0 0, 1 Makes the button centered. Very helpful when you want the button to be centered inside a big container.

Link options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Type select link_type - admin_page, back_to_top, edd_checkout, edd_straight_to_gateway, home_page, login, login_redirect_current_page, login_redirect_home_page, login_redirect_custom_page, logout, logout_redirect_current_page, logout_redirect_home_page, logout_redirect_custom_page, lost_password, lost_password_redirect_current_page, lost_password_redirect_home_page, lost_password_redirect_custom_page, menu, post, register, url, woocommerce_add_to_cart Choose the type of link required for the button.
Target select link_target - new_window, same_window New window opens the link in a new browser tab whereas Same Windows opens the link in the same browser tab.
Relationship select link_relationship - (blank), alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, tag It species the relationship between the current document and linked document/resource. Alternate - Links to an alternate version of the document. Author - Links to author of the document. Bookmark - Permanent URL used for bookmarking. Help - Links to a help doument. License - Links to copyright information for the document. Next - The next document in a selection. Nofollow - Links to an unendorsed document, like a paid link. No Referrer - Specifies that the browser should not send a HTTP referer header if the user follows the hyperlink. Prefetch - Specifies that the target document should be cached. Previous - The previous document in a selection. Search - Links to a search tool for the document. Tag - A tag (keyword) for the current document.
EDD Download ID select link_edd_id - All EDD downloads Select Easy Digital Downloads download ID.
Menu as Dropdown select link_menu - - Select a menu. These are the menus created under Appearance -> Menu.
Post/Page/CPT select link_post 0 0, 1 Select a post, page or custom post type.
URL text link - - Add a custom URL.
Redirect URL text link_redirect_url - - Only add the last part of the url where you would like to redirect user. If the full URL is http://wwww.example.com/my-page/ then only add /my-page/ in this field. The other part of the URL is computed automatically.
Woocommerce Product ID select link_woocommerce_id - All WooCommerce products Select a Woocommerce product ID.

Margin #back to top

Margin options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Top range margin_top 0 - Set top margin for button.
Bottom range margin_bottom 0 - Set bottom margin for button.
Left range margin_left 0 - Set left margin for button.
Right range margin_right 0 - Set right margin for button.

Padding #back to top

Padding options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Top range padding_top 0 - Set top padding for button.
Bottom range padding_bottom 0 - Set bottom padding for button.
Left range padding_left 0 - Set left padding for button.
Right range padding_right 0 - Set right padding for button.

Preview #back to top

Button preview options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Background colorpicker - - - This field is very helpful in deciding background color for a button when the button is to be used over a colored background (not white). By changing the preview background you will get exact look of the button over a colored background that is not white.

Primary Text #back to top

Button primary text options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Text
Text text text - - Add main button text.
Transform select text_transform - capitalize, uppercase, lowercase, inherit This field controls the capitalization of text.
Font
Font Size range text_font_size 21 - Add font size in pixels. This will make your primary text bigger or smaller depending up on the value specified.
Font Style select text_font_style normal normal, italic, oblique, inherit Select font style. This will style your additional text. Normal means as it is, italic means the text will appear slanted, oblique makes the text slanted + bold and inherit will get the style from parent element.
Font Weight select text_font_weight normal normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit Select font weight. This adds weight to text like bold makes the text stronger. 100 is lightest and 900 is boldest.
Font Family select text_font_family - All Google Web Fonts Select font family. Choose from among 100's of Google Web Fonts to style primary text.
Color
Normal colorpicker text_color_normal #999 - Select text color.
Hover colorpicker text_color_hover #777 - Select text color for when button is hovered.
Shadow
Horizontal range text_shadow_horizontal - - Add position of the horizontal shadow in pixels.
Vertical range text_shadow_vertical - - Add position of the vertical shadow in pixels.
Blur range text_shadow_blur - - Add blur radius in pixels.
Color colorpicker text_shadow_color - - Pick shadow color.
Padding
Top range text_padding_top 0 - Set top padding for primary text.
Bottom range text_padding_bottom 0 - Set bottom padding for primary text.
Left range text_padding_left 0 - Set left padding for primary text.
Right range text_padding_right 0 - Set right padding for primary text.

Secondary Text #back to top

Button secondary text options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Text
Text text text_secondary - - Add additional text for button.
Transform select text_secondary_transform - capitalize, uppercase, lowercase, inherit This field controls the capitalization of text.
Position select text_secondary_position - same_line, new_line Select additonal text position. Put the text on the same line as primary text or move it to a new line.
Alignment select text_secondary_alignment - left, right, center Align the additional text as required. Left moves the text to the left of button, right moves the text right of the button and center keeps the text centered.
Font
Font Size range text_secondary_font_size 21 - Add font size in pixels. This will make your primary text bigger or smaller depending up on the value specified.
Font Style select text_secondary_font_style normal normal, italic, oblique, inherit Select font style. This will style your additional text. Normal means as it is, italic means the text will appear slanted, oblique makes the text slanted + bold and inherit will get the style from parent element.
Font Weight select text_secondary_font_weight normal normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit Select font weight. This adds weight to text like bold makes the text stronger. 100 is lightest and 900 is boldest.
Font Family select text_secondary_font_family - All Google Web Fonts Select font family. Choose from among 100's of Google Web Fonts to style primary text.
Color
Normal colorpicker text_secondary_color_normal #999 - Select text color.
Hover colorpicker text_secondary_color_hover #777 - Select text color for when button is hovered.
Shadow
Horizontal range text_secondary_shadow_horizontal - - Add position of the horizontal shadow in pixels.
Vertical range text_secondary_shadow_vertical - - Add position of the vertical shadow in pixels.
Blur range text_secondary_shadow_blur - - Add blur radius in pixels.
Color colorpicker text_secondary_shadow_color - - Pick shadow color.
Padding
Top range text_secondary_padding_top 0 - Set top padding for secondary text.
Bottom range text_secondary_padding_bottom 0 - Set bottom padding for secondary text.
Left range text_secondary_padding_left 0 - Set left padding for secondary text.
Right range text_secondary_padding_right 0 - Set right padding for secondary text.

Shadow #back to top

Button shadow options comes under this tab.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Normal [Repeatable]
Horizontal range shadow_horizontal - - Set horizontal shadow in pixels.
Vertical range shadow_vertical - - Set vertical shadow in pixels.
Blur range shadow_blur - - Set blur radius in pixels.
Spread range shadow_spread - - Set shadow spread in pixels.
Position select shadow_position - outset, inset Set shadow position.
Color colorpicker shadow_color - - Set shadow colour.
Hover [Repeatable]
Horizontal range shadow_horizontal_hover - - Set horizontal shadow in pixels.
Vertical range shadow_vertical_hover - - Set vertical shadow in pixels for when the button will be hovered.
Blur range shadow_blur_hover - - Set blur radius in pixels for when the button will be hovered.
Spread range shadow_spread_hover - - Set shadow spread in pixels for when the button will be hovered.
Position select shadow_position_hover - outset, inset Set shadow position for when the button will be hovered.
Color colorpicker shadow_color_hover - - Set shadow colour for when the button will be hovered.
CSS
Normal css editor shadow_css - - Set custom box shadow CSS.
Hover css editor shadow_css_normal - - Set custom box shadow CSS for when the button will be hovered.

Additional #back to top

Button additional options that are used mainly in short code to over ride a value. These options are not added to the options panel.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
CSS Inline - css_inline - exterrnal, inline Use this attribute to over ride Buttons X CSS settings for a particular button.

Social Buttons #back to top

In this section you will learn in detail on how to create social buttons and the various options available under social buttons.

Creating a Social Button #back to top

Buttons X makes it easy for users to create social buttons without having to write single line of code. Let's get started!

  1. Once in dashboard, navigate to Social Buttons > Add new.
  2. In this example we will be creating a Facebook horizontal share button. Facebook button is enabled by default. You can enable other buttons as required. Now click the Facebook tab as shown in the image below.
  3. Now we will configure Facebook button options.
    • Select 'Share' option under Button Type field.
    • Enter a custom URL if required otherwise leave blank. Facebook share button will automatically share the link of the page on which the button is placed if URL field left blank.
    • Select 'Button Count' under Layout field.
  4. Finally, we have our share button ready. Give your button a title and publish / save the button and you are done! (Optionally you can also add the button under a pack and add tags so that it is easy to find when you have a lot of buttons.

In the next tutorial we will learn on how to use social buttons on post / page or custom post types. Thank you for checking out this tutorial.

Using Social Buttons on Posts & Pages #back to top

In this tutorial we will learn to use social buttons on our website. I will assume that you have already read the tutorial on how to create social buttons. If you haven't then check it out first - Creating a Social Button.

Let's get started!

  1. After you have created all required social buttons navigate to 'Buttons' > 'Settings'. Under settings click 'Social' tab as shown in image below. Select the post types to enable social button's support. This enables social button meta box on each of the select post types from where we can configure our buttons..
  2. I have selected post and page where I would like to show my social buttons. Now navigate to one of the post type you selected. I will be creating a new blog post so I will navigate to 'Posts' > 'Add New'. It works the same for other post types. Just navigate to the respective 'post type' > 'Add New' or one of your already created post / page or custom post.
  3. Once you are on the 'Add New' or 'Edit Post' page look for 'Buttons X - Social Buttons' meta box on the sidebar. Under it you will find two multi select fields, one for displaying the social buttons before content and other for displaying buttons after content. I created share buttons with vertical count which I will be selecting here and I would want the buttons to appear below post title and after post content. Since I created all buttons together so I will select the button named 'All Vertical Share Buttons' but you can create social buttons individually and select them all (multi select).
  4. After saving the post, click 'View Post' or 'Preview Changes'. And you should the see the buttons before and after post content as shown in the image below.

Thank you for checking out this tutorial!

Export & Import #back to top

In this section you will learn how to export and import buttons. Here it is assumed that you have already created a few buttons and that the buttons list is not empty.

EXPORT

Single Button Export

  1. Navigate to 'Buttons' > 'Buttons'.
  2. Hover over a button row and you will see button action links under button name.
  3. Now click on 'Export'.
  4. Once clicked a '.json' file will be downloaded to your computer.
  5. That's it! You have exported a button.

Bulk Export

  1. Navigate to 'Buttons' > 'Buttons'.
  2. Select the buttons you would like to export.
  3. Select 'Export' under 'Bulk Actions' (can be found at the top or bottom of the page).
  4. Once 'Export' is selected click 'Apply'.
  5. Once clicked a '.json' file will be downloaded to your computer.
  6. Great! You have exported buttons in bulk.

IMPORT

One Click Import

  1. This import option is basically to import demo buttons packed with the plugin. This makes it very easy for you to get started with Buttons X.
  2. Navigate to 'Buttons' > 'Import'.
  3. Under import page the very first tab is 'Demo Buttons'.
  4. Click 'Import' and you will be notified about each button that is being imported.
  5. That's it! Navigate to 'Buttons' > 'Buttons' to check imported buttons.
  6. You can modify these buttons or use as is. And you can import these buttons any number of times.

Manual Import

  1. This import option is to let you import those buttons that you have exported.
  2. Navigate to 'Buttons' > 'Import'.
  3. Click 'Manual Import' tab..
  4. Under 'Manual Import' tab upload the '.json' file that you exported / downloaded.
  5. Click 'Import' and you will be notified about each button that is being imported.
  6. That's it! Navigate to 'Buttons' > 'Buttons' to check your imported buttons.

Thank you for checking out this tutorial!

Cloning a Button #back to top

In this section we will demonstrate you on how to clone a button. Here it is assumed that you have already created a few buttons and that the buttons list is not empty.

  1. Navigate to 'Buttons' > 'Buttons'.
  2. Hover over a button row and you will see button action links under button name.
  3. Now click on 'Clone'.
  4. Once clicked you will be taken to the cloned button edit page. It will be an exact copy of your button.
  5. Change the button title and the options fields that require modifications and save the button.
  6. That's it! You have a new button.

Bulk Export

  1. Navigate to 'Buttons' > 'Buttons'.
  2. Select the buttons you would like to export.
  3. Select 'Export' under 'Bulk Actions' (can be found at the top or bottom of the page).
  4. Once 'Export' is selected click 'Apply'.
  5. Once clicked a '.json' file will be downloaded to your computer.
  6. Great! You have exported buttons in bulk.

IMPORT

One Click Import

  1. This import option is basically to import demo buttons packed with the plugin. This makes it very easy for you to get started with Buttons X.
  2. Navigate to 'Buttons' > 'Import'.
  3. Under import page the very first tab is 'Demo Buttons'.
  4. Click 'Import' and you will be notified about each button that is being imported.
  5. That's it! Navigate to 'Buttons' > 'Buttons' to check imported buttons.
  6. You can modify these buttons or use as is. And you can import these buttons any number of times.

Manual Import

  1. This import option is to let you import those buttons that you have exported.
  2. Navigate to 'Buttons' > 'Import'.
  3. Click 'Manual Import' tab..
  4. Under 'Manual Import' tab upload the '.json' file that you exported / downloaded.
  5. Click 'Import' and you will be notified about each button that is being imported.
  6. That's it! Navigate to 'Buttons' > 'Buttons' to check your imported buttons.

Thank you for checking out this tutorial!

Extensions #back to top

Buttons X button builder plugin supports extensions. It comes with two free extensions, analytics and tooltip.

Contents

Installation #back to top

Buttons X extensions are installed in the same manner as you install a WordPress plugin. Please read Plugin Installation for more details.

Analytics Extension #back to top

Detail information about analytic options can be found below.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Google
Enable checkbox analytics_google 0 0, 1 Enable Google analytics to track button click events. You must have Google analytics enabled on your website.
Tracking Variable text analytics_google_tracking_variable ga - If using universal tracking then most probabily the tracking variable would be ga. It might also be possible that you have a different tracking variable. For example: If you use the free version of Google Analytics by yoast then the tracking variable will be __gaTracker. You can easily check which tracking variable being used on your website (check below).
Event Category text analytics_google_event_category - - It is typically the object that was interacted with (e.g. button).
Event Label text analytics_google_event_label - - Useful for categorizing events (e.g. cart buttons).
Event Value text analytics_google_event_value - - Values must be non-negative. Useful to pass counts (e.g. 4) times.
Do not impact bounce rate checkbox analytics_google_event_nointeraction 0 1 Send an event without impacting the bounce rate.

Tracking Variable

In order to find the tracking variable follow the below steps:

  1. Navigate to the page where the button is displayed.
  2. Right click the mouse and choose 'View Page Source'.
  3. Inside the head section search for a similar code as shown in image below. That is your tracking variable.

Tooltip Extension #back to top

Detail information about analytic options can be found below.

Available Options:

Field Label Field Type Short Code Attribute Default Value Available Values Description
Tooltip Text text tooltip_text - - Insert text for tooltip. HTML is allowed.
Tooltip Animation select tooltip_animation - fade, fall, grow, slide, swing Select tooltip animation type.
Tooltip Position select tooltip_position top bottom, bottom-left, bottom-right, left, right, top, top-left, top-right Select tooltip position.
Tooltip Theme select tooltip_theme tooltipster-light tooltipster-default, tooltipster-light, tooltipster-noir, tooltipster-punk, tooltipster-shadow, tooltipster-btnsx Select tooltip theme style.

Once the options are configured hover the button in preview to test tooltip.

Thanks for checking out!

Support Desk #back to top

Support is provided only through ticketing system. I highly recommend that you read the new support policy for complete details.

What's included in item support

  1. The item support period.
  2. Answering questions about how to use the item.
  3. Answering technical questions about the item (and included third party assets).
  4. Help with defects in the item or included third party assets.
  5. Item updates to ensure ongoing compatibility and to resolve security vulnerabilities.

What's not included in item support

  1. Item customization.
  2. Installation of the item.
  3. Hosting, server environment, or software.
  4. Help with defects in the item or included third party assets.
  5. Help from authors of included third party assets.

What’s included in all item purchases

  1. Updates to ensure the item works as described and is protected against major security concerns.
  2. Included version updates for all items.

Please make sure you do / include the following information for quick and smooth support

  • Prepare your installation
    Disable your other plugins and switch to the default WordPress theme before you create the ticket. Please test this before opening your ticket so we can know if there's a conflict that needs to be resolved.
  • Purchase Code
    If you do not include a purchase code, we may request this information as our first response.
  • Link to your site
    If something isn't working, please send us a link to the page where it isn't working.
  • Include a WordPress login (admin acess)
    The fastest way for us to help is for us to view your backend setup.

Files & Sources #back to top

Included Stylesheets

These are the primary CSS files used for general front-end styling. Use these to customize your theme even further. All included JavaScript codes under btnsx/assets/

  1. AnimateCSS - https://daneden.github.io/animate.css/
  2. MaterializeCSS - http://materializecss.com/
Included JavaScript

These are the various attribution inks to the Javascript files included or modified to work with in this plugin. All included JavaScript codes under btnsx/assets/

.
  1. Wow.js - http://mynameismatthieu.com/WOW/index.html
  2. Ace Editor - http://ace.c9.io/#nav=about
  3. Codestar WP Color Picker - https://github.com/Codestar/codestar-wp-color-picker
  4. Select2 - https://select2.github.io
Included Icons

These are the various attribution inks to the icons included or modified to work with in this plugin. All included JavaScript codes under btnsx/assets/

  1. Font Awesome - http://fortawesome.github.io/Font-Awesome/
  2. IcoMooon - https://icomoon.io
Miscellaneous
  1. Codrops - http://tympanus.net/codrops/2014/03/21/responsive-full-width-tabs/
  2. Google Fonts - https://www.google.com/fonts
  3. Facebook
  4. Twitter
  5. GooglePlus
  6. LinkedIn

Version History (Changelog) #back to top

You can find the version history (changelog.txt) file inside Btnsx-full.zip file or you can check changelog on plugin description page.

Once again, thank you so much for purchasing this plugin. I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the plugins on CodeCanyon, you might consider visiting the forums and asking your question in the "Item Discussion" section.


Changelog

Check Release Notes.