LoginCreate an Account

Documentation for Sneeit Framework – Plugin for WordPress Theme Back-end

We have a very detail documentation for Sneeit Framework – Plugin for WordPress Theme Back-end with 14 sections, 20 sub sections, 7 images, 42 paragraphs and 3887 words

Important The following notes will apply for whole document scope:

  1. All IDs using in declarations in all places must be different and unique, we will example with casual id (ex: shortcode_id_01) but you can input any ID you want.
  2. When talking about fields (or controls or settings), you can understand they will be declared following: field declaration by types.
  3. All title (label), description and icon (except shortcode) properties are OPTIONAL

Licensing

The plugin is under ThemeForest's Regular License and Extended License, please read properly and make sure you will not violate those license.

Important If you want to integrate Sneeit Framework in a theme for SALE purpose, you must have In-Stock License. In-Stock License is also Extended License ($110) but with a register into In-Stock form. That separate "In Stock" license is required for each of your themes that are for sale. You have a WEEK after releasing your theme to fill the form.
In-Stock License Register Form

Integrating

Copy Plugin To Your Theme Folder

Extract plugin package then copy sneeit-framework.zip to the folder /plugins under your theme folder:

Add TGM class

We will use TGM class to required users must install and active Sneeit Framework for your theme to work with. You can learn this class and integrate as the way you want or use our example code (copy and past into your functions.php). Here is the plugin information for TGM class:

  • Plugin Name: Sneeit Framework
  • Plugin Slug: sneeit-framework
  • Plugin Source: get_template_directory() . '/plugins/sneeit-framework.zip'
  • Plugin Required: true

Shortcodes

An example may be easier for you to get the idea of shortcode declaration:

do_action('sneeit_setup_shortcodes', array(
    'declarations' => array(
        'shortcode_id_01' => array(
            'title' => esc_html__('Shortcode 01 Title', 'text-domain') ,
            'description' => esc_html__('Shortcode 01 Description', 'text-domain') ,
            'icon' => 'fa-home', /* can also use dashicon */
            'display_callback' => 'shortcode_id_01_callback',

            /*Your HTML can be only image URL*/
            'tooltip' => 'Your HTML Code',

            /*optional, a shortcode can have no field, read more in field declarations*/
            'fields' => array(
                'sc_01_field_01' => array(
                    'label' => esc_html__('My Field Label', 'text-domain') ,
                    'type' => 'text',
                    'default' => 'This is default value field'
                ) ,
            )
        ) ,
        /*example of a nested shortcode [tabs][tab id="..."]...[/tab][tabs]*/
        'tabs' => array(
            'icon' => 'welcome-widgets-menus',
            'display_callback' => 'my_tabs_shortcode_display',
            'nested' => array(
                'tab' => array(
                    'fields' => array(
                        'my-tab-title' => array() ,
                        'my-tab-content' => array(
                            'type' => 'content'
                        )
                    )
                )
            )
        )
    )
);

 

Page Builder

Add below code to your functions.php:

do_action('sneeit_setup_page_builder');

And make sure you declared a shortcode with name column (fields for this shortcode are optional) in shortcode declration above.

Customizer

An example may be easier for you to get the idea of customizer declaration:

do_action('sneeit_setup_customizer', array(
    'panel_id_01' => array(
        'title' => esc_html__('Panel 01 Title', 'text-domain') ,
        'description' => esc_html__('Panel 01 Description', 'text-domain') ,
        'icon' => 'fa-menu', /*optional*/
        'sections' => array(
            'section_01' => array(
                'title' => esc_html__('Section 01 Title', 'text-domain') ,
                'description' => esc_html__('Section 01 Description', 'text-domain') ,
                'settings' => array(
                    'setting_01' => array(
                        'label' => esc_html__('Setting 01 Label', 'text-domain') ,
                        'description' => esc_html__('Setting 01 Description', 'text-domain') ,
                        'type' => 'text',
                        'default' => ''
                    ) ,
                )
            )
        )
    ) ,
    /* a section without panel parent */
    'section_02' => array(
        /* section must have settings to display */
        'settings' => array(
            'setting_02' => array() ,
        )
    )
));

Theme Options

The follow code add a theme option page which you can access from: Appearance / Theme Options:

do_action('sneeit_theme_options', array(
    'menu-title' => esc_html__('Theme Options', 'text-domain'), 
    'page-title' => esc_html__('Theme Options', 'text-domain'),
    'html-before' => '', /* Show before theme options content but after page title */
    'html-after' => '', /* Show after theme options content */
    'declarations' => $theme_option_declaration_array,
));

$theme_option_declaration_array is similar with the array in Customizer declaration above. Both theme options and customizer will use get_theme_mod() and set_theme_mod() function to process setting IDs.

1-Click Installation

At first, we will add a new page "Demo Installation" under Appearance menu.

do_action('sneeit_demo_installer', array(
    'menu-title' => esc_html__('Demo Installation', 'text-domain'), 
    'page-title' => esc_html__('Demo Installation', 'text-domain'),
    'html-before' => '',
    'html-after' => '',
    'declarations' => array(),
));


Click Build a Demo button, choose OK. Waiting until the percent bar go to 100% and show Done status.

Now, the framework will show you a list of data files with download links. You must download those files and then uploading them to any storage service which allow direct download.

In this tutorial, we will use Google Drive to upload those files.

With each file in Google Drive, to get direct download link, just select the file and right click then choosing "Share".
In share window, click Get shareable link button and then copy the link in Link sharing on field then paste it in new browser tab to access.
Now, in download window, click Download button (usually displaying as a down arrow). The browser will turn you to a new tab and show you the real direct download link in browser address bar of the tab. Do the same with other files to get all direct download links and update to the declaration code like below:

do_action('sneeit_demo_installer', array(
    'menu-title' => esc_html__('Demo Installation', 'text-domain'), 
    'page-title' => esc_html__('Demo Installation', 'text-domain'),
    'html-before' => '',
    'html-after' => '',
    'declarations' => array(
        'your-demo-id-01' => array(
            'name' => esc_html__('Demo Name 01', 'text-domain'), 
            'screenshot' => 'your-01-demo-screenshot-375x255.jpg', /*optional*/
            'demo' => 'url-to-your-demo-or-preview-website', /*optional*/
            'files' => array(
                'direct-download-link-1-01',
                'direct-download-link-1-02',
                'direct-download-link-1-03'
            )
        ),
        'your-demo-id-02' => array(
            'name' => esc_html__('Demo Name 02', 'text-domain'),
            'files' => array(
                'direct-download-link-2-01',
                'direct-download-link-2-02',
                'direct-download-link-2-03'
            )
        )
    )
));

Sidebars

Define Fixed Sidebars

It's easier for you to understand with an example:

do_action('sneeit_setup_sidebars', array(
    'sidebar_id_01' => array(
        'id'            => 'optional', /*if miss, use sidebar_id_01*/
 'class'         => 'optional', /*whatever*/
        'name'          => esc_html__('Sidebar 01 Name', 'text-domain'),
        'description'   => esc_html__('Sidebar 01 Description', 'text-domain'),        

        /*$1 and $2 will be replaced by id and class above */
        'before_widget' => '<li id="%1$s" class="widget %2$s">', 
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>'
    ),

    'sidebar_id_02' => array(),
));

To show sidebar on front page:

do_action('sneeit_display_sidebar', array(
    'id' => '',
    'class' => '',
    'before_sidebar' => '',
    'after_sidebar' => ''
));

Support Custom Sidebars

do_action('sneeit_support_custom_sidebars', array(
    'class'         => 'your-custom-sidebar-class',
    'before_widget' => '',
    'after_widget'  => '',
    'before_title'  => '',
    'after_title'   => ''
));

Widgets

It's easier for you to understand with an example:

do_action('sneeit_setup_widgets', array(
    'widget_id_01' => array(
        'title' => esc_html__('Widget 01 Title', 'text-domain'),
        'description' => esc_html__('Widget 02 Description', 'text-domain'),
        'display_callback' => 'widget_01_function_callback',
        'fields' => array(
            'widget_01_field_01' => array(
                'label' => esc_html__('Widget 01 Field 01 Label', 'text-domain') ,
                'type' => 'text',
                'default' => ''
            ),
            
            /*minimal declare*/
            'widget_01_field_02' => array(),
        )
    ),
    
    /*minimal declare*/
    'widget_id_02' => array(
        'display_callback' => 'widget_02_function_callback',
        'fields' => array(
            'widget_02_text' => array(),
            'widget_02_wp_editor' => array(
                'type' => 'content'
            )
        )
    )
));

Callback function must have following format:

function name_of_display_callback_function( $args, $instance, $widget_id, $widget_declaration ) {}

Menus

Menu Locations

do_action('sneeit_setup_menu_locations', array(
    'menu_location_01' => esc_html__('Menu Location 01 Name', 'text-domain'),
    'menu_location_02' => esc_html__('Menu Location 02 Name', 'text-domain'),
);

Menu Fields

do_action('sneeit_setup_menu_fields', array(
    'menu_field_id_01' => array(
        'label' => __('Menu Field 01 Label', 'text-domain'),
        'type' => 'text',
        'default' => ''
    ),
    'menu_field_id_02' => array(),
));

Menu Compact

This feature will help your theme build up a complex menu design with just single lines of code.

do_action('sneeit_setup_compact_menu', array(
    'your-menu-location' => array( /* <-- theme_location="" the="" extend="" class="" of="" container="" tag="" container_class=""> '', 
        /* the extended id of container tag, 
         * if missing, use the theme location id */        
        'container_id' => 'sneeit-compact-menu-'.$theme_location,
        
        /*  */
        'main_level_icon_down'  => 'fa-angle-down',
        'sub_level_icon_down' => 'fa-angle-right',

        /* MEGA MENU CONTENT */
        /* function to display mega content when ajax sent*/
        'mega_block_display_callback' => '',        

        /* sticky menu */
        /* disable, up (show when scroll up), down (show when scroll down), always */
        'sticky_enable' => 'disable',
        /* the logo of sticky menu, stay at beginning of menu*/
        'sticky_logo' => '',
        /* the logo of sitkcy menu for retina screens*/
        'sticky_logo_retina' => '',
        
        /* ! IF HOLDER OR SCROLLER IS CSS DISPLAY NONE, STICKY WILL STOP THEN */
        /* the elements that will be clone to hold the position when floating
         * sneeit will base on it's height to make a fake div to hold position */
        'sticky_holder' => '',
        /* the elements that will be float*/
        'sticky_scroller' => '',
        
        /* MOBILE MENU */    
        /* enable or disable mobil menu clone */
        'mobile_enable' => true,
        /* the container where the mobile menu will be append to */
        'mobile_container' => '.fn-mob-menu-box'
    )    
));

Post Meta Boxes

do_action('sneeit_setup_post_meta_box', array(
 'post_meta_box_id_01' => array(
        'title' => esc_html__('Post Meta Box 01 Title', 'text-domain'),
        'description' => esc_html__('Post Meta Box 02 Description', 'text-domain'),
  'context' => 'advance', /*other positions: normal, side*/
        'fields' => array(
            'post_meta_box_01_field_01' => array(
                'label' => esc_html__('Post Meta Box 01 Field 01 Label', 'text-domain') ,
                'type' => 'text',
                'default' => ''
            ),
            
            /*minimal declare*/
            'post_meta_box_01_field_02' => array(),
        )
    ),
    
    /*minimal declare*/
    'post_meta_box_id_02' => array(
        'fields' => array(
            'post_meta_box_02_text' => array(),
            'post_meta_box_02_wp_editor' => array(
                'type' => 'content'
            )
        )
    )
));

User Meta Boxes

do_action('sneeit_setup_user_meta_box', array(
 'user_meta_box_id_01' => array(
        'title' => esc_html__('User Meta Box 01 Title', 'text-domain'),
        'description' => esc_html__('User Meta Box 02 Description', 'text-domain'),  
        'fields' => array(
            'user_meta_box_01_field_01' => array(
                'label' => esc_html__('User Meta Box 01 Field 01 Label', 'text-domain') ,
                'type' => 'text',
                'default' => ''
            ),
            
            /*minimal declare*/
            'user_meta_box_01_field_02' => array(),
        )
    ),
    
    /*minimal declare*/
    'user_meta_box_id_02' => array(
        'fields' => array(
            'user_meta_box_02_text' => array(),
            'user_meta_box_02_wp_editor' => array(
                'type' => 'content'
            )
        )
    )
));

Field Declarations by Types

General Declaration

'your_field_id' => array(
    'label' => esc_html__('Your Field Label', 'text-domain'),
    'description' => esc_html__('Your Field Description', 'text-domain'),
    'default' => 'the_default_value',
    
    /* check the list below */    
    'type' => 'your_field_type',
    
    /* css out only affect in Customizer declare */
    'cssout' => '.selector{property:%s}.ex{width:%spx}',
    
    /* choices available for following types: 
    - radio, 
    - visual, 
    - select / selects, 
    - tag / tags, 
    - category / categories, 
    - sidebar / sidebars, 
    - user / users, 
    */
    choices => array(
        /* 
        - the value can be blank
        - the label can be HTML tags (ex: image tag) if the type is VISUAL
        */
        'choice_o1_value' => esc_html__('Choice 01 Label', 'text-domain'),
        'choice_o2_value' => esc_html__('Choice 02 Label', 'text-domain'),
        'choice_o3_value' => esc_html__('Choice 03 Label', 'text-domain'),
    ),
    
    /* show dependencies 
    COMPARISON_OPERATOR: == > , < , >= , <=, !=
    BOOLEAN_OPERATOR: ||, &&
    */
    'show' => array(
        array('any_field_id', 'COMPARISON_OPERATOR', 'value_to_check'),
        'BOOLEAN_OPERATOR',
        array('any_field_id', 'COMPARISON_OPERATOR', 'value_to_check'),
        /*continue unlimited*/
    ),
    'hide' => array(
        array('any_field_id', 'COMPARISON_OPERATOR', 'value_to_check'),
        'BOOLEAN_OPERATOR',
        array('any_field_id', 'COMPARISON_OPERATOR', 'value_to_check'),
        /*continue unlimited*/
    ),
    'heading' => esc_html__('Show a heading before this control', 'text-domain'),
)

List of Field Types

  • text: return single line of text
  • selectradio, visualcategorytag, usersidebar: return the selected value
  • checkbox: return 'on' if checked, and '' (blank) if not
  • selectscategoriestagsuserssidebars: return list of selected values (ids) as string, seperated by comma (,)
  • content, textarea: return multiple lines of text
  • color: return color code in HEX format (ex: #ffffff)
  • media, image: return URL of file
  • range: return a number in range
  • font-family: return font_family
  • font: return font as css format: font_style font_weight font_size font_family
  • box-padding, box-padding-px,  box-margin, box-margin-px, box-position, box-position-px: return 4 number which inputted by user following the order of padding / margin / postion css values.

Utilities

Envato

You can create a page to allow user can input their Username and API Key to validate their purchase

do_action('sneeit_envato_theme_activation', array(
    'menu-title' => esc_html__('Theme Activation', 'text-domain'), 
    'page-title' => esc_html__('Theme Activation', 'text-domain'),
    'html-before' => '',
    'html-after' => ''
));

Then using below filter (return true/false) to check if user already validated or not (can be combined with above code in html-before and html-after to display a right thing):

apply_filters( 'sneeit_envato_theme_activation_check', 0 )

IE HTML5

To support HTML5 for IE, add below hook to functions.php

do_action('sneeit_support_ie_html5');

Blogger Blogspot Body Class

To add Blogger / Blogspot body class (show page type similar Blogger) to WordPress body tag, use below hook:

do_action('sneeit_apply_blogspot_body_class');

Script / Style Libraries

Font Awesome Icons

Enqueue font-awesome CSS library for front-end

do_action('sneeit_support_font_awesome');

You can also use below filter to get the right Font Awesome icon tag

$icon_tag = apply_filters('sneeit_get_font_awesome_tag', 'icon-code-in-any-format');

Thread Comments

Enqueue thread comment JavaScript library for singular:

do_action('sneeit_support_thread_comments');

Add inline style

Apply style tag to insert CSS inline by using below filter (we use this to skip theme check errors because it not allow inline style)

$css_code = apply_filters('sneeit_inline_style', $css_code);

Optimize Site Title

Auto optimize site title for SEO:

do_action('sneeit_optimized_wp_title');

Social Counter Loader

User below filters to get number social counter for certain networks. Return -1 if can not find: Facebook:

$count = apply_filters('sneeit_number_facebook_likes', 'https://www.facebook.com/Sneeit-622691404530609/');

Twitter:

$count = apply_filters('sneeit_number_twitter_followers', 'https://twitter.com/tiennguyentweet');

Google+:

$count = apply_filters('sneeit_number_google_plus_followers', 'https://plus.google.com/u/0/+TienNguyenPlus');

Pinterest:

$count = apply_filters('sneeit_number_pinterest_followers', 'https://www.pinterest.com/tvnguyen/');

Behance:

$count = apply_filters('sneeit_number_behance_followers', 'https://www.behance.net/tiennguyenvan');

Youtube:

$count = apply_filters('sneeit_number_youtube_subscribers', 'https://www.youtube.com/channel/UCMwiaL6nKXKnSrgwqzlbkaw');

LinkedIn:

$count = apply_filters('sneeit_number_linkedin_connections', 'https://vn.linkedin.com/in/tien-nguyen-van-4982736b');

You can also input more parameters for above filter to optimize something like cache time and remote time out. Example:

$count = apply_filters('sneeit_number_facebook_likes', array(
    'url' => 'https://www.facebook.com/Sneeit-622691404530609/',
    'cache_time' => 86400, /*number of seconds to wait to reload a site. Default is 1 day*/
    'remote_timeout' => 50 /*number of seconds to wait when loading a site. Default is 50 seconds*/
);

Important Please don't put all in front-end without using ajax, that can slow down your theme at first time of load (when social counter never load before and has no cache).

BreadCrumbs

Displaying BreadCrumbs which is optimized for Google SEO:

do_action('sneeit_breadcrumbs', array(
        'before_item' => '',
        'after_item' => '',
        'item_class' => array(), 
        'before_text' => '', 
        'after_text' => '',
        'text_class' => array(),
        'separator' => '>',
        'home_text' => '',
        'show_current' => TRUE,
        'before_current' => '',
        'after_current' => '',
        'before_current_text' => '',
        'after_current_text' => '',
        'current_class' => ''
    )
),

Place everywhere at front-page

Rating Box

To support rating input from back-end (post meta box) and front-end (include user rating by ajax), use blow hook:

do_action('sneeit_review_system', array(
    /* meta box id, also using to save / get data 
     * optional, default: post-review
     */
    'id' => 'post-review', 
    
    'title' => esc_html__('Review / Rating Box', 'text-domain'),
    'description' => esc_html__('Input your rating review', 'text-domain'),
    
 /* optional, default: array('start', 'point', 'percent')  */
    'type' => array('star', 'point'), 
 
 /* 
 optional, what post type will support the meta box, 
 default :array('post', 'page')
 */
    'post_type' => array('post'), 
 
 /*
 optional, position of post meta box (advance, side, normal)
 default: advance
 */
    'context' => 'advance', 
    
 /*
 option, support extra input fields for rating feature, 
 default: array('summary', 'conclusion', 'visitor' ) 
 'visitor' is mean support visitor rating 
 */
    'support' => array('conclusion','visitor'),
    
 /*optional, order of metabox, default: default*/
    'priority' => 'default', 
    
    'display' => array(
  /* optional, use this hook to display
  the rating box any where you want
  but must place hook inside post loop, 
  default: the_content */
        'hook' => 'my_display_rating_hook', /*ex: do_action('my_display_rating_hook')*/
  
  /* required: function to display HTML review box at your hook */
        'callback' => 'my_display_rating_box_callback', 
        
        /* modify template: classes and texts */
        'class_star_bar' => '',
        'class_star_bar_top' => '',
        'class_star_bar_bottom' => '',
        
        'class_line_bar' => '',
        'class_line_bar_top' => '',
        
        'class_average_value' => '',
        'class_average_value_text' => '',
        'class_average_value_canvas' => '',
        'class_average_value_star_bar' => '',
        'class_average_value_star_bar_top' => '',
        'class_average_value_star_bar_bottom' => '',
            
        'class_item' => '',
        'class_item_name' => '',
        'class_item_user' => '',
        'class_item_author' => '',
        'class_item_user_note' => '',
        
        /*text for translate*/
        'text_no_user_vote' => esc_html__('Have no any user vote', 'text-domain'),
        'text_n_user_votes' => esc_html__('%1$s user %2$s x %3$s', 'text-domain'),
        'text_vote' => esc_html__('vote', 'text-domain'),
        'text_votes' => esc_html__('votes', 'text-domain'),
        
        'text_click_line_rate' => esc_html__('Hover and click above bar to rate', 'text-domain'),
        'text_click_star_rate' => esc_html__('Hover and click above stars to rate', 'text-domain'),
        'text_rated' => esc_html__('You rated %s', 'text-domain'),            
        'text_will_rate' => esc_html__('You will rate %s', 'text-domain'),
        'text_submitting' => esc_html__('Submitting ...', 'text-domain'),
        'text_browser_not_support' => esc_html__('Your browser not support user rating', 'text-domain'),
        'text_server_not_response' => esc_html__('Server not response your rating', 'text-domain'),
        'text_server_not_accept' => esc_html__('Server not accept your rating', 'text-domain'),
        
        // backend
        'text_is_product_review' => esc_html__('Is product review?', 'text-domain'),
        'text_no' => esc_html__('No', 'text-domain'),
        'text_star' => esc_html__('Star', 'text-domain'),
        'text_point' => esc_html__('Point', 'text-domain'),
        'text_percent' => esc_html__('Percent', 'text-domain'),
        'text_add_star_criteria_for_product' => esc_html__('Add star criteria for this product', 'text-domain'),
        'text_add_point_criteria_for_product' => esc_html__('Add point criteria for this product', 'text-domain'),
        'text_add_percent_criteria_for_product' => esc_html__('Add percent criteria for this product', 'text-domain'),
        'text_criteria_name' => esc_html__('Criteria name', 'text-domain'),
        'text_criteria_value' => esc_html__('Criteria value', 'text-domain'),
        'text_1_star' => esc_html__('%s star', 'text-domain'),
        'text_n_stars' => esc_html__('%s stars', 'text-domain'),
        'text_n_stars' => esc_html__('%s stars', 'text-domain'),
        'text_add_new_criteria' => esc_html__('Add New Criteria', 'text-domain'),
        'text_input_summary' => esc_html__('Input Review Summary', 'text-domain'),
        'text_input_conclusion' => esc_html__('Input Review Conclusion', 'text-domain'),
        'text_allow_visitor' => esc_html__('Allow Visitor Review', 'text-domain'),
        
        'text_n_user_vote_x_score' => esc_html__('%1$s user %2$s x %3$s', 'text-domain'),
        
        /*decoration*/
        'star_icon' => '★', /*default: ★*/
    )
));

The callback function must be followed the below format:

function magone_display_rating_box($review) {
    var_dump($review);
}

Contact Form

Can use it in your shortcode:

$contact_form = add_filter('sneeit_contact_form', array(
    'target_email' => '',
    'enable_name' => true,
    'enable_url' => false,
    'label_name' => __('Name:', 'sneeit'),
    'label_email' => __('Email:  *', 'sneeit'),
    'label_url' => __('Website:', 'sneeit'),
    'label_content' => __('Content:', 'sneeit'),
    'label_submit' => __('Send Content', 'sneeit'),
    'id_form' => 'sneeit-contact-form',
    'id_submit' => 'sneeit-contact-submit',
    'class_submit' => 'sneeit-contact-submit',
    'message_successful' => __('We received your contact. Thank you!', 'sneeit'),
    'message_required_email' => __('The email is requried', 'sneeit'),
    'message_required_content' => __('The content is requried', 'sneeit'),
    'message_short_content' => __('Your content is too short to submit', 'sneeit'),
    'min_content_length' => 20
));

Vimeo Utilities

Get Vimeo ID:

$vimeo_video_id = apply_filters('sneeit_get_vimeo_id', $content);

Get Videmo Player Code

$vimeo_video_player_code = apply_filters('sneeit_get_vimeo_player', $content);

Youtube Utilities

Get Youtube ID:

$youtube_video_id = apply_filters('sneeit_get_youtubeo_id', $content);

Get YouTube Player Code:

$youtube_video_player_code = apply_filters('sneeit_get_youtube_player', $content);