Building Your Own Widget

This guide explains how to create custom theme blocks (widgets) for QuickBuildWP Elementor Layout Toolkit.

1. Create a New Theme Block

Step 1: Folder Structure

1. Navigate to the following directory:

   wp-content/plugins/quickbuildwp/widgets/layout-toolkit/templates

2. Create a new folder corresponding to the block type you want to create. Below is a list of supported folders:

Folder Types:

• Block: For common blocks
• Filter: For filter fields layout
• Footer: For footers
• Header: For post-specific headers
• HeroHeader: For the homepage header
• Member: For the Member Area blocks
• Navbar: For the site navigation bar
• Package: For WooCommerce product packages
• Post: Post-specific blocks to be displayed on the post page
• Posts: For custom field group posts
• Taxonomies: For categories, tags, and other custom taxonomies
• Taxonomy: For single taxonomy layouts
• Testimonial: For testimonials as custom post types
• User: For user-specific information
• Wc_Order: For WooCommerce single orders
• Wc_Orders: For multiple WooCommerce orders

Example:

If you are designing a Banner Slider, create a folder named slider inside the block folder.

Step 2: Create Files Inside the Folder

1. PHP File: Create _slider.php (for PHP and HTML code).
2. CSS File: Create _slider.css (for custom styles).
3. JS File: Create _slider.js (for JavaScript functionality).

2. Structure of the PHP File (_slider.php)

Example File Format:

<?php
/*
Author: QuickBuildWP
Title: Slider Template
Description: This is a banner slider template.
Sections: [
    {"name": "Section - Header", "value": "header"},
    {"name": "Section - Title", "value": "heading"},
    {"name": "Section - Content", "value": "html_text"},
    {"name": "Section - Dynamic", "value": "dynamic"}
]
Default: {
	"slider_settings": {}
}
*/
?>

<div class="slider-wrapper">
    <?php if (!empty($section['title'])): ?>
        <h2><?php echo esc_html($section['title'][0]['heading']); ?></h2>
    <?php endif; ?>
</div>

Comments play a vital role in QuickBuildWP widgets. Your widget will work only if the required comments are properly included in the widget file.

Key Comments Breakdown:

• Author: Your name or company.
• Title: The name of the template (e.g., Slider).
• Description: A brief description of the block.
• Sections:  These are key parts of your widget. Design your widget using different sections to reuse it across multiple posts or locations.
• Default:  When you use this widget in your template, save its settings using the QuickBuildWP Layout Toolkit. The default block holds that setting for your users so that they can restore it and have the same layout in their theme.

3. Customization Options

Dynamic Field Integration:

Please go through our existing widgets for the usage of different sections. Use conditional fields and dynamic data integration:

if (!empty($section['title'])) {
    echo '<h2>' . esc_html($section['title'][0]['heading']) . '</h2>';
}

4. Supported Fields by Folder Type

This table lists available fields for different QuickBuildWP widget folders based on the case statements, explaining each field's purpose in a clear and compact format.

Folder Type	Field	Description
__navbar, __footer	brand	Displays the site’s brand name/logo
	phone	Shows contact phone number
	email	Displays contact email address
	address	Shows company address
	shortcode	Runs a WordPress shortcode
	__field	Adds a dynamic field
	__condition	Adds conditional logic fields
	__background	Sets background properties
	__text_block	Inserts a customizable text block
	__social	Displays social media links
	__taxonomy	Displays taxonomy terms
	__menu	Displays a WordPress menu
	__link	Adds clickable links

Folder Type	Field	Description
__member	brand	Shows member-related brand info
	shortcode	Runs custom shortcodes
	__text_block	Inserts member-related text content
	__taxonomy	Displays taxonomy terms for members
	__menu	Adds a menu for member navigation
	__link	Inserts clickable member links

Folder Type	Field	Description
__user	brand	Displays user-specific branding
	shortcode	Adds shortcodes for user details
	__background	Sets background for user profiles
	__text_block	Inserts text for user details
	__link	Adds links to user-related pages

Folder Type	Field	Description
__block	shortcode	Adds a generic shortcode block
	__slider_image	Displays images in sliders
	__text_block	Inserts general text content
	__link	Adds links for site navigation

Folder Type	Field	Description
__heroheader	shortcode	Adds homepage header shortcode
	__field	Inserts dynamic fields in headers
	__slider_image	Displays slider images for headers
	__text_block	Adds customizable text blocks
	__link	Inserts navigation links

Folder Type	Field	Description
product	id	Shows product ID
	title	Displays product title
	excerpt	Shows short product description
	content	Displays detailed product content
	product_image	Shows product image
	product_price	Displays product price
	guid	Adds product link URL
	posted_on	Displays product creation date
	breadcrumb	Adds breadcrumb navigation
	shortcode	Runs a product shortcode
	meta_field	Shows custom product meta field
	cover	Adds cover image for the product

Folder Type	Field	Description
terms	name	Displays term name
	slug	Shows term URL-friendly slug
	description	Adds term description
	count	Displays the number of items linked
	content_link	Adds content link for the term
	meta_field	Displays custom meta fields
	shortcode	Runs a term-related shortcode
	__text_block	Adds customizable text block
	__link	Inserts term-related link

Use this table as a reference when creating custom blocks in QuickBuildWP. Each field serves a specific function, enhancing your site's design and functionality.

5. Adding CSS and JavaScript Files

CSS File (_slider.css):

.slider-wrapper {
    padding: 20px;
    background: #f4f4f4;
}

JavaScript File (_slider.js):

(function($) {
    $(document).ready(function() {
        console.log("Slider initialized");
    });
})(jQuery);

6. Saving and Testing

1. Save the Files: Ensure all files are saved in the correct folders.
2. Testing: Add the block to a page using QuickBuildWP Layout Toolkit.
3. Troubleshooting: Check for missing information or incorrect field configurations if the block doesn’t display.

With this detailed guide, you can build fully customized widgets for QuickBuildWP's Elementor Layout Toolkit.