About

Note before you read this document:

First Sory because my english not good.

In this tutorial, i use 2 terms: "template" & "skin" both of them i made same think.

Created with the Personal Edition of HelpNDoc: Free EBook and documentation generator

Copyright © <Dates> by <Authors>. All Rights Reserved.


Create skin object

Create Object.

Create HW_SKIN instance to class where using skin (ex: in your widget class). You can put in construct method. Note : I recommend to create in class property named $this->skin

<?php

// instance skin, note: if use create instance from class you should use property 'skin'

$this->skin = new HW_SKIN($this,plugin_dir_path(__FILE__),'hw_lct_skins','hwlct-skin.php','skins');

$this->skin->plugin_url = plugins_url('',__FILE__); //set plugin url or url to app that use hw_skin

$this->skin->enable_external_callback = false; //turn off/on external callback

//set group

if($group) $this->skin->set_group($group);

//set resource skin to files such as image

$this->skin->files_skin_folder = 'images1'; //{skins_folder}/images1

// init skin

#$this->skin->init(); //depricated no longer in use

//manage more skin instance from main skin object

$this->skin->create('t1')->files_skin_folder = 'images'; //set skin folder files

$this->skin->create('t2')->files_skin_folder = 'image1'; //set skin folder files

$this->skin->create('t3','group2','hwlct-pagi-skin.php'); //set group & skin name

//get skin instance

$this->skin->get_skin_instance('t1'); // return HW_SKIN object

$this->skin->get_skin_instance('t2');

$this->skin->get_skin_instance('t3');

$this->skin->get_skin_instance('t1')->getSavedCallbacksJs_data(array($this,'get_callbacks_data'));

..

Note: set plugins url from outside class definition where load skins data by member call plugins_url.

Other way to set plugins_url. by creating method callback get_ref_plugin_url in that class has exists ($this->skin). But rarely in use.

class myClass{

function __construct(){

//$this refer to this class instance that maybe exists the method 'get_ref_plugin_url' in which set plugins_url value automatically

$this->skin = new HW_SKIN($this,...);

}

function get_ref_plugin_url(){

return plugins_url(__FILE__);

}

}

Created with the Personal Edition of HelpNDoc: Easy EPub and documentation editor


Skin preview

Create skin object ››

Custom Skin Preview Holder.

Default each skins selector own private skin preview holder next to select tag.

But you absolutely bring it to other place. Bellow is example of custom skin preview:

// enable custom skin preview

$this->skin->custom_skin_preview = true;

// set skin preview id, give element ID you want to place skin preview when select skin in dropdown

$this->skin->set_skin_preview_id('element-ID'); //now make it private

// show skins preview

echo $this->skin->get_skin_preview_screen();

Created with the Personal Edition of HelpNDoc: Create iPhone web-based documentation


Create Skin file

Create skin object ››

Each skin you create either in one folder or just single file But i suggest you should to use folder for holding skin (refer to widget content template).

In skin folder, create php file for entry skin file. Create your skin file with following rules:

1. Set template header data: normally template file use plugin file for default. like this:

/**

* Plugin Name:

*/

- So you also probally change this header info:

$this->skin->set_template_header_info(array(

'name' => 'HWRP Template',

'description' => 'Description',

'author' => 'Author',

'uri' => 'Author URI',

));

Two type of file skin header data already built-in:

/**

* Plugin Name:

*/

Or

/**

* HW Template:

*/

So you can use one either of those for your skin file.

- Skin file can standalone as one file no located in subfolder in all skin folders.

ex: i integrate this plugin for YARPP plugin.

Here is example i extend YARPP template to my skins. Just copy demo yarpp templates into 'themes/your-theme/hw_relatedposts_skins/'.

Modify template header.

<?php

/*

HWRP Template: Simple

Author: hoangweb

Description: A simple example hwrp template.

*/

?><h3>Related Posts</h3>

<?php if (have_posts()):?>

<ol>

<?php while (have_posts()) : the_post(); ?>

<li><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a><!-- (<?php the_score(); ?>)--></li>

<?php endwhile; ?>

</ol>

<?php else: ?>

<p>No related posts.</p>

<?php endif; ?>

2. Coding skin file:

Depend on your plugin.

Created with the Personal Edition of HelpNDoc: iPhone web sites made easy


Skin Setting file

Create skin object ›› Create Skin file ››

Best way to manage skin folder and you should create skin setting file. This file named 'theme-setting.php'. From that file you define any setting for skin using with keep variable name: $theme like this:

create file /theme-setting.php inside skin folder, this contain $theme variable.

// new approarch

$theme['styles'][] = 'style.css';

$theme['scripts'][] = '';

Resource

- Declare css & js files in single skin folder.

// new approach

$theme['styles'][] = 'style.css';

$theme['styles'][] = 'css/'style1.css; //contain in sub folder

//or over array

$theme['styles'] = array('style.css', 'css1.css');

$theme['scripts'][] = 'file1.js';

Template engine

- Setup twig template by set templates folder that tell to twig engine where to find template file.

// twig templates path in current skin. see: plugin hw-hoangweb/skins/langs-switcher/default/hw-mqtrans-skin.php

$theme['templates_folder'] = 'tpl';

Other setting

- You can set custom other params for your purpose:

// other purpose

$theme['scroll_options']['jcarousellite'] = array( //override jcarouse options

'btnNext'=>'.next',

'btnPrev' => '.prev',

'auto' => '800',

'speed' => '1000',

'scroll' =>2,

//'mouseWheel' => true,

//'easing' => 'easeOutBounce',

//'start' => '0',

//'visible'=>10,

'vertical' => true,

);

Hooks/Filter

You can create action or filter in skin file or theme setting file. But you need to load either those file to make sure the hook to be trigger.

* add filter/action in skin file. you remember that once you bind callback to filter with 2 different skin you are using in website, and this filter seem tobe same for both. So in 2 skins will applying all filter added by those skins, to fix issue.

+ in callback has first params saved real-value.

+ in callback has second params saved that value but when load skin file, this will keep permanent along with callback.

see: hw-menu/skins/default

Note:

[+] where load skin file:

$theme['menu'] = $your_real_value;

include($file);

$skin->do_filters($theme['filters'], $theme);

- Set 'filters' param to $theme for theme setting. note: now moved to skin setting file (theme-setting.php) but you still define in skin file.

//register filters for this skin

$theme['filters'] = array(

'wp_nav_menu_items' => array(

'type' => 'filter',

'function' => 'hw_menu_def_add_home_link',

'accepted_args' => 3,

'priority' => 10

)

);

- Define callback function.

//run this hook if current nav_menu enable by hw-menu plugin

if(!function_exists('hw_menu_def_add_home_link')):

function hw_menu_def_add_home_link($items, $args,$theme)

{

//get theme args

if(!isset($theme['do_filters_args_'.__FUNCTION__])) return $items;

$theme = $theme['do_filters_args_'.__FUNCTION__];

$menu = HW_NAVMENU::get_menu_name($args); //get current menu

if($menu != $theme['menu']) return $items; //compare real-value to which value that keep in theme args

$homeMenuItem='<li ><a class="home456546" href="' . home_url('/') . '">'. $args->link_before . 'XX' . $args->link_after . '</a>' . $args->after . '</li>';

/*$menu = HW_NAVMENU::get_menu_name($args);

if (is_front_page()) $class='active';else $class = '';

$homeMenuItem='<li class="' . $class . '">' . $args->before . '<a class="home active" href="' . home_url('/') . '" title="Trang chủ">'. $args->link_before . '' . $args->link_after . '</a>' . $args->after . '</li>';

$items=$homeMenuItem . $items;*/

return $homeMenuItem.$items;

}

endif;

- When load skin setting or skin file where set up the hook belong to each skin. invoke method 'do_filters' to calling hooks.

$skin->do_filters($theme['filters'], $theme);

>> read more .

Created with the Personal Edition of HelpNDoc: Free iPhone documentation generator


Skin Options

Create skin object ›› Create Skin file ››

This feature so crazy ,you can create form of options available for current choose skin. To do this, create file name 'options.php' in root of skin folder.

// list fields definition here

$theme_options[] = array(

'name' => 'template_file',

'type' => 'template',

'title' => 'Chọn template',

'description' => 'Chọn template sử dụng cho dữ liệu slideshow hiện tại.',

'value' => 'default value'

);

// html content

$theme_options[] = array(

'type' => 'string',

'description' => '<hr/>'

);

//input text

$theme_options[] = array(

'name' => 'txt1',

'type' => 'text',

'title' => 'title',

'description' => 'sdfdgdfg'

);

//input text with default value & how to override exists option value from theme setting

$theme_options[] = array(

'name' => 'ex_separator',

'type' => 'text',

'title' => 'Ngăn mỗi menu item',

'value'=> '<span class="separator"></span>',

'method' => 'override'

);

//append to exists option value

$theme_options[] = array(

'name' => 'submenu_container_class',

'type' => 'text',

'title' => 'Thêm class vào container submenu.',

'value'=> '',

'method' => 'append'

);

//select tag

$theme_options = array(

);

//checkbox

$theme_options[] = array(

'name' => 'show_items_separator',

'type' => 'checkbox',

'title' => 'Thêm Ngăn mỗi menu item',

);

Explain: template_file option.

Beside main skin file, user can choose different template base selected option.

ie:

Note: mlslider-skin.php is default skin.

APF field (https://wordpress.org/plugins/admin-page-framework/).

Only for APF hw_skin field.

- Field repeat: create skin options: inside one skin folder, create the file 'options.php'

$theme_options[] = array(

'id' => 'col',

'type' => 'sidebar',

'title' => '',

'desc' => 'Thiết lập sidebar cho các cột của footer.',

'repeat' => apply_filters('hwskin_nhp_theme_option_repeat',2),

);

- You can add filter in theme setting. see: 'class HW_SKIN'.

NHP Field (https://github.com/leemason/NHP-Theme-Options-Framework).

Create skin options for nhp framework:

use same as options file "options.php"

$theme_options[] = array(

'id' => 'tips',

'type' => 'string',

'title' => 'Hướng dẫn',

'desc' => file_get_contents(__DIR__.'/huongdan.html')

);

Read more .

Created with the Personal Edition of HelpNDoc: Generate Kindle eBooks with ease


Display skin selector

Create skin object ››

Display skin selector.

* render skins selector, by invoke the method 'get_skins_select_tag'. Use this code where you want to display skins selector.

<?php

if(class_exists('HW_SKIN')){

//render skins select tag #get_skins_select_tag($name,$hash_skin_value,$atts, $ddslick_theme, HW_SKIN::SKIN_FIES|HW_SKIN::SKIN_LINKS)

echo $this->skin->get_skins_select_tag('skin',null,array('class'=>'widefat'),false);

}

?>

* only render options tag without select tag around.

//current hash skin value

$data = $this->skin->generate_skin_options_tag($current_hash_theme_value);

$html .= $data['options']; //ie: <option>..</option><option>..</option>...

Hooks/Filters.

* Filter first skin info during get skin by get_skins/get_files_skins method. Call method during render skins picker.

add_filter('hwskin_first_skin_data', array($this, '_hwskin_first_skin_data'), 10, 2);

public function _hwskin_first_skin_data($temp_skin, $folder){

if(isset($folder['group']) && $folder['group'] == 'HWRP_TPL'){

$temp_skin['holder_url'] = WP_PLUGIN_URL.'/hw-taxonomy-post-list-widget/';

$temp_skin['skin_url'] = WP_PLUGIN_URL.'/hw-taxonomy-post-list-widget/'.$temp_skin['skin_folder'].'/'.$temp_skin['path'];

$temp_skin['screenshot_url'] = $temp_skin['skin_url'].'/'.$temp_skin['screenshot'];

}

return $temp_skin;

}

Created with the Personal Edition of HelpNDoc: Free EPub producer


Extend skins folder

Create skin object ››

* extends skins folder to get more skin from third party plugin. I added hook 'hw_skin_skins_holders' to method get_skins and get_files_skins.

add_filter('hw_skin_skins_holders', '_hw_skin_skins_holders');

function _hw_skin_skins_holders($skins_holders){

return $skins_holders;

}

* allow more skin name that mean HW_SKIN will scan all file that match skin name in while list. YOu don;t need specific extract one skin name.

// to do this set ignore_skin_name to true

$this->skin->add_skin_name_list('skin-ham.php');

// add skin name with regular expression

$this->skin->match_template_file('#yarpp-template-.*#');

purpose of this you can extend skins folders by using the hook 'hw_skin_skins_holders' see above.

Created with the Personal Edition of HelpNDoc: Create HTML Help, DOC, PDF and print manuals from 1 single source


Skin/Theme setting

Load skin setting.

- get file skin setting.

$theme_setting = $this->skin->get_file_skin_setting();

if(file_exists($theme_setting)) include($theme_setting);

Created with the Personal Edition of HelpNDoc: Easy to use tool to create HTML Help files and Help web sites


Skin options

Load skin options file:

- Load skin options file.

//built-in field type hw-skin/APF_Fields/hw_skin_FieldType.php

$option_config = $this->skin->get_file_skin_options($hash_skin_value);

//or you don;t need pass skin value if you call get_skin_file before.

$file = $this->skin->get_skin_file($hash_skin_value);

$option_config = $this->skin->get_file_skin_options();

if(file_exists($options_config)) include($options_config); //include define theme options

Explain: $hash_skin_value is field value from skins select tag that generate by method get_skins_select_tag.

Get skin options values.

example for APF metabox.

class HWML_Slider_Settings_Metabox extends AdminPageFramework_MetaBox {

...

public function setUp() {

..

$this->addSettingFields(

..

array(

'field_id' => 'slider_theme',

'type' => 'hw_skin',

'title' => __('Select slider theme','hwslider'),

'description' => __('Select your theme for slider','hwslider'),

//'value' => '',

'external_skins_folder' => 'hw_mlslider_skins',

'skin_filename' => 'mlslider-skin.php',

'enable_external_callback' => false,

'skins_folder' => 'themes',

'apply_current_path' => HWML_PLUGIN_PATH,

'plugin_url' => HWML_PLUGIN_URL,

'group' => 'group-others', //skins group

'hwskin_field_output_callback' => array($this,'_hwskin_field_output'),

)

..

);

}

}

- get skin options value.

$slider_theme = get_post_meta($id, 'slider_theme', true);

//theme options

$user_theme_options = isset($slider_theme['skin_options']) && is_array($slider_theme['skin_options'])? $slider_theme['skin_options']: array();

- note that: skin options value either set in options file or skin file or both. But get options from theme setting for default.

merge skin options with persistent options in skin theme setting file:

/*

$skin : skin selector field value.

$theme_options: from skin options file (options.php)

$default: default options value to override if not exists

$theme: from skin settings file, you can add default options to $theme variable in skin setting file .

*/

$user_theme_options = isset($skin['skin_options'])? $skin['skin_options'] : array();

if(empty($user_theme_options)) $user_theme_options = array();

if( isset($theme_options) && isset($theme)){

$default = isset($theme['options']) ? $theme['options'] : array();

$result = HW_SKIN::get_skin_options($user_theme_options, $default, $theme_options);

$user_theme_options = array_merge($user_theme_options, $result);

}

updated: get final theme options. note: this code used to load skin options for frontend (not for admin) see bellow example:

class mywidget extend WP_Widget{

public function form($instance){

...

<!-- show skin options if exists -->

<?php

//skin

$skin_setting = isset($instance['skin_settings'])? $instance['skin_settings'] : ''; //skin settings field

$skin = isset($instance['skin'])? $instance['skin'] : ''; //skin selector field

echo $this->skin->prepare_skin_options_fields('skin_settings', $skin_setting, $skin);

?>

...

}

public function widget($instance){

...

// $instance: widget options data (refer to widget instance)

$skin_setting = isset($instance['skin_settings'])? $instance['skin_settings'] : '';

if($skin) {

$skin_setting_file = $this->skin->get_file_skin_setting($skin); //current skin setting

$skin_options = $this->skin->get_file_skin_options(); //current skin options

if(file_exists($skin_setting_file)) include ($skin_setting_file);

if(file_exists($skin_options)) include ($skin_options);

if(isset($theme) && isset($theme['options'])) $default_options = $theme['options'];

else $default_options = array();

if(isset($default_options) && isset($theme_options)) {

$skin_setting = HW_SKIN::merge_skin_options_values($skin_setting, $default_options, $theme_options);

}

}

..

}

}

- Before include skin file, make sure valid theme options value.

//valid data, here is example of removing unused key

if(isset($user_theme_options['template_file'])) unset($user_theme_options['template_file']) ;

- Create json params for jquery consuming:

<?php

//remove key not belong option

$options = APF_hw_skin_Selector_hwskin::build_json_options($scrollbar_theme_options, 'width,height');

?>

<script>

jQuery(function($)

{

jQuery("#abc").perfectScrollbar(<?php echo $options?>);

});

</script>

Created with the Personal Edition of HelpNDoc: Produce Kindle eBooks easily


Options for widget

Skin options ››

* Prepare skin options fields before render get_skin_select_tag, because prepare_skin_options_fields set inline JS (Javascript code) for skin change event .

class myclass extends WP_Widget{

public function form($instance){

$scrollbar_skin_setting = isset($instance['scrollbar_skin_setting'])? $instance['scrollbar_skin_setting'] : null; //scrollbar skin options

$scrollbar_skin = isset($instance['scrollbar_skin'])? $instance['scrollbar_skin'] : ''; //scrollbar skin

// display current skin options, same much hw_skin for APF field.

$scrollbar_skin_options = $this->skin->get_skin_instance('scrollbar')->prepare_skin_options_fields('scrollbar_skin_setting', $scrollbar_skin_setting, $scrollbar_skin);

}

}

* display skin options fields.

echo $scrollbar_skin_options ;

Created with the Personal Edition of HelpNDoc: Free EPub producer


Built-in FieldTypes for APF & NHP Theme Option

Currently hw_skin built-in for APF (admin page framework) & NHP Theme options with 2 field type:

'hw_skin'

'hw_skin_link'

Created with the Personal Edition of HelpNDoc: News and information about help authoring tools and software


APF Field

Built-in FieldTypes for APF & NHP Theme Option ››

Create APF field setting:

#APF add hw_skin field setting

array( //exclude pages

'field_id' => 'chat_skin' ,

'type' => 'hw_skin',

'title' => __('Giao diện'),

//'label' =>'',

'description' => __('Chọn skin cho chatbox, lưu ý: yêu cầu footer.php phải gọi hàm wp_footer()') ,

'external_skins_folder' => 'hw_livechat_skins',

'skin_filename' => 'hw-livechat-skin.php',

'enable_external_callback' => false,

'skins_folder' => 'skins',

'apply_current_path' => HW_LIVECHAT_PATH,

'plugin_url' => HW_LIVECHAT_URL,

//'group' => 'olark', //dynamic

'set_dropdown_ddslick_setting' => array('width'=>300), // set ddslick options for select tag

'template_header_data' => array(

'name' => 'HWRP Template',

'description' => 'Description',

'author' => 'Author',

'uri' => 'Author URI',

),

hwskin_field_output_callback' => array($this,'_hwskin_field_output'),

)

- callback:

public function _hwskin_field_output($_aOutput,$skin, $field_output){

return $_aOutput;

}

- Modify field type hw_skin settings.

add_filter('apf_hwskin', array($this, '_apf_hwskin'),10,2);

/**

* modify apf hwskin params

* @param $setting

* @param $value

* @return mixed|null|void

*/

public function _apf_hwskin($value, $setting){

if($setting == 'group'){

if(self::is_current_screen()){

$chat_service = hw_livechat_option('chat_service');

if($chat_service) return $chat_service;

}

}

return $value;

}

- filter hw_skin field output.

add_filter('hwskin_field_output', array($this, '_apf_hwskin_field_output'),10,3); //hack field output

/**

* before output hw_skin apf field

* @param $skin: HW_SKIN object

* @param $Output: chunk of string to output

* @param $field_output: field output in string

*/

public function _apf_hwskin_field_output( $aOutput= array(),$skin,$field_output = ''){

if(!self::is_current_screen()) return $aOutput;

if(!preg_match('#<\s?option\s?( [^<>]+)?>(.+?)<\s?\/option\s?>#',$field_output)){

$aOutput[] = '<div>Lưu ý: Trước khi chọn giao diện, vui lòng chọn dịch vụ chat ở trên và nhấn nút submit bên dưới. Hoặc dịch vụ này chưa có skin.</div>';

}

return $aOutput;

}

- Filter field setting before output field form in method renderOptionField.

add_filter('renderOptionField', '_renderOptionField');

function _renderOptionField($field, $aField){

return $field;

}

Created with the Personal Edition of HelpNDoc: Generate Kindle eBooks with ease


NHP Theme Option Field

Built-in FieldTypes for APF & NHP Theme Option ››

Field Type: 'hw_skin_link'

Example:

$sections[] = array(

'fields' => array(

//hw_skin_link

'scroll2top_skin' => array(

'id' =>'scroll2top_skin',

//'type' => 'hw_scroll2top', //moved to hw_skin_link

'type' => 'hw_skin_link',

'title' => 'Chọn giao diện nút cuộn nội dung website.',

'desc' => 'Chọn giao diện nút cuộn nội dung website.',

//use by hw_skin

'external_skins_folder' => 'hw_scroll2top_skins',

'skin_filename' => 'hw-scroll2top.php',

'enable_external_callback' => false,

'skins_folder' => 'skins',

'apply_current_path' => plugin_dir_path(dirname(dirname(__FILE__))),

'plugin_url' => plugins_url('',dirname(dirname(__FILE__))),

'files_skin_folder' => 'images',

'display' => 'ddslick', //accept: ddslick, list,select

'group' => 'scroll2top' //dynamic/

),

)

);

Created with the Personal Edition of HelpNDoc: Easy CHM and documentation editor


Filter Actions

- Filter 'get_skin_data' method. Add extra result of the method 'get_skin_data'.

//this callback do during display skins selector .

// note: this snippet used in APF field type hw_skin

add_filter('hw_skin_data', array($this, '_hw_skin_data_filter'),10,3);

/**

* filter skin data in method HW_SKIN::load_skins_data

* @param $data

* @return mixed

*/

function _hw_skin_data_filter($data, $skin, $inst){

$data['md5'] = md5($data['screenshot']);

return $data;

}

Created with the Personal Edition of HelpNDoc: Produce electronic books easily


Events

- Add skin change event listener. see example bellow:

class myWidget extend WP_Widget{

function __construct(){

...

// server callback

//register external storage for skin change callback event

$this->skin->registerExternalStorage_JSCallback(array($this, 'save_callback_event'));

//get save callback data

$this->skin->getSavedCallbacksJs_data(array($this,'get_callbacks_data'));

}

/**

* get callback data

* @return mixed

*/

public function get_callbacks_data(){

$widget_options_all = get_option( $this->option_name );

return $widget_options_all[ $this->number ]['eventsJS'];

}

/**

* save skin callback change event

* @param $code

*/

function save_callback_event($code){

$this->update_widgets_ids_with_names($code);

}

private function update_widgets_ids_with_names( $str ) {

/*

* Get this instances options

*/

$widget_options_all = get_option( $this->option_name );

$old_instance = &$widget_options_all[ $this->number ];

$new_instance = &$old_instance;

if(isset($new_instance['eventsJS']) && $new_instance['eventsJS'] == $str) return; //old data

$new_instance['eventsJS'] = $str;

update_option($this->option_name,$widget_options_all); //update widget options

# $this->update_callback(); // this processes the widget settings prior to the update function, it is needed.

# return $this->update( $new_instance, $old_instance );

}

function form( $instance){

//save bundle of codes in callback to db

$this->skin->saveCallbackJs4SkinChangeEvent('console.log(skin);');

$this->skin->saveCallbackJs4SkinChangeEvent('console.log("jkehrerdgb");');

}

}

Created with the Personal Edition of HelpNDoc: Free iPhone documentation generator


Resume hw-skin object

Resume hw_skin config.

- if you create hw_skin & get skin file in same place, for ex: in widget class you load skin from widget method & create hw_skin from constructor method.

- if 2 tasks you do in separate location, in first place you create hw_skin instance you should backup skin config by call method: $this->skin->get_config(true);

and save this value in hidden field like bellow:

<input type="hidden" name="hwskin_config" value="<?php echo $this->skin->get_config(true)?>"/>

=> I have to create sample for apf field & nhp field type.

Created with the Personal Edition of HelpNDoc: Full-featured multi-format Help generator


Consume skin file

How to use skin.

if(isset($this->skin)){

//load actived skin

$file = $this->skin->get_skin_file($active_hash_skin);

if(file_exists($file)) {

include($file);

....

}

}

- Load stuff from skin.

if(file_exists($file)) {

//init theme setting

$theme['styles'] = array(); //declare stylesheets file

$theme['scripts'] = array(); //declare js files

include($file);

//valid

if(!isset($theme['styles'])) $theme['styles'] = array();

if(!isset($theme['scripts'])) $theme['scripts'] = array();

if(count($theme['styles']) || count($theme['scripts']))

$this->skin->enqueue_files_from_skin($theme['styles'], $theme['scripts']); //enqueue stuff from skin

}

updated: however you can use HW_SKIN::apply_skin_data static method to desploy current widget skin. See our example:

// This is where the action happens

public function widget( $args, $instance ) {

$title = apply_filters( 'widget_title', $instance['title'] );

$content = isset($instance['content'])? $instance['content'] : ''; //marquee content

//skin

$hash_skin = isset($instance['skin'])? $instance['skin'] : 'default';

// before and after widget arguments are defined by themes

echo $args['before_widget'];

if ( ! empty( $title ) )

echo $args['before_title'] . $title . $args['after_title'];

// This is where you run the code and display the output

if( $this->skin){

$skin_options = isset($instance['skin_settings'])? $instance['skin_settings'] : array();

HW_SKIN::apply_skin_data(array(

'instance' => $this->skin,

'hash_skin' => $hash_skin,

'skin_options' => $skin_options

)

, array(

'callback_before' => array($this, '_hw_skin_apply_skin_data_callback_before'),

'callback_after' => array($this, '_hw_skin_apply_skin_data_callback_after'),

),

array('instance' => $instance, 'content' => $content)

);

}

echo $args['after_widget'];

}

/**

* HW_SKIN::apply_skin_data callback before

* @param $context

* @param $params

*/

public function _hw_skin_apply_skin_data_callback_before ($params){

extract($params);

//params

$marquee_wrapper = 'hw-marquee-container';

return array('marquee_wrapper' => $marquee_wrapper);

}

/**

* HW_SKIN::apply_skin_data callback after

* @param $context

* @param $params

*/

public function _hw_skin_apply_skin_data_callback_after ($params){

extract($params);

#(new HW_SKIN)->get_skin_info();

if(isset($skin) && isset($hash_skin)) {

$skin_data = $skin->get_skin_data($hash_skin);

//marquee params

if(!isset($skin_options)) $skin_options = array();

$json_config = HW_SKIN_Option::build_json_options($skin_options);

//for everwebcodebox

if($skin_data['name'] == 'everwebcodebox' && isset($marquee_wrapper) ) {

echo '<script type="text/javascript">

jQuery(function($){

//see more at js/libraries/marquee/everwebcodebox/README.md

var $marquee = $(".'.$marquee_wrapper.'").marquee('.$json_config.');

$(".'.$marquee_wrapper.'").hover(function(){

$marquee.marquee("pause");

}, function(){

$marquee.marquee("resume")

});

});

</script>';

}

}

}

twig template.

- You must to define template folder before.

if(file_exists($file)) {

//load twig lib

HW_HOANGWEB::load_class('HW_Twig_Template');

//get templates folder from skin setting

if(isset($theme) && isset($theme['templates_folder'])) {

$tpl = $theme['templates_folder'];

}

else $tpl = '';

//prepare data for template

$data = array(...);

// set template path from skin setting

$twig = HW_Twig_Template::create($skin->get_file_skin_resource($tpl));

$twig->set_template_data($data); //inject data to current twig for skin using

include($file);

}

- in skin file call (mean $file above):

<?php

/**

* Plugin name: default

*/

$twig->_display('template.tpl');

?>

Created with the Personal Edition of HelpNDoc: Full-featured multi-format Help generator


Migration data

Consume skin file ››

- Compatible_vars concept:

a plugin theme can use other skin from other plugin, it's posible. We define key 'compatible_vars' in theme setting for external skin that first skin wish to use , from theme setting of skin 2: like this:

$theme['compatible_vars'] = array(

'cat_posts' => 'wp_query',

'arrExlpodeFields' => array('title')

)

-> define all variables that main plugin is missing from context where load file skin.

for example: plugin A want to re-use skins from B plugin. So any skin for B plugin create theme setting file with above code.

+ the plugin in which consume , need to load compatible vars from partner plugin in order to work properly.

+ and main plugin also already define compatible_vars (where include skin file) to prevent some skin in partner plugin not define them. this will keep error away.

Enhanced compatible vars:

Admin:

from admin:

//set migrate data + compatible vars from active skin if found together

//set migrate data with this skin

$this->skin->migrate(array(

'cat_posts' => 'wp_query', //array($this, '_get_wp_query'), //warning: this make infinite loop or too heveay data for hwskin_config,

'metaFields' => array(),

'arrExlpodeFields' => array('title'),

'instance' => array(),

'hwtpl_wrapper_id' => 'hwtpl_wrapper_id-hw-loop-template',

'hwtpl_scrollbar_wrapper_class' => 'hwtpl_scrollbar_wrapper_class-hw-loop-template',

'hwtpl_pagination_class' => 'hwtpl_pagination_class',

'awc_enable_grid_posts' => false

));

Frontend:

+ When consume skin in frontend:

if(file_exists($file)) {

extract($skin->get_migrate());

include ($file);

...

}

Created with the Personal Edition of HelpNDoc: Create HTML Help, DOC, PDF and print manuals from 1 single source


API Reference

You can explore my code because it easy to understand & you can find out what hooks you need to extend.

// get skin data

$data = $this->skin->get_skin_data($theme);

// get image resource from hw_skin plugin in images/ folder

HW_SKIN::get_image('error.jpg'); //ie: error.jpg url

// get skin variable

$skin_variables = $skin->get_skin_variables();

Created with the Personal Edition of HelpNDoc: Free Kindle producer