In this tutorial, we’ll discuss altering a theme option’s value on the frontend, when loading your website. In other words, for a custom circumstance, we want a setting to be different than what’s actually saved to the database from the theme options page.
The Common Question
Can I change a setting from the theme options, for a certain page? Or maybe have different values for an option, for different pages of my website?
This is an interesting question, and surprisingly enough, I get asked this quite a lot in support. And actually yes, you can do this quite easily.
On the frontend of your website, every time an individual option’s value is retrieved with themeblvd_get_option(), there’s a filter applied. This means you can return a value, that’s different from what’s actually saved in your site’s database, for a custom circumstance.
How to Use the Filter
The filter utilized here is themeblvd_get_option, which matches the name of the function it resides in. It’s important to understand that it’s applied for every value that’s pulled from your theme options.
So when adding your custom filter, you need to make sure to pass two parameters to your callback function. The first parameter will be the value you’re actually filtering, and the second will be the ID of the option. By doing this, you can use that second parameter to check the ID of the option, before actually altering the returned value.
With that in mind, here’s your basic setup to alter a theoretical value, if the it’s the foo option.
function my_get_option( $val, $option ) {
if ( $option == 'foo' ) {
$val = 'bar';
}
return $val;
}
add_filter('themeblvd_get_option', 'my_get_option', 10, 2);
Practical Examples
Most likely if you’re wanting to filter an option’s returned value, you’re doing in a specific circumstance on the frontend of the website. So the example we used above wouldn’t really make sense in most cases. However, we can expand on it.
The most common scenario people ask about, is how to change an option’s value for a specific page of their website. WordPress has all kinds of conditional functions you can use, to determine the current page being loaded.
Change Option Value for a Page
As an example, let’s use is_page() to check (1) if it’s the foo option we want to alter and (2) if “my-page” is currently being loaded.
function my_get_option( $val, $option ) {
if ( $option == 'foo' && is_page('my-page') ) {
$val = 'bar';
}
return $val;
}
add_filter('themeblvd_get_option', 'my_get_option', 10, 2);
Change Option Value for Multiple Pages
Expanding on the last example, maybe you’d like to have several different option values, for several different pages. We’d simply expand our conditional statements.
function my_get_option( $val, $option ) {
if ( $option == 'foo' ) {
if ( is_page('my-red-page') ) {
$val = 'red';
} else if ( is_page('my-yellow-page') ) {
$val = 'yellow';
} else if ( is_page('my-blue-page') ) {
$val = 'blue';
}
}
return $val;
}
add_filter('themeblvd_get_option', 'my_get_option', 10, 2);
Real Example: Change the Logo Image
Let’s now use a real, more slightly more complicated example. — Maybe you’ve configured a logo image from your theme options page, but you want to have a different logo on some select pages. So, we can filter the logo and mobile_logo options from the theme options page, to pull custom image files from our child theme, on select pages, foo and bar.
function my_get_option( $val, $option ) {
if ( $option == 'logo' ) {
if ( is_page('foo') ) {
$val['image'] = esc_url( get_stylesheet_directory_uri() . '/assets/img/logo-foo.png' );
$val['image_2x'] = esc_url( get_stylesheet_directory_uri() . '/assets/img/logo-foo@2x.png' );
} else if ( is_page('bar') ) {
$val['image'] = esc_url( get_stylesheet_directory_uri() . '/assets/img/logo-bar.png' );
$val['image_2x'] = esc_url( get_stylesheet_directory_uri() . '/assets/img/logo-bar@2x.png' );
}
} else if ( $option == 'mobile_logo' ) {
if ( is_page('foo') ) {
$val['image'] = esc_url( get_stylesheet_directory_uri() . '/assets/img/logo-mobile-foo.png' );
$val['image_2x'] = esc_url( get_stylesheet_directory_uri() . '/assets/img/logo-mobile-foo@2x.png' );
} else if ( is_page('bar') ) {
$val['image'] = esc_url( get_stylesheet_directory_uri() . '/assets/img/logo-mobile-bar.png' );
$val['image_2x'] = esc_url( get_stylesheet_directory_uri() . '/assets/img/logo-mobile-bar@2x.png' );
}
}
return $val;
}
add_filter('themeblvd_get_option', 'my_get_option', 10, 2);