How can I display/hide certain content based on a Theme Option field?
-
16-10-2019 - |
Question
I'm building a Theme Options page for my theme, and I've managed to get most of it working fine. But now I'm trying to show and hide certain parts in my theme based on a simple check box. An example:
Show featured content slider ? - Yes - No
When the user selects yes I want to enable the following code in a certain template of my theme:
<?php locate_template( array( 'includes/slider.php'), true ) ?>
So how can I wrap this code so that it only shows when Yes is clicked? I think it's some kind of conditional statement but I have now idea how to approach this. Since I can't write php I need some help with this :) The name of the option is called bpslick_featured.
Thanks in advance!
Solution
@Bowe
You would need to create an array in your options function for the checkbox and give it an id a default state and assign the "checkbox" type to it. Here is a sample assuming you already have the code in place for the admin panel
<?php
// Set variables for the options panel
$themename = "your_theme_name";
$themeshortname = "yt";
$mythemeoptions = array();
//The Option function
function cool_theme_options() {
global $themename, $themeshortname, $mythemeoptions;
$themeoptions = array (
array( "name" => __('Show featured content slider','your_theme_name'),
"desc" => __('When checked, the slider will be added to the home page.','your_theme_name'),
"id" => "show_featured_slider",
"std" => "false",
"type" => "checkbox"
),
);
}
//The Option Form
function my_cool_theme_admin() {
global $themename, $themeshortname, $themeoptions;
// Saved or Updated message
if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings saved.</strong></p></div>';
if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' settings reset.</strong></p></div>';
// The form
?>
<div class="wrap">
<h2><?php echo $themename; ?> Options</h2>
<form method="post">
<?php wp_nonce_field('theme-save'); ?>
<table class="form-table">
<?php foreach ($themeoptions as $value) {
// Output the appropriate form element
switch ( $value['type'] ) {
case 'text':
?>
<tr valign="top">
<th scope="row"><?php echo $value['name']; ?>:</th>
<td>
<?php foreach ($value['options'] as $key=>$option) {
if ($key == get_option($value['id'], $value['std']) ) {
$checked = "checked=\"checked\"";
} else {
$checked = "";
}
?>
<input type="radio" name="<?php echo $value['id']; ?>" value="<?php echo $key; ?>" <?php echo $checked; ?> /><?php echo $option; ?><br />
<?php } ?>
<?php echo $value['desc']; ?>
</td>
</tr>
<?php
break;
case "checkbox":
?>
<tr valign="top">
<th scope="row"><?php echo $value['name']; ?></th>
<td>
<?php
if(get_option($value['id'])){
$checked = "checked=\"checked\"";
} else {
$checked = "";
}
?>
<input type="checkbox" name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" value="true" <?php echo $checked; ?> />
<?php echo $value['desc']; ?>
</td>
</tr>
<?php
break;
default:
break;
}
}
?>
</table>
<p class="submit">
<input name="save" type="submit" value="Save changes" class="button-primary" />
<input type="hidden" name="action" value="save" />
</p>
</form>
<form method="post">
<?php wp_nonce_field('theme-reset'); ?>
<p class="submit">
<input name="reset" type="submit" value="Reset" />
<input type="hidden" name="action" value="reset" />
</p>
</form>
Next add the function in functions.php that calls the slider if the box is checked.
<?php
function cool_theme_slider_option() {
// load the custom options
global $themeoptions;
foreach ($themeoptions as $value) {
$$value['id'] = get_option($value['id'], $value['std']);
}
if ($show_featured_slider == 'true') {
locate_template( array( 'includes/slider.php'), true )
}
} // end function
add_action('wp_head', 'cool_theme_slider_option');
?>
This code has not been checked to make sure it works exactly as is but meant to show an example for using a checkbox option in your theme.