Reference for API / Filter

Explore our plugin's API calls and filters. Tailor your site's behavior and enhance its features. Apply changes site-wide or per-page.

Enabling Image Sequence Transcoding

To enable Image Sequence Transcoding in Safari or Firefox, insert the necessary headers. This will prevent external images/scripts from loading inside the iframe.

Use the following filter:

add_filter('motionpage/utils/requireCorp', '__return_true');

This code allows the use of Image Sequence Transcoding in Safari or Firefox. However, external images/scripts will not load in the iframe on the page built with Motion.page.

Integrating CookieBot with Motion.page

If you're using CookieBot, you can add the data-cookieconsent="ignore" attribute to all scripts related to Motion.page. This can be achieved by applying the following filter:

add_filter('motionpage/utils/cookieconsent', '__return_true');

This code ensures that CookieBot ignores all Motion.page related scripts, enhancing your site's cookie management.

Preventing Flash of Unstyled Content (FOUC)

To prevent FOUC, we use a code snippet that makes the body visible only after the content is loaded. This is particularly useful if you have timelines running before the fold (the visible section during page load, such as the hero section).

You can disable this feature site-wide or on individual pages based on the post ID.

Disable FOUC Site-Wide

Use the following filter to disable this feature across your entire site:

add_filter('motionpage/utils/fouc', '__return_true');

Disable FOUC Based on Post ID

To disable this feature for specific pages, use the following filter and replace 123 and 456 with the IDs of the posts you want to exclude:

add_filter('motionpage/utils/fouc', function ($value, $post_id) {
  if ($post_id === 123 || $post_id === 456) {
    return true;
  }
  return false;
}, 10, 2);

In both cases, we pass two arguments, where $value is false and the $post_id is the ID of the currently loaded post.

Managing the Prefers-Reduced-Motion Feature

Our plugin incorporates an accessibility feature known as prefers-reduced-motion. You can typically disable this feature for each timeline under the advanced options settings. However, if you wish to disable this feature site-wide or on individual pages, you can use the following code snippets.

Disable Prefers-Reduced-Motion Site-Wide

Use the following filter to disable this feature across your entire site:

add_filter('motionpage/utils/bypassReduced', '__return_true');

Disable Prefers-Reduced-Motion Based on Post ID

To disable this feature for specific pages, use the following filter and replace 123 and 456 with the IDs of the posts you want to exclude:

add_filter('motionpage/utils/bypassReduced', function ($value, $post_id) {
  if ($post_id === 123 || $post_id === 456) {
    return true;
  }
  return false;
}, 10, 2);

In both cases, we pass two arguments, where $value is false and the $post_id is the ID of the currently loaded post.

WordPress Actions

WordPress actions are functions attached to specific events that occur, allowing you to add or modify functionality.

With the add_action function, you can easily link your own function to these events. Furthermore, you can make use of the has_action function to verify whether an action has already been added.

motionpage/action/iframe

This action is triggered when iframe content is loaded.

/*Example usage*/

add_action('motionpage/action/iframe', function() {
  // Your code here
});

motionpage/action/front

This action is triggered when one or more timelines are loaded on the user-facing page.

/*Example usage*/

add_action('motionpage/action/front', function() {
  // Your code here
});

To check if these actions have been added, you can use the has_action function in WordPress:

// Check if 'motionpage/action/iframe' action has been added
if (has_action('motionpage/action/iframe')) {
  // The action has been added, proceed with your code here
}

// Check if 'motionpage/action/front' action has been added
if (has_action('motionpage/action/front')) {
  // The action has been added, proceed with your code here
}

motionpage/action/builder

This action is triggered before any builder processes have started.

/*Example usage*/

add_action('motionpage/action/builder', function() {
  // Your code here
});

motionpage/action/builder/end

This action is triggered after all builder processes have completed.

/*Example usage*/

add_action('motionpage/action/builder/end', function() {
  // Your code here
});

motionpage/action/loaded

This action is triggered when the Motion.page plugin has been loaded.

/*Example usage*/

add_action('motionpage/action/loaded', function() {
  // Your code here
});

Example usage:

add_action('motionpage/action/loaded', function() {
  // Your code here
});

The has_action function checks if a function has been attached to the specified action. If a function has been attached, has_action will return the priority of the function. If no function has been attached, it will return false. This allows you to conditionally execute code depending on whether an action has been added or not.

CRUD operations

These actions are designed to fire only after successful operations, ensuring that any hooked functions or procedures are executed in the right context.

motionpage/action/api/create: This action is triggered specifically when a new timeline has been successfully created. It provides developers with an opportunity to introduce additional behaviors or integrations right after a new timeline comes into existence.

motionpage/action/api/update: Activated in the event a timeline is successfully updated. Whether it's a minor change or a major overhaul, this action ensures that developers can respond to updates in real-time.

motionpage/action/api/delete: This action takes center stage when a timeline is successfully removed. It offers a hook for developers to execute cleanup operations, data archiving, or any other tasks that should follow a timeline's deletion.

White Label

The add_filter function is a key part of WordPress's plugin API that allows developers to modify data at specific points during the execution of the code.

Here's how it works:

1. add_filter is used to hook a function or method to a specific filter action.
2. WordPress core (or plugins) can define these filter actions at specific points in their code, usually just before output is generated or data is saved. This is done using the apply_filters function.
3. When the apply_filters function is called, WordPress will execute all functions hooked to that filter action in the order they were added. The data is passed from one function to the next, allowing each to modify it.
4. The final result is then returned by apply_filters and used by the calling code.

add_filter('motionpage/wl/active', '__return_true');
add_filter('motionpage/wl/hidden', '__return_true');
add_filter('motionpage/wl/hideVersion', '__return_true');

In each case, __return_true is a built-in WordPress function that simply returns true, overriding the original setting value. You can use __return_false in a similar way to __return_true when using the add_filter function. It allows you to override the original value of a setting or a feature and force it to be false.

/**
* @param string $value
*/

add_filter('motionpage/wl/name', function($value) {
  return 'Motion Page';
});

add_filter('motionpage/wl/description', function($value) {
  return "Move it like it's HOT!";
});

add_filter('motionpage/wl/author', function($value) {
  return 'By <a href="//motion.page/">HypeWolf OÜ</a>';
});

add_filter('motionpage/wl/icon', function($value) {
  return 'dashicons-superhero';
});

add_filter('motionpage/wl/data', function() {
  return [
    'active' => true,
    'name' => 'Motion.page',
    'description' => "Move it like it's HOT!",
    'author' => 'By <a href="//motion.page" target="_blank">Motion.page</a>',
    'icon' => 'dashicons-superhero',
    'hidden' => true,
    'hideVersion' => true
  ];
});

/**
* @param array $data White Label data array
*/
add_filter('motionpage/wl/data', function($data) {
  return array_merge($data, [
    'name' => 'Motion.page',
    'description' => "Move it like it's HOT!",
  ]);
});

Excluding Timelines Programmatically

To programmatically exclude timelines on a page-by-page basis or based on other conditions, we use the motionpage/scripts/bypass filter. This approach is a straightforward modification for us, given that most sites already implement functions.php or plugins for code snippets.