If you wish to have different background image settings than those set on Background → Images in the theme options panel, you will need to set up a filter hook PHP function that will modify them when a specific page is loaded. To do this, you will need the unique post / page ID. To find your post / page ID, edit the post in WordPress and look in the address bar. Amongst other things, it will have a section that looks like post=702; this number is the post ID. See the table below for available options and the examples below the table for how to use them.
| Key | Default | Description |
|---|---|---|
| speed | 2000 | Speed of the transition between background images in milliseconds |
| transition | ‘fade’ | The transition animation: ‘none’, ‘fade’, ‘fadeOutFadeIn’, ‘slideDown’, ‘slideRight’, ‘slideUp’, ‘slideLeft’, ‘carouselRight’, ‘carouselLeft’ |
| position | ‘fixed’ | Whether the background is positioned absolute or fixed |
| fitLandscape | false | Prevent landscape images from being cropped by locking them at 100% width |
| fitPortrait | true | Prevent portrait images from being cropped by locking them at 100% height |
| fitAlways | false | Prevent images from ever being cropped |
| positionX | ‘center’ | Where to position the image on the X axis: ‘left’, ‘center’, ‘right’ |
| positionY | ‘center’ | Where to position the image on the Y axis: ‘top’, ‘center’, ‘bottom’ |
| easing | ‘swing’ | The easing function to use when transitioning |
| controlsSelector | ‘#fs-controls’ | The jQuery selector of the element to append the controls to |
| hideSpeed | 1000 | Speed that the website is hidden at, when activating full screen mode, in milliseconds |
| showSpeed | 1000 | Speed that the website is shown at, when closing full screen mode, in milliseconds |
| controlSpeed | 500 | Speed that the controls fade in at, in full screen mode |
| fadeIE | false | Fade the website when the full screen button is clicked in IE 7,8 |
| save | true | Save the current background image across pages in a cookie |
| slideshow | true | Enable the slideshow functionality (play/pause button) |
| slideshowAuto | true | Start the slideshow automatically |
| slideshowSpeed | 5000 | The time that each background image is displayed in the slideshow |
| random | false | Display the background images in random order each time; forces “save: false” |
| keyboard | true | Use the keyboard to control the background images: left arrow = prev, right arrow = next, esc = close full screen mode |
| captionPosition | ‘center bottom’ | The default caption position |
| captionSpeed | 600 | The speed of the caption fade animation |
| bullets | true | Turns on bullet navigation |
| lowQuality | false | Turns on lower quality but higher performance transitions |
| slider | false | jQuery selector of the slider container |
| breaker | false | Display breaker image |
| breakerOnMax | false | Display breaker image in maximize mode |
| errorBackground | (empty string) | The path of the image to display if there is an error loading one of the images |
Examples
This code should be entered into the wp-content/themes/react-child/functions.php file.
Change the options for a single post or page
Replace 123 on line 3 of the code below with your post/page ID.
1
2
34
5
6
7
8
9
10
11
12
| function my_set_background_options($options) { if (get_queried_object_id() == 123) { $options['speed'] = 4000; $options['slideshow'] = false; $options['random'] = true; $options['lowQuality'] = true; } return $options; } add_filter('tcr_background_options', 'my_set_background_options'); |
function my_set_background_options($options)
{
if (get_queried_object_id() == 123) {
$options['speed'] = 4000;
$options['slideshow'] = false;
$options['random'] = true;
$options['lowQuality'] = true;
}
return $options;
}
add_filter('tcr_background_options', 'my_set_background_options');Change some options for all pages
This filter will only affect viewing single pages. Any other page on your site such as single posts or archives will maintain your settings from the theme options panel.
1 2 3 4 5 6 7 8 9 10 11 12 | function my_set_background_options($options) { if (is_singular('page')) { $options['speed'] = 8000; $options['slideshow'] = false; $options['bullets'] = false; $options['position'] = 'absolute'; } return $options; } add_filter('tcr_background_options', 'my_set_background_options'); |
function my_set_background_options($options)
{
if (is_singular('page')) {
$options['speed'] = 8000;
$options['slideshow'] = false;
$options['bullets'] = false;
$options['position'] = 'absolute';
}
return $options;
}
add_filter('tcr_background_options', 'my_set_background_options');Using multiple functions
PHP cannot have more than one function with the same name. If you try to use the same code to modify the settings for more than one page you will get a Fatal error. To avoid this, you should change the second parameter to add_filter and the function name so that they are the same, but different to any existing function. For example:
12 3 4 5 6 7 8 9 10 11 1213 1415 16 17 18 19 20 21 22 23 24 25 | function my_set_background_options_page($options){ if (is_singular('page')) { $options['speed'] = 8000; $options['slideshow'] = false; $options['bullets'] = false; $options['position'] = 'absolute'; } return $options; } add_filter('tcr_background_options', 'my_set_background_options_page'); function my_set_background_options_123($options){ if (get_queried_object_id() == 123) { $options['speed'] = 4000; $options['slideshow'] = false; $options['random'] = true; $options['lowQuality'] = true; } return $options; } add_filter('tcr_background_options', 'my_set_background_options_123'); |
function my_set_background_options_page($options)
{
if (is_singular('page')) {
$options['speed'] = 8000;
$options['slideshow'] = false;
$options['bullets'] = false;
$options['position'] = 'absolute';
}
return $options;
}
add_filter('tcr_background_options', 'my_set_background_options_page');
function my_set_background_options_123($options)
{
if (get_queried_object_id() == 123) {
$options['speed'] = 4000;
$options['slideshow'] = false;
$options['random'] = true;
$options['lowQuality'] = true;
}
return $options;
}
add_filter('tcr_background_options', 'my_set_background_options_123');