Explain Controls in CherryFramework
Last Updated :
24 Apr, 2025
CherryFramework is a popular and powerful WordPress theme framework that offers a wide range of features and tools for building websites. Among these features is the JavaScript library that comes bundled with the framework, known as CherryFramework JS. This library provides developers with a set of controls that can be used to enhance the functionality and interactivity of their websites. In this article, we will take a closer look at the controls offered by CherryFramework JS and explain how they work.
Controls in CherryFramework JS:
CherryFramework JS includes several controls that can be used to add various types of functionality to a website. These controls are organized into several categories based on their purpose, including UI controls, input controls, and data visualization controls. Let’s explore each of these categories in more detail.
- UI Controls: The UI controls offered by CherryFramework JS are designed to improve the visual appearance and interactivity of a website. These controls include sliders, accordions, tabs, and modal windows. Sliders allow users to slide through a set of images or content, while accordions and tabs enable developers to organize content into collapsible sections. Modal windows provide a way to display content on top of the existing page, making it more prominent.
- Input Controls: Input controls are used to gather information from website visitors. CherryFramework JS includes several input controls, such as date pickers, dropdown menus, and checkboxes. Date pickers allow users to select a date from a calendar, while dropdown menus provide a list of options to choose from. Checkboxes can be used to allow users to select one or more items from a list.
- Data Visualization Controls: Data visualization controls are used to display data in a visually appealing way. CherryFramework JS includes several data visualization controls, including charts, graphs, and progress bars. Charts and graphs can be used to display data in a variety of formats, such as pie charts, bar graphs, and line graphs. Progress bars provide a visual representation of the progress of a task or process.
Working with CherryFramework JS Controls: To use the controls provided by CherryFramework JS, developers need to add the necessary scripts and stylesheets to their WordPress theme. Once these files are included, developers can use the controls by adding the appropriate HTML markup and initializing them with JavaScript. The CherryFramework JS documentation provides detailed instructions and examples for using each of the controls.
To access CherryFramework, you need to follow these steps:
1. Download CherryFramework: You can download CherryFramework from the CherryFramework website or from the WordPress theme repository. Once downloaded, you will have a zip file containing the theme files.
2. Install CherryFramework: To install CherryFramework, navigate to the “Themes” section of your WordPress dashboard and click on the “Add New” button. Then, click on the “Upload Theme” button and select the CherryFramework zip file from your computer. Finally, click on the “Install Now” button and wait for the installation process to complete.
3. Activate CherryFramework: After the installation process is complete, you will need to activate the CherryFramework theme. To do this, go to the “Themes” section of your WordPress dashboard, find the CherryFramework theme, and click on the “Activate” button.
4. Include CherryFramework JS files: To use the CherryFramework JavaScript library and controls in your website, you need to include the necessary JavaScript and CSS files in your theme. You can do this by adding the following code to the functions.php file of your CherryFramework theme:
PHP
<?php
function cherry_framework_scripts() {
wp_enqueue_script( 'cherry-js',
get_template_directory_uri() . '/js/cherry.js',
array(), '1.0', true );
wp_enqueue_style( 'cherry-css',
get_template_directory_uri() . '/css/cherry.css',
array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts',
'cherry_framework_scripts' );
?>
|
This code uses the WordPress wp_enqueue_script() and wp_enqueue_style() functions to include the CherryFramework JS and CSS files in your theme. The get_template_directory_uri() function is used to get the directory URL of your CherryFramework theme.
5. Use CherryFramework JS controls: Once the CherryFramework JavaScript library and controls are included in your theme, you can use them in your website by adding the appropriate HTML markup and initializing them with JavaScript.
Here are some code examples for using different CherryFramework controls:
CherryFramework Carousel Control: The CherryFramework Carousel Control allows you to easily create image sliders and carousels on your website. This control uses jQuery to create a responsive and customizable carousel that can display multiple images and provide navigation controls.
PHP
<?php
<div class="cherry-carousel">
<div class="cherry-carousel-item">
<img src="path/to/item-1.jpg" alt="Item 1">
</div>
<div class="cherry-carousel-item">
<img src="path/to/item-2.jpg" alt="Item 2">
</div>
<div class="cherry-carousel-item">
<img src="path/to/item-3.jpg" alt="Item 3">
</div>
</div>
<script>
jQuery(document).ready(function($) {
$('.cherry-carousel').cherryCarousel();
});
</script>
?>
|
The .cherry-carousel class is applied to the parent element that contains all the carousel items, and the .cherry-carousel-item class is applied to each individual carousel item. In this example, we’re using images, but you can include any type of content within the carousel items. The JavaScript code initializes the CherryFramework Carousel Control on the .cherry-carousel element using jQuery. Once the control is initialized, you should see a carousel with navigation controls that allow you to scroll through the carousel items. The CherryFramework Carousel Control offers several options and customization settings that you can use to further customize your carousel, including animation effects, autoplay, navigation type, and more. You can refer to the CherryFramework documentation for more detailed information on how to use and customize the Carousel Control.
CherryFramework Popup Control: The CherryFramework Popup Control allows you to create popups or modal windows on your website. This control uses jQuery to create a simple, customizable, and responsive popup that can display any content, including images, text, videos, and forms.
PHP
<?php
<a href="#popup" class="cherry-popup-trigger">Open Popup</a>
<div id="popup" class="cherry-popup">
<h2>Popup Title</h2>
<p>Popup content goes here.</p>
<a href="#" class="cherry-popup-close">Close Popup</a>
</div>
<script>
jQuery(document).ready(function($) {
$('.cherry-popup-trigger').cherryPopup();
});
</script>
?>
|
The cherry-popup-trigger class is applied to the link that triggers the popup to open. The href attribute of the link points to the ID of the popup content, which in this case is #popup. The .cherry-popup class is applied to the popup content element, which contains the title, content, and close button. The JavaScript code initializes the CherryFramework Popup Control on the .cherry-popup-trigger element using jQuery. Once the control is initialized, clicking on the “Open Popup” link should display the popup. The CherryFramework Popup Control offers several options and customization settings that you can use to further customize your popup, including animation effects, position, and more. You can refer to the CherryFramework documentation for more detailed information on how to use and customize the Popup Control.
CherryFramework Tabs Control: The CherryFramework Tabs Control allows you to create tabbed content on your website. This control uses jQuery to create a responsive and customizable tabbed interface that can display multiple content sections and provide navigation controls.
PHP
<?php
<div class="cherry-tabs">
<ul class="cherry-tabs-nav">
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div class="cherry-tabs-content">
<div id="tab1">
<p>Tab 1 content goes here.</p>
</div>
<div id="tab2">
<p>Tab 2 content goes here.</p>
</div>
<div id="tab3">
<p>Tab 3 content goes here.</p>
</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
$('.cherry-tabs').cherryTabs();
});
</script>
?>
|
The .cherry-tabs class is applied to the parent element that contains the tabs and their content. The .cherry-tabs-nav class is applied to the unordered list that contains the tab navigation links, and the .cherry-tabs-content class is applied to the element that contains the content for each tab. Each tab is represented by an anchor link within a list item, with the href attribute pointing to the corresponding content element. In this example, we have three tabs with links to #tab1, #tab2, and #tab3. The content for each tab is contained within separate div elements with IDs that match the href values in the tab links. The JavaScript code initializes the CherryFramework Tabs Control on the .cherry-tabs element using jQuery. Once the control is initialized, clicking on each tab link should display the corresponding content for that tab. The CherryFramework Tabs Control offers several options and customization settings that you can use to further customize your tabs, including animation effects, tab positioning, and more. You can refer to the CherryFramework documentation for more detailed information on how to use and customize the Tabs Control.
Conclusion: CherryFramework JS provides a powerful set of controls that can be used to enhance the functionality and interactivity of a website. From UI controls that improve the visual appearance of a website to input controls that gather information from visitors, and data visualization controls that display data in a visually appealing way, CherryFramework JS offers a comprehensive set of tools for developers. By following the documentation and examples provided by the framework, developers can easily integrate these controls into their WordPress themes and create websites that are both functional and visually appealing.
Similar Reads
What is Cucumber Framework?
In the rapidly changing landscape of software development, maintaining the quality and functionality of applications is critical. Automated testing has emerged as a vital component of the development process, enabling teams to ensure that their code performs as intended. Among the numerous tools ava
5 min read
Explain Action’s in Redux
In this article, we are going to learn about Action in Redux. Actions are plain JavaScript object that contains information. Action is one of the building blocks of Redux. Redux is a state managing library used in JavaScript apps. It is used to manage the data and the state of the application. Uses
5 min read
Introduction to CherryPy
CherryPy is a popular framework of Python. Using CherryPy, web applications can be built in a faster and more reliable way. It is also called a web application library. It is known for its simplicity as it is based on object-oriented Python programming, resulting in smaller source code in less time.
3 min read
Environment setup for CherryPy
CherryPy is a popular framework of Python. Using CherryPy, web applications can be built in a faster and more reliable way. It is also called a web application library. It is known for its simplicity as it is based on object-oriented Python programming, resulting in smaller source code in less time.
2 min read
Machine learning deployment
Deploying machine learning (ML) models into production environments is crucial for making their predictive capabilities accessible to users or other systems. This guide provides an in-depth look at the essential steps, strategies, and best practices for ML model deployment. Deployment transforms the
6 min read
Aneka in Cloud Computing
Aneka is an infrastructural application for Cloud Computing that is specifically designed for supporting purposes. It helps in the use of varied computer resources and the organization of the resources into a single virtual space called the Aneka Cloud, where applications are run. Aneka is a Cloud m
15+ min read
Feature Selection Using Random Forest
Feature selection is a crucial step in building machine learning models. It involves selecting the most important features from your dataset that contribute to the predictive power of the model. Random Forest, an ensemble learning method, is widely used for feature selection due to its inherent abil
4 min read
Explain an alternative Sorting approach for MO's Algorithm
MO's Algorithm is an algorithm designed to efficiently answer range queries in an array in linear time. It is a divide-and-conquer approach that involves pre-processing the array, partitioning it into blocks, and then solving the queries in each of the blocks. Alternate Approach for Sorting: An alte
15+ min read
SQLite Union Operator
SQLite is a server-less database engine and it is written in c programming language. It is developed by D. Richard Hipp in the year 2000. The main moto for developing SQLite is to escape from using complex database engines like MYSQL etc. It has become one of the most popular database engines as we
5 min read
Spring - FactoryBean
Spring is one of the most popular Java EE frameworks. It is an open-source lightweight framework that allows Java EE 7 developers to build simple, reliable, and scalable enterprise applications. This framework mainly focuses on providing various ways to help you manage your business objects. It made
5 min read