The UABB Action Reference

The UABB Action Reference

Have you ever wanted a module to act like you want it to?
We are here to help. We』ll be adding a few actions that will make customization easier and faster. Don』t see an action you』ve thought of? Let us know. We』ll add that too!

Module: Advanced Post

Action: uabb_blog_posts_before_post
Description: This action gets executed at the starting of each post div. Parameters to this are current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action before starting of each post div.
function abc( $post_id, $settings ) {
//Do any operation with the $post_id. Helps one perform any action before starting of each post div.
echo 'some text';
}
add_action( 'uabb_blog_posts_before_post', 'abc', 10, 2 );

Action: uabb_blog_posts_after_post
Description: This action gets executed at the end of each post div. Parameters to this are current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action after the end of each post div.
function abc($post_id, $settings ) {
//Do any operation with the $post_id. Helps one perform any action after the end of each post div.
echo 'some text';
}
add_action( 'uabb_blog_posts_after_post', 'abc', 10, 2 );
Action: uabb_blog_posts_before_title
Description: This action gets executed before the post title is shown. Parameters to this are current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action before the post title.
function abc($post_id, $settings) {
//Do any operation with the $post_id. Helps one perform any action before the post title.
echo 'some text';
}
add_action( 'uabb_blog_posts_before_title', 'abc', 10, 2);
Action: uabb_blog_posts_after_title
Description: This action gets executed after the post title is shown. Parameters to this are current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action after the end of each post title.
function abc($post_id, $settings) {
//Do any operation with the $post_id. Helps one perform any action after the post title.
echo 'some text';
}
add_action( 'uabb_blog_posts_after_title', 'abc', 10, 2 );
Action: uabb_blog_posts_before_meta
Description: This action gets executed before the post meta is shown. Parameter to this is current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action before the post meta.
function abc($post_id, $settings) {
//Do any operation with the $post_id. Helps one perform any action before the post meta.
echo 'some text';
}
add_action( 'uabb_blog_posts_before_meta', 'abc', 10, 2 );
Action: uabb_blog_posts_after_meta
Description: This action gets executed after the post meta is shown. Parameters to this are current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action after the post meta.
function abc($post_id, $settings) {
//Do any operation with the $post_id. Helps one perform any action after the post meta.
echo 'some text';
}
add_action( 'uabb_blog_posts_after_meta', 'abc', 10, 2 );
Action: uabb_blog_posts_before_content
Description: This action gets executed before the post content is shown. Parameters to this are current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action before the post content.
function abc($post_id, $settings) {
//Do any operation with the $post_id. Helps one perform any action before the post content.
echo 'some text';
}
add_action( 'uabb_blog_posts_before_content', 'abc', 10, 2 );
Action: uabb_blog_posts_after_content
Description: This action gets executed after the post content is shown. Parameters to this are current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action after the post content.
function abc($post_id, $settings) {
//Do any operation with the $post_id. Helps one perform any action after the post content.
echo 'some text';
}
add_action( 'uabb_blog_posts_after_content', 'abc', 10, 2 );
Action: uabb_blog_posts_before_image
Description: This action gets executed at the starting of each post featured image. Parameters to this are current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action before starting of each post featured image.
function abc( $post_id, $settings ) {
//Do any operation with the $post_id. Helps one perform any action before starting of each post featured image.
echo 'some text';
}
add_action( 'uabb_blog_posts_before_image', 'abc', 10, 2 );
Action: uabb_blog_posts_after_image
Description: This action gets executed after the each post featured image. Parameters to this are current post_id and settings object. This is helpful when one needs extra actions on individual posts.
// Helps one perform any action after the post featured image.
function abc( $post_id, $settings ) {
//Do any operation with the $post_id. Helps one perform any action after the each post featured image.
echo 'some text';
}
add_action( 'uabb_blog_posts_after_image', 'abc', 10, 2 );

Module: Advanced Menu

Action: uabb_advanced_menu_before
Description: This action is built to add some HTML code before the menu.
// This function adds Buy Now Button Before the Menu
function function_name() {
echo "

  • "; // Change this html.
    }
    add_action( 'uabb_advanced_menu_before', 'function_name' );
    Action: uabb_advanced_menu_after
    Description: This action is built to add some HTML code after the menu.
    // This function adds Buy Now Button After the Menu
    function function_name() {
    echo "

  • "; // Change this html.

    }
    add_action( 'uabb_advanced_menu_after', 'function_name' );

    Module: Price Box

    Action: uabb_price_box_button
    Description: This action is built to add custom HTML code in place of price box button. This is helpful when one needs to add custom button code. Parameter to this is $box_id which is column number and index starts from 0.
    // This function add custom button in price box column
    function function_name( $box_id ) {

    if( $box_id == 0 ) {
    echo '';
    }
    }
    add_action( 'uabb_price_box_button', 'function_name', 10, 1);
    Need more actions? We』ll keep updating this post.

    How do license upgrades work?

    How do license upgrades work?

    Upgrade to Lifetime:
    Customers need to pay only the difference amount.
    Example – If a user wants to upgrade from Ultimate Addons ($69 / Year) to Ultimate Addons ($249 / Lifetime), he will have to pay only $180 ($249 – $69)
    That』s about it

    Upgrade to Annual:
    In case if you upgrade to annual license, the original date of license expiry is considered, regardless of the date of upgrade. The amount you will be charged will be based on the price difference and the time left in your current subscription before renewal.
    Example: A customer purchased an annual license of Ultimate Addons ($69 / Year) on January 1, 2017. On July 1, 2017 the customer upgrades his license to Astra Growth Bundle ($249 / Year). The price difference is $180 and there are 6 months left in his current subscription period. The customer will pay $90 to upgrade. On January 1, 2018, the subscription will renew and the customer will pay the license renewal amount and own an active license key until January 1, 2019.
    The expiration date of the license will not change; an upgraded license will still expire on the original expiration date whether prorated or not.

    How to Upgrade?
    Just visit the upgrades page on our store to see your available options.
    Have a questions? Get in touch, We will be happy to help!

    How to create Google API key in Google Maps module

    How to create Google API key in Google Maps module

    Google has recently launched the Google Maps Platform to manage the maps used on your websites.
    With this launch, the process to get Google Maps API key has changed.
    From June 11, 2018, it is mandatory to enable the billing account with a credit card/ bank account details and have a valid API key for all projects.
    Do I need to pay anything to use a new API key?
    Not initially! After creating a billing account in the Google Maps Platform, you will gain access to your $200 of free monthly usage. After that, the charges will be applied as per the standard rates decided by the Google Maps Platform.
    Here is an article that shows how to enable billing account and get a new API key. Once you generate an API key, make sure to update UABB Google Map API option with the new API key. Following are the steps –
    Step 1 – Follow this link in order to generate your API key. Click GET STARTED button.
    Select Maps from the list and click to CONTINUE.
    Step 2 – Create a new project or select one from the existing ones. Click Next.
    Step 3 – To CREATE BILLING ACCOUNT, select the country. Click Confirm.
    Step 4 – Add Customer info.
    Step 5 – Choose the Payment method and add payment details. Click Submit and enable billing.
    Step 6 – Select website from the Account Overview page.
    Step 7 – Choose Maps Javascript API
    Step 8 – Enable maps for your website.
    Step 9 – Choose APIs credentials.
    Step 10 – Select API Key option.
    Step 11 –  Copy the generated API key.
    Step 12 – Select HTTP referrers for your site.Step 13 – You can see map usage on your account overview page.

    How to add Google Map API key in UABB』s Google Maps option?

    From the WordPress dashboard, navigate to Settings -> UABB -> General Settings > Google Map API Key.
    Once you are done with the above steps, then you can use the google map element.
    Note: These steps are also applied to the users who have the google map issue on their site, and getting this error  in console: 「Google Maps API error: MissingKeyMapError「

    How to Open a Specific Element of Advanced Accordion from a Specific Page?

    How to Open a Specific Element of Advanced Accordion from a Specific Page?

    It is possible to link individual elements of 「Advanced Accordion」 on a particular page from specific pages.
    First, you would need to add an ID to the 「Advanced Accordion」 module. Here is a screenshot that will help you add an ID in the Advanced tab of the module.

    The elements of the Module are numbered from 0. If you want to open the 3rd element you will have to use elements』 index which is 「2」 after the URL.
    Add 「/#accord-2」 after the page URL you are redirecting the user to
    Eg: You have a redirect button on Page 1 and wish to redirect users to the third element in an Advanced Accordion module on Page 2.
    The URL you need to enter for the button should be something like :
    「URL-of-page-2/#accord-2」
    Refer the below gif, which shows that the third element is opened as we clicked on the button which that redirects us to the page having the Accordion.

    Similarly, you can append the index of the last element which is to be opened from different pages.

    How to Open a Specific Element of Advanced Tab from a Specific Page?

    How to Open a Specific Element of Advanced Tab from a Specific Page?

    It is possible to link individual elements of 「Advanced Tab」 on a particular page from specific pages.
    First, you will need to add an ID to the 「Advanced Tab」 module. Here is a screenshot that will help you add an ID in the Advanced tab of the module.

    The elements of the module are numbered from 0. If you want to open the 3rd element you will have to use elements』 index which is 「2」 after the URL.
    Add 「/#advanced-tab-2」 after the page URL you are redirecting the user to.
    Eg: You have a redirect button on Page 1 and wish to redirect users to the third tab within an Advanced tab module on Page 2.
    The URL you need to enter for the button should be something like :
    「URL-of-page-2/#advanced-tab-2」
    Refer the below gif, which shows that the third element is opened as we clicked on the button which redirected us to the concerned page.

    Similarly, you can append the index of the last element which is to be opened from different pages.

    Fix for – The PCLZIP_ERR_BAD_FORMAT (-10) Error

    Fix for – The PCLZIP_ERR_BAD_FORMAT (-10) Error

    The PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature error is caused by one of two things as below:
    Case 1: There』s a problem with the zip file or it』s format.
    It』s possible that the plugin zip file became corrupted when it was downloaded. Try downloading it from your account on our store and install (or update manually)
    Case 2: Server Disk Space Issue
    If you still receive the same error while trying to install the zip manually, then it may mean that there』s not enough storage space on your host for WordPress to be able to unzip and upload the contents of the file. To confirm this, try to upload other files to your site, such as an image, video or other plugin. If you』re not able to upload large files, then storage space is likely the issue.
    You can either remove some files (backups or themes & plugin that you』re not using) or contact your web host to increase your storage capacity.

    Introducing: Content Toggle Module

    Introducing: Content Toggle Module

    Available from version 1.8.0
    Content Toggle module helps you display two versions of a content, saved row, saved module and saved page templates within a single section allowing users to toggle between them using the toggle button.
    Content 1 Tab:
    You can add the Heading title, content or you can change the section as saved row, saved templates or saved modules you can use Saved Row, Saved Modules, Page Templates created before.

    Content 2 Tab:
    Like the content 1 tab, here too you can add the content you need.

    Style Tab:
    You can choose which content you wish to display by default. You can change the switcher style( Round 1, Round 2, Rectangle, Label Box ). You can change the size, colors for switcher and controller. 

    Heading tag will allow you to add HTML tags, Alignments, Layout, Background Color, Border Radius, Padding for heading. 

    Using the Content Tab you can add the Background Color, Border Radius, Padding for content. You can also add spacing between headings and buttons and in content and headings.

    Typography Tab

    Using this tab you can change the Heading 1, Heading 2, Content 1 and Content 2 typography like Font Family, Font Size, Line Height, Color, Text Transform, and Letter Spacing.

    How to use Row Background Gradient?

    How to use Row Background Gradient?

    Have you ever wanted to use the gradient effect for row backgrounds in your website? The Ultimate Addons for Beaver Builder introduces this feature in version 1.6.0.
    You can use this feature by following the steps mentioned below.
    1. Open the Row settings window by clicking on the settings icon as shown in the image below.

     
    2. Select Ultimate Gradient Option seen in the dropdown across the background type options.

     
    3. After selecting Ultimate Gradient under background type, you will see a new section named Gradient. You can now change the gradient type, color and a lot more to make your row look beautiful.

     
    If you are unable to see the Ultimate Gradient option under the background type options of row settings, make sure you have enabled this extension under Dashboard -> Settings -> UABB. Please refer to the article about enabling / disabling UABB modules. You can enable extensions too!

    Where can I find row sections?

    Where can I find row sections?

    Available from Version 1.3.0
    UABB comes with a huge template library. For better user experience, we have categorized all the section templates according to their purpose, viz. Call to action, Heading, Content, Team, Contact etc.
    In order to be able to access these section templates, you have to install the category you wish to use from the Template Cloud.
    Here is an article that will help you install your desired section category from the Template Cloud.
    1. Make sure you have installed the desired category from the Template Cloud.
    Go to Settings -> UABB -> Template Cloud -> Sections -> Install the category you wish to use.

     

     
    2. Check the status of UABB Addon』s UI Design setting in WP Dashboard -> Settings -> UABB -> General Settings

    If UABB Addon』s UI Design setting is enabled – You will find row section under Sections panel –

    If UABB Addon』s UI Design setting is disabled – You will find row section under Add Content panel –

    Note: In case you are using Beaver Builder 2.0, you』ll see the row sections added under the Row tab of the Page Builder.

    Modules not working suddenly / content missing from the page / content not aligned properly

    Modules not working suddenly / content missing from the page / content not aligned properly

    It often happens that the Modules』 content is not displayed as expected. For example in the Google Map module, the content goes missing, or in case of Testimonials module, the slider won』t work, or in Info List the Icons are missing / are not aligned properly.
    At such times, you can try and clear the Page Builder』s Cache which is found in Dashboard -> Settings -> Page Builder -> Tools -> Cache -> Clear Cache.
    In most of the cases, this resolves the issue. But, it is also recommended to clear your browser』s cache.
    You can try checking if the same issue occurs in the Browser』s Incognito mode or on different devices.
    If this issue cannot be found on other devices, just to be sure you can try and follow the step mentioned here DIY Troubleshooting. This step is necessary as it will rule out any chances wherein you have installed any new plugin and it is interfering with the CSS or Javascript of our module.
    If the issue still persists, even after following the above mentioned steps, or if you have any further questions, you can Get in touch. We will be happy to help!