---
# Functions and Components
**URL:** https://modul-r.codekraft.it/2019/06/custom-theme-functions/
Date: 2019-06-02
Author: Erik
Post Type: post
Summary: This template include a ton of pre-builded animations, components, functions and an object position observer. Observer Every block-item can be animated easily with the the observer that is used to trigger animations while the object is displayed on the screen. In order to create an “observed” object you need to add interactive under “Advanced” -> […]
Categories: Quick Start
Tags: Quick Start
---
This template include a ton of **pre-builded animations**, **components, functions **and an **object position observer.**
[Observer](#observer)
[Components](#components)
[Animations](#animations)
[Lightbox](#lightbox)
[Carousel](#carousel)
[Hooks](#hooks)
## Observer
Every block-item can be animated easily with the the observer that is used to trigger animations while the object is displayed on the screen.
In order to create an "observed" object you need to add **`interactive`** under "Advanced" -> "Additional CSS class(es)" (on the right column of the editor) that will enable the "object position observer"
The **item observer** will start to add and remove classes to that object when it is visible or when the object goes off the screen.
`**visible:** the object **is inside** the screen `
`**already-see:** the object **has been inside the screen al least at once**`
Check the video below you will notice the interactive item classes change when the object becomes visible on the screen
## Components
I added some components that could be useful in your website. to enable them just add a class to the block as below
### Block Patterns
In the **[block patterns section](https://wordpress.org/support/article/block-pattern/)** you will find these presets:
*Cards with icons (overlap the element to the top)*
### **Title**
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
### ** Title**
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
### ** Title**
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
*Cards with photos*
### **Title**
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
### ** Title**
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
### ** Title**
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
*Cards with Cover*
Title
Title
Title
#### Carousel (gallery menu)
*Carousel (single image)*
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
*Carousel (multiple images)*
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
- [](https://modul-r.codekraft.it/wp-content/themes/modul-r/inc/images/WordPress-logotype-alt-background.jpg)
*Masonry gallery*
- [*](https://modul-r.codekraft.it/wp-content/uploads/2019/06/pexels-photo.jpg)Photo by Luis del Río on [Pexels.com](https://www.pexels.com/photo/person-walking-between-green-forest-trees-15286/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/pexels-photo-624015.jpeg)Photo by Frans Van Heerden on [Pexels.com](https://www.pexels.com/photo/aurora-borealis-624015/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/pexels-photo-3408744.jpeg)Photo by stein egil liland on [Pexels.com](https://www.pexels.com/photo/scenic-view-of-snow-capped-mountains-during-night-3408744/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/pexels-photo-3082313.jpeg)Photo by Matthew DeVries on [Pexels.com](https://www.pexels.com/photo/body-of-water-between-mountains-3082313/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/above-adventure-aerial-air.jpg)Photo by Bess Hamiti on [Pexels.com](https://www.pexels.com/photo/red-and-blue-hot-air-balloon-floating-on-air-on-body-of-water-during-night-time-36487/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2021/06/25118_PIA23962-16.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2021/06/25442_01_Approach_1200.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/05/neonbrand-v9Z6-uJxk4-unsplash-scaled.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/daniel-leone-197357-unsplash-scaled.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/sven-scheuermeier-37377-unsplash.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/caryle-barton-56255-unsplash-scaled.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2021/12/pexels-photo-735911.jpeg)Photo by Soumil Kumar on [Pexels.com](https://www.pexels.com/photo/photo-of-person-typing-on-computer-keyboard-735911/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2021/06/02_CruiseStageSeparation_10k-scaled.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2021/06/25451_09_Touchdown-1200.jpg)
note: the masonry gallery could *be personalized with css custom properties "--element--gallery--mosaic-grid-size"
and "--element--gallery--mosaic-grid-gap".
### Block Styles
As for the block patterns i've prepared some block styles to give you the chance to do something even more interesting with gutenberg
Media and text
center image
Media and text
half width image
Media and text
Full height media and text
Media and text
container cut crosswise
**Media and text**
container cut crosswise
cover clipped crosswise
cover clipped with wave shape
to replace the wave shape used for featured image and cover blocks -> add_filter('modul_r_header_wave_shape', function () { return get_template_directory_uri() . '/inc/images/wave.svg'; });
JUST
AN
EXAMPLE
if you add the class "block-overlap-top" this is what will happen
Title
THE COVER BLOCK COULD HAVE PARALLAX EFFECT EVEN INSIDE CARDS
## Animations
Animation classes (but you may want to add/extend your own in animation in /assets/src/scss/components/animations.scss)
- **fade-in**: opacity animation from 0 to 100%
- **slide-left**: translate from -100% to 0 (right to center)
- **exit-right**: translate from 0 to 100% (center to left)
- **enter-down**: transition animation from down to original position
### Parallax
Each image inside a container can be animated with parallax. To apply this effect to "additional classes box" the class `interactive parallax` like in the example show below
### Custom Block Classes
- **padded-image**: distance the image from the margins (needed sometimes for transparent background images who have image margins near the image crop)
### Custom Scripts
- **lightbox:** a single lightbox
- **lightbox-gallery:** a lightbox with multiple photo and navigation
- **slider** AND **slider-single**: slick carousel (show 1 image at once)
- **slider** AND **slider-multi**: slick carousel (show 3 image at once)
#### Animations examples:
Animation triggered by visibility `interactive slide-left`
### One shot animation
**HEY WAIT!** This is one shot animation... And is triggered only one time. Use `interactive animated exit-right long-delay` to create an exit animation like this
**Background Parallax**
(for media and text block you don't need "Crop image to fill entire column")
`interactive parallax`
**Fade-in Animation**
`interactive fade-in`
**Enter-down animation with delay**
`interactive enter-down fade-in long-delay`
## Lightbox
add the class **"lightbox"** to the block and the image inside will be lightboxed when clicked
[](https://modul-r.codekraft.it/wp-content/uploads/2019/05/architecture_modern_building_1549081.jpg) click on the image to see the lightbox effect
```
lightbox
```
The same can be done with galleries, but you need to use the class "lightbox-gallery". In this case the lightbox will show all the gallery images into a slideshow
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/05/b9571882-270a-366d-960e-1c3eaa1fd343-1024x682.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/05/simon-goetz-240683-unsplash-1024x683.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/05/733e9ecb-0acd-38ec-9320-9ec6649b8323-1024x683.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/05/17ecc17b-5504-3328-97e7-6ffb47e6e0e9-1024x683.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/05/5da5440e-9c52-32d1-aeb2-9767e08e1ddb-1024x682.jpg)
```
lightbox-gallery
```
## Carousel
You will find the predefined block patterns but, you need to know some further advanced features are available... you can combine lighbox (sigle and gallery) to any carousel (single or multi)
#### mix slick (single) + lightbox
`slider slider-single lightbox`
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/pexels-photo-3408744.jpeg)Photo by stein egil liland on [Pexels.com](https://www.pexels.com/photo/scenic-view-of-snow-capped-mountains-during-night-3408744/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/pexels-photo-3082313.jpeg)Photo by Matthew DeVries on [Pexels.com](https://www.pexels.com/photo/body-of-water-between-mountains-3082313/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/above-adventure-aerial-air.jpg)Photo by Bess Hamiti on [Pexels.com](https://www.pexels.com/photo/red-and-blue-hot-air-balloon-floating-on-air-on-body-of-water-during-night-time-36487/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/pexels-photo-624015.jpeg)Photo by Frans Van Heerden on [Pexels.com](https://www.pexels.com/photo/aurora-borealis-624015/)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/pexels-photo.jpg)Photo by Luis del Río on [Pexels.com](https://www.pexels.com/photo/person-walking-between-green-forest-trees-15286/)
#### mix slick (multi) + lightbox-gallery
slider slider-multi lightbox-gallery
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/caryle-barton-56255-unsplash-1024x530.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/sven-scheuermeier-37377-unsplash-1024x683.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/06/daniel-leone-197357-unsplash-1024x648.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/05/9f701213-1aff-3d7b-9371-fae4002b7587-1024x682.jpg)
- [](https://modul-r.codekraft.it/wp-content/uploads/2019/05/d5ec51cc-1a6e-3f37-bc93-ef7f83867fdc-1024x683.jpg)
## Hooks
warning **DEV ZONE!** editing function.php may break your website, do it only if you are sure of what you are doing.
**Header Menu Filter**
in this example we will add "yo" before the main menu and "mama" after the main menu
```
add_filter('modul_r_header_menu', function ($html) {
return 'yo' . $html . 'mama';
});
```
**Add custom CSS to Above the fold style**/ **CSS Custom prop style**
You may need to add some custom css to the to the very first css enqueued to fix some cls issues
```
add_filter('modul_r_acf_css_style', function($defaults) {
return $defaults. '.custom {color:red}';
}, 1 );
```
```
add_filter('modul_r_css_vars_style', function($css_style) {
return $css_style. '.custom {color:red}';
});
```
**Change the svg Wave** **shape** (introduced in v1.4.3)
you can replace the shape use as crop in the "is-style-wave-clip" passing a new svg url
```
add_filter('modul_r_wave_shape_uri', function () {
return get_stylesheet_directory_uri() . '/my/custom/wave.svg';
});
```
**Filter post count shown in category** (introduced in v1.4.4)
In order to change the number of post count shown in categories (masonry view) view please use this filter
```
`add_filter('modul_r_masonry_post_count', function() {return 7;});`
```
**Replace Homepage Hero** (introduced in v1.4.4)
Replace the homepage hero image, useful to add a video a slider.
```
add_filter('modul_r_replace_home_hero', function ($html) {
return '<div style="position:absolute; width:100%; height:100%; background: red;"></div>';
});
```
---
## Categories
- Quick Start
---
## Navigation
- [About WordPress](https://modul-r.codekraft.it/wp-admin/about.php)
- [Get Involved](https://modul-r.codekraft.it/wp-admin/contribute.php)
- [WordPress.org](https://wordpress.org/)
- [Documentation](https://wordpress.org/documentation/)
- [Learn WordPress](https://learn.wordpress.org/)
- [Support](https://wordpress.org/support/forums/)
- [Feedback](https://wordpress.org/support/forum/requests-and-feedback)
- [Codekraft Modul R](https://modul-r.codekraft.it/wp-admin/)
- [Plugins](https://modul-r.codekraft.it/wp-admin/plugins.php)
- [Themes](https://modul-r.codekraft.it/wp-admin/themes.php)
- [Widgets](https://modul-r.codekraft.it/wp-admin/widgets.php)
- [Menus](https://modul-r.codekraft.it/wp-admin/nav-menus.php)
- [Background](https://modul-r.codekraft.it/wp-admin/themes.php?page=custom-background)
- [Header](https://modul-r.codekraft.it/wp-admin/themes.php?page=custom-header)
- [Live](https://modul-r.codekraft.it/wp-admin/admin.php?page=wc-settings&tab=site-visibility)
- [Customize](https://modul-r.codekraft.it/wp-admin/customize.php?url=https%3A%2F%2Fmodul-r.codekraft.it%2Fproduct%2Flogo-collection%2F)
- [1414 updates available](https://modul-r.codekraft.it/wp-admin/update-core.php)
- [2,1662,166 Comments in moderation](https://modul-r.codekraft.it/wp-admin/edit-comments.php)
- [New](https://modul-r.codekraft.it/wp-admin/post-new.php)
- [Media](https://modul-r.codekraft.it/wp-admin/media-new.php)
- [Page](https://modul-r.codekraft.it/wp-admin/post-new.php?post_type=page)
- [Product](https://modul-r.codekraft.it/wp-admin/post-new.php?post_type=product)
- [Order](https://modul-r.codekraft.it/wp-admin/post-new.php?post_type=shop_order)
- [User](https://modul-r.codekraft.it/wp-admin/user-new.php)
- [Edit product](https://modul-r.codekraft.it/wp-admin/post.php?post=255&action=edit)
- [SEONo index](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_dashboard)
- [Front-end SEO inspectorPremium](https://yoa.st/admin-bar-frontend-inspector?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Semrush](https://yoa.st/admin-bar-semrush?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Wincher](https://yoa.st/admin-bar-wincher?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Google trends](https://yoa.st/admin-bar-gtrends?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Learn more SEO](https://yoa.st/admin-bar-learn-more-seo?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Improve your blog post](https://yoa.st/admin-bar-improve-blog-post?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Write better content](https://yoa.st/admin-bar-write-better?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Help](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_page_support)
- [Settings](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_page_settings)
- [Tools](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_tools)
- [Plans](https://modul-r.codekraft.it/wp-admin/admin.php?page=wpseo_licenses)
- [Upgrade](https://yoa.st/admin-bar-get-premium-woocommerce?php_version=7.4&platform=wordpress&platform_version=6.8.3&software=free&software_version=25.9&days_active=1650&user_language=en_US)
- [Autoptimize](https://modul-r.codekraft.it/wp-admin/options-general.php?page=autoptimize)
- [Performance](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&_wpnonce=a6493b7534)
- [Purge All Caches](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_all&_wpnonce=a6493b7534)
- [Purge Current Page](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_post&post_id=255&force=true&_wpnonce=a6493b7534)
- [Page Cache](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_pgcache&_wpnonce=a6493b7534)
- [Database](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_dbcache&_wpnonce=a6493b7534)
- [Object Cache](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_dashboard&w3tc_flush_objectcache&_wpnonce=a6493b7534)
- [Feature Showcase](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_feature_showcase&_wpnonce=a6493b7534)
- [General Settings](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_general&_wpnonce=a6493b7534)
- [Manage Extensions](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_extensions&_wpnonce=a6493b7534)
- [FAQ](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_faq&_wpnonce=a6493b7534)
- [Support](https://modul-r.codekraft.it/wp-admin/admin.php?page=w3tc_support&_wpnonce=a6493b7534)
- [Notifications](https://wordpress.com/reader/notifications)
- [Howdy, Erik](https://modul-r.codekraft.it/wp-admin/profile.php)
- [Log Out](https://modul-r.codekraft.it/wp-login.php?action=logout&_wpnonce=bb28826117)
- [Home](https://modul-r.codekraft.it/)
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Shop](https://modul-r.codekraft.it/shop/)
- [Tag /Archive format](https://modul-r.codekraft.it/tag/post-formats/)
- [Modul R](https://wordpress.org/themes/modul-r/)
- [Modul R (git)](https://github.com/erikyo/Modul-R)
- [Modul R Child (git)](https://github.com/erikyo/Modul-R-child)
- [CF7 Antispam](https://wordpress.org/plugins/cf7-antispam/)
- [OH-MY-SVG](https://modul-r.codekraft.it/oh-my-svg/)
- [Model-Viewer WordPress block](https://modul-r.codekraft.it/model-viewer-wordpress-block/)
- [Remove Capslock](https://wordpress.org/plugins/remove-capslock)
- [Blog](https://modul-r.codekraft.it/category/random-access-memories/)
- [Codekraft](https://github.com/codekraft-studio)
- [About Me](https://modul-r.codekraft.it/erik-golinelli/)
- [Contact](https://modul-r.codekraft.it/contacts/)
- [Credits](https://modul-r.codekraft.it/credits/)
## Tags
- Quick Start
---
## Footer Links
- [Theme Setup](https://modul-r.codekraft.it/2019/06/theme-setup/)
- [Functions and Components](https://modul-r.codekraft.it/2019/06/custom-theme-functions/)
- [Environment Setup](https://modul-r.codekraft.it/2019/06/environment-setup/)
- [Download](https://wordpress.org/themes/modul-r/)
- [Contact form 7](https://modul-r.codekraft.it/category/contact-form-7/)
- [Quick Start](https://modul-r.codekraft.it/category/quick-start/)
- [Classic](https://modul-r.codekraft.it/category/classic/)
- [Post Formats](https://modul-r.codekraft.it/category/post-formats/)
- [Block](https://modul-r.codekraft.it/category/block/)
- [Clothing](https://modul-r.codekraft.it/product-category/clothing/)
- [Privacy Policy](https://modul-r.codekraft.it/privacy-policy/)
- [Proudly powered by WordPress & made in Bologna with ♥ by Codekraft](https://codekraft.it/)