Create a custom button with flexible styling, icon support, and click tracking functionality.
Requirements
To make use of this widget, go to PluginsSiteOrigin Widgets to activate the SiteOrigin Button Widget.
The Button Widget is ready to be used anywhere:
Page Builder: Insert widgets in Page Builder by SiteOrigin in either the Classic Editor or Page Builder Layout Block in the Block Editor.
Block Editor: 100% Block Editor compatible. Insert widgets using the SiteOrigin Widgets Block featuring a live widget search form.
Theme and Plugin Widget Areas: Insert widgets into any theme or plugin widget area.
Settings
Button Text:
Enter the text that’ll be displayed in the button.
Destination URL:
Enter the button link. Use the Select Content button on the right to select a page or post in your WordPress installation.
Open in a new window:
Enable to open the button link in a new window.
Download:
The Destination URL will be downloaded when a user clicks on the button.
Next, you’ll see three sections; each contains a list of settings:
- Icon
- Design and Layout
- Other attributes and SEO
Icon
Icon
Visually select an icon from several different icon libraries.
Icon Color
Set the selected icon’s color.
Image Icon
Replaces the icon with your own image icon. Use the Choose Media button to choose an image from your WordPress media library or click the Image Search button to search for royalty-free images on Pixabay.
Icon Placement
Choose between Top, Right, Left, or Bottom.
Design and Layout
Width
Leave blank to let the button resize according to content. Alternatively, insert a width value. Use the drop-down field next to the width field to select a unit of measurement. The default unit is pixels (px).
Align
Align the entire button on the page. Defaults to Center. Choose between Left, Right, Center, or Full Width.
Mobile Align
Set the button alignment on mobile devices. Defaults to Center.
Button Theme
Select a button theme. Choose between Atom, Flat or Wire. Atom has a rounded effect which Flat removes. Wire removes the background color and only uses a border.
Button Color
Select the button background color.
Text Color
Select the button text color.
Use Hover Effects
For the Atom and Flat themes, hover effects will lighten the background slightly, for the Wire theme, the background will be added on hover.
Hover Background Color
Select the button hover background color.
Hover Text Color
Select the button hover text color.
Font
Select the button font family.
Font Size
Set the button font size. Defaults to 1em.
Padding
Padding is the distance between the text and the edge of the button. Defaults to 1em.
Rounding
Set the button rounding. Defaults to 0.25em for the top, right, bottom, and left corners.
Other Attributes and SEO
This section contains optional fields that some users will find useful.
Button ID
An ID attribute allows you to target this button in JavaScript.
Button Classes
Additional CSS classes added to the button link.
Title Attribute
Adds a title attribute to the button link.
Onclick
Run this JavaScript when the button is clicked—ideal for tracking.
Rel Attribute
Adds a rel attribute to the button link.
Custom CSS Changes
In the event you’d like to override the default button colors and the values set in the Design and Layout section; the following can be added to AppearanceCustom CSS:
.ow-button-base a { background: blue !important; border-color: blue !important; color: red !important; } .ow-button-base a.ow-button-hover:hover { background: red !important; border-color: red !important; }
The blue
and red
test values can be replaced as required.
Advanced Customizations
The siteorigin_widgets_button_attributes
filter allows developers to modify the HTML attributes of the button element in the SiteOrigin Button Widget. This filter provides a way to add, remove, or modify attributes, enabling customization of the button’s behavior, accessibility, and styling.
Usage
apply_filters( 'siteorigin_widgets_button_attributes', $button_attributes, $instance )
Parameters
1. $button_attributes
(array): An associative array of HTML attributes for the button element.
2. $instance
(array): The widget instance settings.
Return Value
(array) The modified array of button attributes.
Example
Here’s an example of how to use this filter to add an aria-label
attribute to the button:
add_filter( 'siteorigin_widgets_button_attributes', 'my_custom_button_attributes', 10, 2 ); function my_custom_button_attributes( $button_attributes, $instance ) { // This uses the button text as the aria-label, or falls back to 'Button' if no text is set $button_attributes['aria-label'] = !empty( $instance['text'] ) ? esc_attr( $instance['text'] ) : 'Button'; // Add a custom data attribute $button_attributes['data-custom'] = 'my-custom-value'; return $button_attributes; }