Styles can be added to a theme or other plugin.
How to create a new style
Download an example of styles for different types by clicking on this link: DOWNLOAD EXAMPLES.
These examples are fully functional and can be used without changes. It is better, though, to replace some classes and titles, so that there would be no conflicts with other styles in further use.
As a basis you can use the standard styles of the plugin, which are in the template_styles directory. In the developer version of the plugin (which can be downloaded here), you can access JavaScript files for each style separately.
Have a look at the most frequently used style – checkbox.php as an example. The code from it:
if( ! class_exists('BAPF_Custom_checkbox_style') ) {
class BAPF_Custom_checkbox_style extends BeRocket_AAPF_Template_Style {
function __construct() {
$this->data = array(
'slug' => 'dev_custom_checkbox',
'template' => 'checkbox',
'name' => 'Dev Custom Checkbox',
'name_price' => 'Dev Custom Price Ranges',
'file' => __FILE__,
'style_file' => plugin_dir_url( __FILE__ ) . 'checkbox_your_style.css',
'script_file' => plugin_dir_url( __FILE__ ) . 'checkbox_your_script.js',
'image' => plugin_dir_url( __FILE__ ) . 'checkbox_preview_image.png',
'image_price' => plugin_dir_url( __FILE__ ) . 'checkbox_preview_image-price.png',
'version' => '1.0',
'sort_pos' => '10000',
);
parent::__construct();
}
function template_single_item( $template, $term, $i, $berocket_query_var_title ) {
$template = parent::template_single_item($template, $term, $i, $berocket_query_var_title);
$this->array_set( $template, array('attributes', 'class') );
$template['attributes']['class'][] = 'some_custom_class_item';
return $template;
}
function template_full($template, $terms, $berocket_query_var_title) {
$template = parent::template_full($template, $terms, $berocket_query_var_title);
$this->array_set( $template, array('template', 'attributes', 'class') );
$template['template']['attributes']['class'][] = 'some_custom_class';
return $template;
}
}
new BAPF_Custom_checkbox_style();
}- Replace the name of the class BAPF_Custom_checkbox_style with another unique name, replace it in three different strings.
- Change the slug to a more unique one. dev_custom_checkbox is being used in the example.
- Change the style name and name for the price range name_price (not all types of filters have it).
- Replace style_file, which is a CSS file that will be included if you use this style; the location of the file depends on the location of the checkbox.php style file. If there’s no to include any file, then set this option as an empty string.
- Replace script_file, which is the JavaScript file that will be included if you use this style; the location of the file depends on the location of the checkbox.php style file. If there’s no need to include any file, then set this option as an empty string.
- Replace the image and image_price images, add the links to the images. The resolution of the images must be 375 pixels wide and 220 pixels high. They are displayed on the filter editing page, image_price for the price range and image for all other attributes and taxonomies.
The main parameters and the name for the new style are ready. Now you need to configure what exactly this style will add to the standard template.
In the examples, the style adds some_custom_class class to the main filter element and some_custom_class_item to the element of each attribute value.
Functions and what they change
template_full – applied to edit the filter
Parameters:
- $template – array with all parameters for generating HTML code
- $terms – array with all values for an attribute; the array is obtained from the get_terms function
- $berocket_query_var_title – all filter parameters for generating HTML code
template_single_item – applied to edit an element for each attribute value. This function is not applied in styles where there are no elements (slider, date selection, button, list of selected filters)
Parameters:
- $template – array with all parameters for generating HTML code
- $term – all data values of the attribute. One element from array obtained from the get_terms function
- $i – element order, starts with zero
- $berocket_query_var_title – all filter parameters for generating HTML code
How to add a new style
How to add styles in the theme you are using:
- Create a braapf-template-styles directory in the root of the theme.
- Copy new styles to the directory. PHP style files should be located directly in the braapf-template-styles directory.
How to add styles from another plugin or any other directory:
You need to bind to the hook bapf_include_all_tempate_styles to the function, which will include the style files, in our case the file checkbox.php.
add_action( 'bapf_include_all_tempate_styles', 'custom_function_include_tempate_styles' );
function custom_function_include_tempate_styles() {
include_once('PATH_TO_FILE/checkbox.php');
}